Storybook react-intl 擴充功能

為 Storybook 新增 react-intl 支援。

需求版本

v3.1.x

• storybook - ^8.2.0
• react-intl - ^5.24.0 || ^6.0.0

v3.0.x

• storybook - ^8.0.0
• react-intl - ^5.24.0 || ^6.0.0

這個 Storybook 擴充功能假設您的專案已經設定好 react-intl，並且已正確配置且運作中。

安裝

這個擴充功能應該作為開發依賴項新增。

npm i -D storybook-react-intl

yarn add -D storybook-react-intl

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

npm i -S react-intl

yarn add react-intl

使用方法

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

main.ts

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

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

---

reactIntl.ts

在您的 .storybook 資料夾中建立一個名為 reactIntl.ts（或任何您喜歡的名稱）的檔案。您將在此處設定您的 react-intl 配置。

在此檔案中，複製並貼上以下程式碼，並進行您需要的修改。

const locales = ['en', 'de'];

const messages = locales.reduce((acc, lang) => ({
  ...acc,
  [lang]: require(`../locale/${lang}.json`), // whatever the relative path to your messages json is
}), {});

const formats = {}; // optional, if you have any formats

export const reactIntl = {
  defaultLocale: 'en',
  locales,
  messages,
  formats,
};

---

preview.ts

在您的 preview.ts 中，您需要將 locales 和 locale 新增到 initialGlobals（如果您未使用 storybook 8.2+，則為 globals），並將您從上述檔案匯出的 reactIntl 新增到參數中。

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

locale 是預設的 locale，可以從 reactIntl 讀取，或根據您的選擇手動設定。

import {reactIntl} from './reactIntl';

const preview: Preview = {
    initialGlobals: {
        locale: reactIntl.defaultLocale,
        locales: {
            en: 'English',
            de: 'Deutsche',  
        },
    },
    parameters: {
        reactIntl,
    }
};

export default preview;

您也可以將 locales 設定為與 Storybook 相容的物件，如 storybook-i18n 擴充功能（已包含在此擴充功能中）的文件所述。

import {reactIntl} from './reactIntl';

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

export default preview;

Story 參數 Locale

如果您希望 story 使用特定的 locale，請在該 Story 的參數中設定。

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

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

請注意，這樣做會將目前的 locale 切換為參數中的 locale，因此當您變更為沒有參數的 story 時，它會停留在上次選取的 locale。

在上面的範例中，如果您檢視日文 story，然後點擊回到 Default story，locale 將保持為 ja。

---

完成這些步驟並啟動 Storybook 後，您應該會在工具列中看到一個地球圖示。

點擊此地球圖示將顯示一個下拉式選單，其中包含您定義的 locales。

切換 locales 將使用您訊息中定義的字串。