Storybook next-intl 擴充套件

輕鬆整合 next-intl 至 Storybook。

必要的同級相依性

• storybook - ^8.2.0
• next-intl - ^3.0.0

此 Storybook 擴充套件假設您的專案已設定好 next-intl，且已正確配置並正常運作。

安裝

將此擴充套件作為開發相依性安裝。

npm i -D storybook-next-intl

用法

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

main.ts

將此擴充套件插入您的 addons 陣列

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

---

next-intl.ts

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

在此檔案中，複製並貼上以下程式碼，並進行您需要的任何修改（訊息檔案的路徑等）。

import en from '../src/messages/en.json';
import fr from '../src/messages/fr.json';
import ja from '../src/messages/ja.json';

const messagesByLocale: Record<string, any> = {en, fr, ja};

const nextIntl = {
  defaultLocale: 'en',
  messagesByLocale,
};

export default nextIntl;

您也可以包含諸如 formats、defaultTranslationValues、onError 和 getMessageFallback 等選項。

const nextIntl = {
  defaultLocale: 'en',
  messagesByLocale,
  formats: {/* your settings */},
  defaultTranslationValues: {/* your settings */},
  onError: (error) => console.error(error),
  getMessageFallback: ({namespace, key}) => `${namespace}.${key}`,
};

---

preview.ts

在您的 preview.ts 中，您需要將 locales 和 locale 新增至 initialGlobals，並將您從上述檔案匯出的 nextIntl 新增至 parameters。

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

locale 是您希望預設的地區設定。

import nextIntl from './next-intl';

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

export default preview;

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

import nextIntl from './next-intl';

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

export default preview;

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

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

例如

import nextIntl from './next-intl';

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

export default preview;

或類似這樣

import nextIntl from './next-intl';

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

export default preview;

Story 參數地區設定

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

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

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

請注意，這樣做會將目前地區設定切換為參數的地區設定，因此當您變更為沒有參數的 story 時，它將保持在最後選取的地區設定。

在上面的範例中，如果您檢視日語 story，然後點擊返回預設 story，則地區設定將保持為 ja。

---

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

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

切換地區設定將會使用在您的地區設定 json 檔案中定義的字串。