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. 然後在您 story 的組態或專案的全域組態 (preview.js) 中，將 i18n 鍵新增至參數

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

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

3. 最後，在您 story 的組態或專案的全域組態 (preview.js) 中新增裝飾器

• 全域組態 (preview.js)

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

addDecorator(withI18n);

• story 的組態

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 樣板專案中查看整合範例。

為了完成此任務，應建立一個通用的 Provider，該 Provider 會在 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 組態中使用這個 Provider

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

react-i18next

目前，react-i18next 不支援 i18n 以外的其他屬性，例如 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 裝飾器參數中接受 providerLocaleKey 作為屬性。如果與 providerLocaleKey 對應的屬性值已變更，我們可以以程式設計方式變更語言。

然後可以在 Storybook 組態中使用這個 Provider

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