Design System — PlanetaEXO

Componentes React compartilhados da PlanetaEXO. Gera três artefatos principais:

• Pacote npm (@planetaexo/design-system) — npm run build:lib (tsup) gera dist/ com ESM/CJS e tipos; exports em package.json; peer dependencies: react, react-dom. Consumo em outros apps (ex.: gestão de reservas) via file:../planetaexo-designsystem ou, quando publicado, versão semver no npm. O script prepare executa build:lib após npm install no clone local.
• Servidor de desenvolvimento (Next.js) — para visualizar e desenvolver componentes em http://localhost:3000
• Bundle WordPress (npm run build:wp) — dist/wp/planetaexo-trip-island.js + .css, consumido pelo plugin planetaexo-trip-island no repositório planetaexo-trips

O fluxo WordPress e o pacote npm partilham os mesmos componentes em src/components/; não é necessário runtime WordPress para consumir o pacote no Next.js.

Pré-requisitos

Node.js ≥ 18

Verifique:

node -v   # deve ser v18.x ou superior (recomendado: v20 LTS ou v22 LTS)
npm -v

Se não tiver Node instalado ou precisar gerenciar versões:

• Windows: baixe o instalador LTS em https://nodejs.org/en/download
• Alternativa (múltiplas versões): use nvm-windows ou Volta

Setup inicial (primeira vez)

# 1. Clone e entre na pasta
git clone <url-do-repositório>
cd planetaexo-designsystem

# 2. Instale as dependências
npm ci

Use npm ci (não npm install) para garantir as versões exatas travadas no package-lock.json.

Comandos

| Ação | Comando | |------|---------| | Servidor de desenvolvimento (Next.js) | npm run dev | | Biblioteca npm (dist/, para apps externos) | npm run build:lib | | Gerar bundle para WordPress | npm run build:wp | | Build completo (Next.js) | npm run build | | Lint | npm run lint |

Desenvolvimento de componentes

Inicie o servidor:

npm run dev

Acesse: http://localhost:3000

Os componentes ficam em src/components/. O servidor atualiza automaticamente ao salvar.

Gerar o bundle para WordPress

npm run build:wp

Artefatos gerados em dist/wp/:

dist/wp/
  planetaexo-trip-island.js
  planetaexo-trip-island.css
  fonts/               ← se existir, copie também

Copiar para o repositório WordPress

Após o build, copie os arquivos para o repositório planetaexo-trips:

dist/wp/planetaexo-trip-island.js   →  wp-content/plugins/planetaexo-trip-island/assets/trip-island/
dist/wp/planetaexo-trip-island.css  →  wp-content/plugins/planetaexo-trip-island/assets/trip-island/
dist/wp/fonts/ (se existir)         →  wp-content/plugins/planetaexo-trip-island/assets/trip-island/fonts/

Depois, registre o commit atual em wp-content/plugins/planetaexo-trip-island/DS-BUILD.md no repositório WordPress.

Estrutura relevante

src/
  components/         ← componentes React (BookingForm, TripHeader, TripPage…)
  lib/
    planetaexo-trip-data.ts       ← tipos TypeScript do payload WordPress
    wp-trip-payload-to-props.tsx  ← adaptador payload → props React
  wp-entries/
    trip-island.tsx   ← entry point do bundle WordPress (Vite)
dist/
  wp/                 ← saída do build:wp (não commitar; gerado localmente)

Integração com o WordPress

O contrato de dados completo (payload planetaexoTripData, campos ACF, mount point HTML) está documentado em HANDOFF.md neste repositório.

Guia do ambiente WordPress (Docker): veja o README.md do repositório planetaexo-trips.