feat: upgrade to Emotion 10 (#2166)

packages/netlify-cms-widget-date/package.json

@@ -21,21 +21,21 @@
     "build": "cross-env NODE_ENV=production webpack"
   },
   "dependencies": {
-    "react-datetime": "^2.11.0"
+    "react-datetime": "^2.16.3"
   },
   "devDependencies": {
     "cross-env": "^5.2.0",
-    "css-loader": "^1.0.0",
+    "css-loader": "^2.1.1",
     "to-string-loader": "^1.1.5",
-    "webpack": "^4.16.1",
-    "webpack-cli": "^3.1.0"
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3"
   },
   "peerDependencies": {
-    "emotion": "^9.2.6",
+    "@emotion/core": "^10.0.9",
+    "@emotion/styled": "^10.0.9",
     "moment": "^2.11.2",
     "netlify-cms-ui-default": "^2.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.4.1",
-    "react-emotion": "^9.2.6"
+    "react": "^16.4.1"
   }
 }

packages/netlify-cms-widget-date/src/DateControl.js

@@ -1,14 +1,11 @@
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectGlobal } from 'react-emotion';
+import { jsx, css } from '@emotion/core';
+import reactDateTimeStyles from 'react-datetime/css/react-datetime.css';
 import DateTime from 'react-datetime';
-import dateTimeStyles from 'react-datetime/css/react-datetime.css';
 import moment from 'moment';
 
-injectGlobal`
-  ${dateTimeStyles}
-`;
-
 export default class DateControl extends React.Component {
   static propTypes = {
     field: PropTypes.object.isRequired,
@@ -106,15 +103,21 @@ export default class DateControl extends React.Component {
     const { forID, value, classNameWrapper, setActiveStyle } = this.props;
     const { format, dateFormat, timeFormat } = this.formats;
     return (
-      <DateTime
-        dateFormat={dateFormat}
-        timeFormat={timeFormat}
-        value={moment(value, format)}
-        onChange={this.handleChange}
-        onFocus={setActiveStyle}
-        onBlur={this.onBlur}
-        inputProps={{ className: classNameWrapper, id: forID }}
-      />
+      <div
+        css={css`
+          ${reactDateTimeStyles};
+        `}
+      >
+        <DateTime
+          dateFormat={dateFormat}
+          timeFormat={timeFormat}
+          value={moment(value, format)}
+          onChange={this.handleChange}
+          onFocus={setActiveStyle}
+          onBlur={this.onBlur}
+          inputProps={{ className: classNameWrapper, id: forID }}
+        />
+      </div>
     );
   }
 }

packages/netlify-cms-widget-date/src/index.js

@@ -1,2 +1,11 @@
-export DateControl from './DateControl';
-export DatePreview from './DatePreview';
+import controlComponent from './DateControl';
+import previewComponent from './DatePreview';
+
+const Widget = (opts = {}) => ({
+  name: 'date',
+  controlComponent,
+  previewComponent,
+  ...opts,
+});
+
+export { Widget as default, controlComponent, previewComponent };