mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-23 13:39:54 +05:30
Integrate storybook-addon-intl
This commit is contained in:
parent
dfa8c6df5f
commit
3608a53a95
@ -1,3 +1,4 @@
|
||||
import 'storybook-addon-intl/register';
|
||||
import '@storybook/addon-actions/register';
|
||||
import '@storybook/addon-links/register';
|
||||
import '@storybook/addon-viewport/register';
|
||||
|
41
.storybook/decorators/IntlDecorator.tsx
Normal file
41
.storybook/decorators/IntlDecorator.tsx
Normal 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;
|
1
.storybook/decorators/index.tsx
Normal file
1
.storybook/decorators/index.tsx
Normal file
@ -0,0 +1 @@
|
||||
export { default as IntlDecorator } from './IntlDecorator';
|
@ -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 => (
|
||||
return (
|
||||
<ContextProvider store={store} history={browserHistory}>
|
||||
{story()}
|
||||
<IntlDecorator channel={channel}>{story()}</IntlDecorator>
|
||||
</ContextProvider>
|
||||
);
|
||||
}) as DecoratorFunction<React.ReactElement>;
|
||||
|
@ -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",
|
||||
|
@ -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 []
|
||||
|
@ -1 +1,2 @@
|
||||
export * from './i18n';
|
||||
export { default } from './i18n';
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user