Дата створення:2026-03-20Останнє оновлення:2026-05-31

    Intlayer зі Storybook

    Зміст

    Чому варто обрати Intlayer, а не альтернативи?

    Порівняно з основними рішеннями, такими як storybook-react-i18next або i18next, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:

    Intlayer оптимізовано для ідеальної роботи з Storybook, пропонуючи багатомовні декоратори історій, перемикання локалі та всі функції, необхідні для масштабування інтернаціоналізації (i18n) у вашій системі проектування.

    Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає зменшити розмір бандлу і сторінок до 50%.

    Організація вмісту за окремими областями (scoping) полегшує технічне обслуговування великомасштабних програм. Ви можете скопіювати або видалити окрему папку функцій без розумового навантаження перегляду всієї кодової бази вмісту. Крім того, Intlayer повністю типізований (fully typed), щоб забезпечити точність вашого вмісту.

    Спільне розміщення вмісту зменшує контекст, необхідний для великих мовних моделей (LLM). Intlayer також постачається з набором інструментів, наприклад CLI для перевірки відсутніх перекладів,LSP, MCP і навички агента, щоб зробити роботу розробника (DX) ще зручнішою для агентів ШІ.

    Використовуйте автоматизацію для перекладу в конвеєрі CI/CD за допомогою LLM за вашим вибором за рахунок вашого постачальника штучного інтелекту. Intlayer також пропонує компілятор для автоматизації екстракція вмісту, а також веб-платформу, щоб допомогти перекладати у фоновому режимі.

    Підключення великих файлів JSON до компонентів може призвести до проблем з продуктивністю та реакцією. Intlayer оптимізує завантаження вмісту під час збірки (build time).

    Більше ніж просто рішення i18n, Intlayer пропонує власний візуальний редактор і повний CMS, щоб допомогти вам керувати своїм багатомовним вмістом у реальному часі, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.

    Чому варто використовувати Intlayer зі Storybook?

    Storybook - це галузевий стандартний інструмент для ізольованої розробки та документування компонентів інтерфейсу. Поєднання його з Intlayer дозволяє вам:

    • Переглядати кожну локаль безпосередньо в канвасі Storybook за допомогою перемикача на панелі інструментів.
    • Виявляти відсутні переклади до того, як вони потраплять у продакшн.
    • Документувати багатомовні компоненти з реальним, безпечним щодо типів вмістом замість жорстко закодованих рядків.

    Покрокове налаштування

    </Step>

    </Steps>

    Оголошення вмісту

    Створіть файл *.content.ts поруч із кожним компонентом. Intlayer автоматично знайде його під час компіляції.

    import { type Dictionary, t } from "intlayer";

const copyButtonContent = {
  key: "copy-button",
  content: {
    label: t({
      en: "Copy content",
      fr: "Copier le contenu",
      es: "Copiar contenido",
    }),
  },
} satisfies Dictionary;

export default copyButtonContent;
    Для отримання додаткової інформації про формати оголошення вмісту та функції дивіться документацію з оголошення вмісту.

    Використання useIntlayer у компоненті

    "use client";

import { type FC } from "react";
import { useIntlayer } from "react-intlayer";

type CopyButtonProps = {
  content: string;
};

export const CopyButton: FC<CopyButtonProps> = ({ content }) => {
  const { label } = useIntlayer("copy-button");

  return (
    <button
      onClick={() => navigator.clipboard.writeText(content)}
      aria-label={label.value}
      title={label.value}
    >
      Копіювати
    </button>
  );
};

    useIntlayer повертає скомпільований словник для поточної локалі, наданої найближчим IntlayerProvider. Перемикання локалі в панелі інструментів Storybook автоматично оновить історію з актуальними перекладами.

    Написання історій (Stories) для інтернаціоналізованих компонентів

    З налаштованим декоратором IntlayerProvider ваші історії працюють так само, як і раніше. Панель інструментів локалей керує активною локаллю для всього канвасу:

    import type { Meta, StoryObj } from "@storybook/react";
import { CopyButton } from ".";

const meta: Meta<typeof CopyButton> = {
  title: "Components/CopyButton",
  component: CopyButton,
  tags: ["autodocs"],
  argTypes: {
    content: { control: "text" },
  },
};

export default meta;
type Story = StoryObj<typeof CopyButton>;

/** Стандартна історія - змініть локаль на панелі інструментів, щоб переглянути переклади. */
export const Default: Story = {
  args: {
    content: "npm install intlayer react-intlayer",
  },
};

/** Відображає кнопку всередині блоку коду, поширений випадок використання в реальному житті. */
export const InsideCodeBlock: Story = {
  render: (args) => (
    <div style={{ position: "relative", display: "inline-block" }}>
      <pre style={{ background: "#1e1e1e", color: "#fff", padding: "1rem" }}>
        <code>{args.content}</code>
      </pre>
      <CopyButton
        content={args.content}
        style={{ position: "absolute", top: 8, right: 8 }}
      />
    </div>
  ),
  args: {
    content: "npx intlayer init",
  },
};
    Кожна історія успадковує глобальну змінну locale з панелі інструментів, тому ви можете перевірити кожну локаль, не змінюючи код самої історії.

    Тестування перекладів в історіях

    Використовуйте функції play у Storybook, щоб переконатися, що відображається правильний перекладений текст для певної локалі:

    import type { Meta, StoryObj } from "@storybook/react";
import { expect, within } from "@storybook/test";
import { CopyButton } from ".";

const meta: Meta<typeof CopyButton> = {
  title: "Components/CopyButton",
  component: CopyButton,
  tags: ["autodocs"],
};

export default meta;
type Story = StoryObj<typeof CopyButton>;

export const AccessibleLabel: Story = {
  args: { content: "Hello World" },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole("button");

    // Перевірка, чи має кнопка непусту доступну назву
    await expect(button).toHaveAccessibleName();
    // Перевірка, чи кнопка не заблокована
    await expect(button).not.toBeDisabled();
    // Перевірка доступності з клавіатури
    await expect(button).toHaveAttribute("tabindex", "0");
  },
};

    Додаткові ресурси

    Чому Intlayer?