Integrate storybook-addon-intl

This commit is contained in:
SleepWalker 2020-01-20 09:51:37 +02:00
parent dfa8c6df5f
commit 3608a53a95
8 changed files with 68 additions and 9 deletions

View File

@ -1,3 +1,4 @@
import 'storybook-addon-intl/register';
import '@storybook/addon-actions/register'; import '@storybook/addon-actions/register';
import '@storybook/addon-links/register'; import '@storybook/addon-links/register';
import '@storybook/addon-viewport/register'; import '@storybook/addon-viewport/register';

View File

@ -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;

View File

@ -0,0 +1 @@
export { default as IntlDecorator } from './IntlDecorator';

View File

@ -1,14 +1,20 @@
import React from 'react'; import React from 'react';
import addons, { DecoratorFunction } from '@storybook/addons';
import { ContextProvider } from 'app/shell'; import { ContextProvider } from 'app/shell';
import { browserHistory } from 'app/services/history'; import { browserHistory } from 'app/services/history';
import storeFactory from 'app/storeFactory'; import storeFactory from 'app/storeFactory';
import 'app/index.scss';
import { IntlDecorator } from './decorators';
const store = storeFactory(); const store = storeFactory();
import 'app/index.scss'; export default (story => {
const channel = addons.getChannel();
export default story => ( return (
<ContextProvider store={store} history={browserHistory}> <ContextProvider store={store} history={browserHistory}>
{story()} <IntlDecorator channel={channel}>{story()}</IntlDecorator>
</ContextProvider> </ContextProvider>
); );
}) as DecoratorFunction<React.ReactElement>;

View File

@ -92,6 +92,7 @@
"dependencies": { "dependencies": {
"react": "^16.12.0", "react": "^16.12.0",
"react-dom": "^16.12.0", "react-dom": "^16.12.0",
"react-intl": "^3.11.0",
"regenerator-runtime": "^0.13.3" "regenerator-runtime": "^0.13.3"
}, },
"devDependencies": { "devDependencies": {
@ -162,6 +163,7 @@
"sinon": "^8.0.4", "sinon": "^8.0.4",
"sitemap-webpack-plugin": "^0.6.0", "sitemap-webpack-plugin": "^0.6.0",
"speed-measure-webpack-plugin": "^1.3.1", "speed-measure-webpack-plugin": "^1.3.1",
"storybook-addon-intl": "^2.4.1",
"style-loader": "~1.1.2", "style-loader": "~1.1.2",
"typescript": "^3.7.4", "typescript": "^3.7.4",
"unexpected": "^11.12.1", "unexpected": "^11.12.1",

View File

@ -4,8 +4,8 @@ import locales from 'app/i18n';
import intlPolyfill from './intlPolyfill'; import intlPolyfill from './intlPolyfill';
const SUPPORTED_LANGUAGES = Object.keys(locales); export const SUPPORTED_LANGUAGES = Object.keys(locales);
const DEFAULT_LANGUAGE = 'en'; export const DEFAULT_LANGUAGE = 'en';
function getBrowserPreferredLanguages(): string[] { function getBrowserPreferredLanguages(): string[] {
return [] return []

View File

@ -1 +1,2 @@
export * from './i18n';
export { default } from './i18n'; export { default } from './i18n';

View File

@ -11805,7 +11805,7 @@ prop-types-exact@^1.2.0:
object.assign "^4.1.0" object.assign "^4.1.0"
reflect.ownkeys "^0.2.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" version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== 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" resolved "https://registry.yarnpkg.com/store2/-/store2-2.10.0.tgz#46b82bb91878daf1b0d56dec2f1d41e54d5103cf"
integrity sha512-tWEpK0snS2RPUq1i3R6OahfJNjWCQYNxq0+by1amCSuw0mXtymJpzmZIeYpA1UAa+7B0grCpNYIbDcd7AgTbFg== 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: storybook-chromatic@^2.2.2:
version "2.2.2" version "2.2.2"
resolved "https://registry.yarnpkg.com/storybook-chromatic/-/storybook-chromatic-2.2.2.tgz#eade5178f334d6dd173dbe980c902ae90e727cb0" resolved "https://registry.yarnpkg.com/storybook-chromatic/-/storybook-chromatic-2.2.2.tgz#eade5178f334d6dd173dbe980c902ae90e727cb0"