Removed moment.js (swapped to dayjs) (OpusCapita#54)

Changed dependencies
====
Removed `moment.js` in favor of `dayjs` and `@opuscapita/i18n/lib/converters/DateConverter`.

Result: build size with all dependencies but `react` and `react-dom`: 

- before `942 kb`
- after `484 kb`

Also updated `@opuscapita/react-autocompletes` to `3.0.1`, which saves another `70 kb` of bundle.

Final size: `414kb` unminified, or 44% less size.

Author: estambakio-sc

.circleci/config.yml

@@ -1,6 +1,6 @@
 defaults: &defaults
   docker:
-    - image: opuscapita/minsk-core-ci:grails-2.4.4-jdk-8u131-nodejs-8.9.4-maven-3.3.9-docker
+    - image: opuscapita/minsk-core-ci:grails-2.4.4-jdk-8u131-nodejs-8.9.4-maven-3.3.9
   working_directory: ~/build
 
 version: 2
@@ -20,19 +20,24 @@ jobs:
             - react-showroom
 
       - run:
-          name: "Installing dependencies."
-          command: yarn install
+          name: Installing dependencies.
+          command: npm install
 
       - save_cache:
           key: react-showroom-{{ .Branch }}-{{ checksum "package.json" }}
           paths:
               - ./node_modules
+              - ./package-lock.json
               - ./yarn.lock
 
       - run:
-          name: "Running lint."
+          name: Running lint.
           command: npm run lint
 
+      - run:
+          name: Running tests.
+          command: npm test
+
   update-gh-pages:
     docker:
     <<: *defaults

config/doc/webpack.config.js

@@ -4,7 +4,7 @@ const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 
 const PACKAGE_VERSION = require('../../package.json').version;
 const PACKAGE_NAME = require('../../package.json').name;
-const {HOST, PORT} = require('../../.env');
+const { HOST, PORT } = require('../../.env');
 const NODE_ENV = process.env.NODE_ENV;
 
 module.exports = {
@@ -27,10 +27,10 @@ module.exports = {
   },
   bail: true,
   plugins: [
-      new webpack.DefinePlugin({
-        'process.env.NODE_ENV': '"production"'
-      }),
-      new LodashModuleReplacementPlugin()
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': '"production"'
+    }),
+    new LodashModuleReplacementPlugin()
   ],
   externals: {
     react: {
@@ -56,8 +56,8 @@ module.exports = {
   module: {
     rules: [
       {
-        test   : /\.(png|jpg|jpeg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
-        use : ['file-loader']
+        test: /\.(png|jpg|jpeg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+        use: ['file-loader']
       },
       {
         test: /\.md$/,

config/webpack.config.js

@@ -9,7 +9,6 @@ const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
 
 const PACKAGE_VERSION = require('../package.json').version;
-const PACKAGE_NAME = require('../package.json').name;
 const HOST = require('../.env').HOST;
 const PORT = require('../.env').PORT;
 const NODE_ENV = process.env.NODE_ENV;
@@ -18,21 +17,21 @@ const IS_LINK_MODE = NODE_ENV === 'link';
 const WEBPACK_BUNDLE_ANALYZE = process.env.WEBPACK_BUNDLE_ANALYZE;
 
 let plugins = [
-    new ProgressBarPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.HOST': JSON.stringify(HOST),
-      'process.env.PORT': JSON.stringify(PORT),
-      'process.env.NODE_ENV': `"${NODE_ENV}"`
-    }),
-    new LodashModuleReplacementPlugin()
+  new ProgressBarPlugin(),
+  new webpack.NoEmitOnErrorsPlugin(),
+  new webpack.DefinePlugin({
+    'process.env.HOST': JSON.stringify(HOST),
+    'process.env.PORT': JSON.stringify(PORT),
+    'process.env.NODE_ENV': `"${NODE_ENV}"`
+  }),
+  new LodashModuleReplacementPlugin()
 ];
 
-if(IS_LINK_MODE) {
+if (IS_LINK_MODE) {
   plugins.push(new WriteFilePlugin());
 }
 
-if(WEBPACK_BUNDLE_ANALYZE && IS_PRODUCTION_MODE) {
+if (WEBPACK_BUNDLE_ANALYZE && IS_PRODUCTION_MODE) {
   let bundleAnalyzerPlugin = new BundleAnalyzerPlugin({
     analyzerMode: 'static',
     analyzerHost: '127.0.0.1',
@@ -94,7 +93,7 @@ module.exports = {
     publicPath: '/',
     path: path.resolve(__dirname, '../lib'),
     filename: `index.js`,
-    library: `MarkdownInput`,
+    library: `ReactDates`,
     libraryTarget: 'umd'
   },
   devtool: IS_PRODUCTION_MODE ? false : 'inline-source-map',
@@ -112,8 +111,8 @@ module.exports = {
   module: {
     rules: [
       {
-        test   : /\.(png|jpg|jpeg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
-        use : ['file-loader']
+        test: /\.(png|jpg|jpeg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+        use: ['file-loader']
       },
       {
         test: /\.md$/,

package.json

@@ -15,9 +15,10 @@
   "scripts": {
     "link-mode": "cross-env NODE_ENV=link webpack --config ./config/webpack.config.js",
     "lint": "eslint src",
+    "lint-fix": "eslint src --fix",
     "start": "cross-env NODE_ENV=development && showroom-scan src && babel-node www/index",
     "test": "mocha src/**/*.spec.js --compilers js:babel-register --require config/test/mocha-setup.js --require ignore-styles",
-    "npm-build": "rimraf lib && cross-env NODE_ENV=production webpack --config ./config/webpack.config.js",
+    "npm-build": "rimraf lib && cross-env NODE_ENV=production WEBPACK_BUNDLE_ANALYZE=true webpack --config ./config/webpack.config.js",
     "npm-publish": "npm run npm-build && npm publish",
     "publish-release": "npm run npm-publish"
   },
@@ -36,6 +37,15 @@
     "react": "^15.6.2 || ^16.2.0",
     "react-dom": "^15.6.2 || ^16.2.0"
   },
+  "dependencies": {
+    "@opuscapita/i18n": "1.2.5",
+    "@opuscapita/react-autocompletes": "3.0.1",
+    "dayjs": "1.6.4",
+    "lodash": "4.17.4",
+    "prop-types": "15.6.0",
+    "react-day-picker": "6.1.0",
+    "react-portal": "4.1.2"
+  },
   "devDependencies": {
     "@opuscapita/npm-scripts": "2.0.0-beta.2",
     "@opuscapita/react-showroom-client": "1.3.0-beta.6",
@@ -68,7 +78,6 @@
     "json-loader": "0.5.4",
     "less": "2.7.2",
     "less-loader": "2.2.3",
-    "lodash": "4.17.4",
     "lodash-webpack-plugin": "0.11.4",
     "mocha": "3.3.0",
     "postcss-loader": "1.3.3",
@@ -88,13 +97,5 @@
     "webpack-dev-middleware": "1.10.2",
     "webpack-node-externals": "1.6.0",
     "write-file-webpack-plugin": "4.1.0"
-  },
-  "dependencies": {
-    "@opuscapita/react-autocompletes": "2.0.3",
-    "lodash": "4.17.4",
-    "moment": "2.18.1",
-    "prop-types": "15.6.0",
-    "react-day-picker": "6.1.0",
-    "react-portal": "4.1.2"
   }
 }

src/client/components/DateInput/DateInput.DOCUMENTATION.md

@@ -47,7 +47,7 @@ Based on configured to OpusCapita defaults [react-day-picker](https://github.com
 <DateInput
   value={_scope.state.value}
   dateFormat="dd/MM/yyyy"
-  locale="hu"
+  locale="fi"
   onBlur={(e) => console.log('Blur!', e)}
   onChange={_scope.handleChange.bind(_scope)}
   onFocus={(e) => console.log('Focus!', e)}

src/client/components/DateInput/DateInput.react.js

@@ -6,34 +6,15 @@ import DayPicker from '../DayPicker';
 import DateVariants from '../DateVariants';
 import InputAddonButton from '../InputAddonButton';
 import { spring, presets, Motion } from 'react-motion';
-import assign from 'lodash/assign';
-import moment from '../moment';
+import dayjs from '../../dayjs';
 import getMessage from '../translations';
 import isEqual from 'lodash/isEqual';
 import { Portal } from 'react-portal';
-import { getCoords } from '../utils/get-coords';
+import { getCoords, splitProps } from '../utils';
 
 let springPreset = presets.gentle;
 let easeOutCubic = (t) => (--t) * t * t + 1; // eslint-disable-line no-param-reassign
 
-function splitProps(props, specificPropNames = []) {
-  let result = Object.keys(props).reduce((result, propName) => {
-    let isPropSpecific = specificPropNames.indexOf(propName) >= 0;
-    if (isPropSpecific) {
-      let commonProps = assign({}, result[0]);
-      let specificProps = assign({}, result[1], { [propName]: props[propName] });
-      return [commonProps, specificProps];
-    }
-
-    let commonProps = assign({}, result[0], { [propName]: props[propName] });
-    let specificProps = assign({}, result[1]);
-    return [commonProps, specificProps];
-  }, [{}, {}]);
-
-  return result;
-}
-
-
 let propTypes = {
   className: PropTypes.string,
   dateFormat: PropTypes.string,
@@ -70,15 +51,15 @@ let defaultProps = {
   variants: [
     {
       getLabel: (locale) => getMessage(locale, 'yesterday'),
-      getValue: (locale) => moment().locale(locale).subtract(1, 'days').toDate()
+      getValue: (locale) => dayjs().locale(locale).subtract(1, 'days').toDate()
     },
     {
       getLabel: (locale) => getMessage(locale, 'today'),
-      getValue: (locale) => moment().locale(locale).toDate()
+      getValue: (locale) => dayjs().locale(locale).toDate()
     },
     {
       getLabel: (locale) => getMessage(locale, 'tomorrow'),
-      getValue: (locale) => moment().locale(locale).add(1, 'days').toDate()
+      getValue: (locale) => dayjs().locale(locale).add(1, 'days').toDate()
     }
   ]
 };
@@ -249,7 +230,7 @@ class DateInput extends Component {
 
     let { error, showPicker, showVariants } = this.state;
 
-    let momentCompatibleDateFormat = dateFormat.replace(/d/g, 'D').replace(/y/g, 'Y');
+    let dayjsCompatibleDateFormat = dateFormat.replace(/d/g, 'D').replace(/y/g, 'Y');
 
     let splittedProps = splitProps(restProps, Object.keys(DayPicker.propTypes));
     let dayPickerSpecificProps = splittedProps[1];
@@ -368,7 +349,7 @@ class DateInput extends Component {
       >
         <div className={`opuscapita_date-input__input-container`}>
           <DateInputField
-            dateFormat={momentCompatibleDateFormat}
+            dateFormat={dayjsCompatibleDateFormat}
             disabled={disabled}
             onBlur={this.handleBlur}
             onChange={this.handleDateChange}

src/client/components/DateInputField/DateInputField.react.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import moment from '../moment';
+import DateConverter from '@opuscapita/i18n/lib/converters/DateConverter';
+import dayjs from '../../dayjs';
 import './DateInputField.less';
 
 let propTypes = {
@@ -30,13 +31,13 @@ class DateInputField extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      inputValue: props.value ? moment(props.value.toISOString()).format(props.dateFormat) : ''
+      inputValue: props.value ? dayjs(props.value.toISOString()).format(props.dateFormat) : ''
     };
   }
 
   componentWillReceiveProps(nextProps) {
     if (this.props.value !== nextProps.value || this.props.dateFormat !== nextProps.dateFormat) {
-      let inputValue = nextProps.value ? moment(nextProps.value.toISOString()).format(nextProps.dateFormat) : '';
+      let inputValue = nextProps.value ? dayjs(nextProps.value.toISOString()).format(nextProps.dateFormat) : '';
       this.setState({ inputValue });
     }
   }
@@ -46,14 +47,14 @@ class DateInputField extends Component {
   };
 
   validate(dateString, dateFormat) {
-    let momentDate = moment(dateString, dateFormat, true);
-    let error = momentDate.isValid() ? null : momentDate.invalidAt();
-
-    if (error !== null && dateString.length) {
-      this.props.onError(error);
-    } else {
-      let value = !dateString.length ? null : momentDate.toDate();
+    const i18nCompatibleFormat = dateFormat.replace(/D/g, 'd').replace(/Y/g, 'y');
+    const dc = new DateConverter(i18nCompatibleFormat);
+    try {
+      const date = dc.stringToValue(dateString);
+      const value = !dateString.length ? null : date;
       this.props.onChange(value);
+    } catch (err) {
+      this.props.onError(err.message);
     }
   }
 

src/client/components/DatePicker/DatePicker.react.js

@@ -3,31 +3,13 @@ import React, { Component } from 'react';
 import './DatePicker.less';
 import DayPicker from '../DayPicker';
 import { spring, presets, Motion } from 'react-motion';
-import assign from 'lodash/assign';
 import isEqual from 'lodash/isEqual';
 import { Portal } from 'react-portal';
-import { getCoords } from '../utils/get-coords';
+import { getCoords, splitProps } from '../utils';
 
 let springPreset = presets.gentle;
 let easeOutCubic = (t) => (--t) * t * t + 1; // eslint-disable-line no-param-reassign
 
-function splitProps(props, specificPropNames = []) {
-  let result = Object.keys(props).reduce((result, propName) => {
-    let isPropSpecific = specificPropNames.indexOf(propName) >= 0;
-    if (isPropSpecific) {
-      let commonProps = assign({}, result[0]);
-      let specificProps = assign({}, result[1], { [propName]: props[propName] });
-      return [commonProps, specificProps];
-    }
-
-    let commonProps = assign({}, result[0], { [propName]: props[propName] });
-    let specificProps = assign({}, result[1]);
-    return [commonProps, specificProps];
-  }, [{}, {}]);
-
-  return result;
-}
-
 let propTypes = {
   className: PropTypes.string,
   disabled: PropTypes.bool,