# Programar secções em React no editor de código

Escreve secções próprias em React com campos que o lojista edita no editor visual, compila, pré-visualiza o site com o rascunho e publica — tudo no painel.

Na Feitora podes programar as tuas próprias **secções de site em React**, como um tema do Shopify mas com componentes modernos. Cada secção tem um **esquema** com os campos que o lojista edita no editor visual (textos, imagens, botões, listas, coleções…) e pode ter **zonas livres** onde ele larga o conteúdo que quiser. O código é guardado na loja, compilado no servidor e só fica público quando publicas.

## Abrir o editor de código

No menu lateral abre **Conteúdo → Código** (também em Ctrl K, escrevendo "código", ou em **Definições → Loja online**). O editor ocupa o ecrã inteiro:

- à esquerda, a **árvore de ficheiros**;
- ao centro, o **editor** com abas dos ficheiros abertos;
- à direita, a **Pré-visualização**, os **Problemas**, as **Secções** detetadas e o histórico de **Builds**.

> **Importante — Quem pode usar**
> O proprietário tem sempre acesso. A equipa só entra se lhe deres a área **Código** em Definições → Utilizadores — o código corre no site com JavaScript completo, por isso não é dada por omissão.

Se a loja ainda não tem código, carrega em **Criar ficheiros de exemplo** para começar com uma secção, um CSS e o `feitora.json`.

## Como se organizam os ficheiros

| Pasta | Para quê |
|---|---|
| `secoes/` | cada `secoes/<nome>.jsx` é uma secção `c_<nome>` que aparece no editor visual |
| `componentes/` | componentes reutilizáveis, importados pelas secções |
| `lib/` | funções e hooks |
| `estilos/` | CSS global do código (usa as variáveis do tema, como `var(--primary)`) |

1. Para criar um ficheiro carrega no ícone **Novo ficheiro** no topo da árvore (ou no de uma pasta).
2. Escolhe o modelo — **Secção**, **Componente**, **CSS**, **Funções (JS)** ou **Ficheiro vazio** — e escreve o nome. Nas secções usa minúsculas, números e "-" (ex.: `hero-video`).
3. No menu **⋯** de cada ficheiro tens **Renomear ou mover**, **Duplicar** e **Apagar**. Mudar o nome de uma secção muda o tipo: as páginas que a usavam deixam de a mostrar.

## Escrever e guardar

O editor realça JSX, JavaScript, CSS e JSON, indenta sozinho e completa o que escreves: ao escolher uma função do SDK (`useProducts`, `Img`, `addToCart`…) junta-a ao `import` de `@feitora/site` automaticamente. Dentro de `type: '…'` sugere os tipos de campo do esquema.

- Ctrl S guarda o ficheiro aberto; **Guardar tudo** guarda todos.
- Um ponto laranja na aba ou na árvore indica alterações por guardar.

## Compilar e corrigir erros

1. Carrega em **Compilar** (ou Ctrl B). Os ficheiros por guardar são guardados antes.
2. Se houver erros, abre o separador **Problemas**. Cada erro diz o ficheiro, a linha e a coluna — carrega nele para ir diretamente a essa linha. O erro também aparece sublinhado no código.
3. Erros comuns: importar um pacote que não é permitido (só `react`, `react-dom`, `@feitora/site` e `lucide-react`), esquecer o `export default` ou usar variáveis dentro do `schema` (tem de ser um objeto escrito à mão).

## Pré-visualizar e publicar

1. Depois de compilar sem erros, o separador **Pré-visualização** mostra o site real com o teu rascunho, em computador, tablet ou telemóvel. Só quem tem o link o vê.
2. O separador **Secções** mostra cada secção detetada com os campos, as zonas livres e os valores por omissão do esquema.
3. Carrega em **Publicar** e confirma. A partir daí as secções aparecem no editor visual em **Adicionar secção**.
4. Em **Builds** podes **Repor** um build anterior (voltar atrás) ou **Despublicar o código**.

> **Dica — Classes Tailwind**
> O CSS do site só tem as classes que o tema usa. Escreve os teus estilos em `estilos/*.css` em vez de classes Tailwind inventadas.

O guia completo para programadores (esquema, SDK, limites e segurança) está em `docs/programar-na-feitora.md` no repositório da Feitora.