Removed Bootstrap theme and used Semantic-UI instead

Author: dongcai

.bootstraprc

@@ -11,4 +11,4 @@ webpack-stats.json
 webpack/dlls/*.json
 api/**/*.nedb
 *.report.html
-coverage
+coverage

.gitignore

@@ -1,17 +1,20 @@
 {
-  "name": "react-redux-universal-hot-example",
-  "description": "Example of an isomorphic (universal) webapp using react redux and hot reloading",
-  "author": "Kévin Berthommier <[email protected]> (http://github.com/bertho-zero)",
+  "name": "react-redux-semantic-universal-hot-example",
+  "description": "Example of an isomorphic (universal) webapp using react redux, semantic-ui and hot reloading",
+  "authors": [
+    "Kévin Berthommier <[email protected]> (https://github.com/bertho-zero)",
+    "Dong Cai <[email protected]> (https://github.com/dongcai"
+  ],
   "contributors": [
-    "Erik Rasmussen <[email protected]> (http://github.com/erikras)"
+    "Erik Rasmussen <[email protected]> (https://github.com/erikras)"
   ],
   "license": "MIT",
   "version": "0.9.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/bertho-zero/react-redux-universal-hot-example"
+    "url": "https://github.com/bertho-zero/react-redux-semantic-universal-hot-example"
   },
-  "homepage": "https://github.com/bertho-zero/react-redux-universal-hot-example",
+  "homepage": "https://github.com/bertho-zero/react-redux-semantic-usniversal-hot-example",
   "keywords": [
     "react",
     "isomorphic",
@@ -23,7 +26,8 @@
     "redux",
     "starter",
     "boilerplate",
-    "babel"
+    "babel",
+    "semantic-ui"
   ],
   "main": "bin/server.js",
   "scripts": {
@@ -36,7 +40,7 @@
     "watch-client": "bnr watch-client",
     "build": "bnr build",
     "build-dlls": "webpack --colors --display-error-details --config webpack/vendor.config.js",
-    "postinstall": "concurrently \"npm run build\" \"npm run build-dlls\"",
+    "postinstall": "concurrently \"npm run build\" \"npm run build-dlls\" \"node semantic-fix.js\"",
     "precommit": "lint-staged",
     "prettier": "prettier-eslint --write --eslint-config-path .eslintrc './+(src|api)/**/*.js'",
     "lint": "eslint -c .eslintrc api src",
@@ -166,13 +170,11 @@
     "pretty-error": "^2.0.2",
     "prop-types": "^15.5.8",
     "react": "^16.0.0",
-    "react-bootstrap": "^0.31.2",
     "react-dom": "^16.0.0",
     "react-helmet": "^5.0.3",
     "react-loadable": "^5.3.0",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
-    "react-router-bootstrap": "^0.24.4",
     "react-router-config": "^1.0.0-beta.4",
     "react-router-dom": "^4.2.2",
     "react-router-redux": "^5.0.0-alpha.6",
@@ -182,7 +184,9 @@
     "redux-auth-wrapper": "^2.0.2",
     "redux-form": "^7.1.1",
     "redux-logger": "^3.0.6",
-    "redux-persist": "^5.3.4",
+    "redux-persist": "^5.4.0",
+    "semantic-ui-less": "^2.2.12",
+    "semantic-ui-react": "^0.76.0",
     "serialize-javascript": "^1.3.0",
     "serve-favicon": "^2.3.2",
     "socket.io": "^2.0.1",
@@ -195,19 +199,17 @@
     "babel-loader": "^7.0.0",
     "babel-plugin-transform-react-jsx-source": "^6.22.0",
     "better-npm-run": "^0.1.0",
-    "bootstrap-loader": "^2.1.0",
-    "bootstrap-sass": "^3.3.7",
     "chai": "^4.1.1",
     "clean-webpack-plugin": "^0.1.15",
-    "concurrently": "^3.3.0",
+    "concurrently": "^3.5.1",
     "css-loader": "^0.28.5",
     "enzyme": "^3.1.0",
     "eslint": "^4.4.1",
     "eslint-config-airbnb": "^16.0.0",
     "eslint-loader": "^1.6.1",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.2.1",
+    "eslint-plugin-react": "^7.5.1",
     "extract-text-webpack-plugin": "^3.0.1",
     "file-loader": "^1.1.5",
     "font-awesome": "^4.7.0",
@@ -219,18 +221,18 @@
     "jest-cli": "^21.1.0",
     "less": "^3.0.0-alpha.3",
     "less-loader": "^4.0.3",
-    "lighthouse": "^2.4.0",
+    "lighthouse": "^2.6.0",
     "lint-staged": "^5.0.0",
     "mocha": "^4.0.1",
-    "node-sass": "^4.5.0",
+    "node-sass": "^4.7.2",
     "piping": "^1.0.0-rc.4",
     "postcss": "^6.0.9",
     "postcss-browser-reporter": "^0.5.0",
     "postcss-cssnext": "^3.0.2",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.5",
     "postcss-reporter": "^5.0.0",
-    "postcss-url": "^7.1.2",
+    "postcss-url": "^7.2.1",
     "prettier-eslint-cli": "^4.3.2",
     "react-a11y": "^0.3.3",
     "react-addons-test-utils": "^15.4.2",

package.json

@@ -0,0 +1,22 @@
+var fs = require('fs');
+
+// relocate default config
+fs.writeFileSync(
+  'node_modules/semantic-ui-less/theme.config',
+  "@import '../../src/semantic/theme.config';\n",
+  'utf8'
+);
+
+// fix well known bug with default distribution
+fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables');
+fixFontPath('node_modules/semantic-ui-less/themes/flat/globals/site.variables');
+fixFontPath('node_modules/semantic-ui-less/themes/material/globals/site.variables');
+
+function fixFontPath(filename) {
+  var content = fs.readFileSync(filename, 'utf8');
+  var newContent = content.replace(
+    "@fontPath  : '../../themes/",
+    "@fontPath  : '../../../themes/"
+  );
+  fs.writeFileSync(filename, newContent, 'utf8');
+}

semantic-fix.js

@@ -19,6 +19,7 @@ import routes from 'routes';
 import isOnline from 'utils/isOnline';
 import asyncMatchRoutes from 'utils/asyncMatchRoutes';
 import { ReduxAsyncConnect, Provider } from 'components';
+import './semantic/semantic.less';
 
 const persistConfig = {
   key: 'primary',
@@ -66,9 +67,18 @@ global.socket = initSocket();
   });
 
   const hydrate = async _routes => {
-    const components = await asyncMatchRoutes(_routes, history.location.pathname);
-    await trigger('fetch', components, { store, ...providers });
-    await trigger('defer', components, { store, ...providers });
+    const { components, match, params } = await asyncMatchRoutes(_routes, history.location.pathname);
+    const triggerLocals = {
+      ...providers,
+      store,
+      match,
+      params,
+      history,
+      location: history.location
+    };
+    await trigger('fetch', components, triggerLocals);
+    await trigger('defer', components, triggerLocals);
+
     ReactDOM.hydrate(
       <HotEnabler>
         <Provider store={store} {...providers}>

src/client.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'multireducer';
 import * as counterActions from 'redux/modules/counter';
+import { Button } from 'semantic-ui-react';
 
 @connect(
   (state, { multireducerKey: key }) => ({ count: state.counter[key].count }),
@@ -12,21 +13,19 @@ export default class CounterButton extends Component {
   static propTypes = {
     count: PropTypes.number.isRequired,
     increment: PropTypes.func.isRequired,
-    className: PropTypes.string
+    color: PropTypes.string
   };
 
   static defaultProps = {
-    className: ''
+    color: ''
   };
 
   render() {
-    const { count, increment } = this.props;
-    let { className } = this.props;
-    className += ' btn btn-default';
+    const { count, increment, color } = this.props;
     return (
-      <button className={className} onClick={increment}>
+      <Button color={color} onClick={increment}>
         You have clicked me {count} time{count === 1 ? '' : 's'}.
-      </button>
+      </Button>
     );
   }
 }

src/components/CounterButton/CounterButton.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { load } from 'redux/modules/info';
+import { Message, Button } from 'semantic-ui-react';
 
 @connect(state => ({ info: state.info.data }), { load })
 export default class InfoBar extends Component {
@@ -21,15 +22,11 @@ export default class InfoBar extends Component {
     const { info, load } = this.props; // eslint-disable-line no-shadow
     const styles = require('./InfoBar.scss');
     return (
-      <div className={`${styles.infoBar} well`}>
-        <div className="container">
-          This is an info bar <strong>{info ? info.message : 'no info!'}</strong>
-          <span className={styles.time}>{info && new Date(info.time).toString()}</span>
-          <button className="btn btn-primary" onClick={load}>
-            Reload from server
-          </button>
-        </div>
-      </div>
+      <Message info>
+        This is an info bar <strong>{info ? info.message : 'no info!'}</strong>
+        <span className={styles.time}>{info && new Date(info.time).toString()}</span>
+        <Button onClick={load}>Reload from server</Button>
+      </Message>
     );
   }
 }