Design System

Este documento descreve os componentes e padrões de design utilizados na documentação do n8n em português.

Componentes Principais

Cards e Layout

HighlightCard

Card destacado para informações importantes.

<HighlightCard
  title="Título do Card"
  description="Descrição do conteúdo"
  icon="star-outline"
/>

GuidanceCard

Card para orientações e dicas.

<GuidanceCard
  title="Dica Importante"
  description="Texto da orientação"
  type="info"
/>

BaseCard

Card base reutilizável.

<BaseCard
  title="Título"
  description="Descrição"
  icon="document-outline"
/>

Estatísticas e Progresso

ProgressGoal

Indicador de progresso com meta.

<ProgressGoal
  current={75}
  goal={100}
  label="Documentação Traduzida"
  unit="%"
/>

CommunityStats

Estatísticas da comunidade.

<CommunityStats
  contributors={150}
  translations={85}
  languages={12}
/>

Conteúdo Interativo

ArticleCard

Card para artigos e posts.

<ArticleCard
  title="Título do Artigo"
  description="Descrição do artigo"
  author="Nome do Autor"
  date="2024-01-15"
  views={1250}
  tags={["tutorial", "api"]}
  link="/artigo"
/>

VideoCard

Card para vídeos.

<VideoCard
  title="Tutorial em Vídeo"
  description="Aprenda a configurar workflows"
  duration="15:30"
  thumbnail="/img/thumbnail.jpg"
  url="https://youtube.com/watch?v=..."
/>

Componentes para APIs

ApiEndpoint

Documentação de endpoints de API.

<ApiEndpoint
  method="POST"
  url="/api/v1/workflows"
  title="Criar Workflow"
  description="Cria um novo workflow"
  parameters={[
    { name: "name", type: "string", required: true, description: "Nome do workflow" },
    { name: "nodes", type: "array", required: true, description: "Lista de nodes" }
  ]}
  requestExample={`{
  "name": "Meu Workflow",
  "nodes": [...]
}`}
  responseExample={`{
  "id": "workflow-123",
  "name": "Meu Workflow",
  "createdAt": "2024-01-15T10:30:00Z"
}`}
/>

CodeExample

Exemplos de código com syntax highlighting.

<CodeExample
  title="Exemplo de Configuração"
  language="javascript"
  code={`const workflow = {
  name: "Exemplo",
  nodes: [...]
}`}
  description="Configuração básica de um workflow"
/>

Componentes para Workflows

WorkflowDiagram

Visualização de estrutura de workflows.

<WorkflowDiagram
  title="Workflow de Automação"
  nodes={[
    { id: "trigger", name: "Webhook", type: "trigger", x: 100, y: 100 },
    { id: "process", name: "Processar Dados", type: "function", x: 300, y: 100 },
    { id: "output", name: "Enviar Email", type: "email", x: 500, y: 100 }
  ]}
  connections={[
    { from: "trigger", to: "process", label: "dados" },
    { from: "process", to: "output", label: "resultado" }
  ]}
/>

Componentes para Tutoriais

StepWizard

Tutorial passo a passo interativo.

<StepWizard
  title="Configurar Primeiro Workflow"
  steps={[
    {
      id: "setup",
      title: "Configuração Inicial",
      description: "Preparar ambiente",
      content: "Conteúdo do passo 1",
      required: true
    },
    {
      id: "create",
      title: "Criar Workflow",
      description: "Adicionar nodes",
      content: "Conteúdo do passo 2"
    }
  ]}
/>

BeforeAfter

Comparações antes/depois.

<BeforeAfter
  title="Melhorias no Workflow"
  before={{
    title: "Antes",
    description: "Workflow básico",
    content: "Código anterior..."
  }}
  after={{
    title: "Depois",
    description: "Workflow otimizado",
    content: "Código melhorado..."
  }}
  comparison={[
    {
      before: "5 nodes",
      after: "3 nodes",
      label: "Complexidade"
    }
  ]}
/>

Componentes Utilitários

IonicIcon

Ícones do Ionicons.

<IonicIcon name="star-outline" size={24} color="var(--ifm-color-primary)" />

LocalIcon

Ícones locais SVG.

<LocalIcon name="n8n-logo" size={32} />

BoxNote

Notas e observações.

<BoxNote
  title="Importante"
  type="warning"
>
  Conteúdo da nota
</BoxNote>

BulletList

Lista com bullets customizados.

<BulletList
  items={[
    "Item 1",
    "Item 2",
    "Item 3"
  ]}
  icon="checkmark-circle-outline"
/>

Padrões de Uso

Cores

• Primária:

  var(--ifm-color-primary)

• Sucesso:

  var(--ifm-color-success)

• Aviso:

  var(--ifm-color-warning)

• Erro:

  var(--ifm-color-danger)

Tipografia

• Títulos:

  var(--font-size-xl)

  ,

  var(--font-weight-semibold)

• Corpo:

  var(--font-size-base)

  ,

  var(--font-weight-normal)

• Pequeno:

  var(--font-size-sm)

  ,

  var(--font-weight-medium)

Espaçamento

• Card padding:

  1.5rem

• Seção margin:

  2rem 0

• Elemento gap:

  0.75rem

Animações

• Duração:

  var(--animation-duration)

• Easing:

  var(--animation-easing)

Responsividade

Todos os componentes são responsivos e se adaptam a diferentes tamanhos de tela:

• Desktop: Layout completo
• Tablet: Ajustes de padding e grid
• Mobile: Layout em coluna única

Acessibilidade

Os componentes seguem as diretrizes de acessibilidade:

• Contraste adequado
• Navegação por teclado
• Screen readers
• Estados focáveis
• Textos alternativos

Contribuindo

Ao criar novos componentes:

1. Siga os padrões estabelecidos
2. Use as variáveis CSS do tema
3. Implemente responsividade
4. Teste acessibilidade
5. Documente no design system