Init commit

101bf2a6 · Minh Tran · 101bf2a6 · 101bf2a6 · 101bf2a6 · 101bf2a6
Commit 101bf2a6 authored Jul 02, 2019 by Minh Tran
20 changed files
--- a/.babelrc
+++ b/.babelrc
+{
+  "presets": ["poi/babel"],
+  "plugins": [
+    "react-hot-loader/babel"
+  ]
+}
--- a/.editorconfig
+++ b/.editorconfig
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
--- a/.eslintrc.js
+++ b/.eslintrc.js
+module.exports = {
+  parser: 'babel-eslint',
+  extends: [
+    'standard',
+    'plugin:react/recommended',
+    'prettier',
+    'prettier/react',
+    'prettier/standard',
+  ],
+  plugins: ['react', 'prettier', 'standard'],
+  settings: {
+    react: {
+      version: '16.0',
+    },
+  },
+  parserOptions: {
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    es6: true,
+    jest: true,
+  },
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        printWidth: 80,
+        tabWidth: 2,
+        useTabs: false,
+        semi: true,
+        singleQuote: true,
+        trailingComma: 'all',
+        bracketSpacing: true,
+      },
+    ],
+    'react/prop-types': 'off',
+    camelcase: 'off',
+  },
+};
--- a/.gitattributes
+++ b/.gitattributes
+* text=auto
--- a/.gitignore
+++ b/.gitignore
+# dependencies
+node_modules
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# production build
+/dist
+
+# misc
+.DS_Store
+.env
+.env.*
--- a/LICENSE
+++ b/LICENSE
+The MIT License (MIT)
+
+Copyright (c) Dwarves Foundation (github.com/dwarvesf)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- a/README.md
+++ b/README.md
+# basehq-dashboard
+
+> Base HQ Dashboard
+
+## License
+
+MIT &copy; Dwarves Foundation
--- a/basehq-dashboard
+++ b/basehq-dashboard
--- a/index.ejs
+++ b/index.ejs
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <link rel="shortcut icon" href="<%= htmlWebpackPlugin.files.publicPath %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    
+    <% if (htmlWebpackPlugin.options.description) { %>
+    <meta name="description" content="<%= htmlWebpackPlugin.options.description %>"/>
+    <% } %>
+    <% for (var chunk of webpack.chunks) {
+        for (var file of chunk.files) {
+          if (file.match(/\.(js|css)$/)) { %>
+    <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
+    <% }}} %>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="app"></div>
+  </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "target": "ES6",
+    "module": "commonjs",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/package.json
+++ b/package.json
+{
+  "name": "basehq-dashboard",
+  "scripts": {
+    "dev": "poi --serve",
+    "build": "poi --prod",
+    "build:analyze": "poi --prod --bundle-report",
+    "serve": "serve dist -l 8000",
+    "lint": "eslint --ext .js,.jsx --ignore-path .gitignore .",
+    "lint:fix": "eslint --fix --ext .js,.jsx --ignore-path .gitignore ."
+  },
+  "dependencies": {
+    "@loadable/component": "^5.6.0",
+    "antd": "^3.20.0",
+    "internal-nav-helper": "^1.1.0",
+    "money-clip": "^3.0.1",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "redux-bundler": "^23.1.0",
+    "redux-bundler-react": "^1.1.0"
+  },
+  "devDependencies": {
+    "@poi/plugin-bundle-report": "^12.1.0",
+    "@poi/plugin-eslint": "^12.0.0",
+    "@svgr/webpack": "^4.1.0",
+    "babel-eslint": "^8.2.3",
+    "eslint": "^4.19.1",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "node-sass": "^4.9.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "poi": "^12.5.5",
+    "postcss-flexbugs-fixes": "^3.3.0",
+    "postcss-safe-parser": "^4.0.1",
+    "purgecss-webpack-plugin": "^1.2.0",
+    "purgecss-whitelister": "^2.1.0",
+    "react-hot-loader": "^4.6.3",
+    "react-hot-loader-loader": "^0.0.7",
+    "sass-loader": "^6.0.7",
+    "serve": "^10.0.2",
+    "tailwindcss": "^0.7.2",
+    "terser-webpack-plugin": "^1.1.0"
+  }
+}
--- a/poi.config.js
+++ b/poi.config.js
+const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+module.exports = {
+  entry: 'src/index.js',
+  plugins: [
+    {
+      resolve: '@poi/plugin-eslint',
+    },
+    {
+      resolve: '@poi/bundle-report',
+      options: { analyzerMode: 'static' },
+    },
+  ],
+  chainWebpack(config) {
+    // remove default svg loader
+    config.module.rules.delete('svg');
+
+    // prefixes css module classes with 'module__'
+    ['css', 'scss', 'sass', 'less', 'stylus'].forEach(lang => {
+      config.module
+        .rule(lang)
+        .oneOf('normal-modules')
+        .use('css-loader')
+        .tap(option => ({
+          ...option,
+          localIdentName: 'module__[path][name]__[local]--[hash:base64:5]',
+        }));
+    });
+
+    const isEnvProduction = config.get('mode') === 'production';
+    if (isEnvProduction) {
+      
+      // PurgeCSS plugin
+      config
+        .plugin('purgecss')
+        .use(require('purgecss-webpack-plugin'), [
+          require('./purgecss.config'),
+        ]);
+      // replace UglifyJS with Terser, similar to create-react-app
+      config.plugins.delete('uglifyjs');
+      config.optimization.minimize(isEnvProduction);
+      config.optimization
+        .minimizer('terser')
+        .use(TerserPlugin, [
+          {
+            terserOptions: {
+              parse: {
+                ecma: 8,
+              },
+              compress: {
+                ecma: 5,
+                warnings: false,
+                comparisons: false,
+                inline: 2,
+              },
+              mangle: {
+                safari10: true,
+              },
+              output: {
+                ecma: 5,
+                comments: false,
+                ascii_only: true,
+              },
+            },
+            parallel: true,
+            cache: true,
+            sourceMap: false,
+          },
+        ])
+        .end()
+        .minimizer('css')
+        .use(OptimizeCSSAssetsPlugin, [
+          {
+            cssProcessorOptions: {
+              parser: require('postcss-safe-parser'),
+              map: false,
+            },
+          },
+        ]);
+    }
+  },
+  configureWebpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ({ resource }) => [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            svgoConfig: {
+              plugins: [
+                {
+                  cleanupIDs: {
+                    prefix: `svg_${path.parse(resource).name}_${Math.random()
+                      .toString(36)
+                      .substr(2, 5)}_`,
+                  },
+                },
+              ],
+            },
+          },
+        },
+        'url-loader',
+      ],
+    });
+
+    if (config.mode === 'development') {
+      config.module.rules.push({
+        // match files to receive react-hot-loader functionality
+        test: /\.(js|jsx)$/,
+        include: [
+          path.resolve(__dirname, 'src/App.js'),
+          path.resolve(__dirname, 'src/pages'),
+        ],
+        loader: require.resolve('react-hot-loader-loader'),
+        enforce: 'post',
+      });
+    }
+
+    return config;
+  },
+}
--- a/postcss.config.js
+++ b/postcss.config.js
+module.exports = {
+  plugins: [
+    
+    require('tailwindcss')('./tailwind.js'),
+    require('postcss-flexbugs-fixes'),
+    require('autoprefixer')({
+      browsers: ['>0.25%', 'not ie 11', 'not op_mini all'],
+      flexbox: 'no-2009',
+    }),
+  ],
+};
--- a/purgecss.config.js
+++ b/purgecss.config.js
+const path = require('path');
+const glob = require('glob');
+const PurgecssWhitelister = require('purgecss-whitelister');
+
+// Custom PurgeCSS extractor for Tailwind that allows special characters in
+// class names.
+// https://github.com/FullHuman/purgecss#extractor
+class TailwindExtractor {
+  static extract(content) {
+    return content.match(/[A-Za-z0-9-_:/]+/g) || [];
+  }
+}
+
+module.exports = {
+  // files to scan for class names.
+  paths: glob.sync(path.join(__dirname, './src/**/*.js')),
+  extractors: [
+    {
+      extractor: TailwindExtractor,
+      extensions: ['js', 'jsx'],
+    },
+  ],
+  whitelist: ['html', 'body'].concat(PurgecssWhitelister([])),
+  whitelistPatterns: [
+    /^module__*/, // css module
+  ],
+};
--- a/src/App.js
+++ b/src/App.js
+import React from 'react';
+import { connect } from 'redux-bundler-react';
+import navHelper from 'internal-nav-helper';
+
+const App = ({ doUpdateUrl, pathname, route: Page }) => {
+  return (
+    <main onClick={navHelper(doUpdateUrl)}>
+      <Page />
+    </main>
+  );
+};
+
+export default connect(
+  'selectRoute',
+  'selectPathname',
+  'doUpdateUrl',
+  App,
+);
--- a/src/bundles/extra-args.js
+++ b/src/bundles/extra-args.js
+export default {
+  name: 'extra-args',
+  // note that the store gets passed in here:
+  getExtraArgs: store => {
+    return {
+      // A bundle to inject additional dependencies to the store. Typically
+      // you would import api clients and provide them here.
+      // If your API requires an authentication token or whatnot
+      // here would be a great place to select it from your store
+      // and pass it along with the fetch. Then none of your individual
+      // action creators need to worry about this.
+    };
+  },
+};
--- a/src/bundles/index.js
+++ b/src/bundles/index.js
+import {
+  composeBundles,
+  createUrlBundle,
+  createCacheBundle,
+} from 'redux-bundler';
+
+import cache from '@/utils/cache';
+import extraArgs from './extra-args';
+import routes from './routes';
+
+export default composeBundles(
+  createUrlBundle(),
+  routes,
+  createCacheBundle(cache.set),
+  extraArgs,
+);
--- a/src/bundles/routes.js
+++ b/src/bundles/routes.js
+import { createRouteBundle } from 'redux-bundler';
+
+import loadable from '@/utils/loadable';
+// const Home = loadable(() => import('@/pages/Home'));
+const Login = loadable(() => import('@/pages/Login'));
+const About = loadable(() => import('@/pages/About'));
+const NotFound = loadable(() => import('@/pages/NotFound'));
+
+export default createRouteBundle({
+  '/': Login,
+  '/about': About,
+  '*': NotFound,
+});
--- a/src/index.js
+++ b/src/index.js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'redux-bundler-react';
+
+import './styles';
+import App from './App';
+import getStore from './bundles';
+import cache from './utils/cache';
+
+const render = ({ store }) => {
+  let app = <App />;
+  ReactDOM.render(
+    <Provider store={store}>{app}</Provider>,
+    document.getElementById('app'),
+  );
+};
+
+// this is entirely optional, but here we here we try to pull starting data
+// from our local cache. We're using a util called money-clip here that
+// will only return if the version number is a match and it's not
+// older than the specified maxAge.
+cache.getAll().then(initialData => {
+  if (initialData) {
+    console.log('starting with locally cache data:', initialData);
+  }
+  render({ store: getStore(initialData) });
+});
--- a/src/pages/About.js
+++ b/src/pages/About.js
+import React from 'react';
+
+const About = () => {
+  return (
+    <div>
+      <h1>About us</h1>
+    </div>
+  );
+};
+
+export default About;