Storybook next-intl 插件

简单易用的 next-intl Storybook 集成。

必需的对等依赖

• 2.x - Storybook - ^9.0.0

• 1.x - Storybook - ^8.2.0

• next-intl - ^3.0.0 || ^4.0.0

此 Storybook 插件假定您的项目已使用 next-intl 进行设置，并已正确配置和工作。

安装

将此插件作为开发依赖安装。

npm i -D storybook-next-intl

使用方法

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

main.ts

将此插件添加到您的 addons 数组中

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

---

next-intl.ts

在您的 .storybook 文件夹中创建一个名为 next-intl.ts 的文件（或您喜欢的任何名称）。

在此文件中，复制并粘贴以下代码，并进行您所需的修改（例如 messages 文件路径等）。

import en from '../src/messages/en.json';
import fr from '../src/messages/fr.json';
import ja from '../src/messages/ja.json';

const messagesByLocale: Record<string, any> = {en, fr, ja};

const nextIntl = {
  defaultLocale: 'en',
  messagesByLocale,
};

export default nextIntl;

您还可以包含其他选项，例如 formats、defaultTranslationValues、onError 和 getMessageFallback。

const nextIntl = {
  defaultLocale: 'en',
  messagesByLocale,
  formats: {/* your settings */},
  defaultTranslationValues: {/* your settings */},
  onError: (error) => console.error(error),
  getMessageFallback: ({namespace, key}) => `${namespace}.${key}`,
};

---

preview.ts

在您的 preview.ts 中，您需要将 locales 和 locale 添加到 initialGlobals 中，并将您从上面文件中导出的 nextIntl 添加到 parameters。

locales 是一个对象，其键是区域设置/语言的“id”，值是您希望在下拉菜单中显示的名称。

locale 是您希望的默认区域设置。

import nextIntl from './next-intl';

const preview: Preview = {
    initialGlobals: {
        locale: 'en',
        locales: {
            en: 'English',
            fr: 'Français',
            ja: '日本語',
        },
    },
    parameters: {
      nextIntl,
    },
};

export default preview;

您也可以使用完整的区域设置字符串作为键。这取决于您的 next-intl 配置。

import nextIntl from './next-intl';

const preview: Preview = {
    initialGlobals: {
        locale: 'en_US',
        locales: {
            en_US: 'English (US)',
            en_GB: 'English (GB)',
            fr_FR: 'Français',
            ja_JP: '日本語',
        },
    },
    parameters: {
      nextIntl,
    },
};

export default preview;

locales 对象的值也可以是一个对象，其键为 title、left 或 right。

如果您想在左侧或右侧包含表情符号旗帜或其他字符串，这将非常有用。

例如

import nextIntl from './next-intl';

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

export default preview;

或者像这样

import nextIntl from './next-intl';

const preview: Preview = {
    initialGlobals: {
        locale: 'en_US',
        locales: {
            en_US: {title: 'English', right: 'US'},
            en_GB: {title: 'English', right: 'GB'},
            fr_FR: {title: 'Français', right: 'FR'},
            ja_JP: {title: '日本語', right: 'JA'},
        },
    },
    parameters: {
      nextIntl,
    },
};

export default preview;

Story 参数区域设置

如果您希望某个 Story 使用特定的区域设置，请在该 Story 的 parameters 中进行设置。

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

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

请注意，这样做会将当前区域设置切换到参数中指定的区域设置，因此当您切换到没有参数的 Story 时，它将保持在上次选择的区域设置。

在上面的示例中，如果您查看日语 Story 然后点击返回默认 Story，区域设置将保持为 ja。

---

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

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

切换区域设置将使用您的区域设置 JSON 文件中定义的字符串。