Storybook-i18n

Storybook 中用於最佳實踐 i18n 擴充功能的函式庫

• 易於使用的地區設定配置
• 簡單的下拉選單
• 可連結 URL 的狀態，用於分享

版本

• 2.x 適用於 Storybook >=7.0.0
• 3.x 適用於 Storybook >=8.0.0
• 3.1.x 適用於 Storybook >=8.2.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 實作期望的任何格式。