Merge pull request #4 from iamvijaydev/next

Next

Author: iamvijaydev

.babelrc

@@ -1,34 +1,31 @@
 {
   "presets": [
     [
-      "env",
+      "@babel/preset-env",
       {
         "targets": {
           "browsers": [
             "last 2 versions"
-          ]
+          ],
         }
       }
     ],
-    "react"
+    "@babel/preset-react"
   ],
   "plugins": [
-    "transform-object-rest-spread",
-    "transform-class-properties",
     "react-hot-loader/babel",
-    "syntax-dynamic-import",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties",
     [
-      "import-inspector",
+      "babel-plugin-styled-components",
       {
-        "serverSideRequirePath": true
+        "displayName": true
       }
     ]
   ],
   "env": {
     "test": {
-      "plugins": [
-        "dynamic-import-node"
-      ]
+      "plugins": ["@babel/plugin-transform-runtime"]
     }
   }
 }

.eslintrc.json

@@ -10,7 +10,7 @@
   "globals": {
     "env": true
   },
-  "extends": "airbnb",
+  "extends": ["airbnb", "prettier"],
   "rules": {
     "linebreak-style": "off",
     "import/prefer-default-export": "off",
@@ -22,5 +22,18 @@
       "aspects": ["noHref", "invalidHref", "preferButton"]
     }],
     "react/sort-comp": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "alias": {
+        "map": [
+          ["Components", "./src/components/"],
+          ["Pages", "./src/pages/"],
+          ["Models", "./src/models/"],
+          ["Services", "./src/services/"],
+          ["Config", "./config/"]
+        ],
+      }
+    }
   }
 }

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

README.md

@@ -12,7 +12,7 @@ An opinionated and scalable base tech stack for a modern React app.
 
 ## Tech Stack
 - **react:** The main UI library
-- **redux:** The main state management library
+- **rematch:** The main state management framework powered by Redux
 - **styled-components:** The styling and theming library
 - **react-router-dom:** The routing library
 - **react-loadable:** The lazy loading library
@@ -26,7 +26,8 @@ An opinionated and scalable base tech stack for a modern React app.
 - **/src/components:** Shareable components that never connects to redux store
 - **/src/pages:** Individual route pages
 - **/src/services:** Wrapped services for the App, e.g: fetch, validation. Available as an API, so the actual implementation can change
-- **/src/store:** Redux store
+- **/src/store:** Rematch redux store
+- **/src/models:** Rematch shared models
 - **/dist:** Complied code ready to deployed
 
 ## Get the code

TODO.md

@@ -1,6 +1,13 @@
 ### Todo items for next version
 
-- [ ] Update logic for gathering the protected routes list in `protectRoutes` from the `getMenu`, both in `/service`
+
+- [x] Upgrade all packages to next version
+- [x] Add error overlay to show errors on the page
+- [*] Add Rematch the Redux framework
+- [*] Add Redux dev tools
+- [*] Add Prettier
+- [*] Proper demo components with styles that can be removed quickly
+- [ ] Create a protected route component
 - [ ] Add new component for showing the notifications
-- [ ] Improved Tabble component that can recive data like these `<Table header={object[]} body={any[][]} minWidth={number} />`
+- [ ] Add table component that can recieve data like these `<Table header={object[]} body={any[][]} minWidth={number} />`
 - [ ] Proper step-by-step instructions to use this repo for a new project

build/intl/translator.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
-import * as fs from 'fs';
-import { sync as globSync } from 'glob';
-import { sync as mkdirpSync } from 'mkdirp';
+const fs = require('fs');
+const { sync: globSync } = require('glob');
+const { sync: mkdirpSync } = require('mkdirp');
 
 const outputLanguageDataDir = './config/locale/';
 

build/webpack/webpack.common.js

@@ -1,40 +1,71 @@
+const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
-const baseHref = "/";
+const baseHref = '/';
 
 module.exports = {
   resolve: {
-    extensions: ['.js'],
+    extensions: ['.js']
   },
   module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        use: ['babel-loader'],
-      }, {
+        use: ['babel-loader']
+      },
+      {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        use: ['style-loader', 'css-loader']
       }
-    ],
+    ]
   },
   plugins: [
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
     new HtmlWebpackPlugin({
-      template: './src/index.html',
+      template: './src/index.html'
     }),
-    new BaseHrefWebpackPlugin({baseHref: baseHref}),
-    new CopyWebpackPlugin([{
-      from: 'config/assets',
-      to: 'assets',
-    }/** add any other copy/move files or folders */], {
-      force: true,
-      flatten: true
-    })
+    new BaseHrefWebpackPlugin({ baseHref: baseHref }),
+    new CopyWebpackPlugin(
+      [
+        {
+          from: 'config/assets',
+          to: 'assets'
+        } /** add any other copy/move files or folders */
+      ],
+      {
+        force: true,
+        flatten: true
+      }
+    ),
+    new CleanWebpackPlugin()
   ],
+  optimization: {
+    moduleIds: 'hashed',
+    runtimeChunk: 'single',
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all'
+        }
+      }
+    }
+  },
+  resolve: {
+    alias: {
+      Components: path.resolve(__dirname, '../../src/components/'),
+      Pages: path.resolve(__dirname, '../../src/pages/'),
+      Models: path.resolve(__dirname, '../../src/models/'),
+      Services: path.resolve(__dirname, '../../src/services/'),
+      Config: path.resolve(__dirname, '../../config/'),
+    }
+  },
   node: {
     fs: 'empty'
   }

build/webpack/webpack.dev.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack');
 const WriteFilePlugin = require('write-file-webpack-plugin');
+const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')
 const commonPaths = require('./commonPaths');
 
 module.exports = {
@@ -10,7 +11,7 @@ module.exports = {
   output: {
     filename: '[name].[hash].js'
   },
-  devtool: 'cheap-eval-source-map',
+  devtool: 'cheap-module-source-map',
   devServer: {
     host: 'localhost',
     port: process.env.PORT || 8080,
@@ -20,6 +21,7 @@ module.exports = {
     publicPath: '/',
   },
   plugins: [
+    new ErrorOverlayPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new WriteFilePlugin(),
   ]

config/locale/en-US/app.json

@@ -1,7 +1,7 @@
 {
   "app/modal_header": "Modal header",
   "app/modal_text_line_1": "This is an example of a modal!",
-  "app/modal_text_line_2": "<code>Esc</code> works too, if onClose is passed ;)",
+  "app/modal_text_line_2": "<code>Esc</code> works too, if `onClose` is passed &#9786;",
   "app/modal_heading": "Modal example (via React Portal)",
   "app/open_modal": "Open modal",
   "app/switch_theme": "Switch theme",

config/locale/fr-FR/app.json

@@ -1,7 +1,7 @@
 {
   "app/modal_header": "En-tête modal",
   "app/modal_text_line_1": "Ceci est un exemple d'un modal!",
-  "app/modal_text_line_2": "<code>Esc</code> fonctionne aussi, si onClose est passé ;)",
+  "app/modal_text_line_2": "<code>Esc</code> fonctionne aussi, si `onClose` est passé &#9786;",
   "app/modal_heading": "Exemple modal (via React Portal)",
   "app/open_modal": "Ouvrir modal",
   "app/switch_theme": "Changer de thème",

config/locale/ja-JP/app.json

@@ -1,7 +1,7 @@
 {
   "app/modal_header": "モーダルヘッダ",
   "app/modal_text_line_1": "これはモーダルの例です！",
-  "app/modal_text_line_2": "<code>Esc</code> \"onClose\" が渡された場合でも動作します ;)",
+  "app/modal_text_line_2": "<code>Esc</code> `onClose` が渡された場合でも動作します &#9786;",
   "app/modal_heading": "モーダルの例（React Portal経由）",
   "app/open_modal": "オープンモーダル",
   "app/switch_theme": "テーマを切り替える",

config/theme/colors.js

@@ -2,14 +2,87 @@ const colors = {
   white: '#fff',
   black: '#000',
 
-  gray100: '#eee',
-  gray200: '#aaa',
-  gray300: '#555',
-  gray400: '#111',
-
-  yellow: '#ffbf00',
-  green: '#36ba4e',
-  red: '#f05323',
+  grey100: '#F5F5F5',
+  grey200: '#EEEEEE',
+  grey300: '#E0E0E0',
+  grey400: '#BDBDBD',
+  grey500: '#9E9E9E',
+  grey600: '#757575',
+  grey700: '#616161',
+  grey800: '#424242',
+  grey900: '#212121',
+
+  red400: '#Ef5350',
+  red500: '#F44336',
+  red600: '#E53935',
+
+  pink400: '#EC407A',
+  pink500: '#E91E63',
+  pink600: '#D81B60',
+
+  purple400: '#AB47BC',
+  purple500: '#9C27B0',
+  purple600: '#8E24AA',
+
+  deepPurple400: '#7E57C2',
+  deepPurple500: '#673AB7',
+  deepPurple600: '#5E35B1',
+  
+  indigo400: '#5C6BC0',
+  indigo500: '#3F51B5',
+  indigo600: '#3949AB',
+
+  blue400: '#42A5F5',
+  blue500: '#2196F3',
+  blue600: '#1E88E5',
+
+  lightBlue400: '#29B6F6',
+  lightBlue500: '#03A9F4',
+  lightBlue600: '#039BE5',
+
+  cyan400: '#26C6DA',
+  cyan500: '#00BCD4',
+  cyan600: '#00ACC1',
+
+  teal400: '#26A69A',
+  teal500: '#009688',
+  teal600: '#00897B',
+
+  green400: '#66BB6A',
+  green500: '#4CAF50',
+  green600: '#43A047',
+
+  lightGreen400: '#9CCC65',
+  lightGreen500: '#8BC34A',
+  lightGreen600: '#7CB342',
+
+  lime400: '#D4E157',
+  lime500: '#CDDC39',
+  lime600: '#C0CA33',
+
+  yellow400: '#FFEE58',
+  yellow500: '#FFEB3B',
+  yellow600: '#FDD835',
+
+  amber400: '#FFCA28',
+  amber500: '#FFC107',
+  amber600: '#FFB300',
+
+  orange400: '#FFA726',
+  orange500: '#FF9800',
+  orange600: '#FB8C00',
+
+  deepOrange400: '#FF7043',
+  deepOrange500: '#FF5722',
+  deepOrange600: '#F4511E',
+
+  brown400: '#8D6E63',
+  brown500: '#795548',
+  brown600: '#6D4C41',
+
+  blueGrey400: '#78909C',
+  blueGrey500: '#607D8B',
+  blueGrey600: '#546E7A',
 };
 
-export { colors as default };
+export default colors;

config/theme/darktheme.js

@@ -19,30 +19,30 @@ const darktheme = {
   textColor: colors.white,
 
   /* for UI elements */
-  primaryColor: colors.green,
-  secondaryColor: colors.yellow,
-  alternativeColor: colors.red,
+  primaryColor: colors.green500,
+  secondaryColor: colors.yellow500,
+  alternativeColor: colors.red500,
 
   /* status colors */
-  errorColor: colors.red,
-  successColor: colors.green,
-  notifColor: colors.green,
-  neutralColor: colors.gray200,
+  errorColor: colors.red500,
+  successColor: colors.green500,
+  notifColor: colors.green500,
+  neutralColor: colors.grey200,
 
   /* link colors */
-  linkColor: colors.red,
-  linkActiveColor: colors.yellow,
-  linkVisitedColor: colors.green,
+  linkColor: colors.blue500,
+  linkActiveColor: colors.blue600,
+  linkVisitedColor: colors.indigo500,
 
   /* theme specific fonts */
   primaryFont: fonts.sans,
   secondaryFont: fonts.serif,
   alternativeFont: fonts.mono,
 
   /* font weights */
-  bold: 700,
-  medium: 400,
-  light: 100,
+  bold: fonts.bold,
+  medium: fonts.medium,
+  light: fonts.light,
 };
 
 export { darktheme as default };