migrate date and datetime widgets

packages/netlify-cms-core/package.json

@@ -45,7 +45,6 @@
     "react": "^16.4.1",
     "react-aria-menubutton": "^5.1.0",
     "react-autosuggest": "^9.3.2",
-    "react-datetime": "^2.11.0",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",
     "react-dom": "^16.0.0",

packages/netlify-cms-core/scripts/load-extensions.js

@@ -5,12 +5,12 @@ import { GitGatewayBackend } from 'netlify-cms-backend-git-gateway';
 import { TestBackend } from 'netlify-cms-backend-test';
 import { BooleanControl } from 'netlify-cms-widget-boolean';
 import { StringControl, StringPreview } from 'netlify-cms-widget-string';
+import { DateControl, DatePreview } from 'netlify-cms-widget-date';
+import { DateTimeControl, DateTimePreview } from 'netlify-cms-widget-datetime';
 // import { NumberControl, NumberPreview } from 'netlify-cms-widget-number';
 // import { TextControl, TextPreview } from 'netlify-cms-widget-text';
 // import { ImageControl, ImagePreview } from 'netlify-cms-widget-image';
 // import { FileControl, FilePreview } from 'netlify-cms-widget-file';
-// import { DateControl, DatePreview } from 'netlify-cms-widget-date';
-// import { DateTimeControl, DateTimePreview } from 'netlify-cms-widget-datetime';
 // import { SelectControl, SelectPreview } from 'netlify-cms-widget-select';
 // import { MarkdownControl, MarkdownPreview } from 'netlify-cms-widget-markdown';
 // import { ListControl, ListPreview } from 'netlify-cms-widget-list';
@@ -23,6 +23,8 @@ registerBackend('github', GitHubBackend);
 registerBackend('gitlab', GitLabBackend);
 registerBackend('test-repo', TestBackend);
 registerWidget('boolean', BooleanControl);
+registerWidget('date', DateControl, DatePreview);
+registerWidget('datetime', DateTimeControl, DateTimePreview);
 registerWidget('string', StringControl, StringPreview);
 // registerWidget('text', TextControl, TextPreview);
 // registerWidget('number', NumberControl, NumberPreview);
@@ -30,8 +32,6 @@ registerWidget('string', StringControl, StringPreview);
 // registerWidget('markdown', MarkdownControl, MarkdownPreview);
 // registerWidget('image', ImageControl, ImagePreview);
 // registerWidget('file', FileControl, FilePreview);
-// registerWidget('date', DateControl, DatePreview);
-// registerWidget('datetime', DateTimeControl, DateTimePreview);
 // registerWidget('select', SelectControl, SelectPreview);
 // registerWidget('object', ObjectControl, ObjectPreview);
 // registerWidget('relation', RelationControl, RelationPreview);

packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js

@@ -53,7 +53,7 @@ const styles = {
     width: 100%;
     padding: ${lengths.inputPadding};
     margin: 0;
-    border: ${borders.textFieldBorder};
+    border: ${borders.textField};
     border-radius: ${lengths.borderRadius};
     border-top-left-radius: 0;
     outline: 0;

packages/netlify-cms-core/src/components/EditorWidgets/Date/DatePreview.js

@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default function DatePreview({ value }) {
-  return <div className="nc-widgetPreview">{value ? value.toString() : null}</div>;
-}
-
-DatePreview.propTypes = {
-  value: PropTypes.object,
-};

packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTime.css

@@ -1 +0,0 @@
-@import "./ReactDatetime.css";

packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTimeControl.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import DateControl from 'EditorWidgets/Date/DateControl';
-
-export default class DateTimeControl extends React.Component {
-  static propTypes = {
-    field: PropTypes.object.isRequired,
-    onChange: PropTypes.func.isRequired,
-    classNameWrapper: PropTypes.string.isRequired,
-    setActiveStyle: PropTypes.func.isRequired,
-    setInactiveStyle: PropTypes.func.isRequired,
-    value: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string,
-    ]),
-    format: PropTypes.string,
-  };
-
-  render() {
-    const {
-      field,
-      format,
-      onChange,
-      value,
-      classNameWrapper,
-      setActiveStyle,
-      setInactiveStyle
-    } = this.props;
-
-    return (
-      <DateControl
-        onChange={onChange}
-        format={format}
-        value={value}
-        field={field}
-        classNameWrapper={classNameWrapper}
-        setActiveStyle={setActiveStyle}
-        setInactiveStyle={setInactiveStyle}
-        includeTime
-      />
-    );
-  }
-}

packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTimePreview.js

@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default function DateTimePreview({ value }) {
-  return <div className="nc-widgetPreview">{value ? value.toString() : null}</div>;
-}
-
-DateTimePreview.propTypes = {
-  value: PropTypes.object,
-};

packages/netlify-cms-core/src/components/EditorWidgets/DateTime/ReactDatetime.css

@@ -1,210 +0,0 @@
-.rdt {
-  position: relative;
-}
-.rdtPicker {
-  display: none;
-  position: absolute;
-  width: 250px;
-  padding: 4px;
-  margin-top: 1px;
-  z-index: 99999 !important;
-  background: #fff;
-  border: 2px solid var(--colorGray);
-  border-radius: 2px;
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16);
-}
-.rdtOpen .rdtPicker {
-  display: block;
-}
-.rdtStatic .rdtPicker {
-  box-shadow: none;
-  position: static;
-}
-
-.rdtPicker .rdtTimeToggle {
-  text-align: center;
-}
-
-.rdtPicker table {
-  width: 100%;
-  margin: 0;
-}
-.rdtPicker td,
-.rdtPicker th {
-  text-align: center;
-  height: 28px;
-}
-.rdtPicker td {
-  cursor: pointer;
-}
-.rdtPicker td.rdtDay:hover,
-.rdtPicker td.rdtHour:hover,
-.rdtPicker td.rdtMinute:hover,
-.rdtPicker td.rdtSecond:hover,
-.rdtPicker .rdtTimeToggle:hover {
-  background: #eeeeee;
-  cursor: pointer;
-}
-.rdtPicker td.rdtOld,
-.rdtPicker td.rdtNew {
-  color: #999999;
-}
-.rdtPicker td.rdtToday {
-  position: relative;
-}
-.rdtPicker td.rdtToday:before {
-  content: '';
-  display: inline-block;
-  border-left: 7px solid transparent;
-  border-bottom: 7px solid #428bca;
-  border-top-color: rgba(0, 0, 0, 0.2);
-  position: absolute;
-  bottom: 4px;
-  right: 4px;
-}
-.rdtPicker td.rdtActive,
-.rdtPicker td.rdtActive:hover {
-  background-color: #428bca;
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-}
-.rdtPicker td.rdtActive.rdtToday:before {
-  border-bottom-color: #fff;
-}
-.rdtPicker td.rdtDisabled,
-.rdtPicker td.rdtDisabled:hover {
-  background: none;
-  color: #999999;
-  cursor: not-allowed;
-}
-
-.rdtPicker td span.rdtOld {
-  color: #999999;
-}
-.rdtPicker td span.rdtDisabled,
-.rdtPicker td span.rdtDisabled:hover {
-  background: none;
-  color: #999999;
-  cursor: not-allowed;
-}
-.rdtPicker th {
-  border-bottom: 1px solid #f9f9f9;
-}
-.rdtPicker .dow {
-  width: 14.2857%;
-  border-bottom: none;
-}
-.rdtPicker th.rdtSwitch {
-  width: 100px;
-}
-.rdtPicker th.rdtNext,
-.rdtPicker th.rdtPrev {
-  font-size: 21px;
-  vertical-align: top;
-}
-
-.rdtPrev span,
-.rdtNext span {
-  display: block;
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Chrome/Safari/Opera */
-  -khtml-user-select: none; /* Konqueror */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none;
-}
-
-.rdtPicker th.rdtDisabled,
-.rdtPicker th.rdtDisabled:hover {
-  background: none;
-  color: #999999;
-  cursor: not-allowed;
-}
-.rdtPicker thead tr:first-child th {
-  cursor: pointer;
-}
-.rdtPicker thead tr:first-child th:hover {
-  background: #eeeeee;
-}
-
-.rdtPicker tfoot {
-  border-top: 1px solid #f9f9f9;
-}
-
-.rdtPicker button {
-  border: none;
-  background: none;
-  cursor: pointer;
-}
-.rdtPicker button:hover {
-  background-color: #eee;
-}
-
-.rdtPicker thead button {
-  width: 100%;
-  height: 100%;
-}
-
-td.rdtMonth,
-td.rdtYear {
-  height: 50px;
-  width: 25%;
-  cursor: pointer;
-}
-td.rdtMonth:hover,
-td.rdtYear:hover {
-  background: #eee;
-}
-
-.rdtCounters {
-  display: inline-block;
-}
-
-.rdtCounters > div {
-  float: left;
-}
-
-.rdtCounter {
-  height: 100px;
-}
-
-.rdtCounter {
-  width: 40px;
-}
-
-.rdtCounterSeparator {
-  line-height: 100px;
-}
-
-.rdtCounter .rdtBtn {
-  height: 40%;
-  line-height: 40px;
-  cursor: pointer;
-  display: block;
-
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Chrome/Safari/Opera */
-  -khtml-user-select: none; /* Konqueror */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none;
-}
-.rdtCounter .rdtBtn:hover {
-  background: #eee;
-}
-.rdtCounter .rdtCount {
-  height: 20%;
-  font-size: 1.2em;
-}
-
-.rdtMilli {
-  vertical-align: middle;
-  padding-left: 8px;
-  width: 48px;
-}
-
-.rdtMilli input {
-  width: 100%;
-  font-size: 1.2em;
-  margin-top: 37px;
-}

packages/netlify-cms-core/src/components/EditorWidgets/index.js

@@ -9,10 +9,6 @@ import ImageControl from './Image/ImageControl';
 import ImagePreview from './Image/ImagePreview';
 import FileControl from './File/FileControl';
 import FilePreview from './File/FilePreview';
-import DateControl from './Date/DateControl';
-import DatePreview from './Date/DatePreview';
-import DateTimeControl from './DateTime/DateTimeControl';
-import DateTimePreview from './DateTime/DateTimePreview';
 import SelectControl from './Select/SelectControl';
 import SelectPreview from './Select/SelectPreview';
 import MarkdownControl from './Markdown/MarkdownControl';
@@ -30,8 +26,6 @@ registerWidget('list', ListControl, ListPreview);
 registerWidget('markdown', MarkdownControl, MarkdownPreview);
 registerWidget('image', ImageControl, ImagePreview);
 registerWidget('file', FileControl, FilePreview);
-registerWidget('date', DateControl, DatePreview);
-registerWidget('datetime', DateTimeControl, DateTimePreview);
 registerWidget('select', SelectControl, SelectPreview);
 registerWidget('object', ObjectControl, ObjectPreview);
 registerWidget('relation', RelationControl, RelationPreview);

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

@@ -0,0 +1,35 @@
+{
+  "name": "netlify-cms-widget-date",
+  "description": "Widget for editing dates in Netlify CMS.",
+  "version": "2.0.0-alpha.0",
+  "main": "dist/netlify-cms-widget-date.js",
+  "license": "MIT",
+  "keywords": [
+    "netlify",
+    "netlify-cms",
+    "widget",
+    "date",
+    "dates"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "watch": "webpack -w",
+    "build": "webpack"
+  },
+  "dependencies": {
+    "react-datetime": "^2.11.0"
+  },
+  "devDependencies": {
+    "css-loader": "^1.0.0",
+    "to-string-loader": "^1.1.5",
+    "webpack": "^4.16.1",
+    "webpack-cli": "^3.1.0"
+  },
+  "peerDependencies": {
+    "moment": "^2.11.2",
+    "netlify-cms-ui-default": "^2.0.0-alpha.0",
+    "prop-types": "^15.5.10",
+    "react": "^16.4.1",
+    "react-emotion": "^9.2.6"
+  }
+}

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

@@ -1,8 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { injectGlobal } from 'react-emotion';
 import DateTime from 'react-datetime';
+import dateTimeStyles from 'react-datetime/css/react-datetime.css';
 import moment from 'moment';
 
+injectGlobal`
+  ${dateTimeStyles}
+`
+
 const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
 const DEFAULT_DATETIME_FORMAT = moment.defaultFormat;
 

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
+
+const DatePreview = ({ value }) => (
+  <WidgetPreviewContainer>{value ? value.toString() : null}</WidgetPreviewContainer>
+);
+
+DatePreview.propTypes = {
+  value: PropTypes.object,
+};
+
+export default DatePreview;

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

@@ -0,0 +1,2 @@
+export DateControl from './DateControl';
+export DatePreview from './DatePreview';

packages/netlify-cms-widget-date/webpack.config.js

@@ -0,0 +1,17 @@
+const { getConfig } = require('../../scripts/webpack.js');
+
+const baseWebpackConfig = getConfig();
+
+module.exports = {
+  ...baseWebpackConfig,
+  module: {
+    rules: [
+      ...baseWebpackConfig.module.rules,
+      {
+        test: /\.css$/,
+        include: [/react-datetime/],
+        use: ['to-string-loader', 'css-loader'],
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,33 @@
+{
+  "name": "netlify-cms-widget-datetime",
+  "description": "Widget for editing dates and times in Netlify CMS.",
+  "version": "2.0.0-alpha.0",
+  "main": "dist/netlify-cms-widget-datetime.js",
+  "license": "MIT",
+  "keywords": [
+    "netlify",
+    "netlify-cms",
+    "widget",
+    "date",
+    "time",
+    "datetime"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "watch": "webpack -w",
+    "build": "webpack"
+  },
+  "dependencies": {
+    "netlify-cms-widget-date": "^2.0.0-alpha.0"
+  },
+  "devDependencies": {
+    "webpack": "^4.16.1",
+    "webpack-cli": "^3.1.0"
+  },
+  "peerDependencies": {
+    "react": "^16.4.1"
+  },
+  "localExternals": [
+    "netlify-cms-widget-date"
+  ]
+}

packages/netlify-cms-widget-datetime/src/DateTimeControl.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DateControl } from 'netlify-cms-widget-date';
+
+export default class DateTimeControl extends React.Component {
+  render() {
+    return <DateControl {...this.props} includeTime />;
+  }
+}

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

@@ -0,0 +1,2 @@
+export DateTimeControl from './DateTimeControl';
+export DateTimePreview from 'netlify-cms-widget-date';

packages/netlify-cms-widget-datetime/webpack.config.js

@@ -0,0 +1,3 @@
+const { getConfig } = require('../../scripts/webpack.js');
+
+module.exports = getConfig();

scripts/webpack.js

@@ -67,9 +67,11 @@ const getConfig = () => ({
    * Exclude peer dependencies from package bundles.
    */
   externals: (context, request, cb) => {
+    const localExternals = pkg.localExternals || [];
     const peerDeps = Object.keys(pkg.peerDependencies || {});
+    const externals = isProduction ? peerDeps : [...localExternals, ...peerDeps];
     const isPeerDep = dep => new RegExp(`^${dep}($|/)`).test(request);
-    return peerDeps.some(isPeerDep) ? cb(null, request) : cb();
+    return externals.some(isPeerDep) ? cb(null, request) : cb();
   },
   stats: stats(),
 });