Merge pull request #303 from mjmlio/upgrade/everything

WIP: Upgrade/everything MJML APP v3
mjmlio · Mar 16, 2020 · 3078702 · 3078702
2 parents c7baa0d + 90ff41f
commit 3078702
Show file tree

Hide file tree

Showing 42 changed files with 7,919 additions and 6,405 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,20 +1,27 @@
 {
   "presets": [
     [
-      "env",
+      "@babel/preset-react",
       {
         "loose": true,
         "modules": "commonjs",
         "targets": {
-          "electron": "1.8",
+          "electron": "7.0",
           "node": "current"
         }
       }
-    ],
-    "react",
-    "stage-0"
+    ]
   ],
   "plugins": [
-    ["module-resolver", { "root": ["src"] }]
+    ["@babel/plugin-proposal-decorators", {
+      "legacy": true,
+    }],
+    ["@babel/plugin-proposal-class-properties", {
+      "loose": true
+    }],
+    "@babel/plugin-proposal-export-default-from",
+    ["module-resolver", {
+      "root": ["src"]
+    }]
   ]
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mjml-app",
   "productName": "MJML",
-  "version": "2.12.0",
+  "version": "3.0.0-Alpha.1",
   "license": "MIT",
   "description": "The desktop app for MJML",
   "repository": "https://github.com/mjmlio/mjml-app",
@@ -19,69 +19,77 @@
   },
   "electronWebpack": {
     "title": true,
+    "whiteListedModules": [ "react-redux" ],
     "renderer": {
       "webpackConfig": "./webpack/renderer.js"
     }
   },
   "dependencies": {
-    "balloon-css": "^0.5.0",
-    "classnames": "^2.2.5",
-    "codemirror": "^5.36.0",
-    "electron-debug": "^1.5.0",
-    "electron-json-storage": "^4.0.2",
-    "electron-updater": "^2.21.3",
-    "es6-promisify": "^6.0.0",
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.6.0",
+    "@babel/plugin-proposal-function-bind": "^7.2.0",
+    "@babel/preset-stage-0": "^7.0.0",
+    "@babel/runtime": "^7.6.3",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-module-resolver": "^3.2.0",
+    "balloon-css": "^1.0.3",
+    "classnames": "^2.2.6",
+    "codemirror": "^5.49.2",
+    "electron-debug": "^3.0.1",
+    "electron-json-storage": "^4.1.8",
+    "electron-updater": "^4.2.0",
+    "es6-promisify": "^6.0.2",
     "fix-path": "^2.1.0",
-    "fuse.js": "^3.2.0",
-    "immutable": "^3.8.2",
-    "js-beautify": "^1.7.5",
-    "mjml": "^4.4.1",
-    "mjml-migrate": "^4.3.1",
+    "fuse.js": "^3.4.5",
+    "immutable": "^4.0.0-rc.12",
+    "js-beautify": "^1.10.2",
+    "mjml": "^4.6.2",
+    "mjml-migrate": "^4.6.0",
     "ncp": "^2.0.0",
-    "node-mailjet": "^3.2.1",
-    "react": "^16.2.0",
-    "react-collapse": "^4.0.3",
-    "react-dom": "^16.2.0",
-    "react-hot-loader": "^4.0.0",
-    "react-icons": "^2.2.7",
-    "react-mortal": "^3.2.0",
-    "react-redux": "^5.0.7",
-    "react-router": "^3.0.2",
+    "node-mailjet": "^3.3.1",
+    "react": "^16.11.0",
+    "react-collapse": "^5.0.0",
+    "react-dom": "^16.11.0",
+    "react-hot-loader": "^4.12.15",
+    "react-icons": "^3.8.0",
+    "react-mortal": "^3.3.0",
+    "react-portal": "^4.2.0",
+    "react-redux": "^6.0.1",
+    "react-router": "^3.0.0",
     "react-router-redux": "^4.0.8",
     "react-select": "^1.2.1",
-    "react-split-pane": "^0.1.77",
+    "react-split-pane": "^0.1.87",
     "react-steack": "^1.3.1",
-    "redux": "^3.7.2",
-    "redux-actions": "^2.3.0",
-    "redux-thunk": "^2.2.0",
-    "source-map-support": "^0.5.4",
+    "redux": "^4.0.4",
+    "redux-actions": "^2.6.5",
+    "redux-thunk": "^2.3.0",
+    "source-map-support": "^0.5.16",
     "superagent-promise": "^1.1.0",
-    "trash": "^4.3.0"
+    "trash": "^6.0.0"
   },
   "devDependencies": {
-    "babel-eslint": "^8.2.2",
-    "babel-plugin-module-resolver": "^3.1.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "electron": "1.8.8",
-    "electron-builder": "^20.6.2",
-    "electron-devtools-installer": "^2.2.3",
-    "electron-webpack": "^1.13.0",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-import-resolver-babel-module": "^4.0.0",
-    "eslint-plugin-flowtype": "^2.46.1",
-    "eslint-plugin-import": "^2.9.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
-    "node-sass": "^4.8.3",
+    "@babel/plugin-proposal-export-default-from": "^7.5.2",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "11.0.0-beta.0",
+    "electron": "7.0.1",
+    "electron-builder": "^22.1.0",
+    "electron-devtools-installer": "^2.2.4",
+    "electron-webpack": "^2.7.4",
+    "eslint": "^6.6.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.5.0",
+    "eslint-import-resolver-babel-module": "^5.1.0",
+    "eslint-plugin-flowtype": "^4.3.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.16.0",
+    "node-sass": "^4.13.0",
     "prettier": "^1.13.5",
     "redux-logger": "^3.0.6",
-    "sass-loader": "^6.0.7",
-    "webpack": "3.11.0"
+    "sass-loader": "^8.0.0",
+    "webpack": "^4.41.2"
   },
   "resolutions": {
     "webpack-sources": "1.0.1"

diff --git a/src/components/AboutModal.js b/src/components/AboutModal.js
@@ -5,37 +5,36 @@ import { isModalOpened, closeModal } from 'reducers/modals'
 
 import Modal from 'components/Modal'
 
-@connect(
+export default connect(
   state => ({
     isOpened: isModalOpened(state, 'about'),
   }),
   {
     closeModal,
   },
+)(
+  class AboutModal extends Component {
+    render() {
+      const { isOpened, closeModal } = this.props
+      return (
+        <Modal
+          isOpened={isOpened}
+          onClose={() => closeModal('about')}
+          style={{
+            width: 300,
+          }}
+          className="flow-v-10"
+        >
+          <div>
+            {'MJML App v'}
+            <b className="us-t">{__MJML_APP_VERSION__}</b>
+          </div>
+          <div>
+            {'MJML v'}
+            <b className="us-t">{__MJML_VERSION__}</b>
+          </div>
+        </Modal>
+      )
+    }
+  },
 )
-class AboutModal extends Component {
-  render() {
-    const { isOpened, closeModal } = this.props
-    return (
-      <Modal
-        isOpened={isOpened}
-        onClose={() => closeModal('about')}
-        style={{
-          width: 300,
-        }}
-        className="flow-v-10"
-      >
-        <div>
-          {'MJML App v'}
-          <b className="us-t">{__MJML_APP_VERSION__}</b>
-        </div>
-        <div>
-          {'MJML v'}
-          <b className="us-t">{__MJML_VERSION__}</b>
-        </div>
-      </Modal>
-    )
-  }
-}
-
-export default AboutModal
diff --git a/src/components/Alerts/index.js b/src/components/Alerts/index.js
@@ -3,43 +3,42 @@ import { Portal } from 'react-portal'
 import cx from 'classnames'
 import { connect } from 'react-redux'
 import Steack from 'react-steack'
-import IconError from 'react-icons/md/error'
+import { MdError as IconError } from 'react-icons/md'
 
 import { removeAlert } from 'reducers/alerts'
 
 import './style.scss'
 
-@connect(
+export default connect(
   state => ({
     alerts: state.alerts,
   }),
   {
     removeAlert,
   },
-)
-class Alerts extends Component {
-  render() {
-    const { alerts, removeAlert } = this.props
-
-    return (
-      <Portal isOpened>
-        <div className="Alerts">
-          <Steack reverse>
-            {alerts.map(a => (
-              <div
-                key={a.id}
-                onClick={() => removeAlert(a.id)}
-                className={cx('Alerts--item', a.type)}
-              >
-                {a.type === 'error' && <IconError className="mr-10" size={30} />}
-                {Array.isArray(a.message) ? a.message.map(line => <div>{line}</div>) : a.message}
-              </div>
-            ))}
-          </Steack>
-        </div>
-      </Portal>
-    )
-  }
-}
+)(
+  class Alerts extends Component {
+    render() {
+      const { alerts, removeAlert } = this.props
 
-export default Alerts
+      return (
+        <Portal isOpened>
+          <div className="Alerts">
+            <Steack reverse>
+              {alerts.map(a => (
+                <div
+                  key={a.id}
+                  onClick={() => removeAlert(a.id)}
+                  className={cx('Alerts--item', a.type)}
+                >
+                  {a.type === 'error' && <IconError className="mr-10" size={30} />}
+                  {Array.isArray(a.message) ? a.message.map(line => <div>{line}</div>) : a.message}
+                </div>
+              ))}
+            </Steack>
+          </div>
+        </Portal>
+      )
+    }
+  },
+)
diff --git a/src/components/Application/DropFile.js b/src/components/Application/DropFile.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { Motion, spring } from 'react-motion'
-import IconDrop from 'react-icons/md/file-download'
+import { MdFileDownload as IconDrop } from 'react-icons/md'
 
 class DropFile extends Component {
   render() {