@planetaexo/design-system 0.2.0 → 0.2.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +121 -121
- package/dist/index.cjs +1660 -99
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +126 -2
- package/dist/index.d.ts +126 -2
- package/dist/index.js +1659 -100
- package/dist/index.js.map +1 -1
- package/package.json +61 -61
package/README.md
CHANGED
|
@@ -1,121 +1,121 @@
|
|
|
1
|
-
# Design System — PlanetaEXO
|
|
2
|
-
|
|
3
|
-
Componentes React compartilhados da PlanetaEXO. Gera **três** artefatos principais:
|
|
4
|
-
|
|
5
|
-
- **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.
|
|
6
|
-
- **Servidor de desenvolvimento** (Next.js) — para visualizar e desenvolver componentes em `http://localhost:3000`
|
|
7
|
-
- **Bundle WordPress** (`npm run build:wp`) — `dist/wp/planetaexo-trip-island.js` + `.css`, consumido pelo plugin `planetaexo-trip-island` no repositório `planetaexo-trips`
|
|
8
|
-
|
|
9
|
-
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.
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
## Pré-requisitos
|
|
14
|
-
|
|
15
|
-
### Node.js ≥ 18
|
|
16
|
-
|
|
17
|
-
Verifique:
|
|
18
|
-
|
|
19
|
-
```bash
|
|
20
|
-
node -v # deve ser v18.x ou superior (recomendado: v20 LTS ou v22 LTS)
|
|
21
|
-
npm -v
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
Se não tiver Node instalado ou precisar gerenciar versões:
|
|
25
|
-
|
|
26
|
-
- **Windows:** baixe o instalador LTS em https://nodejs.org/en/download
|
|
27
|
-
- **Alternativa (múltiplas versões):** use [nvm-windows](https://github.com/coreybutler/nvm-windows/releases) ou [Volta](https://volta.sh/)
|
|
28
|
-
|
|
29
|
-
---
|
|
30
|
-
|
|
31
|
-
## Setup inicial (primeira vez)
|
|
32
|
-
|
|
33
|
-
```bash
|
|
34
|
-
# 1. Clone e entre na pasta
|
|
35
|
-
git clone <url-do-repositório>
|
|
36
|
-
cd planetaexo-designsystem
|
|
37
|
-
|
|
38
|
-
# 2. Instale as dependências
|
|
39
|
-
npm ci
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
> Use `npm ci` (não `npm install`) para garantir as versões exatas travadas no `package-lock.json`.
|
|
43
|
-
|
|
44
|
-
---
|
|
45
|
-
|
|
46
|
-
## Comandos
|
|
47
|
-
|
|
48
|
-
| Ação | Comando |
|
|
49
|
-
|------|---------|
|
|
50
|
-
| Servidor de desenvolvimento (Next.js) | `npm run dev` |
|
|
51
|
-
| Biblioteca npm (`dist/`, para apps externos) | `npm run build:lib` |
|
|
52
|
-
| Gerar bundle para WordPress | `npm run build:wp` |
|
|
53
|
-
| Build completo (Next.js) | `npm run build` |
|
|
54
|
-
| Lint | `npm run lint` |
|
|
55
|
-
|
|
56
|
-
---
|
|
57
|
-
|
|
58
|
-
## Desenvolvimento de componentes
|
|
59
|
-
|
|
60
|
-
Inicie o servidor:
|
|
61
|
-
|
|
62
|
-
```bash
|
|
63
|
-
npm run dev
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
Acesse: **http://localhost:3000**
|
|
67
|
-
|
|
68
|
-
Os componentes ficam em `src/components/`. O servidor atualiza automaticamente ao salvar.
|
|
69
|
-
|
|
70
|
-
---
|
|
71
|
-
|
|
72
|
-
## Gerar o bundle para WordPress
|
|
73
|
-
|
|
74
|
-
```bash
|
|
75
|
-
npm run build:wp
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
Artefatos gerados em `dist/wp/`:
|
|
79
|
-
|
|
80
|
-
```
|
|
81
|
-
dist/wp/
|
|
82
|
-
planetaexo-trip-island.js
|
|
83
|
-
planetaexo-trip-island.css
|
|
84
|
-
fonts/ ← se existir, copie também
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
### Copiar para o repositório WordPress
|
|
88
|
-
|
|
89
|
-
Após o build, copie os arquivos para o repositório `planetaexo-trips`:
|
|
90
|
-
|
|
91
|
-
```
|
|
92
|
-
dist/wp/planetaexo-trip-island.js → wp-content/plugins/planetaexo-trip-island/assets/trip-island/
|
|
93
|
-
dist/wp/planetaexo-trip-island.css → wp-content/plugins/planetaexo-trip-island/assets/trip-island/
|
|
94
|
-
dist/wp/fonts/ (se existir) → wp-content/plugins/planetaexo-trip-island/assets/trip-island/fonts/
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
Depois, registre o commit atual em `wp-content/plugins/planetaexo-trip-island/DS-BUILD.md` no repositório WordPress.
|
|
98
|
-
|
|
99
|
-
---
|
|
100
|
-
|
|
101
|
-
## Estrutura relevante
|
|
102
|
-
|
|
103
|
-
```
|
|
104
|
-
src/
|
|
105
|
-
components/ ← componentes React (BookingForm, TripHeader, TripPage…)
|
|
106
|
-
lib/
|
|
107
|
-
planetaexo-trip-data.ts ← tipos TypeScript do payload WordPress
|
|
108
|
-
wp-trip-payload-to-props.tsx ← adaptador payload → props React
|
|
109
|
-
wp-entries/
|
|
110
|
-
trip-island.tsx ← entry point do bundle WordPress (Vite)
|
|
111
|
-
dist/
|
|
112
|
-
wp/ ← saída do build:wp (não commitar; gerado localmente)
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
---
|
|
116
|
-
|
|
117
|
-
## Integração com o WordPress
|
|
118
|
-
|
|
119
|
-
O contrato de dados completo (payload `planetaexoTripData`, campos ACF, mount point HTML) está documentado em `HANDOFF.md` neste repositório.
|
|
120
|
-
|
|
121
|
-
Guia do ambiente WordPress (Docker): veja o `README.md` do repositório `planetaexo-trips`.
|
|
1
|
+
# Design System — PlanetaEXO
|
|
2
|
+
|
|
3
|
+
Componentes React compartilhados da PlanetaEXO. Gera **três** artefatos principais:
|
|
4
|
+
|
|
5
|
+
- **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.
|
|
6
|
+
- **Servidor de desenvolvimento** (Next.js) — para visualizar e desenvolver componentes em `http://localhost:3000`
|
|
7
|
+
- **Bundle WordPress** (`npm run build:wp`) — `dist/wp/planetaexo-trip-island.js` + `.css`, consumido pelo plugin `planetaexo-trip-island` no repositório `planetaexo-trips`
|
|
8
|
+
|
|
9
|
+
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.
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Pré-requisitos
|
|
14
|
+
|
|
15
|
+
### Node.js ≥ 18
|
|
16
|
+
|
|
17
|
+
Verifique:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
node -v # deve ser v18.x ou superior (recomendado: v20 LTS ou v22 LTS)
|
|
21
|
+
npm -v
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Se não tiver Node instalado ou precisar gerenciar versões:
|
|
25
|
+
|
|
26
|
+
- **Windows:** baixe o instalador LTS em https://nodejs.org/en/download
|
|
27
|
+
- **Alternativa (múltiplas versões):** use [nvm-windows](https://github.com/coreybutler/nvm-windows/releases) ou [Volta](https://volta.sh/)
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## Setup inicial (primeira vez)
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
# 1. Clone e entre na pasta
|
|
35
|
+
git clone <url-do-repositório>
|
|
36
|
+
cd planetaexo-designsystem
|
|
37
|
+
|
|
38
|
+
# 2. Instale as dependências
|
|
39
|
+
npm ci
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
> Use `npm ci` (não `npm install`) para garantir as versões exatas travadas no `package-lock.json`.
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## Comandos
|
|
47
|
+
|
|
48
|
+
| Ação | Comando |
|
|
49
|
+
|------|---------|
|
|
50
|
+
| Servidor de desenvolvimento (Next.js) | `npm run dev` |
|
|
51
|
+
| Biblioteca npm (`dist/`, para apps externos) | `npm run build:lib` |
|
|
52
|
+
| Gerar bundle para WordPress | `npm run build:wp` |
|
|
53
|
+
| Build completo (Next.js) | `npm run build` |
|
|
54
|
+
| Lint | `npm run lint` |
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## Desenvolvimento de componentes
|
|
59
|
+
|
|
60
|
+
Inicie o servidor:
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
npm run dev
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Acesse: **http://localhost:3000**
|
|
67
|
+
|
|
68
|
+
Os componentes ficam em `src/components/`. O servidor atualiza automaticamente ao salvar.
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## Gerar o bundle para WordPress
|
|
73
|
+
|
|
74
|
+
```bash
|
|
75
|
+
npm run build:wp
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Artefatos gerados em `dist/wp/`:
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
dist/wp/
|
|
82
|
+
planetaexo-trip-island.js
|
|
83
|
+
planetaexo-trip-island.css
|
|
84
|
+
fonts/ ← se existir, copie também
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Copiar para o repositório WordPress
|
|
88
|
+
|
|
89
|
+
Após o build, copie os arquivos para o repositório `planetaexo-trips`:
|
|
90
|
+
|
|
91
|
+
```
|
|
92
|
+
dist/wp/planetaexo-trip-island.js → wp-content/plugins/planetaexo-trip-island/assets/trip-island/
|
|
93
|
+
dist/wp/planetaexo-trip-island.css → wp-content/plugins/planetaexo-trip-island/assets/trip-island/
|
|
94
|
+
dist/wp/fonts/ (se existir) → wp-content/plugins/planetaexo-trip-island/assets/trip-island/fonts/
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
Depois, registre o commit atual em `wp-content/plugins/planetaexo-trip-island/DS-BUILD.md` no repositório WordPress.
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
## Estrutura relevante
|
|
102
|
+
|
|
103
|
+
```
|
|
104
|
+
src/
|
|
105
|
+
components/ ← componentes React (BookingForm, TripHeader, TripPage…)
|
|
106
|
+
lib/
|
|
107
|
+
planetaexo-trip-data.ts ← tipos TypeScript do payload WordPress
|
|
108
|
+
wp-trip-payload-to-props.tsx ← adaptador payload → props React
|
|
109
|
+
wp-entries/
|
|
110
|
+
trip-island.tsx ← entry point do bundle WordPress (Vite)
|
|
111
|
+
dist/
|
|
112
|
+
wp/ ← saída do build:wp (não commitar; gerado localmente)
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
## Integração com o WordPress
|
|
118
|
+
|
|
119
|
+
O contrato de dados completo (payload `planetaexoTripData`, campos ACF, mount point HTML) está documentado em `HANDOFF.md` neste repositório.
|
|
120
|
+
|
|
121
|
+
Guia do ambiente WordPress (Docker): veja o `README.md` do repositório `planetaexo-trips`.
|