Storybook react-i18next 擴充功能

簡易的 react-i18next Storybook 整合。

必要的對等依賴

• storybook - ^8.2.0
• i18next - ^22.0.0 || ^23.0.0
• i18next-browser-languagedetector - ^7.0.0 || ^8.0.0
• i18next-http-backend: ^2.0.0
• react-i18next - ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0

此 Storybook 擴充功能假設您的專案已設定 i18next 和 react-i18next，並已安裝所有必要的套件，且設定正確並可運作。

安裝

將此擴充功能安裝為開發依賴。

npm i -D storybook-react-i18next

如果尚未安裝，您需要將 i18next 和 react-i18next 安裝為專案的依賴。

npm i -S i18next react-i18next i18next-browser-languagedetector i18next-http-backend

用法

安裝後，請按照以下 3 個步驟在 Storybook 中啟用此擴充功能。

main.ts

將此擴充功能插入您的 addons 陣列中

{
  addons: [
    // other addons...
    'storybook-react-i18next',
  ]
}

---

i18next.ts

在您的 .storybook 資料夾中建立一個名為 i18next.ts 的檔案（或您喜歡的任何名稱）。

在此檔案中，複製並貼上下面的程式碼，並根據需要進行修改（資源檔案的路徑、語言等）。

import {initReactI18next} from 'react-i18next';
import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const ns = ['common'];
const supportedLngs = ['en', 'fr', 'ja'];
const resources = ns.reduce((acc, n) => {
    supportedLngs.forEach((lng) => {
    if (!acc[lng]) acc[lng] = {};
        acc[lng] = {
            ...acc[lng],
            [n]: require(`../public/locales/${lng}/${n}.json`),
        };
    });
    return acc;
}, {});

i18n.use(initReactI18next)
    .use(LanguageDetector)
    .use(Backend)
    .init({
        //debug: true,
        lng: 'en',
        fallbackLng: 'en',
        defaultNS: 'common',
        ns,
        interpolation: {escapeValue: false},
        react: {useSuspense: false},
        supportedLngs,
        resources,
    });

export default i18n;

有關組態選項的詳細資訊，請參閱 i18next 組態選項 文件。

---

preview.ts

在您的 preview.ts 中，您需要將 locales 和 locale 新增至 initialGlobals（如果您未使用最新版本的 Storybook，則為 globals），並將從上述檔案匯出的 i18n 新增至 parameters。

locales 是一個物件，其中鍵是地區/語言的「ID」，值是您想要在下拉式選單中顯示的名稱。

locale 是您想要預設的地區設定。

import i18n from './i18next';

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

export default preview;

您也可以使用完整的地區設定字串作為鍵。這取決於您的 i18next 設定。

import i18n from './i18next';

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

export default preview;

locales 物件的值也可以是具有 title、left 或 right 鍵的物件。

如果您想要在左側或右側包含表情符號旗幟或其他字串，這會很有用。

例如

import i18n from './i18next';

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

export default preview;

或者類似這樣

import i18n from './i18next';

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'},
        },
    },
    parameters: {
        i18n,
    },
};

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 檔案中定義的字串。