react, react-dom, redux, babel のバージョンアップ

.babelrc

@@ -1,4 +1,11 @@
 {
   "presets": ["react-app"],
-  "plugins": ["transform-decorators-legacy"]
+  "plugins": [
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ]
+  ]
 }

package.json

@@ -3,13 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@babel/polyfill": "^7.0.0-beta.40",
+    "@babel/polyfill": "^7.0.0",
     "autoprefixer": "7.1.2",
-    "babel-core": "6.25.0",
     "babel-jest": "20.0.3",
-    "babel-loader": "7.1.1",
-    "babel-preset-react-app": "^3.0.3",
-    "babel-runtime": "6.26.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
     "classnames": "^2.2.5",
@@ -46,15 +42,15 @@
     "promise": "8.0.1",
     "prop-types": "^15.6.0",
     "randomstring": "^1.1.5",
-    "react": "^16.2.0",
+    "react": "^16.5.2",
     "react-dev-utils": "^4.1.0",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.5.2",
     "react-jss": "^8.6.1",
     "react-map-editor": "^0.1.3",
-    "react-redux": "^5.0.6",
+    "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",
     "react-slick": "^0.16.0",
-    "redux": "^3.7.2",
+    "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
     "redux-reset": "^0.3.0",
     "redux-thunk": "^2.2.0",
@@ -80,11 +76,14 @@
     "flow": "flow",
     "precommit": "lint-staged && flow check",
     "seed": "node seeder/index.js",
-    "svgr": "./node_modules/.bin/svgr -d ./src/icons/ ./src/resources/ --template ./svgr-template.js --ext jsx --no-title --no-dimensions --no-view-box --replace-attr-value=\"#2E2E2E=currentColor\""
+    "svgr": "npx @svgr/cli -d ./src/icons/ ./src/resources/ --template ./svgr-template.js --ext jsx --no-dimensions --replace-attr-values=\"#2E2E2E=currentColor\""
   },
   "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-decorators": "^7.1.2",
     "babel-eslint": "^8.1.2",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-loader": "^8.0.4",
+    "babel-preset-react-app": "^5.0.4",
     "empty": "^0.10.1",
     "firebase-admin": "^5.12.1",
     "firebase-tools": "^3.18.4",
@@ -93,8 +92,7 @@
     "flow-typed": "^2.5.1",
     "generate-robotstxt": "^5.0.7",
     "redux-devtools-extension": "^2.13.2",
-    "redux-mock-store": "^1.4.0",
-    "svgr": "^1.9.1"
+    "redux-mock-store": "^1.4.0"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -129,11 +127,6 @@
       "node"
     ]
   },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
-  },
   "eslintConfig": {
     "extends": "react-app"
   }

src/icons/ArrowBack.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const ArrowBack = (props: ElementProps<typeof SvgIcon>) => (
+const SvgArrowBack = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <path
       d="M7.5 11l5.6-5.6L11.7 4l-8 8 8 8 1.4-1.4L7.5 13h12.2v-2z"
@@ -13,4 +13,4 @@ const ArrowBack = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default ArrowBack;
+export default SvgArrowBack;

src/icons/ArrowForward.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const ArrowForward = (props: ElementProps<typeof SvgIcon>) => (
+const SvgArrowForward = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <path
       d="M3.7 11h12.2l-5.6-5.6L11.7 4l8 8-8 8-1.4-1.4 5.6-5.6H3.7z"
@@ -13,4 +13,4 @@ const ArrowForward = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default ArrowForward;
+export default SvgArrowForward;

src/icons/Beginner.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const Beginner = (props: ElementProps<typeof SvgIcon>) => (
+const SvgBeginner = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <path
       d="M11.377 21.866L4.413 16.81A.998.998 0 0 1 4 16V4a1 1 0 0 1 1.492-.87L12 6.81l6.508-3.68A1 1 0 0 1 20 4v12c0 .32-.153.621-.413.81l-7 5.083a.999.999 0 0 1-1.21-.027zM12 8.614L6 5.22v10.286l6 4.357V8.614z"
@@ -13,4 +13,4 @@ const Beginner = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default Beginner;
+export default SvgBeginner;

src/icons/Close.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const Close = (props: ElementProps<typeof SvgIcon>) => (
+const SvgClose = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <path
       d="M13.414 12l4.243-4.243a1 1 0 0 0-1.414-1.414L12 10.586 7.757 6.343a1 1 0 0 0-1.414 1.414L10.586 12l-4.243 4.243a1 1 0 0 0 1.414 1.414L12 13.414l4.243 4.243a1 1 0 0 0 1.414-1.414L13.414 12z"
@@ -13,4 +13,4 @@ const Close = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default Close;
+export default SvgClose;

src/icons/Create.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const Create = (props: ElementProps<typeof SvgIcon>) => (
+const SvgCreate = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <path
       d="M3.86 17.465L14.199 7.09l2.653 2.66L6.5 20.105H3.86v-2.64zM17.032 4.244l2.665 2.665-1.525 1.525-2.66-2.66 1.52-1.53zM2.93 21.966h3.954c.248 0 .484-.1.658-.273L21.668 7.566a.929.929 0 0 0 0-1.314l-3.98-3.98a.929.929 0 0 0-1.314 0L2.273 16.425a.951.951 0 0 0-.273.657v3.955c0 .514.415.93.93.93z"
@@ -13,4 +13,4 @@ const Create = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default Create;
+export default SvgCreate;

src/icons/Fullscreen.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const Fullscreen = (props: ElementProps<typeof SvgIcon>) => (
+const SvgFullscreen = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <path
       d="M15 6V4H9v2H6v3H4v6h2v3h3v2h6v-2h3v-3h2V9h-2V6h-3zM6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"
@@ -13,4 +13,4 @@ const Fullscreen = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default Fullscreen;
+export default SvgFullscreen;

src/icons/Google.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const Google = (props: ElementProps<typeof SvgIcon>) => (
+const SvgGoogle = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <g fill="none" fillRule="evenodd">
       <path
@@ -27,4 +27,4 @@ const Google = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default Google;
+export default SvgGoogle;

src/icons/More.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const More = (props: ElementProps<typeof SvgIcon>) => (
+const SvgMore = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <path
       d="M19 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM5 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
@@ -13,4 +13,4 @@ const More = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default More;
+export default SvgMore;

src/icons/Open.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const Open = (props: ElementProps<typeof SvgIcon>) => (
+const SvgOpen = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <path
       d="M12.865 16.342l7.5-8A.5.5 0 0 0 20 7.5H5a.5.5 0 0 0-.365.842l7.5 8a.5.5 0 0 0 .73 0z"
@@ -13,4 +13,4 @@ const Open = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default Open;
+export default SvgOpen;

src/icons/Play.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const Play = (props: ElementProps<typeof SvgIcon>) => (
+const SvgPlay = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <g fillRule="nonzero" fill="currentColor">
       <path d="M12 23C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11zm0-2a9 9 0 1 0 0-18 9 9 0 0 0 0 18z" />
@@ -12,4 +12,4 @@ const Play = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default Play;
+export default SvgPlay;

src/icons/Reset.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const Reset = (props: ElementProps<typeof SvgIcon>) => (
+const SvgReset = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <path
       d="M18.87 11.797a8.448 8.448 0 1 0-1.874 5.986 1 1 0 1 0-1.55-1.264c-.363.446-.79.845-1.263 1.182a6.447 6.447 0 1 1 2.623-6.33L15.7 10.288a1 1 0 0 0-1.402 1.426l3.755 3.689 3.647-3.583a1 1 0 1 0-1.402-1.427l-1.429 1.405z"
@@ -13,4 +13,4 @@ const Reset = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default Reset;
+export default SvgReset;

src/icons/Save.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const Save = (props: ElementProps<typeof SvgIcon>) => (
+const SvgSave = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <g fill="currentColor" fillRule="evenodd">
       <path d="M16 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8l-6-6zm-.829 2L20 8.829V20H4V4h11.171z" />
@@ -13,4 +13,4 @@ const Save = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default Save;
+export default SvgSave;

src/icons/Serach.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const Serach = (props: ElementProps<typeof SvgIcon>) => (
+const SvgSerach = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <g fill="currentColor" fillRule="evenodd">
       <path
@@ -22,4 +22,4 @@ const Serach = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default Serach;
+export default SvgSerach;

src/icons/Share.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const Share = (props: ElementProps<typeof SvgIcon>) => (
+const SvgShare = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <path
       d="M20.201 19.595a1.51 1.51 0 0 0 1.678.7A1.496 1.496 0 0 0 23 18.841c0-2.261-.923-4.968-2.669-7.096-1.952-2.383-4.834-3.997-8.762-4.352V5.06c0-.583-.334-1.114-.847-1.353a1.497 1.497 0 0 0-1.609.193l-7.551 6.25a1.5 1.5 0 0 0-.02 2.323l7.571 6.28a1.5 1.5 0 0 0 2.46-1.157v-2.242c4.274.146 6.894 1.177 8.628 4.241zm-17.38-7.892l.013-.01a.39.39 0 0 1-.012.01zm-.005-.772l.002.003-.002-.003zM9.569 6.12v3.178l.963.035c3.833.14 6.498 1.54 8.253 3.682a10.161 10.161 0 0 1 1.946 3.841c-2.285-2.688-5.51-3.5-10.154-3.52l-1.004-.003v3.203L3.284 11.32l6.285-5.2z"
@@ -13,4 +13,4 @@ const Share = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default Share;
+export default SvgShare;

src/icons/Sort.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import type { ElementProps } from "react";
 import SvgIcon from "material-ui/SvgIcon";
 
-const Sort = (props: ElementProps<typeof SvgIcon>) => (
+const SvgSort = (props: ElementProps<typeof SvgIcon>) => (
   <SvgIcon {...props}>
     <path
       d="M12.865 16.342l7.5-8A.5.5 0 0 0 20 7.5H5a.5.5 0 0 0-.365.842l7.5 8a.5.5 0 0 0 .73 0z"
@@ -13,4 +13,4 @@ const Sort = (props: ElementProps<typeof SvgIcon>) => (
   </SvgIcon>
 );
 
-export default Sort;
+export default SvgSort;

svgr-template.js

@@ -1,27 +1,13 @@
-// Based on https://github.com/smooth-code/svgr/tree/7357e7cab9738a377889432582618d43dedba39d#use-a-specific-template
+module.exports = (code, config, state) => `
+// @flow
+import React from 'react';
+import type { ElementProps } from 'react';
+import SvgIcon from 'material-ui/SvgIcon';
 
-module.exports = (opts = {}) => {
-  let props = '';
+const ${
+  state.componentName
+} = (props: ElementProps<typeof SvgIcon>) => ${code
+  .replace(/<svg /, '<SvgIcon ')
+  .replace(/<\/svg>/, '</SvgIcon>')}
 
-  if (opts.expandProps && opts.ref) {
-    props = '{svgRef, ...props}';
-  } else if (opts.expandProps) {
-    props = 'props';
-  } else if (opts.ref) {
-    props = '{svgRef}';
-  }
-
-  return (code, state) => `
-  // @flow
-  import React from 'react';
-  import type { ElementProps } from 'react';
-  import SvgIcon from 'material-ui/SvgIcon';
-
-  const ${
-    state.componentName
-  } = (${props}: ElementProps<typeof SvgIcon>) => ${code
-    .replace(/<svg /, '<SvgIcon ')
-    .replace(/<\/svg>/, '</SvgIcon>')}
-
-  export default ${state.componentName}`;
-};
+export default ${state.componentName}`;