Natively Pluggable Module

    @ecubelabs/storybook-addon-intl

    1.1.2 • Public • Published

    @ecubelabs/storybook-addon-intl

    storybook-addon-intl Example

    A simple Locale switching addon. It can be used with third-party components, libraries and addons.

    Getting started

    Install

    npm install @ecubelabs/storybook-addon-intl -D

    Configure

    Add the following to your .storybook/main.js:

    module.export = {
      addons: ['@ecubelabs/storybook-addon-intl'],
    };

    Apply

    src/.../your-global-layout.stories.tsx:

    export default {
      component: YourGlobalLayout,
      argTypes: {
        locale: { intl: 'locale' },
        dir: { intl: 'direction' },
      },
    };

    Use cases

    with react-intl

    .storybook/preview.ts:

    addDecorator((storyFn, argTypes) => {
        const { globals: { locale = 'en_US' } } = argTypes;
    
        return (
            <IntlProvider locale={locale} key={locale} messages={...}>
                {storyFn()}
            </IntlProvider>
        );
    });

    with react-helmet

    .storybook/preview.ts:

    addDecorator((storyFn, argTypes) => {
        const { globals: { locale = 'en_US', direction = 'ltr' } } = argTypes;
    
        return (
            <Helmet locale={locale} key={locale} messages={...}>
                <html lang={locale} dir={direction} />
                {storyFn()}
            </Helmet>
        );
    });

    Overrides

    Global overrides

    .storybook/preview.ts:

    export const parameters = {
      // Default: ['en', 'ko']
      localeOptions: ['en_US', 'ko_KR'],
    
      // Default: (locale: string) => ['ar', 'he'].includes(locale)
      // If `true` is returned, direction is injected as "rtl". Otherwise "ltr" is injected.
      directionResolver: (locale: string) => {
        const [lang] = locale.split('_');
        return ['ar', 'he'].includes(lang);
      },
    };

    Story-level overrides

    src/.../your-component.stories.tsx:

    export default {
      component: YourComponent,
      parameters: { intl: { locale: 'ko_KR' } },
    };

    Install

    npm i @ecubelabs/storybook-addon-intl

    DownloadsWeekly Downloads

    70

    Version

    1.1.2

    License

    ISC

    Unpacked Size

    503 kB

    Total Files

    13

    Last publish

    Collaborators

    • vin1124
    • ildukm
    • selenehyun