Skip to content

Commit

Permalink
feat: upgrade to react-intl 4 (#653)
Browse files Browse the repository at this point in the history
  • Loading branch information
@robineng
robineng committed Jun 16, 2020
1 parent 171c946 commit 55738de
Show file tree
Hide file tree
Showing 9 changed files with 630 additions and 198 deletions.
47 changes: 27 additions & 20 deletions documentation/intl.js
View file
@@ -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);
10 changes: 1 addition & 9 deletions documentation/wrapper.jsx
View file
Expand Up @@ -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' },
Expand Down
64 changes: 47 additions & 17 deletions package.json
View file
Expand Up @@ -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 <andreas.brostrom@nordnet.se>",
"repository": {
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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"
}
}
9 changes: 7 additions & 2 deletions src/components/date-time/date-time.jsx
View file
@@ -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';
Expand All @@ -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} />;
}
Expand Down
6 changes: 4 additions & 2 deletions src/components/number/number.jsx
View file
@@ -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';
Expand Down Expand Up @@ -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 = {
Expand Down
17 changes: 9 additions & 8 deletions test/components/date-time.test.js
View file
@@ -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';

Expand All @@ -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"', () => {
Expand Down Expand Up @@ -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');
});
});
});
Expand All @@ -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"', () => {
Expand Down Expand Up @@ -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('–');
});
});
Expand Down
13 changes: 10 additions & 3 deletions test/components/number.test.js
View file
@@ -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';

Expand All @@ -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)', () => {
Expand Down
9 changes: 2 additions & 7 deletions test/hocs/on-click-outside.test.js
View file
Expand Up @@ -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();
Expand All @@ -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);
Expand Down

0 comments on commit 55738de

Please sign in to comment.