From 3608a53a957570d282b8abd542d657057a7e17e8 Mon Sep 17 00:00:00 2001 From: SleepWalker Date: Mon, 20 Jan 2020 09:51:37 +0200 Subject: [PATCH 1/2] Integrate storybook-addon-intl --- .storybook/addons.ts | 1 + .storybook/decorators/IntlDecorator.tsx | 41 +++++++++++++++++++++++++ .storybook/decorators/index.tsx | 1 + .storybook/storyDecorator.tsx | 18 +++++++---- package.json | 2 ++ packages/app/services/i18n/i18n.ts | 4 +-- packages/app/services/i18n/index.ts | 1 + yarn.lock | 9 +++++- 8 files changed, 68 insertions(+), 9 deletions(-) create mode 100644 .storybook/decorators/IntlDecorator.tsx create mode 100644 .storybook/decorators/index.tsx diff --git a/.storybook/addons.ts b/.storybook/addons.ts index 9e1b457..84d567c 100644 --- a/.storybook/addons.ts +++ b/.storybook/addons.ts @@ -1,3 +1,4 @@ +import 'storybook-addon-intl/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; import '@storybook/addon-viewport/register'; diff --git a/.storybook/decorators/IntlDecorator.tsx b/.storybook/decorators/IntlDecorator.tsx new file mode 100644 index 0000000..f79b855 --- /dev/null +++ b/.storybook/decorators/IntlDecorator.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { useDispatch } from 'react-redux'; +import { Channel } from '@storybook/channels'; +import { setIntlConfig } from 'storybook-addon-intl'; +import { + EVENT_SET_LOCALE_ID, + EVENT_GET_LOCALE_ID, +} from 'storybook-addon-intl/dist/shared'; +import { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE } from 'app/services/i18n'; +import { setLocale } from 'app/components/i18n/actions'; + +setIntlConfig({ + locales: SUPPORTED_LANGUAGES, + defaultLocale: DEFAULT_LANGUAGE, +}); + +const IntlDecorator: React.ComponentType<{ + channel: Channel; +}> = ({ channel, children }) => { + const dispatch = useDispatch(); + + React.useEffect(() => { + const onLocaleChange = (locale: string) => { + dispatch(setLocale(locale)); + }; + + // Listen for change of locale + channel.on(EVENT_SET_LOCALE_ID, onLocaleChange); + + // Request the current locale + channel.emit(EVENT_GET_LOCALE_ID); + + return () => { + channel.removeListener(EVENT_SET_LOCALE_ID, onLocaleChange); + }; + }, [channel]); + + return children as React.ReactElement; +}; + +export default IntlDecorator; diff --git a/.storybook/decorators/index.tsx b/.storybook/decorators/index.tsx new file mode 100644 index 0000000..a70672d --- /dev/null +++ b/.storybook/decorators/index.tsx @@ -0,0 +1 @@ +export { default as IntlDecorator } from './IntlDecorator'; diff --git a/.storybook/storyDecorator.tsx b/.storybook/storyDecorator.tsx index 7b126a4..5158493 100644 --- a/.storybook/storyDecorator.tsx +++ b/.storybook/storyDecorator.tsx @@ -1,14 +1,20 @@ import React from 'react'; +import addons, { DecoratorFunction } from '@storybook/addons'; import { ContextProvider } from 'app/shell'; import { browserHistory } from 'app/services/history'; import storeFactory from 'app/storeFactory'; +import 'app/index.scss'; + +import { IntlDecorator } from './decorators'; const store = storeFactory(); -import 'app/index.scss'; +export default (story => { + const channel = addons.getChannel(); -export default story => ( - - {story()} - -); + return ( + + {story()} + + ); +}) as DecoratorFunction; diff --git a/package.json b/package.json index 28243a4..10e15d9 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "dependencies": { "react": "^16.12.0", "react-dom": "^16.12.0", + "react-intl": "^3.11.0", "regenerator-runtime": "^0.13.3" }, "devDependencies": { @@ -162,6 +163,7 @@ "sinon": "^8.0.4", "sitemap-webpack-plugin": "^0.6.0", "speed-measure-webpack-plugin": "^1.3.1", + "storybook-addon-intl": "^2.4.1", "style-loader": "~1.1.2", "typescript": "^3.7.4", "unexpected": "^11.12.1", diff --git a/packages/app/services/i18n/i18n.ts b/packages/app/services/i18n/i18n.ts index ce36099..35cc3c1 100644 --- a/packages/app/services/i18n/i18n.ts +++ b/packages/app/services/i18n/i18n.ts @@ -4,8 +4,8 @@ import locales from 'app/i18n'; import intlPolyfill from './intlPolyfill'; -const SUPPORTED_LANGUAGES = Object.keys(locales); -const DEFAULT_LANGUAGE = 'en'; +export const SUPPORTED_LANGUAGES = Object.keys(locales); +export const DEFAULT_LANGUAGE = 'en'; function getBrowserPreferredLanguages(): string[] { return [] diff --git a/packages/app/services/i18n/index.ts b/packages/app/services/i18n/index.ts index 25ec0f5..0258081 100644 --- a/packages/app/services/i18n/index.ts +++ b/packages/app/services/i18n/index.ts @@ -1 +1,2 @@ +export * from './i18n'; export { default } from './i18n'; diff --git a/yarn.lock b/yarn.lock index 4f8628c..41509ec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11805,7 +11805,7 @@ prop-types-exact@^1.2.0: object.assign "^4.1.0" reflect.ownkeys "^0.2.0" -prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -13619,6 +13619,13 @@ store2@^2.7.1: resolved "https://registry.yarnpkg.com/store2/-/store2-2.10.0.tgz#46b82bb91878daf1b0d56dec2f1d41e54d5103cf" integrity sha512-tWEpK0snS2RPUq1i3R6OahfJNjWCQYNxq0+by1amCSuw0mXtymJpzmZIeYpA1UAa+7B0grCpNYIbDcd7AgTbFg== +storybook-addon-intl@^2.4.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/storybook-addon-intl/-/storybook-addon-intl-2.4.1.tgz#870d990defde87615e490aa4ca18abec3ac19f2c" + integrity sha512-07CofbUQcx8axTWd2/x0CNyaNJzRFW+/idHg2W3fnimy9w56A088kJwQzefjVFVSJELFDL2kjG19pP3MJ2A0ng== + dependencies: + prop-types "^15.5.0" + storybook-chromatic@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/storybook-chromatic/-/storybook-chromatic-2.2.2.tgz#eade5178f334d6dd173dbe980c902ae90e727cb0" From d98dee018a3be4cd5f7862967f5fc22ce590b8d1 Mon Sep 17 00:00:00 2001 From: SleepWalker Date: Mon, 20 Jan 2020 12:47:28 +0200 Subject: [PATCH 2/2] Fix issue with Intl polyfill and RegExp caching --- packages/app/services/i18n/intlPolyfill.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/app/services/i18n/intlPolyfill.ts b/packages/app/services/i18n/intlPolyfill.ts index 4537c16..718ea41 100644 --- a/packages/app/services/i18n/intlPolyfill.ts +++ b/packages/app/services/i18n/intlPolyfill.ts @@ -55,6 +55,11 @@ async function polyfillIntl(locale: string): Promise { 'intl' ); + // resolve issue with RegExp errors + // @see https://github.com/mattlewis92/angular-calendar/issues/274 + // @see https://github.com/mattlewis92/angular-calendar/issues/274 + Intl.__disableRegExpRestore(); + window.Intl = Intl; // MUST be loaded in series with the main polyfill