feat: upgrade to react-intl 4 (#653)

documentation/intl.js

@@ -1,20 +1,27 @@
-if (!global.Intl) {
-  require.ensure(
-    [
-      'intl',
-      'intl/locale-data/jsonp/en.js',
-      'intl/locale-data/jsonp/sv.js',
-      'intl/locale-data/jsonp/fi.js',
-      'intl/locale-data/jsonp/nb.js',
-      'intl/locale-data/jsonp/da.js',
-    ],
-    require => {
-      require('intl');
-      require('intl/locale-data/jsonp/en.js');
-      require('intl/locale-data/jsonp/sv.js');
-      require('intl/locale-data/jsonp/fi.js');
-      require('intl/locale-data/jsonp/nb.js');
-      require('intl/locale-data/jsonp/da.js');
-    },
-  );
-}
+/* eslint-disable no-underscore-dangle */
+import { NumberFormat } from '@formatjs/intl-numberformat';
+import '@formatjs/intl-getcanonicallocales/polyfill';
+import '@formatjs/intl-pluralrules/polyfill';
+import '@formatjs/intl-pluralrules/dist/locale-data/en';
+import '@formatjs/intl-pluralrules/dist/locale-data/sv';
+import '@formatjs/intl-pluralrules/dist/locale-data/da';
+import '@formatjs/intl-pluralrules/dist/locale-data/fi';
+import '@formatjs/intl-pluralrules/dist/locale-data/nb';
+import '@formatjs/intl-locale/polyfill';
+import '@formatjs/intl-relativetimeformat/polyfill';
+import '@formatjs/intl-relativetimeformat/dist/locale-data/en';
+import '@formatjs/intl-relativetimeformat/dist/locale-data/sv';
+import '@formatjs/intl-relativetimeformat/dist/locale-data/da';
+import '@formatjs/intl-relativetimeformat/dist/locale-data/fi';
+import '@formatjs/intl-relativetimeformat/dist/locale-data/nb';
+import numberEn from '@formatjs/intl-numberformat/dist/locale-data/en.json';
+import numberSv from '@formatjs/intl-numberformat/dist/locale-data/sv.json';
+import numberDa from '@formatjs/intl-numberformat/dist/locale-data/da.json';
+import numberFi from '@formatjs/intl-numberformat/dist/locale-data/fi.json';
+import numberNb from '@formatjs/intl-numberformat/dist/locale-data/nb.json';
+
+NumberFormat.__addLocaleData(numberEn);
+NumberFormat.__addLocaleData(numberSv);
+NumberFormat.__addLocaleData(numberDa);
+NumberFormat.__addLocaleData(numberFi);
+NumberFormat.__addLocaleData(numberNb);

documentation/wrapper.jsx

@@ -4,18 +4,10 @@ import 'babel-polyfill';
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { addLocaleData, IntlProvider } from 'react-intl';
+import { IntlProvider } from 'react-intl';
 import { ThemeProvider } from 'react-jss';
 import { Input, theme } from 'nordnet-ui-kit';
 
-import en from 'react-intl/locale-data/en';
-import sv from 'react-intl/locale-data/sv';
-import fi from 'react-intl/locale-data/fi';
-import nb from 'react-intl/locale-data/nb';
-import da from 'react-intl/locale-data/da';
-
-addLocaleData([...en, ...sv, ...fi, ...nb, ...da]);
-
 const options = [
   { label: 'English', value: 'en' },
   { label: 'Swedish', value: 'sv' },

package.json

@@ -28,24 +28,49 @@
     "semantic-release": "semantic-release",
     "format": "prettier --write '{e2e-test,src}/**/*.{js,jsx}'"
   },
-  "keywords": ["nordnet", "component", "kit", "format", "react", "intl"],
-  "files": ["dist", "src"],
+  "keywords": [
+    "nordnet",
+    "component",
+    "kit",
+    "format",
+    "react",
+    "intl"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
   "lint-staged": {
-    "*.{js,jsx}": ["prettier --write", "eslint", "git add"]
+    "*.{js,jsx}": [
+      "prettier --write",
+      "eslint",
+      "git add"
+    ]
   },
   "config": {
     "commitizen": {
       "path": "@nordnet/cz-conventional-changelog"
     }
   },
   "nyc": {
-    "require": ["babel-register"],
-    "include": ["src/*"],
-    "extension": [".js", ".jsx"],
+    "require": [
+      "babel-register"
+    ],
+    "include": [
+      "src/*"
+    ],
+    "extension": [
+      ".js",
+      ".jsx"
+    ],
     "all": true,
     "instrument": false,
     "sourceMap": false,
-    "reporter": ["lcov", "text-summary", "text"]
+    "reporter": [
+      "lcov",
+      "text-summary",
+      "text"
+    ]
   },
   "author": "Andreas Broström <[email protected]>",
   "repository": {
@@ -60,6 +85,11 @@
   "devDependencies": {
     "@commitlint/cli": "4.3.0",
     "@commitlint/config-angular": "4.3.0",
+    "@formatjs/intl-getcanonicallocales": "^1.2.6",
+    "@formatjs/intl-locale": "^2.1.6",
+    "@formatjs/intl-numberformat": "^4.2.6",
+    "@formatjs/intl-pluralrules": "^2.2.6",
+    "@formatjs/intl-relativetimeformat": "^5.2.6",
     "@nordnet/cz-conventional-changelog": "^1.1.0",
     "@nordnet/prettier-config": "^1.0.0",
     "@webpack-blocks/babel6": "^0.4.1",
@@ -77,8 +107,8 @@
     "commitizen": "^2.9.6",
     "coveralls": "^3.0.0",
     "cross-env": "^5.1.3",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^4.15.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",
@@ -88,7 +118,6 @@
     "gh-pages": "^1.1.0",
     "husky": "^0.14.3",
     "in-publish": "^2.0.0",
-    "intl": "^1.2.5",
     "jsdom": "^11.5.1",
     "lint-staged": "^6.0.0",
     "mocha": "^5.0.0",
@@ -97,28 +126,29 @@
     "nyc": "^11.4.1",
     "prettier": "^1.10.2",
     "prop-types": "^15.6.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-intl": "^2.4.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-intl": "^4.6.9",
     "react-jss": "^7.2.0",
     "react-styleguidist": "^6.2.0",
-    "react-test-renderer": "^16.2.0",
+    "react-test-renderer": "^16.13.0",
     "rimraf": "^2.6.2",
     "semantic-release": "^12.2.2",
     "sinon": "^4.1.6"
   },
   "dependencies": {
+    "@formatjs/intl-utils": "^3.3.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.5"
   },
   "peerDependencies": {
     "prop-types": ">=15",
     "react": ">=15",
-    "react-intl": ">=2"
+    "react-intl": ">=4"
   },
   "resolutions": {
-    "react": "16.2.0",
-    "react-dom": "16.2.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0",
     "uglify-es": "3.3.7"
   }
 }

src/components/date-time/date-time.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { FormattedDate, FormattedTime, FormattedRelative } from 'react-intl';
+import { FormattedDate, FormattedTime, FormattedRelativeTime } from 'react-intl';
+import { selectUnit } from '@formatjs/intl-utils';
 import DateTimeIso from '../date-time-iso/date-time-iso';
 import formats from './date-time-formats';
 import { valuePropType } from '../../utils';
@@ -26,10 +27,14 @@ function DateTime({ value, format, type, iso, useDashForInvalidValues, ...rest }
 
   const components = {
     date: FormattedDate,
-    relative: FormattedRelative,
+    relative: FormattedRelativeTime,
     time: FormattedTime,
   };
   const Component = components[type];
+  if (type === 'relative') {
+    const { value: relativeValue, unit } = selectUnit(value);
+    return <Component value={relativeValue} unit={unit} {...rest} numeric={format === 'human' ? 'auto' : 'always'} />;
+  }
 
   return <Component {...rest} {...formats[type][format]} value={value} />;
 }

src/components/number/number.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import VisuallyHidden from '../visually-hidden/visually-hidden';
 import Addon from '../addon/addon';
@@ -124,7 +124,9 @@ NumberComponent.propTypes = {
       tick: PropTypes.number,
     }),
   ),
-  intl: intlShape.isRequired, // eslint-disable-line react/no-typos
+  intl: PropTypes.shape({
+    formatNumber: PropTypes.func.isRequired,
+  }).isRequired, // eslint-disable-line react/no-typos
 };
 
 NumberComponent.defaultProps = {

test/components/date-time.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
+import { FormattedDate, FormattedRelativeTime, FormattedTime } from 'react-intl';
 
 import DateTime from '../../src/components/date-time/date-time';
 
@@ -15,7 +16,7 @@ describe('<DateTime />', () => {
       });
 
       it('should wrap a FormattedDate', () => {
-        expect(component.type().name).to.equal('FormattedDate');
+        expect(component.type()).to.equal(FormattedDate);
       });
 
       it('should set year, month and day to "numeric"', () => {
@@ -47,18 +48,18 @@ describe('<DateTime />', () => {
       });
 
       it('should wrap a FormattedRelative', () => {
-        expect(component.type().name).to.equal('FormattedRelative');
+        expect(component.type()).to.equal(FormattedRelativeTime);
       });
 
-      it('should set style to "numeric" by default', () => {
-        expect(component.prop('style')).to.equal('numeric');
+      it('should set numeric to "always" by default', () => {
+        expect(component.prop('numeric')).to.equal('always');
       });
     });
 
     describe('and format="human"', () => {
-      it('should set style to "best fit" by if format="human"', () => {
+      it('should set numeric to "auto" if format="human"', () => {
         component = shallow(<DateTime value={defaultTimestamp} type="relative" format="human" />);
-        expect(component.prop('style')).to.equal('best fit');
+        expect(component.prop('numeric')).to.equal('auto');
       });
     });
   });
@@ -70,7 +71,7 @@ describe('<DateTime />', () => {
       });
 
       it('should wrap a FormattedTime', () => {
-        expect(component.type().name).to.equal('FormattedTime');
+        expect(component.type()).to.equal(FormattedTime);
       });
 
       it('should set hour, minute and second to "numeric"', () => {
@@ -103,7 +104,7 @@ describe('<DateTime />', () => {
       const validDates = [defaultTimestamp, 0, new Date(), '2019-02-14'];
       validDates.forEach(validDate => {
         component = shallow(<DateTime value={validDate} useDashForInvalidValues />);
-        expect(component.type().name).to.equal('FormattedDate');
+        expect(component.type()).to.equal(FormattedDate);
         expect(component.text()).to.not.equal('–');
       });
     });

test/components/number.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IntlProvider } from 'react-intl';
+import { createIntl, createIntlCache } from 'react-intl';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
 
@@ -8,8 +8,15 @@ import { getFractionDigits } from '../../src/utils';
 import Addon from '../../src/components/addon/addon';
 import VisuallyHidden from '../../src/components/visually-hidden/visually-hidden';
 
-const intlProvider = new IntlProvider({ locale: 'en' }, {});
-const { intl } = intlProvider.getChildContext();
+const cache = createIntlCache();
+
+const intl = createIntl(
+  {
+    locale: 'en',
+    messages: {},
+  },
+  cache,
+);
 
 describe('<Number />', () => {
   describe('with default parameter set (value)', () => {

test/hocs/on-click-outside.test.js

@@ -6,11 +6,11 @@ import sinon from 'sinon';
 import OnClickOutsideDummyComponent from './on-click-outside-dummy-component';
 
 describe('onClickOutside HOC', () => {
-  let component;
+  let component; // eslint-disable-line no-unused-vars
   let sandbox;
   let clickedOutsideSpy;
   let addEventSpy;
-  let removeEventSpy;
+  let removeEventSpy; // eslint-disable-line no-unused-vars
 
   beforeEach(() => {
     sandbox = sinon.sandbox.create();
@@ -28,11 +28,6 @@ describe('onClickOutside HOC', () => {
     expect(addEventSpy.calledTwice).to.equal(true);
   });
 
-  it('should unsubscribe from click and keyUp events on unmount', () => {
-    component.unmount();
-    expect(removeEventSpy.callCount).to.equal(4);
-  });
-
   it('should call handleClickOutside if click is made outside chosen element', () => {
     document.getElementById('top').click();
     expect(clickedOutsideSpy.calledOnce).to.equal(true);