Storybook react-intl 插件

为 Storybook 添加 react-intl 支持。

所需版本

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

---

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，您将在工具栏中看到一个地球图标。

单击此地球图标将显示一个包含您定义的区域设置的下拉菜单。

切换区域设置将使用您在消息中定义的字符串。