Storybook I18n

警告！将审查和接受 PR，但此库已**弃用**，建议使用 Storybook 全局变量 和 Storybook 装饰器，使用方法如下

// .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 工具。

它可以接收任何自定义语言环境上下文提供程序并传递任何自定义属性。它甚至可以用于以ltr 和rtl 方式测试您的组件。

安装

npm i -D storybook-addon-i18n

简单用法

目前仅支持 React。欢迎随时提交 PR！

React

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

"storybook-addon-i18n/register"

2. 然后在您故事的配置或项目的全局配置 (preview.js) 中，将i18n 键添加到参数中

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

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

3. 最后，在您故事的配置或项目的全局配置 (preview.js) 中添加装饰器

• 全局配置 (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

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

• provider **必填** - 国际化提供程序，它为应用程序提供 intl 上下文
• providerProps - 您需要传递给 Provider 的所有属性，除了语言环境
• supportedLocales **必填** - 应用程序支持的语言环境键数组
• providerLocaleKey（默认为locale） - 库用来将活动语言环境传递给提供程序的属性名称
• providerDirectionKey（默认为direction） - 库用来将活动方向 (rtl 或 ltr) 传递给提供程序的属性名称
• getDirection - 函数，它接受语言环境作为参数，并应返回rtl 或 ltr。默认情况下，它为he 和ar 语言环境返回rtl

复杂用法

Material-UI

如果您使用的是 Material-UI，则也需要在 Storybook 中测试jss-rtl。问题在于您需要将 Storybook 包裹在ThemeProvider 中，该组件应接收具有正确方向的theme。

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

为了实现此任务，应创建一个公共提供程序，该提供程序在 Storybook 和主应用程序包中使用。这是一个示例

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>
    );
  }
}

然后，此提供程序可以在 Storybook 配置中使用

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

react-i18next

目前，react-i18next 不支持除i18n 之外的其他属性，如locale。如果您想使用 i18n Storybook 插件，则需要使用useEffect 钩子将I18nProvider 包裹起来。

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

此 Provider 包装器应在 Storybook 装饰器参数中接受providerLocaleKey 作为属性。如果与providerLocaleKey 对应的属性值发生更改，我们可以以编程方式更改语言。

然后，此提供程序可以在 Storybook 配置中使用

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