NPO-Accounting/houdini
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Extract the Intl decorator for storybook

Browse source
This commit is contained in:
Eric Schultz 2020-10-24 15:02:06 -05:00 committed by Eric Schultz
parent 9a02e56800
commit 57af3b92ea
2 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
.storybook/react/preview.js
View file

@ -1,14 +1,6 @@
import { addDecorator } from '@storybook/react'; // License: LGPL-3.0-or-later
import { withIntl, setIntlConfig } from '../../app/javascript/components/tests/intl'; import intlDecorate from '../../app/javascript/components/tests/intl';
const jest = require('jest-mock');
window.jest = jest;
const messages = { export const decorators = [intlDecorate()]
'en': { 'button.label': 'Click me!' },
}
setIntlConfig({
locales: ['en', 'de'],
defaultLocale: 'en',
// we use this form becuase it allows the story to be viewed in IE11
getMessages: function(locale) { return messages[locale]}
});
addDecorator(withIntl)

13
app/javascript/components/tests/intl/index.tsx
View file

@ -1,9 +1,12 @@
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
import React from 'react'; import React from 'react';
import addons from '@storybook/addons'; import addons from '@storybook/addons';
import omit from 'lodash/omit'; import omit from 'lodash/omit';
import { IntlProvider} from '../../intl'; import { IntlProvider} from '../../intl';
const messages = require('../../../i18n.js');
export let _config:any = null; export let _config:any = null;
const EVENT_SET_CONFIG_ID = "intl/set_config"; const EVENT_SET_CONFIG_ID = "intl/set_config";
@ -101,6 +104,16 @@ export const withIntl = (story:any):JSX.Element => {
); );
}; };
export default function decorate() {
setIntlConfig({
locales: Object.keys(messages.translations),
defaultLocale: messages.defaultLocale,
// we use this form becuase it allows the story to be viewed in IE11
getMessages: function(locale:string) { return {...messages.translations[messages.defaultLocale], ...messages.translations[locale]};},
});
return withIntl;
}