Add material ui component library

Author: Thomas Roger Lux

Diff for: package.json

@@ -10,9 +10,11 @@
         "start": "node build/server.js"
     },
     "dependencies": {
+        "@material-ui/core": "^3.1.1",
         "express": "^4.16.3",
         "react": "^16.4.1",
         "react-dom": "^16.4.1",
+        "react-jss": "^8.6.1",
         "react-redux": "^5.0.7",
         "react-router-dom": "^4.3.1",
         "redux": "^4.0.0"
@@ -21,6 +23,7 @@
         "@types/express": "^4.16.0",
         "@types/react": "^16.4.1",
         "@types/react-dom": "^16.0.6",
+        "@types/react-jss": "^8.6.0",
         "@types/react-redux": "^6.0.2",
         "@types/react-router-dom": "^4.3.1",
         "nodemon": "^1.18.4",

Diff for: src/client/index.tsx

@@ -3,8 +3,14 @@ import * as ReactDOM from "react-dom";
 import * as Redux from "redux";
 import { Provider as ReduxProvider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
+import { JssProvider } from "react-jss";
+import {
+    MuiThemeProvider,
+    createGenerateClassName
+} from "@material-ui/core/styles";
 
 import App from "common/App";
+import theme from "common/theme";
 import { changeTitle } from "common/redux/reducer/title";
 
 const preloadedState = (window as any)["__PRELOADED_STATE__"];
@@ -15,7 +21,11 @@ const store = Redux.createStore(changeTitle, preloadedState);
 ReactDOM.hydrate(
     <ReduxProvider store={store}>
         <Router>
-            <App />
+            <JssProvider generateClassName={createGenerateClassName()}>
+                <MuiThemeProvider theme={theme}>
+                    <App />
+                </MuiThemeProvider>
+            </JssProvider>
         </Router>
     </ReduxProvider>,
     document.getElementById("root")

Diff for: src/common/component/AppBar/AppBar.component.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import {
+    AppBar as BaseAppBar,
+    Typography,
+    Button,
+    Grid,
+    Toolbar,
+    withStyles
+} from "@material-ui/core";
+
+import style from "./AppBar.style";
+
+interface AppBarProps {
+    classes: any;
+}
+
+class AppBar extends React.Component<AppBarProps> {
+    constructor(props: AppBarProps) {
+        super(props);
+    }
+
+    public render() {
+        const { classes } = this.props;
+
+        return (
+            <React.Fragment>
+                <BaseAppBar>
+                    <Toolbar>
+                        <Grid container className={classes.gridContainer}>
+                            <Grid
+                                item
+                                xs
+                                className={classes.menuButtonContainer}
+                            >
+                                <Button
+                                    color="secondary"
+                                    variant="contained"
+                                    className={classes.menuButton}
+                                >
+                                    Menu
+                                </Button>
+                            </Grid>
+                            <Grid
+                                item
+                                container
+                                xs
+                                className={classes.titleContainer}
+                            >
+                                <Typography
+                                    variant="title"
+                                    className={classes.title}
+                                >
+                                    Hello World!
+                                </Typography>
+                            </Grid>
+                            <Grid
+                                item
+                                container
+                                xs
+                                className={classes.loginButtonContainer}
+                            >
+                                <Button
+                                    color="secondary"
+                                    variant="contained"
+                                    className={classes.loginButton}
+                                >
+                                    Login
+                                </Button>
+                            </Grid>
+                        </Grid>
+                    </Toolbar>
+                </BaseAppBar>
+            </React.Fragment>
+        );
+    }
+}
+
+export default withStyles(style)(AppBar);

Diff for: src/common/component/AppBar/AppBar.style.ts

@@ -0,0 +1,21 @@
+import { createStyles } from "@material-ui/core";
+
+const style = createStyles({
+    gridContainer: {},
+    menuButtonContainer: {
+		justifyContent: "flex-start"
+	},
+    menuButton: {},
+    titleContainer: {
+		justifyContent: "center"
+	},
+    title: {
+		margin: "auto"
+	},
+    loginButtonContainer: {
+		justifyContent: "flex-end"
+	},
+    loginButton: {}
+});
+
+export default style;

Diff for: src/common/container/Home.tsx

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 
 import { Store } from "common/redux/store";
 import { changeTitle } from "common/redux/action";
+import AppBar from "common/component/AppBar/AppBar.component";
 
 interface HomeProps {
     title: string;
@@ -36,9 +37,9 @@ class Home extends React.Component<HomeProps> {
 
     public render() {
         return (
-            <div className="Home">
-                Home page
-            </div>
+            <React.Fragment>
+                <AppBar />
+            </React.Fragment>
         );
     }
 }

Diff for: src/common/theme.ts

@@ -0,0 +1,21 @@
+import { createMuiTheme } from "@material-ui/core";
+
+const theme = createMuiTheme({
+    palette: {
+        primary: {
+            main: "#ffd54f",
+            light: "#ffff81",
+            dark: "#c8a415",
+            contrastText: "#212121"
+        },
+        secondary: {
+            main: "#7986cb",
+            light: "#aab6fe",
+            dark: "#49599a",
+            contrastText: "#fafafa"
+        },
+        type: "light"
+    }
+});
+
+export default theme;

Diff for: src/server/index.tsx

@@ -3,10 +3,16 @@ import * as ReactDOM from "react-dom/server";
 import * as Express from "express";
 import * as Redux from "redux";
 import { Provider as ReduxProvider } from "react-redux";
-import { ServerStyleSheet } from "styled-components";
 import { StaticRouter as Router } from "react-router-dom";
+import { SheetsRegistry } from "react-jss";
+import { JssProvider } from "react-jss";
+import {
+    MuiThemeProvider,
+    createGenerateClassName
+} from "@material-ui/core/styles";
 
 import App from "common/App";
+import theme from "common/theme";
 import { changeTitle } from "common/redux/reducer/title";
 
 declare const module: any;
@@ -19,22 +25,31 @@ function main() {
 
     express.get("/*", (req, res, next) => {
         const store = Redux.createStore(changeTitle);
-        const sheet = new ServerStyleSheet();
+        const sheetsRegistry = new SheetsRegistry();
+        const sheetsManager = new Map();
 
         const appHTML = ReactDOM.renderToString(
-            sheet.collectStyles(
-                <ReduxProvider store={store}>
-                    <Router location={req.path} context={{}}>
-                        <App />
-                    </Router>
-                </ReduxProvider>
-            )
+            <ReduxProvider store={store}>
+                <Router location={req.path} context={{}}>
+                    <JssProvider
+                        registry={sheetsRegistry}
+                        generateClassName={createGenerateClassName()}
+                    >
+                        <MuiThemeProvider
+                            theme={theme}
+                            sheetsManager={sheetsManager}
+                        >
+                            <App />
+                        </MuiThemeProvider>
+                    </JssProvider>
+                </Router>
+            </ReduxProvider>
         );
-        const appCSS = sheet.getStyleTags();
         const appInitialState = JSON.stringify(store.getState()).replace(
             /</g,
             "\\u003c"
         );
+        const appCSS = sheetsRegistry.toString();
 
         res.send(`
             <!DOCTYPE html>
@@ -46,8 +61,8 @@ function main() {
                             margin: 0px;
                             padding: 0px;
                         }
-                        ${appCSS}
                     </style>
+                    <style id="jss-server-side">${appCSS}</style>
                 </head>
                 <body>
                     <main id="root">${appHTML}</main>

Diff for: tsconfig.json

@@ -6,6 +6,7 @@
         "removeComments": true,
         "moduleResolution": "node",
         "jsx": "react",
-        "baseUrl": "./src"
+        "baseUrl": "./src",
+        "lib": ["es5", "es6", "dom"]
     }
 }