ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-12-23 05:29:56 +05:30
Code Issues Packages Projects Releases Wiki Activity

Integrate storybook-addon-intl

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.storybook/addons.ts
View File

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

1
.storybook/decorators/index.tsx Normal file
View File

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

18
.storybook/storyDecorator.tsx
View File

@ -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 => (
<ContextProvider store={store} history={browserHistory}>
{story()}
</ContextProvider>
);
return (
<ContextProvider store={store} history={browserHistory}>
<IntlDecorator channel={channel}>{story()}</IntlDecorator>
</ContextProvider>
);
}) as DecoratorFunction<React.ReactElement>;

2
package.json
View File

@ -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
packages/app/services/i18n/i18n.ts
View File

@ -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
packages/app/services/i18n/index.ts
View File

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

9
yarn.lock
View File

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