Merge pull request #4 from treetips/feature/update_material_ui_to_v4

Update material-ui v3 to v4

Author: treetips

README.md

@@ -22,10 +22,9 @@ VSCode と prettier と TSLint によって、リアルタイムに整形と構
 
 - [Google App Engine Node.js Standard Environment](https://cloud.google.com/appengine/docs/standard/nodejs/)
 - [Visual Studio Code](https://code.visualstudio.com/)
-- [yarn](https://yarnpkg.com/lang/ja/)
 - [Typescript v3](https://www.typescriptlang.org/)
 - [Next.js v8](https://nextjs.org/)
-- [MATERIAL-UI v3](https://material-ui.com/)
+- [MATERIAL-UI v4](https://material-ui.com/)
 - [Redux](https://redux.js.org/)
 - [TSLint](https://palantir.github.io/tslint/)
 
@@ -53,20 +52,20 @@ VSCode と prettier と TSLint によって、リアルタイムに整形と構
 ```bash
 git clone https://github.com/treetips/typescript-nextjs-redux-material-ui-example.git
 cd typescript-nextjs-redux-material-ui-example
-yarn
+npm i
 ```
 
 ### Start local
 
 ```bash
-yarn dev
+npm run dev
 ```
 
 ### Build and start production express server
 
 ```bash
-yarn build
-yarn start
+npm run build
+npm start
 ```
 
 ## For google appengine

components/MuiColorPalette.ts

@@ -0,0 +1,22 @@
+import green from "@material-ui/core/colors/green"
+import grey from "@material-ui/core/colors/grey"
+import { createMuiTheme } from "@material-ui/core/styles"
+
+/**
+ * material-ui theme color pallete
+ * @see https://material-ui.com/style/color/
+ */
+export const MuiTheme = createMuiTheme({
+  palette: {
+    primary: {
+      light: grey[700],
+      main: grey[800],
+      dark: grey[900],
+    },
+    secondary: {
+      light: green[300],
+      main: green[500],
+      dark: green[700],
+    },
+  },
+})

components/MuiTheme.ts

@@ -1,4 +1,9 @@
-import { Avatar, ListItem, ListItemText } from "@material-ui/core"
+import {
+  Avatar,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+} from "@material-ui/core"
 import {
   createStyles,
   Theme,
@@ -12,7 +17,6 @@ const styles = (theme: Theme) =>
   createStyles({
     root: {},
     anchorLink: {
-      display: "flex",
       width: "100%",
       textDecoration: "none",
     },
@@ -61,21 +65,23 @@ const NextListItemComponent = (props: IProps) => {
   const { classes, className, href, icon, primary, secondary, onClick } = props
   const AvatorIcon = () => icon
   return (
-    <ListItem divider={true} className={className} onClick={onClick}>
-      <Link href={href}>
-        <a className={classes.anchorLink}>
-          <Avatar>
-            <AvatorIcon />
-          </Avatar>
+    <Link href={href}>
+      <a className={classes.anchorLink} onClick={onClick}>
+        <ListItem alignItems="center" divider={true} className={className}>
+          <ListItemAvatar>
+            <Avatar>
+              <AvatorIcon />
+            </Avatar>
+          </ListItemAvatar>
           <ListItemText
             primary={<span className={classes.listItemPrimary}>{primary}</span>}
             secondary={
               <span className={classes.listItemSecondary}>{secondary}</span>
             }
           />
-        </a>
-      </Link>
-    </ListItem>
+        </ListItem>
+      </a>
+    </Link>
   )
 }
 

components/getPageContext.ts

@@ -15,7 +15,7 @@ const styles = (theme: Theme) =>
     root: {
       backgroundColor: theme.palette.primary.main,
       color: theme.palette.primary.contrastText,
-      padding: theme.spacing.unit * 2,
+      padding: theme.spacing(2),
       textAlign: "center",
     },
     title: {
@@ -24,7 +24,7 @@ const styles = (theme: Theme) =>
       alignItems: "center",
       fontWeight: "bold",
       fontSize: "3em",
-      padding: theme.spacing.unit * 2,
+      padding: theme.spacing(2),
     },
     description: {},
   })

components/molecules/NextListItem.tsx

@@ -10,7 +10,7 @@ const styles = (theme: Theme) =>
   createStyles({
     root: {},
     contentsContainer: {
-      padding: theme.spacing.unit,
+      padding: theme.spacing(1),
     },
   })
 

components/molecules/PageHeader.tsx

@@ -37,9 +37,7 @@ const styles = (theme: Theme) =>
     },
     listItem: {
       border: 0,
-      fontSize: 40,
-      padding: "15px 5px 15px 15px",
-      boxShadow: theme.shadows[1],
+      boxShadow: theme.shadows[3],
     },
     deactive: {
       transition: "background-color 1.2s", // mouse out

components/organisms/HeaderArticleContainer.tsx

@@ -4,10 +4,10 @@ GAE_APP_YML="app.yaml"
 GAE_DEPLOY_VERSION="<<DEPLOY_VERSION>>"
 GAE_URL="https://${GAE_DEPLOY_VERSION}-dot-${GAE_PRJ_ID}.appspot.com"
 
-yarn build
+npm run build
 
 if [ $? -ne 0 ]; then
-  echo "yarn build failed."
+  echo "npm build failed."
   exit 1
 fi