Criação:2026-03-20Última atualização:2026-05-31

    Intlayer com Storybook

    Índice

    Por que Intlayer em vez de alternativas?

    Comparado com soluções principais como storybook-react-i18next ou i18next, Intlayer é uma solução que vem com otimizações integradas como:

    O Intlayer é otimizado para funcionar perfeitamente com o Storybook, oferecendo decoradores de histórias multilíngues, alteração de local e todos os recursos necessários para dimensionar a internacionalização (i18n) em seu sistema de design.

    Em vez de carregar arquivos JSON enormes em suas páginas, carregue apenas o conteúdo necessário. O Intlayer ajuda a reduzir o tamanho do bundle e das páginas em até 50%.

    Definir o escopo do conteúdo do seu aplicativo facilita a manutenção de aplicativos de grande escala. Você pode duplicar ou excluir uma única pasta de recursos sem o fardo mental de revisar toda a base de código de seu conteúdo. Além disso, o Intlayer é totalmente tipado (fully typed) para garantir a precisão do seu conteúdo.

    A co-localização de conteúdo reduz o contexto necessário pelos Large Language Models (LLMs). O Intlayer também vem com um conjunto de ferramentas, como uma CLI para testar traduções ausentes,LSP, MCP, e habilidades do agente, para tornar a experiência do desenvolvedor (DX) ainda mais tranquila para os agentes de IA.

    Use a automação para traduzir seu pipeline de CI/CD usando o LLM de sua escolha às custas de seu provedor de IA. O Intlayer também oferece um compilador para automatizar a extração de conteúdo, bem como uma plataforma web para ajudar a traduzir em segundo plano.

    Conectar arquivos JSON enormes a componentes pode levar a problemas de desempenho e reatividade. O Intlayer otimiza o carregamento do seu conteúdo no momento da construção.

    Mais do que apenas uma solução i18n, o Intlayer fornece um [editor visual] auto-hospedado(/pt/doc/concept/editor) e um CMS completo para ajudá-lo a gerenciar seu conteúdo multilíngue em tempo real, facilitando a colaboração com tradutores, redatores e outros membros da equipe. O conteúdo pode ser armazenado local e/ou remotamente.

    Porquê usar o Intlayer com o Storybook?

    O Storybook é a ferramenta padrão da indústria para desenvolver e documentar componentes de UI isoladamente. Combiná-lo com o Intlayer permite-lhe:

    • Visualizar cada local diretamente dentro do canvas do Storybook usando um seletor na barra de ferramentas.
    • Detetar traduções em falta antes de chegarem à produção.
    • Documentar componentes multilíngues com conteúdo real e seguro em termos de tipos, em vez de strings codificadas rigidamente.

    Configuração Passo a Passo

    </Step>

    </Steps>

    Declarar Conteúdo

    Crie um ficheiro *.content.ts ao lado de cada componente. O Intlayer deteta-o automaticamente durante a compilação.

    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;
    Para mais formatos e funcionalidades de declaração de conteúdo, consulte a documentação de declaração de conteúdo.

    Usar useIntlayer num Componente

    "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}
    >
      Copiar
    </button>
  );
};

    O useIntlayer retorna o dicionário compilado para o local atual fornecido pelo IntlayerProvider mais próximo. Alterar o local na barra de ferramentas do Storybook volta a renderizar automaticamente a story com as traduzioni atualizadas.

    Escrever Stories para Componentes Internacionalizados

    Com o decorador IntlayerProvider configurado, as suas stories funcionam exatamente como antes. A barra de ferramentas de local controla o local ativo para todo o canvas:

    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>;

/** Story padrão - altere o local na barra de ferramentas para visualizar as traduções. */
export const Default: Story = {
  args: {
    content: "npm install intlayer react-intlayer",
  },
};

/** Renderiza o botão dentro de um bloco de código, um caso de uso comum no mundo real. */
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",
  },
};
    Cada story herda a variável global locale da barra de ferramentas, para que possa verificar cada local sem alterar qualquer código da story.

    Testar Traduções em Stories

    Use as funções play do Storybook para garantir que o texto traduzido corretamente é renderizado para um determinado local:

    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");

    // Verificar se o botão tem um nome acessível não vazio
    await expect(button).toHaveAccessibleName();
    // Verificar se o botão não está desativado
    await expect(button).not.toBeDisabled();
    // Verificar a acessibilidade do teclado
    await expect(button).toHaveAttribute("tabindex", "0");
  },
};

    Recursos Adicionais

    Por que Intlayer?