nu-email-builder-js

v0.0.6

Published

5 months ago

Este documento explica como configurar e personalizar as fontes e cores padrão dos componentes de email no projeto Email Builder.

0High
0Medium
0Low

sardemberg

Email Builder - Guia de Configuração de Fontes e Cores

Este documento explica como configurar e personalizar as fontes e cores padrão dos componentes de email no projeto Email Builder.

📋 Índice

🎯 Visão Geral

O Email Builder é um editor visual para criação de emails responsivos. Ele permite configurar:

Fontes: 9 famílias de fontes diferentes
Cores: Sistema de cores personalizável
Layout: Configurações de fundo, bordas e espaçamento
Componentes: Blocos modulares para construção de emails

🏗️ Estrutura do Projeto

packages/
├── editor-sample/          # Interface principal do editor
├── block-*/               # Componentes individuais (Button, Text, etc.)
├── document-core/         # Lógica central do editor
└── email-builder/         # Renderizador de emails

🔤 Configuração de Fontes

Fontes Disponíveis

O sistema oferece 9 famílias de fontes pré-configuradas:

| Nome | Descrição | Fontes CSS | |------|-----------|------------| | MODERN_SANS | Sans-serif moderna | "Helvetica Neue", "Arial Nova", Arial | | BOOK_SANS | Sans-serif elegante | Optima, Candara, "Noto Sans" | | ORGANIC_SANS | Sans-serif orgânica | Seravek, Ubuntu, Calibri | | GEOMETRIC_SANS | Sans-serif geométrica | Avenir, Montserrat, Corbel | | HEAVY_SANS | Sans-serif pesada | Bahnschrift, "Franklin Gothic Medium" | | ROUNDED_SANS | Sans-serif arredondada | Quicksand, Comfortaa, "Arial Rounded MT Bold" | | MODERN_SERIF | Serif moderna | Charter, "Bitstream Charter", Cambria | | BOOK_SERIF | Serif clássica | "Iowan Old Style", "Palatino Linotype" | | MONOSPACE | Monoespaçada | "Courier New", "Nimbus Mono PS" |

Arquivos de Configuração de Fontes

1. Definição das Fontes

Arquivo: packages/editor-sample/src/documents/blocks/helpers/fontFamily.ts

export const FONT_FAMILIES = [
  {
    key: 'MODERN_SANS',
    label: 'Modern sans',
    value: '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif',
  },
  // ... outras fontes
];

2. Aplicação das Fontes no Layout

Arquivo: packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutEditor.tsx

function getFontFamily(fontFamily: EmailLayoutProps['fontFamily']) {
  const f = fontFamily ?? 'MODERN_SANS';
  switch (f) {
    case 'MODERN_SANS':
      return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
    // ... outros casos
  }
}

3. Validação das Fontes

Arquivo: packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx

const FONT_FAMILY_SCHEMA = z.enum([
  'MODERN_SANS',
  'BOOK_SANS',
  'ORGANIC_SANS',
  // ... outras opções
]);

🎨 Configuração de Cores

Sistema de Cores

O projeto utiliza um sistema de cores organizado em diferentes níveis:

1. Cores da Marca (Interface)

Arquivo: packages/editor-sample/src/theme.ts

const BRAND_NAVY = '#212443';
const BRAND_BLUE = '#0079CC';
const BRAND_GREEN = '#1F8466';
const BRAND_RED = '#E81212';
const BRAND_YELLOW = '#F6DC9F';
const BRAND_PURPLE = '#6C0E7C';
const BRAND_BROWN = '#CC996C';

2. Cores do Layout do Email

Arquivo: packages/editor-sample/src/getConfiguration/sample/empty-email-message.ts

const EMPTY_EMAIL_MESSAGE = {
  root: {
    type: 'EmailLayout',
    data: {
      backdropColor: '#F5F5F5',    // Cor de fundo externa
      canvasColor: '#FFFFFF',      // Cor de fundo do email
      textColor: '#262626',        // Cor do texto principal
      fontFamily: 'MODERN_SANS',   // Fonte padrão
    },
  },
};

3. Cores dos Componentes

Botão

Arquivo: packages/block-button/src/index.tsx

export const ButtonPropsDefaults = {
  buttonBackgroundColor: '#999999',  // Cor de fundo do botão
  buttonTextColor: '#FFFFFF',        // Cor do texto do botão
  // ... outras propriedades
};

Divisor

Arquivo: packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx

{
  label: 'Divider',
  block: () => ({
    type: 'Divider',
    data: {
      props: {
        lineColor: '#CCCCCC',  // Cor da linha do divisor
      },
    },
  }),
}

🧩 Componentes Disponíveis

Componentes de Layout

EmailLayout

Arquivo: packages/editor-sample/src/documents/blocks/EmailLayout/
Função: Container principal do email
Propriedades:
- backdropColor: Cor de fundo externa
- canvasColor: Cor de fundo do email
- textColor: Cor do texto principal
- fontFamily: Família de fonte
- borderColor: Cor da borda
- borderRadius: Raio da borda

Container

Arquivo: packages/editor-sample/src/documents/blocks/Container/
Função: Container genérico para agrupar elementos
Propriedades: Padding, alinhamento

ColumnsContainer

Arquivo: packages/editor-sample/src/documents/blocks/ColumnsContainer/
Função: Layout em colunas
Propriedades:
- columnsCount: Número de colunas
- columnsGap: Espaçamento entre colunas

Componentes de Conteúdo

Text

Pacote: packages/block-text/
Função: Bloco de texto
Propriedades:
- text: Conteúdo do texto
- markdown: Suporte a Markdown
- style.color: Cor do texto
- style.fontSize: Tamanho da fonte
- style.fontWeight: Peso da fonte (bold/normal)

Heading

Pacote: packages/block-heading/
Função: Títulos e cabeçalhos
Propriedades: Similar ao Text, mas com estilos de título

Button

Pacote: packages/block-button/
Função: Botões clicáveis
Propriedades:
- text: Texto do botão
- url: Link de destino
- buttonBackgroundColor: Cor de fundo
- buttonTextColor: Cor do texto
- size: Tamanho (x-small, small, medium, large)
- buttonStyle: Estilo (rectangle, rounded, pill)
- fullWidth: Largura total

Image

Pacote: packages/block-image/
Função: Imagens
Propriedades:
- url: URL da imagem
- alt: Texto alternativo
- contentAlignment: Alinhamento
- linkHref: Link da imagem

Avatar

Pacote: packages/block-avatar/
Função: Avatares de usuário
Propriedades:
- imageUrl: URL da imagem
- shape: Forma (circle, square)

Divider

Pacote: packages/block-divider/
Função: Linhas divisórias
Propriedades:
- lineColor: Cor da linha

Spacer

Pacote: packages/block-spacer/
Função: Espaçamento vertical
Propriedades:
- height: Altura do espaçamento

Html

Pacote: packages/block-html/
Função: Conteúdo HTML personalizado
Propriedades:
- contents: Código HTML

🚀 Como Executar o Projeto

Pré-requisitos

Node.js (versão 16 ou superior)
npm ou yarn

Instalação

Clone o repositório:

git clone <repository-url>
cd email-builder-js-test

Instale as dependências:

npm install

Execute o projeto:

cd packages/editor-sample
npm run dev

Acesse a aplicação:

http://localhost:5173

Scripts Disponíveis

# Desenvolvimento
npm run dev

# Build para produção
npm run build

# Preview da build
npm run preview

# Testes
npm test

🛠️ Exemplos de Personalização

1. Alterar Cores Padrão do Layout