feat: Use React ⚛️ instead of preact

docs/styleguide.config.js

@@ -57,9 +57,7 @@ module.exports = {
     },
     {
       name: 'List',
-      components: () => [
-        '../react/ListItemText/index.jsx'
-      ]
+      components: () => ['../react/ListItemText/index.jsx']
     },
     {
       name: 'Navigation',

docs/webpack.config.js

@@ -2,10 +2,6 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 module.exports = {
   resolve: {
-    alias: {
-      react: 'preact-compat',
-      'react-dom': 'preact-compat'
-    },
     extensions: ['.jsx', '.js', '.json', '.styl']
   },
   module: {

package.json

@@ -49,8 +49,8 @@
     "commitlint-config-cozy": "0.2.2",
     "copyfiles": "^1.2.0",
     "css-loader": "^0.28.4",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-15": "^1.0.5",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.6.0",
     "eslint": "^4.18.2",
     "eslint-config-cozy-app": "^0.5.1",
     "git-directory-deploy": "^1.5.1",
@@ -64,11 +64,9 @@
     "node-polyglot": "^2.2.2",
     "npm-run-all": "^4.0.1",
     "postcss-loader": "^2.0.6",
-    "preact": "^8.1.0",
-    "preact-compat": "^3.13.1",
     "prop-types": "^15.6.0",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
     "react-redux": "^5.0.3",
     "react-styleguidist": "7.3.8",
     "react-test-renderer": "15.6.1",
@@ -90,7 +88,6 @@
     "md5": "^2.2.0",
     "mini-css-extract-plugin": "^0.4.3",
     "normalize.css": "^7.0.0",
-    "preact-portal": "^1.1.2",
     "pretty": "^2.0.0",
     "react-select": "^2.0.0-beta.6",
     "stylus": "^0.54.5"
@@ -135,6 +132,7 @@
       "__ALLOW_HTTP__": false,
       "__TARGET__": "browser",
       "cozy": {}
-    }
+    },
+    "testURL": "http://localhost/"
   }
 }

react/Alerter/index.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import Portal from 'preact-portal'
+import Portal from '../Portal'
 import Button from '../Button'
 
 import styles from './styles.styl'
@@ -34,7 +34,7 @@ class Alert extends Component {
 
   computeDuration() {
     const words = this.props.message.split(/\W/).filter(Boolean)
-    return Math.max(MINIMUM_ALERT_DURATION, words.length / 3 * 1000)
+    return Math.max(MINIMUM_ALERT_DURATION, (words.length / 3) * 1000)
   }
 
   componentDidMount() {

react/I18n/index.jsx

@@ -35,7 +35,7 @@ export class I18n extends Component {
     }
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.lang !== this.props.lang) {
       this.init(newProps)
     }

react/IntentHeader/index.jsx

@@ -8,7 +8,12 @@ export const IntentHeader = ({ appName, appEditor, appIcon, className }) => (
   <div className={classNames(styles['intentHeader'], className)}>
     <h1 className={styles['intentHeader-title']}>
       <img className={styles['intentHeader-icon']} src={appIcon} />
-      {appEditor && <span>{appEditor}&nbsp;</span>}
+      {appEditor && (
+        <span>
+          {appEditor}
+          &nbsp;
+        </span>
+      )}
       {appName}
     </h1>
   </div>

react/Modal/index.jsx

@@ -7,7 +7,7 @@ import { Button } from '../Button'
 import Icon from '../Icon'
 import migrateProps from '../helpers/migrateProps'
 import palette from '../../stylus/settings/palette.json'
-import Portal from 'preact-portal'
+import Portal from '../Portal'
 import uniqueId from 'lodash/uniqueId'
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
 
@@ -40,7 +40,7 @@ class ModalContent extends Component {
     }
   }
 
-  componentWillUpdate(nextProps) {
+  UNSAFE_componentWillUpdate(nextProps) {
     const { children } = nextProps
     this.refreshComputedParts(children)
   }
@@ -175,7 +175,10 @@ const ModalHeader = ({
             <img className={styles['c-modal-app-icon']} src={appIcon} />
           )}
           {appEditor && (
-            <span className={styles['c-app-editor']}>{appEditor}&nbsp;</span>
+            <span className={styles['c-app-editor']}>
+              {appEditor}
+              &nbsp;
+            </span>
           )}
           {appName}
         </h2>

react/Portal/index.jsx

@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom'
+const Portal = ({ into, children }) => {
+  const targetElement = document.querySelector(into)
+  return ReactDOM.createPortal(children, targetElement)
+}
+export default Portal

test/jestsetup.js

@@ -1,5 +1,5 @@
 import { configure, mount, shallow } from 'enzyme'
-import Adapter from 'enzyme-adapter-react-15'
+import Adapter from 'enzyme-adapter-react-16'
 
 configure({ adapter: new Adapter() })