React-i18next: example of using react-i18next with storybook?

[anthonyettinger]

Since I added react-i18next our storybook examples are completely broken.

How should we get i18next to work with storybook?

[jamuhl]

What issue you run into? Storybook is a regular webpack build.

Just use https://storybook.js.org/basics/writing-stories/#using-decorators to wrap the component into provider.

[jamuhl]

Made a sample: https://github.com/i18next/react-i18next/tree/master/example/storybook

[jamuhl]

closing for now...there is a working sample...if you could provide more info about your issue - please reopen this issue so we could get that to work properly for you...

[valerioleo]

working sample page is not available anymore. @jamuhl could you kindly check the url?
I'm trying to solve the same issue 👍

[jamuhl]

it's moved to the v9 samples folder -> not had yet time to update it to v10

https://github.com/i18next/react-i18next/tree/master/example/v9.x.x/storybook

[EdwardDrapkin]

I haven't been able to get the <Trans> component to work at all.

I've distilled my story into this, which I realize is a mess, but it still won't render correctly:

import { storiesOf } from '@storybook/react';
import i18n from 'i18next';
import * as LanguageDetector from 'i18next-browser-languagedetector'
import * as localStorageBackend from 'i18next-localstorage-backend'
import * as React from 'react';
import { I18nextProvider, initReactI18next, Trans } from 'react-i18next';

const count = 10;
const name = 'bob';

const story = storiesOf('Translation Test', module);
story.add('Test', () => {
    i18n
        .use(initReactI18next)
        .use(LanguageDetector)
        .use(localStorageBackend)
        .init({
            fallbackLng: "en",
            interpolation: {
                escapeValue: false,
            },
            keySeparator: ".",

            react: {
                wait: true,
            },
        })
        .catch(e => window.console.error("App failed to start", e));

    return (
        <I18nextProvider i18n={i18n}>
            <Trans i18nKey="userMessagesUnread" count={count}>
                Hello <strong>{{ name }}</strong>, you have {{ count }} unread message.
            </Trans>
        </I18nextProvider>
    );
});

Objects are not valid as a React child (found: object with keys {count}).

[jamuhl]

You can't have Trans as a direct successor of I18nextProvider -> it returns an array of children to render per default -> wrap it into a div

[EdwardDrapkin]

Changed it to:

return (
        <I18nextProvider i18n={i18n}>
            <div>
                <Trans i18nKey="userMessagesUnread" count={count}>
                    Hello <strong>{{ name }}</strong>.
                </Trans>
            </div>
        </I18nextProvider>
    );

And still no dice.

This is my storybook config if it matters:

import { library } from "@fortawesome/fontawesome-svg-core";
import { faTimes } from "@fortawesome/free-solid-svg-icons";
import { faQuestionCircle } from "@fortawesome/pro-light-svg-icons";
import centered from "@storybook/addon-centered/dist/react";
import { withInfo } from "@storybook/addon-info";
import { addDecorator, configure } from "@storybook/react";
import * as React from "react";
import { createGlobalStyle, ThemeProvider } from "styled-components";
import { theme } from "../../modules/common/src/theme/Default";

const GlobalStyles = createGlobalStyle`
  @font-face {
      font-family: 'Rijsel', sans-serif;
      src: local('Rijsel'),
      url('../assets/fonts/Rijsel-Regular.otf') format('opentype');
  }
  @font-face {
      font-family: 'Rijsel-Light', sans-serif;
      src: local('Rijsel-Light'),
      url('../assets/fonts/Rijsel-Light.otf') format('opentype');
  }
  @font-face {
      font-family: 'Open Sans', sans-serif;
      @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i');
  }
  body {
      font-family: 'Open Sans', sans-serif;
  }
  *:focus {
    outline: none;
  }
`;

function withGlobalStyles(storyFn) {
    return (
        <>
            <GlobalStyles/>
            <ThemeProvider theme={theme}>
                {storyFn()}
            </ThemeProvider>
        </>
    );
}

function runStories() {

    // add font awesome icons
    library.add(faTimes, faQuestionCircle);
    addDecorator(centered);
    addDecorator(withGlobalStyles);
    addDecorator(withInfo({
        styles: {
            infoBody: {
                fontFamily: "courier",
                fontSize: "12px",
            },
            infoTable: {
                display: "none",
            },
        },
    }));

    const req = require.context("../../modules/story/src", true, /\.story\.tsx$/);
    req.keys().forEach(f => req(f));
}

configure(runStories, module);

Thanks for your help.

[jamuhl]

@EdwardDrapkin not sure by just reading your snippets. But try to do it like https://github.com/i18next/react-i18next/blob/master/example/v9.x.x/storybook/stories/withI18nextProvider.js (Having i18n.js outside the story, the Provider as Decorator)

[zhhuan]

@EdwardDrapkin have you solved this issue? I met the same issue for Trans component