Storybook react-intl 插件

为 Storybook 添加 react-intl 支持。

所需版本

v4.x

• storybook - ^9.0.0
• react-intl - ^5.24.0 || ^6.0.0

v3.1.x

• storybook - ^8.2.0
• react-intl - ^5.24.0 || ^6.0.0

v3.0.x

• storybook - ^8.0.0
• react-intl - ^5.24.0 || ^6.0.0

此 Storybook 插件假定您的项目已设置并正确配置和使用了 react-intl。

安装

此插件应作为开发依赖项添加。

npm i -D storybook-react-intl

yarn add -D storybook-react-intl

如果您的项目中尚未安装 react-intl，则需要将其作为项目依赖项进行安装。

npm i -S react-intl

yarn add react-intl

用法

安装后，请按照以下步骤在 Storybook 中启用此插件。

main.ts

将此插件插入您的 addons 数组中

{
  addons: [
    // other addons...
    'storybook-react-intl',
  ]
}

---

reactIntl.ts

在您的 .storybook 文件夹中创建一个名为 reactIntl.ts（或您喜欢的任何名称）的文件。您将在此文件中设置 react-intl 配置。

在此文件中，复制并粘贴以下代码，并根据需要进行修改。

const locales = ['en', 'de'];

const messages = locales.reduce((acc, lang) => ({
  ...acc,
  [lang]: require(`../locale/${lang}.json`), // whatever the relative path to your messages json is
}), {});

const formats = {}; // optional, if you have any formats

export const reactIntl = {
  defaultLocale: 'en',
  locales,
  messages,
  formats,
  timeZone: 'America/New_York', // optional, specify a time zone
};

---

preview.ts

在您的 preview.ts 中，您需要将 locales 和 locale 添加到 initialGlobals（如果您未使用 storybook 8.2+，则添加到 globals），并将在上述文件中导出的 reactIntl 添加到参数中。

locales 是一个对象，其中键是语言环境/语言的“ID”，值是您希望在下拉列表中显示的名称。

locale 是默认语言环境，可以从 reactIntl 读取，或者如果您选择，也可以手动设置。

import {reactIntl} from './reactIntl';

const preview: Preview = {
    initialGlobals: {
        locale: reactIntl.defaultLocale,
        locales: {
            en: 'English',
            de: 'Deutsche',  
        },
    },
    parameters: {
        reactIntl,
    }
};

export default preview;

您还可以将语言环境设置为与 Storybook 兼容的对象，详见 storybook-i18n 插件（此插件是其中一部分）的文档。

import {reactIntl} from './reactIntl';

const preview: Preview = {
    initialGlobals: {
        locale: reactIntl.defaultLocale,
        locales: {
            en: {icon: '🇺🇸', title: 'English', right: 'EN'},
            fr: {icon: '🇫🇷', title: 'Français', right: 'FR'},
            ja: {icon: '🇯🇵', title: '日本語', right: 'JP'},
        },
    },
    parameters: {
        reactIntl,
    }
};

export default preview;

故事参数语言环境

如果您希望某个故事使用特定的语言环境，请在该故事的参数中进行设置。

export const Default: StoryObj = {
    render: () => <YourComponent/>,
};

export const Japanese: StoryObj = {
    parameters: {
        locale: 'ja',
    },
    render: () => <YourComponent/>,
};

请注意，这样做会将当前语言环境切换到参数指定的语言环境，因此当您切换到没有参数的故事时，它将保留在上次选定的语言环境。

在上面的示例中，如果您查看日语故事，然后点击返回默认故事，语言环境将保持为 ja。

---

完成这些步骤并启动 Storybook 后，您应该在工具栏中看到一个地球图标。

点击此地球图标将显示您定义的语言环境下拉列表。

切换语言环境将使用您在消息中定义的字符串。