vobi_document 1.0.0 → 1.0.1
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 +90 -43
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -1,66 +1,113 @@
|
|
|
1
|
-
#
|
|
1
|
+
# vobi_document
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
Zod e componentes React com styled-components.
|
|
3
|
+
Lib React (TypeScript estrito) para criação e renderização de documentos ricos — orçamentos, propostas, contratos — com editor drag-and-drop e saída pronta para impressão/PDF. Feita para ser consumida por outros projetos como camada completa de documentos: o host fornece dados, tema e variáveis; a lib entrega edição, preview e HTML paginado.
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
## Por que existe
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
Montar documentos num app de gestão normalmente vira três implementações que divergem: a tela de edição, o preview e o PDF. Aqui as três superfícies renderizam **exatamente o mesmo layout**, porque todas partem da mesma config:
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
-
|
|
13
|
-
|
|
14
|
-
-
|
|
15
|
-
- **ESLint 9** (flat config) + airbnb (via FlatCompat) + Prettier
|
|
16
|
-
- **pnpm** — gerenciador
|
|
17
|
-
- **yalc** — link local para consumo na `homehero-app-bo`
|
|
9
|
+
| Superfície | Componente | Base |
|
|
10
|
+
|------------|-----------|------|
|
|
11
|
+
| Editor (drag-and-drop) | `<DocumentEditor>` | `<Puck>` (`@puckeditor/core`) |
|
|
12
|
+
| Preview / viewer | `<DocumentRenderer>` | `<Render>` |
|
|
13
|
+
| PDF (server-side) | `<DocumentRenderer resolvedVariables={...}>` + `buildDocumentHtml` | `<Render>` + Paged.js |
|
|
18
14
|
|
|
19
|
-
|
|
15
|
+
`buildConfig(registry, { theme })` gera uma única config de Puck que alimenta editor e renderer — qualquer divergência entre edição e saída final é eliminada por construção.
|
|
16
|
+
|
|
17
|
+
## Principais recursos
|
|
18
|
+
|
|
19
|
+
- **Editor visual** — drag-and-drop de blocos, painel de estrutura (outline), bloqueio de blocos por permissão, header customizável via render-prop.
|
|
20
|
+
- **Blocos prontos** — texto, botão, divisor, quebra de página, imagem, grade de imagens, orçamento, tabela, ícone + texto, imagem + texto e duas colunas (`defaultBlocks`).
|
|
21
|
+
- **Blocos customizados** — o host cria os seus com `defineBlock` e registra no mesmo registry; entradas posteriores sobrescrevem por `key`.
|
|
22
|
+
- **Tema** — cores (brand/texto/fundo), fonte (allow-list Google Fonts), logo, formato e margens de página, tudo validado por Zod (`themeSchema`) e aplicado via CSS vars no `PageFrame`.
|
|
23
|
+
- **Variáveis dinâmicas** — chips no texto (`<span class="dg-var" data-var-key="customer.name">`) resolvidos a partir de um catálogo + resolver fornecidos pelo host; valores formatados em pt-BR; suporte a variáveis não resolvidas com placeholder ou label.
|
|
24
|
+
- **Paginação para impressão** — `buildDocumentHtml` gera HTML paginado com Paged.js embarcado: capa (`coverBlockKey`), header/footer com dados da empresa, repetição de cabeçalho de tabela entre páginas e blocos protegidos de corte (`noCutBlockKeys`).
|
|
25
|
+
- **Schemas Zod** — `parseDocument` / `safeParseDocument` validam o documento completo antes de persistir ou renderizar.
|
|
26
|
+
- **Autosave** — `useDocumentAutosave` com debounce para persistência incremental no host.
|
|
27
|
+
|
|
28
|
+
## Instalação
|
|
20
29
|
|
|
21
30
|
```bash
|
|
22
|
-
pnpm
|
|
31
|
+
pnpm add vobi_document
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Peer dependencies (o host deve declarar as quatro — precisam ser instância única compartilhada com a lib):
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
pnpm add react react-dom styled-components @puckeditor/core
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
> Duas cópias de `@puckeditor/core` ou `styled-components` não geram erro de versão — falham silenciosamente (contexto errado no `usePuck`, estilos ausentes no HTML publicado). Detalhes em `docs/build-and-consume.md`.
|
|
41
|
+
|
|
42
|
+
## Uso básico
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import {
|
|
46
|
+
buildConfig,
|
|
47
|
+
defaultBlocks,
|
|
48
|
+
DocumentEditor,
|
|
49
|
+
DocumentRenderer,
|
|
50
|
+
} from 'vobi_document';
|
|
51
|
+
|
|
52
|
+
const registry = [...defaultBlocks, meuBlocoCustomizado];
|
|
53
|
+
|
|
54
|
+
// Edição
|
|
55
|
+
<DocumentEditor
|
|
56
|
+
registry={registry}
|
|
57
|
+
theme={theme}
|
|
58
|
+
data={data}
|
|
59
|
+
onChange={setData}
|
|
60
|
+
catalog={catalog}
|
|
61
|
+
resolver={resolver}
|
|
62
|
+
ctx={ctx}
|
|
63
|
+
/>
|
|
64
|
+
|
|
65
|
+
// Preview / PDF
|
|
66
|
+
<DocumentRenderer
|
|
67
|
+
registry={registry}
|
|
68
|
+
theme={theme}
|
|
69
|
+
data={data}
|
|
70
|
+
resolvedVariables={resolved}
|
|
71
|
+
/>
|
|
23
72
|
```
|
|
24
73
|
|
|
25
|
-
|
|
74
|
+
Primitivas do Puck ficam no subpath dedicado, fora do barrel principal:
|
|
26
75
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
| `pnpm dev` | Build em watch |
|
|
31
|
-
| `pnpm typecheck` | `tsc --noEmit` |
|
|
32
|
-
| `pnpm test` | Roda os testes (Jest) |
|
|
33
|
-
| `pnpm test:watch` | Testes em watch |
|
|
34
|
-
| `pnpm test:coverage` | Testes com cobertura |
|
|
35
|
-
| `pnpm lint` | ESLint |
|
|
36
|
-
| `pnpm lint:fix` | ESLint com autofix |
|
|
37
|
-
| `pnpm format` | Prettier write |
|
|
38
|
-
| `pnpm deploy:local` | Build + `yalc push` para os consumidores |
|
|
76
|
+
```ts
|
|
77
|
+
import { Puck, Render, usePuck } from 'vobi_document/puck';
|
|
78
|
+
```
|
|
39
79
|
|
|
40
|
-
##
|
|
80
|
+
## Desenvolvimento
|
|
41
81
|
|
|
42
|
-
|
|
82
|
+
Requer Node >= 20 e **pnpm** (nunca npm/yarn).
|
|
43
83
|
|
|
44
84
|
```bash
|
|
45
|
-
pnpm
|
|
46
|
-
|
|
85
|
+
pnpm install
|
|
86
|
+
pnpm build # tsup -> dist (ESM + CJS + .d.ts)
|
|
87
|
+
pnpm test # jest
|
|
88
|
+
pnpm lint # eslint 9 flat + airbnb + prettier
|
|
89
|
+
pnpm typecheck # tsc --noEmit
|
|
90
|
+
pnpm deploy:local # build + yalc push para os consumidores linkados
|
|
47
91
|
```
|
|
48
92
|
|
|
49
|
-
|
|
93
|
+
Gate obrigatório antes de finalizar qualquer branch:
|
|
50
94
|
|
|
51
95
|
```bash
|
|
52
|
-
|
|
53
|
-
npm install
|
|
96
|
+
pnpm typecheck && pnpm lint && pnpm test && pnpm build
|
|
54
97
|
```
|
|
55
98
|
|
|
56
|
-
Durante o desenvolvimento, `pnpm deploy:local`
|
|
57
|
-
projetos que já têm o link via `yalc add`.
|
|
99
|
+
Durante o desenvolvimento local, o consumo se dá via yalc (`pnpm link:setup` na primeira vez, `pnpm deploy:local` nas atualizações — reinicie o dev server do consumidor após cada push).
|
|
58
100
|
|
|
59
|
-
##
|
|
101
|
+
## Documentação
|
|
60
102
|
|
|
61
|
-
|
|
103
|
+
Detalhe técnico mora em `docs/`:
|
|
62
104
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
105
|
+
| Assunto | Doc |
|
|
106
|
+
|---------|-----|
|
|
107
|
+
| Visão geral / arquitetura | [docs/architecture.md](docs/architecture.md) |
|
|
108
|
+
| Blocos / registry / criar bloco | [docs/blocks.md](docs/blocks.md) |
|
|
109
|
+
| Tema / cores / fonte / página / header | [docs/theme.md](docs/theme.md) |
|
|
110
|
+
| Variáveis dinâmicas | [docs/variables.md](docs/variables.md) |
|
|
111
|
+
| Autosave | [docs/autosave.md](docs/autosave.md) |
|
|
112
|
+
| Build / yalc / publicação | [docs/build-and-consume.md](docs/build-and-consume.md) |
|
|
113
|
+
| API pública / exports | [docs/api.md](docs/api.md) |
|
package/dist/index.cjs
CHANGED
|
@@ -1529,7 +1529,7 @@ function ColorPicker({
|
|
|
1529
1529
|
const wrapperRef = e.useRef(null);
|
|
1530
1530
|
const effective = value ?? fallback ?? "#000000";
|
|
1531
1531
|
if (presets.length % 6 !== 0) {
|
|
1532
|
-
console.warn(`[document
|
|
1532
|
+
console.warn(`[vobi-document] paleta com ${presets.length} cores n\xE3o fecha linhas de 6 (docs/theme.md).`);
|
|
1533
1533
|
}
|
|
1534
1534
|
e.useEffect(() => {
|
|
1535
1535
|
if (!open) return void 0;
|