Storybook I18n

警告！PR 将被审查和接受，但此库已被弃用，推荐使用 Storybook Globals 和 Storybook Decorators，其使用方式如下：

// .storybook/preview.js

export const globalTypes = {
  locale: {
    name: 'Locale',
    description: 'Internationalization locale',
    defaultValue: 'en',
    toolbar: {
      icon: 'globe',
      items: [
        { value: 'en', right: '🇺🇸', title: 'English' },
        { value: 'fr', right: '🇫🇷', title: 'Français' },
        { value: 'es', right: '🇪🇸', title: 'Español' },
        { value: 'zh', right: '🇨🇳', title: '中文' },
        { value: 'kr', right: '🇰🇷', title: '한국어' },
      ],
    },
  },
};

export const decorators = [
  (Story, { globals }) => (
    <YourI18nProvider locale={globals.locale} translations={translations}">
      <Story />
    </YourI18nProvider>
  ),
];

Storybook I18n 插件可用于在 Storybook 预览中更改组件的区域设置。

I18n 插件外观如下：

此插件与库无关，不依赖于您在应用程序中使用的任何特定 i18n 工具。

它可以接受任何自定义区域设置上下文提供者并传递任何自定义 props。甚至可用于测试组件的 ltr 和 rtl 布局。

安装

npm i -D storybook-addon-i18n

简单用法

目前仅支持 React。PR 总是受欢迎的！

React

1. 将其添加到 .storybook/main.js 中的 addons 数组

"storybook-addon-i18n/register"

2. 然后，在您的故事配置或项目的全局配置（preview.js）中，将 i18n 键添加到 parameters

import { addParameters } from "@storybook/react";

addParameters({
  i18n: {
    provider: LionessProvider,
    providerProps: {
      messages,
    },
    supportedLocales: ["en", "ru"],
    providerLocaleKey: "locale",
  },
});

3. 最后，在您的故事配置或项目的全局配置（preview.js）中添加 decorator

• 全局配置（preview.js）

import { addDecorator } from "@storybook/react";
import { withI18n } from "storybook-addon-i18n";

addDecorator(withI18n);

• 故事配置

import { storiesOf } from "@storybook/react";
import { withI18n } from "storybook-addon-i18n";

storiesOf("Button", module).addDecorator(withI18n);

API

库接受以下参数，这些参数作为 storybook 参数在 i18n 键下传递

• provider 必需 - 一个国际化提供者，为应用程序提供 intl 上下文
• providerProps - 您需要传递给 Provider 的所有 props，区域设置除外
• supportedLocales 必需 - 您的应用程序支持的区域设置键数组
• providerLocaleKey（默认为 locale）- 库用于将活动区域设置传递给 provider 的 prop 名称
• providerDirectionKey（默认为 direction）- 库用于将活动方向（rtl 或 ltr）传递给 provider 的方向键的 prop 名称
• getDirection - 函数，接受区域设置作为参数，应返回 rtl 或 ltr。默认情况下，对于 he 和 ar 区域设置返回 rtl

复杂用法

Material-UI

如果您正在使用 Material-UI，您还需要在您的 storybook 中测试 jss-rtl。问题是您需要使用 ThemeProvider 包装您的 storybook，它应该接收具有正确方向的 theme。

您可以在我的 React 样板项目中查看集成示例。

为了完成这项任务，应创建一个通用的 Provider，它既用于 Storybook 也用于主应用程序 bundle。示例如下：

export class MuiLocaleProvider extends React.PureComponent<WithLocale> {
  public render() {
    const { locale, direction } = this.props;
    return (
      <LionessProvider locale={locale} messages={messages}>
        <MuiThemeProvider theme={createTheme(direction)}>
          <JssProvider {...jss}>
            <React.Fragment>
              <CssBaseline />
              {this.props.children}
            </React.Fragment>
          </JssProvider>
        </MuiThemeProvider>
      </LionessProvider>
    );
  }
}

然后这个 provider 可以在 storybook 配置中使用

addParameters({
  i18n: {
    provider: MuiLocaleProvider,
    providerProps: {
      messages,
    },
    supportedLocales,
  },
});

react-i18next

目前，react-i18next 不支持 i18n 之外的其他 props，例如 locale。如果您想使用 i18n storybook 插件，需要使用 useEffect hook 包装 I18nProvider。

export function I18nProviderWrapper({ children, i18n, locale }) {
  React.useEffect(() => {
    i18n.changeLanguage(locale);
  }, [i18n, locale]);
  return <I18nProvider i18n={i18n}>{children}</I18nProvider>;
}

这个 Provider 包装器应该在 storybook decorator 参数中接受 providerLocaleKey 作为 props。如果对应于 providerLocaleKey 的 props 值发生变化，我们可以通过编程方式更改语言。

然后这个 provider 可以在 storybook 配置中使用

addParameters({
  i18n: {
    provider: I18nProviderWrapper,
    providerProps: {
      i18n,
    },
    supportedLocales,
  },
});