Storybook-i18n

一个用于 Storybook 中最佳实践 i18n 插件的库

• 易于使用的区域设置配置
• 简单的下拉菜单
• 可链接到 URL 的状态，用于分享

版本

• 2.x 版本适用于 Storybook >=7.0.0
• 3.x 版本适用于 Storybook >=8.0.0
• 3.1.x 版本适用于 Storybook >=8.2.0
• 4.x 版本适用于 Storybook >=9.0.0

插件作者

作为插件作者，您可以通过将其添加为依赖项并在 src/manager.ts 和 src/preview.ts 文件中添加以下内容来使用此库

src/manager.ts

export * from 'storybook-i18n/manager';

src/preview.ts

import type { Renderer, ProjectAnnotations } from '@storybook/types';
import i18n from 'storybook-i18n/preview';
import { withYourI18nDecorator } from './withYourDecorator';

// @ts-ignore
const i18nDecorators = i18n?.decorators || [];

const preview: ProjectAnnotations<Renderer> = {
    ...i18n,
    decorators: [...i18nDecorators, withYourI18nDecorator],
}

export default preview;

由于 Storybook 的一个问题（待解决），您需要在装饰器行上方使用 @ts-ignore。

当前选择的区域设置可在 locale 全局变量中获取，因此您可以在装饰器中使用以下代码片段访问它

import { MyProvider } from 'your-i18n-library';
import { useGlobals } from '@storybook/manager-api';

const myDecorator = (story, context) => {
  const [{locale}] = useGlobals();
  
  return <MyProvider locale={locale}>;
}

最终用户

最终用户在 .storybook/preview.ts 中配置 locales 和 locale 全局变量。

自 Storybook 8.2 起，您应使用 initialGlobals 代替 globals。

locales 是一个对象，其键是区域设置/语言的“ID”，值是您想要使用的该区域设置的纯文本名称。这将显示在工具栏的下拉菜单中。

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

用户也可以使用完整的区域设置字符串。

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

locales 对象的值也可以是一个包含 title、icon 和/或 right 键的对象。

如果您想在左侧和/或右侧包含表情符号旗帜或其他字符串，这会很有用。

例如

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

或者像这样

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: 'JP'},
        },
    },
};

当区域设置更改时，会在 addons-channel 上发出一个事件。

您可以在 preview.ts 中订阅此事件，以便自己配置与您的 i18n 配置相关的全局环境设置。

事件发出时将 选定的区域设置作为参数。

您的实现可能看起来像这样

import { addons } from '@storybook/preview-api'

addons.getChannel().on('LOCALE_CHANGED', (newLocale) => {
   changeMyI18nConfig(newLocale)
});

插件应指示他们使用您的 i18n 实现所需的任何格式。