Storybook next-intl 插件

轻松集成 next-intl 到 Storybook。

必需的 Peer 依赖项

• storybook - ^8.2.0
• next-intl - ^3.0.0

此 Storybook 插件假设您的项目已使用 next-intl 设置，并且已正确配置并正常运行。

安装

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

npm i -D storybook-next-intl

使用

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

main.ts

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

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

---

next-intl.ts

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

在此文件中，复制并粘贴以下代码，并进行必要的修改（消息文件路径等）。

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 添加到参数。

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;

故事参数语言环境

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

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

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

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

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

---

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

单击此地球仪图标将显示一个包含您在 parameters 中定义的语言环境的下拉菜单。

切换语言环境将使用您在语言环境 json 文件中定义的字符串。