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 新增到 parameters 中。

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，請在其 parameters 中設定。

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

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

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

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

---

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

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

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