@rendra-ui/web 2.3.0 → 2.4.0
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 +83 -60
- package/bin/rendra.mjs +19 -7
- package/dist/base.css +1 -1
- package/dist/{button-DWhICtIG.js → button-C6rjowQi.js} +4 -4
- package/dist/{button-DWhICtIG.js.map → button-C6rjowQi.js.map} +1 -1
- package/dist/chart.js +5 -5
- package/dist/cli/auditar.js +66 -16
- package/dist/cli/auditar.js.map +1 -1
- package/dist/cli/codigos.js +2 -2
- package/dist/cli/executar-auditar.js +634 -0
- package/dist/cli/executar-auditar.js.map +1 -0
- package/dist/cli/help.js +7 -2
- package/dist/cli/help.js.map +1 -1
- package/dist/cli/trocar.js +2 -2
- package/dist/cli/typescript-loader.js +1 -1
- package/dist/{cn-DDZQKUVV.js → cn-DXDpTGsu.js} +2 -2
- package/dist/{cn-DDZQKUVV.js.map → cn-DXDpTGsu.js.map} +1 -1
- package/dist/{components-Cq_PmN4y.js → components-hp7iWioq.js} +21 -4
- package/dist/components-hp7iWioq.js.map +1 -0
- package/dist/components.css +107 -1
- package/dist/document-viewer.js +4 -4
- package/dist/{empty-state-C491qfzf.js → empty-state-CdaDLcsB.js} +50 -30
- package/dist/empty-state-CdaDLcsB.js.map +1 -0
- package/dist/index.js +120 -63
- package/dist/index.js.map +1 -1
- package/dist/{rendra-provider-BRtk5Qa1.js → rendra-provider-7jUgUHzR.js} +2 -2
- package/dist/{rendra-provider-BRtk5Qa1.js.map → rendra-provider-7jUgUHzR.js.map} +1 -1
- package/dist/rich-text-editor.js +3 -3
- package/dist/router-bridge.js +2 -2
- package/dist/tokens.css +11 -1
- package/dist/{tooltip-DsNlnBSY.js → tooltip-bdmbX6vC.js} +3 -3
- package/dist/{tooltip-DsNlnBSY.js.map → tooltip-bdmbX6vC.js.map} +1 -1
- package/dist/types/components/app-shell/app-shell.d.ts +22 -2
- package/dist/types/components/app-shell/shell-context.d.ts +7 -1
- package/dist/types/components/app-shell/types.d.ts +23 -0
- package/dist/types/components/layout/page-header.d.ts +17 -1
- package/dist/types/components/ui/brand-feedback-icon.d.ts +20 -3
- package/dist/types/components/ui/button-group.d.ts +8 -1
- package/dist/types/components/ui/empty-state.d.ts +4 -0
- package/dist/types/components/ui/error-page.d.ts +6 -1
- package/dist/types/components/ui/modal.d.ts +4 -0
- package/dist/types/components/ui/wizard.d.ts +14 -1
- package/dist/types/lib/initials.d.ts +2 -0
- package/dist/{use-breakpoint-C3ivDt2R.js → use-breakpoint-Dyp-0E_c.js} +2 -2
- package/dist/{use-breakpoint-C3ivDt2R.js.map → use-breakpoint-Dyp-0E_c.js.map} +1 -1
- package/dist/widget-grid.js +2 -2
- package/package.json +2 -1
- package/dist/components-Cq_PmN4y.js.map +0 -1
- package/dist/empty-state-C491qfzf.js.map +0 -1
package/README.md
CHANGED
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
|
|
7
7
|
**Veja funcionando, sem instalar nada:** [página de apresentação](https://bsmagalhaes.github.io/rendra-ui-web/) · [demo do app](https://bsmagalhaes.github.io/rendra-ui-web/demo/) · [galeria com códigos de modelo](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/) · [Storybook](https://bsmagalhaes.github.io/rendra-ui-web/storybook/) · [vitrine de componentes](https://bsmagalhaes.github.io/rendra-ui-web/demo/componentes/) · [atendimento](https://bsmagalhaes.github.io/rendra-ui-web/demo/atendimento/) · [agenda](https://bsmagalhaes.github.io/rendra-ui-web/demo/agenda/) · [kanban](https://bsmagalhaes.github.io/rendra-ui-web/demo/kanban/). No demo, o menu do avatar troca modelo, paleta, modo e layout ao vivo.
|
|
8
8
|
|
|
9
|
-
| Atendimento omnichannel
|
|
10
|
-
|
|
|
11
|
-
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=safira-atendimento) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=safira-dashboard-ajuste) |
|
|
12
12
|
|
|
13
|
-
| Calendário e agenda
|
|
14
|
-
|
|
|
15
|
-
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=safira-calendario) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=aurora-kanban) |
|
|
16
16
|
|
|
17
17
|
---
|
|
18
18
|
|
|
@@ -64,44 +64,44 @@ Cada template tem formato, fonte, símbolo e paleta próprios.
|
|
|
64
64
|
|
|
65
65
|
**Rendra Safira**: quadrado, como uma pedra lapidada. Azul #0B6FE0, verde #98D10A e fonte Poppins.
|
|
66
66
|
|
|
67
|
-
| Painel
|
|
68
|
-
|
|
|
69
|
-
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=safira-painel) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=safira-clientes) |
|
|
70
70
|
|
|
71
71
|
**Rendra Equilíbrio**: o meio-termo, nem quadrado nem 100% arredondado. Violeta, ciano e fonte DM Sans.
|
|
72
72
|
|
|
73
|
-
| Painel
|
|
74
|
-
|
|
|
75
|
-
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=equilibrio-painel) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=equilibrio-clientes) |
|
|
76
76
|
|
|
77
77
|
**Rendra Aurora**: 100% arredondado, como um novo dia. Verde-petróleo, laranja e fonte Inter.
|
|
78
78
|
|
|
79
|
-
| Painel
|
|
80
|
-
|
|
|
81
|
-
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=aurora-painel) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=aurora-clientes) |
|
|
82
82
|
|
|
83
83
|
**Paleta Ardósia**: combinável com qualquer modelo. Azul-ardósia #2E414D e laranja #EA600D; com texto branco pedido, o gerador escurece o botão laranja para #C5510B, o tom mais próximo que passa AA (aqui no modelo Equilíbrio).
|
|
84
84
|
|
|
85
|
-
| Painel
|
|
86
|
-
|
|
|
87
|
-
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=ardosia-painel) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=ardosia-clientes) |
|
|
88
88
|
|
|
89
89
|
### Calendário, agenda e kanban
|
|
90
90
|
|
|
91
|
-
| Agenda da semana (T2-C2)
|
|
92
|
-
|
|
|
93
|
-
| [ | Kanban no celular (T1-C1) |
|
|
92
|
+
| --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
93
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=equilibrio-agenda) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=safira-kanban-mobile) |
|
|
94
94
|
|
|
95
95
|
<details>
|
|
96
96
|
<summary><strong>Tipos de menu: M1 a M6</strong> (clique para abrir aqui mesmo)</summary>
|
|
97
97
|
|
|
98
|
-
| M1: lateral recolhida, segunda barra
|
|
99
|
-
|
|
|
100
|
-
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=menu-m1) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=menu-m2) |
|
|
101
|
+
| **M3: lateral expandida, segunda barra** | **M4: lateral expandida, submenu na sidebar** |
|
|
102
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=menu-m3) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=menu-m4) |
|
|
103
|
+
| **M5: superior, lista suspensa** | **M6: superior, mega menu** |
|
|
104
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=menu-m5) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=menu-m6) |
|
|
105
105
|
|
|
106
106
|
</details>
|
|
107
107
|
|
|
@@ -110,11 +110,11 @@ Cada template tem formato, fonte, símbolo e paleta próprios.
|
|
|
110
110
|
|
|
111
111
|
O modelo (formato, fonte e símbolo) e a paleta (cores, degradês e sidebar) são camadas independentes: qualquer modelo aceita qualquer paleta. São 12 combinações (3 modelos × 4 paletas), todas na mesma tela de detalhe do cliente.
|
|
112
112
|
|
|
113
|
-
| Modelo \ Paleta | Safira
|
|
114
|
-
| --------------------------- |
|
|
115
|
-
| **Safira** (quadrado) | [ | [ | [ | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=matriz-safira-safira) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=matriz-safira-equilibrio) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=matriz-safira-aurora) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=matriz-safira-ardosia) |
|
|
116
|
+
| **Equilíbrio** (meio-termo) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=matriz-equilibrio-safira) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=matriz-equilibrio-equilibrio) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=matriz-equilibrio-aurora) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=matriz-equilibrio-ardosia) |
|
|
117
|
+
| **Aurora** (arredondado) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=matriz-aurora-safira) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=matriz-aurora-equilibrio) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=matriz-aurora-aurora) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=matriz-aurora-ardosia) |
|
|
118
118
|
|
|
119
119
|
</details>
|
|
120
120
|
|
|
@@ -123,26 +123,26 @@ O modelo (formato, fonte e símbolo) e a paleta (cores, degradês e sidebar) sã
|
|
|
123
123
|
|
|
124
124
|
Mesmo componente, mesma API: no celular a tabela vira cards, a sidebar vira gaveta e a navegação ganha uma barra inferior.
|
|
125
125
|
|
|
126
|
-
| Safira
|
|
127
|
-
|
|
|
128
|
-
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=safira-mobile) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=equilibrio-mobile) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=aurora-mobile) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=equilibrio-mobile-tabela) |
|
|
129
129
|
|
|
130
130
|
</details>
|
|
131
131
|
|
|
132
132
|
<details>
|
|
133
133
|
<summary><strong>Modo escuro e outras telas</strong> (clique para abrir aqui mesmo)</summary>
|
|
134
134
|
|
|
135
|
-
| Modo escuro (Safira)
|
|
136
|
-
|
|
|
137
|
-
| [ | Modo escuro (Equilíbrio) |
|
|
136
|
+
| --------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
|
137
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=safira-escuro) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=equilibrio-escuro) |
|
|
138
138
|
|
|
139
|
-
| Drawer com rodapé fixo (30/70)
|
|
140
|
-
|
|
|
141
|
-
| [ | Mega menu no menu superior |
|
|
140
|
+
| --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
|
|
141
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=safira-drawer) | [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=aurora-mega-menu) |
|
|
142
142
|
|
|
143
|
-
| Login (Aurora)
|
|
144
|
-
|
|
|
145
|
-
| [ |
|
|
144
|
+
| ------------------------------------------------------------------------------------------------------------------- |
|
|
145
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/demo/galeria/?imagem=aurora-login) |
|
|
146
146
|
|
|
147
147
|
</details>
|
|
148
148
|
|
|
@@ -170,18 +170,18 @@ A marca fica isolada: as 4 cores e o degradê em `src/brand/palettes.ts`, o mode
|
|
|
170
170
|
|
|
171
171
|
Todos em `src/components/ui`, um por finalidade, com o ícone de feedback da marca onde houver feedback.
|
|
172
172
|
|
|
173
|
-
| Grupo | Componentes
|
|
174
|
-
| ---------------- |
|
|
175
|
-
| **Ações** | Button (6 variantes, tamanhos, ícone, só ícone, carregando, largura total), ButtonGroup (agrupado ou segmentado), DropdownMenu e ActionBar (regra 100%, 30/70 e menu)
|
|
176
|
-
| **Formulário** | Input (máscaras de CPF, CNPJ, CPF ou CNPJ automático, telefone com seletor de DDI embutido e +55 por padrão, CEP, data, hora, moeda e percentual, com ícone, limpar e senha), Textarea com contador, Select (busca, múltiplo com chips, selecionar todos, contador, criar opção, busca remota), Checkbox com indeterminado e grupo, Radio em lista e em cards, Switch, DatePicker (data, período e horário, em pt-BR), Slider, Upload com arrastar e soltar e progresso, OtpInput (2FA), Field, Form, FormField e FormSection com React Hook Form e Zod, e validadores de CPF, CNPJ, telefone, CEP e data
|
|
177
|
-
| **Navegação** | Tabs (linha ou pílula, vira seletor quando não cabe), Breadcrumb, Pagination (completa, compacta ou "carregar mais") e Wizard/Stepper (etapas concluída, atual, pendente e com erro, com validação por etapa)
|
|
178
|
-
| **Dados** | Table com TanStack Table (seleção, expansão, ordenação, busca, colunas visíveis, ações em massa e por linha, densidade, estados vazio, carregando e erro, forma de cards no celular e **modo remoto**: 15 por página, carregando página por página, com busca e filtros em todos os registros), Card, StatCard, Badge, Avatar e grupo, List, Timeline, Accordion e Chart com Recharts (linha, barra, área e pizza)
|
|
179
|
-
| **Feedback** | BrandFeedbackIcon animado (check se desenhando, X se riscando), Toast com Sonner, Alert, Modal (confirmação, destrutiva, informativo e formulário), InfoHint (texto orientativo num ícone de informação que abre modal; também como `help` em PageHeader, CardTitle e FormSection), Drawer (header e rodapé fixos, confirmação de descarte, 30%, 40%, 50% ou 75% da tela), Popover, Tooltip, EmptyState, ErrorPage (404 e 500), Skeleton e Progress
|
|
180
|
-
| **Atendimento** | Chat omnichannel: ConversationList (foto com o logotipo do canal: WhatsApp, WhatsApp Web, Instagram, Facebook, TikTok, Google Meu Negócio e Reclame Aqui), ChatThread (cliente, atendente, robô e avisos; botão direito ou "…" para responder, reagir, editar e excluir; citação que leva à mensagem original; áudio em 1x, 1,5x e 2x; baixar anexos) e ChatComposer (textarea que cresce, anexos, emoji, mensagens rápidas, gravação de áudio, arrastar e soltar ou colar prints; no celular, campo, enviar e um botão de ações)
|
|
181
|
-
| **Conteúdo** | RichTextEditor (Tiptap): formatação completa, listas, alinhamento, links, tabela, imagem com 4 alças para redimensionar, colar print, arrastar imagens e modo HTML
|
|
182
|
-
| **Painel** | WidgetGrid: widgets que se arrastam e redimensionam no modo "Ajustar dashboard", com a arrumação salva; Chart com velocímetro de meta, funil com conversão, barras com linha, barras coloridas e empilhadas
|
|
183
|
-
| **Planejamento** | Calendar (mês, semana, dia e agenda em lista, no mesmo componente; no celular vira mês compacto com a lista do dia), Kanban (altura da tela, 5 etapas visíveis e rolagem lateral também pelo touchpad, rolagem infinita por etapa, (+) no título da etapa, totais em R$ de P&S e MRR por etapa e por cartão, arrastar no computador, menu "Mover para" no toque e no teclado, uma coluna por vez no celular, limite por coluna) e ImageViewer (imagens em popup, com setas, Esc, arrastar e pinça)
|
|
184
|
-
| **Layout** | Container (respiro igual em todos os lados), Stack, Inline, Grid (por tela ou por container query), Section e PageHeader
|
|
173
|
+
| Grupo | Componentes |
|
|
174
|
+
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
175
|
+
| **Ações** | Button (6 variantes, tamanhos, ícone, só ícone, carregando, largura total), ButtonGroup (agrupado, na horizontal, vertical ou responsivo, ou segmentado), DropdownMenu e ActionBar (regra 100%, 30/70 e menu) |
|
|
176
|
+
| **Formulário** | Input (máscaras de CPF, CNPJ, CPF ou CNPJ automático, telefone com seletor de DDI embutido e +55 por padrão, CEP, data, hora, moeda e percentual, com ícone, limpar e senha), Textarea com contador, Select (busca, múltiplo com chips, selecionar todos, contador, criar opção, busca remota), Checkbox com indeterminado e grupo, Radio em lista e em cards, Switch, DatePicker (data, período e horário, em pt-BR), Slider, Upload com arrastar e soltar e progresso, OtpInput (2FA), Field, Form, FormField e FormSection com React Hook Form e Zod, e validadores de CPF, CNPJ, telefone, CEP e data |
|
|
177
|
+
| **Navegação** | Tabs (linha ou pílula, vira seletor quando não cabe), Breadcrumb, Pagination (completa, compacta ou "carregar mais") e Wizard/Stepper (rótulos próprios e etapa opcional com Pular em "Mais ações"; etapas concluída, atual, pendente e com erro, com validação por etapa) |
|
|
178
|
+
| **Dados** | Table com TanStack Table (seleção, expansão, ordenação, busca, colunas visíveis, ações em massa e por linha, densidade, estados vazio, carregando e erro, forma de cards no celular e **modo remoto**: 15 por página, carregando página por página, com busca e filtros em todos os registros), Card, StatCard, Badge, Avatar e grupo, List, Timeline, Accordion e Chart com Recharts (linha, barra, área e pizza) |
|
|
179
|
+
| **Feedback** | BrandFeedbackIcon animado (check se desenhando, X se riscando; cor da marca, selo ao lado e entrada `encaixe` por opção), Toast com Sonner, Alert, Modal (confirmação, destrutiva, informativo, com segundo botão opcional por `cancelLabel`, e formulário), InfoHint (texto orientativo num ícone de informação que abre modal; também como `help` em PageHeader, CardTitle e FormSection), Drawer (header e rodapé fixos, confirmação de descarte, 30%, 40%, 50% ou 75% da tela), Popover, Tooltip, EmptyState (`className="py-0 md:py-0"` zera o respiro vertical), ErrorPage (404 e 500, com `back={false}` para tirar o Voltar), Skeleton e Progress |
|
|
180
|
+
| **Atendimento** | Chat omnichannel: ConversationList (foto com o logotipo do canal: WhatsApp, WhatsApp Web, Instagram, Facebook, TikTok, Google Meu Negócio e Reclame Aqui), ChatThread (cliente, atendente, robô e avisos; botão direito ou "…" para responder, reagir, editar e excluir; citação que leva à mensagem original; áudio em 1x, 1,5x e 2x; baixar anexos) e ChatComposer (textarea que cresce, anexos, emoji, mensagens rápidas, gravação de áudio, arrastar e soltar ou colar prints; no celular, campo, enviar e um botão de ações) |
|
|
181
|
+
| **Conteúdo** | RichTextEditor (Tiptap): formatação completa, listas, alinhamento, links, tabela, imagem com 4 alças para redimensionar, colar print, arrastar imagens e modo HTML |
|
|
182
|
+
| **Painel** | WidgetGrid: widgets que se arrastam e redimensionam no modo "Ajustar dashboard", com a arrumação salva; Chart com velocímetro de meta, funil com conversão, barras com linha, barras coloridas e empilhadas |
|
|
183
|
+
| **Planejamento** | Calendar (mês, semana, dia e agenda em lista, no mesmo componente; no celular vira mês compacto com a lista do dia), Kanban (altura da tela, 5 etapas visíveis e rolagem lateral também pelo touchpad, rolagem infinita por etapa, (+) no título da etapa, totais em R$ de P&S e MRR por etapa e por cartão, arrastar no computador, menu "Mover para" no toque e no teclado, uma coluna por vez no celular, limite por coluna) e ImageViewer (imagens em popup, com setas, Esc, arrastar e pinça) |
|
|
184
|
+
| **Layout** | Container (respiro igual em todos os lados), Stack, Inline, Grid (por tela ou por container query), Section e PageHeader (título no corpo do celular por `bodyTitle`, sem reservar o bloco do título por `titleSpace`) |
|
|
185
185
|
|
|
186
186
|
### AppShell
|
|
187
187
|
|
|
@@ -191,6 +191,9 @@ Tudo configurável por props, com o padrão em `src/config/layout.ts`:
|
|
|
191
191
|
- sidebar **recolhida** (só ícones, padrão) ou **expandida**, com opção de **abrir por cima do conteúdo** ao passar o mouse;
|
|
192
192
|
- submenu em **segunda barra lateral** ou **dentro da sidebar**, e, no menu superior, **submenu navegável** ou **mega menu** com seções;
|
|
193
193
|
- header sempre fixo, com título da página e trilha, busca global (**Ctrl+K**), notificações, tema e menu do usuário;
|
|
194
|
+
- logo no header do celular, no lugar do título e da trilha, pela prop `headerLogo`;
|
|
195
|
+
- seletor de espaço (empresa, unidade) no topo do menu do usuário, pela prop `workspaces`;
|
|
196
|
+
- menu do usuário enxuto: `userMenu` esconde Tema, Template ou Layout, um a um;
|
|
194
197
|
- no celular, gaveta de navegação e barra inferior com até 4 itens.
|
|
195
198
|
|
|
196
199
|
### Telas base
|
|
@@ -206,7 +209,7 @@ Login, esqueci a senha, verificação em duas etapas (2FA), nova senha, cadastro
|
|
|
206
209
|
- **Regressão visual** (`npm run test:visual`): 128 capturas comparadas com a referência aprovada. Pegam cor que mudou, espaçamento que quebrou e ícone que sumiu. As referências são geradas no Linux do CI; depois de uma mudança visual intencional, aplique o rótulo `atualizar-visual` no Pull Request.
|
|
207
210
|
- **Testes unitários e de componente com Vitest e Testing Library** (`npm test`; `npm run test:coverage` com o piso por arquivo): comportamento de Table (ordenação, busca, paginação, seleção, ações em massa, modo remoto e cartões no celular), Select, Input (máscaras, centavos e busca de CEP e CNPJ), Modal, Drawer, campos de formulário e navegação, além de validadores, máscaras, buscas e o gerador de paletas (AA garantido em todas). Cada componente tem o teste ao lado, e ele vai junto quando você copia o componente para outro projeto.
|
|
208
211
|
- **CI no GitHub Actions**: todo Pull Request passa por tipos, lint, formatação, regras, unitários, build, Storybook e os três testes no navegador. A `main` só aceita merge com tudo verde. Os alertas de segurança do GitHub avisam de dependência vulnerável; as atualizações de versão são feitas à mão (veja o `CONTRIBUTING.md`).
|
|
209
|
-
- **Verificador de regras** (`npm run check:rules`): barra cor fixa, valor arbitrário, degrau fora da escala, estilo inline, fonte fixa, `100vh` e arquivos duplicados ou mobile.
|
|
212
|
+
- **Verificador de regras** (`npm run check:rules`): barra cor fixa, valor arbitrário, degrau fora da escala, estilo inline, fonte fixa, `100vh` e arquivos duplicados ou mobile. A mesma varredura, com as 17 regras, roda em qualquer projeto por `npx @rendra-ui/web auditar --all`.
|
|
210
213
|
|
|
211
214
|
---
|
|
212
215
|
|
|
@@ -359,6 +362,8 @@ import '@rendra-ui/web/components.css'
|
|
|
359
362
|
|
|
360
363
|
O CSS já sai compilado (estratégia A: o host recebe `tokens.css`, `base.css` e `components.css` prontos, sem precisar ter o Tailwind instalado, e sem nenhuma variável do namespace do Tailwind vazar para o seu tema). `react-router` fica fora das dependências: quem usa React Router importa a ponte, `@rendra-ui/web/router-bridge`; quem não usa, não precisa dela. Os componentes pesados (`document-viewer`, `rich-text-editor`, `chart`, `widget-grid`) são subcaminhos próprios, para não engordar quem não usa.
|
|
361
364
|
|
|
365
|
+
**O que o `components.css` traz, e o que não traz.** Ele contém só as classes que os componentes do pacote usam por dentro e as `@utility` do Rendra. Classes de composição das suas próprias telas (`p-12`, `max-w-sm`, `flex-col`, `mb-0`) não estão garantidas: num host com Tailwind v4, deixe o seu Tailwind gerá-las e reproduza no `@theme` a escala do Rendra (espaço 0, px, 1, 2, 3, 4, 6, 8, 12, 16 e 24, raios por papel, cores `--rendra-*`); num host sem Tailwind, escreva o CSS de composição à mão com as variáveis `--rendra-*`. A receita completa e a lista de todas as `@utility` estão em [`docs/COMO_APLICAR.md`](docs/COMO_APLICAR.md), na seção "O CSS do pacote e as classes das suas telas".
|
|
366
|
+
|
|
362
367
|
**Publicação:** uma tag `vX.Y.Z` empurrada para o repositório (`git push origin vX.Y.Z`) dispara o `.github/workflows/publish.yml`, que builda o pacote, roda o `verify:pack` e publica com `npm publish --provenance --access public`, depois de conferir que a tag bate com a `version` do `package.json`. Com o _trusted publishing_ do npm configurado para este repositório, o workflow dispensa o segredo `NPM_TOKEN`.
|
|
363
368
|
|
|
364
369
|
### CLI (`rendra`)
|
|
@@ -367,13 +372,31 @@ Três comandos. Forma segura, que não exige instalar nada: `npx @rendra-ui/web
|
|
|
367
372
|
|
|
368
373
|
```bash
|
|
369
374
|
npx @rendra-ui/web codigos # lista o catálogo de códigos de componente
|
|
370
|
-
npx @rendra-ui/web auditar [pasta]
|
|
375
|
+
npx @rendra-ui/web auditar [pasta...] [--all] [--ignore a,b] # regras de DESIGN_RULES.md no projeto de destino
|
|
371
376
|
npx @rendra-ui/web trocar <DE> <PARA> --dry-run # simula a troca de uma variante do catálogo pela outra
|
|
372
377
|
```
|
|
373
378
|
|
|
374
379
|
Nota: `npx rendra <comando>` só funciona com o pacote instalado neste projeto (ou instalado global, como `rendra <comando>` direto). Sem instalar, não use `npx rendra`: o nome `rendra` no npm pertence a outro pacote, não a este.
|
|
375
380
|
|
|
376
|
-
`rendra auditar` aplica sete regras estáticas, sem IA (cor fixa, valor arbitrário, estilo inline, fonte fixa, `100vh`, degrau fora da escala, raio fixo), o mesmo tipo de checagem do `check:rules` deste repositório, aplicado a qualquer projeto.
|
|
381
|
+
`rendra auditar` aplica, por padrão, sete regras estáticas, sem IA (cor fixa, valor arbitrário, estilo inline, fonte fixa, `100vh`, degrau fora da escala, raio fixo), o mesmo tipo de checagem do `check:rules` deste repositório, aplicado a qualquer projeto. Sem flag e sem `rendra.config.json`, a saída e o código de saída são os de sempre (1 com violação, 0 sem).
|
|
382
|
+
|
|
383
|
+
**`--all`** liga as 17 regras do `check:rules`: as sete acima mais `var-inline`, `svg-marca`, `classe-dinamica`, `texto-estreito`, `primaria-como-texto`, `componente-duplicado`, `css-fora-do-lugar`, `botao-solto`, `texto-orientativo` e `variavel-sem-prefixo-rendra`. Use quando o projeto segue o vocabulário e as pastas do Rendra (`--rendra-*`, `src/brand`, `src/styles`, telas em `src/pages/app`); num projeto que não segue, desligue as regras que não fazem sentido em `rendra.config.json`. Com `--all`, pastas de marca e de estilos só passam pelo prefixo `--rendra-`, e `.test.`, `.stories.`, `node_modules`, `dist` e `build` não são varridos.
|
|
384
|
+
|
|
385
|
+
**`--ignore a,b`** pula pastas, por prefixo de pasta relativo ao projeto (sem glob): `src/brand` pula `src/brand` e tudo dentro, mas não `src/brand-novo`. Vale também `--ignore a --ignore b` e `--ignore=a,b`, com ou sem `--all`. **Várias pastas:** `auditar src extra` varre as duas. Com uma só pasta, ela é a base do projeto (o `file` da saída sai relativo a ela e o `rendra.config.json` é lido dela); com duas ou mais, a base é a pasta atual. Pasta fora da base dá erro claro, sem varrer nada.
|
|
386
|
+
|
|
387
|
+
**`rendra.config.json`** é opcional, fica na base do projeto e aceita cinco chaves, todas opcionais:
|
|
388
|
+
|
|
389
|
+
```json
|
|
390
|
+
{
|
|
391
|
+
"pastas": ["src", "extra"],
|
|
392
|
+
"ignorar": ["src/gerado"],
|
|
393
|
+
"regras": { "botao-solto": false, "cor-fixa": false },
|
|
394
|
+
"pastasMarca": ["src/brand", "src/styles"],
|
|
395
|
+
"pastasTelas": ["src/pages/app"]
|
|
396
|
+
}
|
|
397
|
+
```
|
|
398
|
+
|
|
399
|
+
`pastas` substitui o atalho para `src`; `ignorar` tem o efeito de `--ignore`; `regras` desliga qualquer um dos 17 identificadores (`false`), com ou sem `--all`; `pastasMarca` e `pastasTelas` valem com `--all`, e os padrões são os do exemplo. A flag vence o config e não soma: `--ignore` substitui `ignorar`, e duas ou mais pastas posicionais substituem `pastas`. JSON inválido, chave desconhecida, tipo errado ou regra desconhecida dão mensagem em português e código de saída 1, assim como flag desconhecida (`--foo`) e `--ignore` sem valor. `rendra auditar --help` mostra a ajuda geral. `rendra trocar` reescreve a prop literal que distingue duas variantes do catálogo (`ABA-001` para `ABA-002`, por exemplo), sempre com `--dry-run` primeiro: um elemento sem a prop conta como a variante padrão do componente (troca também esse caso, inserindo ou removendo a prop conforme o lado); prop dinâmica (`variant={x}`) nunca é reescrita, só listada para revisão manual, e troca entre componentes diferentes nunca edita, só aponta onde o componente aparece. Só `rendra trocar` precisa do `typescript` instalado no projeto de destino (`peerDependency` opcional do pacote), para ler e reescrever o JSX; sem ele, avisa e sai com erro.
|
|
377
400
|
|
|
378
401
|
### Skill de migração parcial
|
|
379
402
|
|
package/bin/rendra.mjs
CHANGED
|
@@ -7,7 +7,9 @@
|
|
|
7
7
|
*
|
|
8
8
|
* Três subcomandos, mais `--help`/sem argumento (ver printHelp, `src/cli/help.ts`):
|
|
9
9
|
* rendra codigos lista o catálogo de códigos de componente
|
|
10
|
-
* rendra auditar [
|
|
10
|
+
* rendra auditar [pasta...] [--all] [--ignore a,b]
|
|
11
|
+
* regras de DESIGN_RULES.md (padrão: cwd atual e as sete
|
|
12
|
+
* genéricas; --all liga as 17; rendra.config.json opcional)
|
|
11
13
|
* rendra trocar <DE> <PARA> [--dry-run] troca a variante DE pela PARA no projeto
|
|
12
14
|
*/
|
|
13
15
|
import { existsSync } from 'node:fs'
|
|
@@ -33,7 +35,7 @@ function printAudit(violations) {
|
|
|
33
35
|
}
|
|
34
36
|
for (const v of violations) {
|
|
35
37
|
console.error(`\n${v.file}:${v.line} [${v.rule}] ${v.message}`)
|
|
36
|
-
console.error(` ${v.source.slice(0, 160)}`)
|
|
38
|
+
if (v.source) console.error(` ${v.source.slice(0, 160)}`)
|
|
37
39
|
}
|
|
38
40
|
console.error(`\n${violations.length} violação(ões) das regras de design.`)
|
|
39
41
|
}
|
|
@@ -71,11 +73,21 @@ async function main() {
|
|
|
71
73
|
}
|
|
72
74
|
|
|
73
75
|
if (command === 'auditar') {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
const
|
|
77
|
-
|
|
78
|
-
|
|
76
|
+
// Toda a decisão (argumentos, base, config, precedência) mora em src/cli/executar-auditar.ts,
|
|
77
|
+
// com teste: aqui só se chama, imprime e define o código de saída.
|
|
78
|
+
const { executarAuditar } = await importDist('executar-auditar')
|
|
79
|
+
const resultado = executarAuditar(rest, process.cwd())
|
|
80
|
+
if ('erro' in resultado) {
|
|
81
|
+
console.error(resultado.erro)
|
|
82
|
+
process.exitCode = 1
|
|
83
|
+
return
|
|
84
|
+
}
|
|
85
|
+
if ('ajuda' in resultado) {
|
|
86
|
+
console.log(resultado.ajuda)
|
|
87
|
+
return
|
|
88
|
+
}
|
|
89
|
+
printAudit(resultado.violacoes)
|
|
90
|
+
process.exitCode = resultado.violacoes.length > 0 ? 1 : 0
|
|
79
91
|
return
|
|
80
92
|
}
|
|
81
93
|
|
package/dist/base.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/*! Rendra Design System v2.
|
|
2
|
-
import { t as cn } from "./cn-
|
|
3
|
-
import { p as resolveCatalogCode } from "./components-
|
|
1
|
+
/*! Rendra Design System v2.4.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
|
+
import { t as cn } from "./cn-DXDpTGsu.js";
|
|
3
|
+
import { p as resolveCatalogCode } from "./components-hp7iWioq.js";
|
|
4
4
|
import { Loader2 } from "lucide-react";
|
|
5
5
|
import { Slot } from "radix-ui";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -140,4 +140,4 @@ var Button = forwardRef(function Button({ className, variant, size, icon, iconRi
|
|
|
140
140
|
//#endregion
|
|
141
141
|
export { usePrefersReducedMotion as i, buttonVariants as n, Spinner as r, Button as t };
|
|
142
142
|
|
|
143
|
-
//# sourceMappingURL=button-
|
|
143
|
+
//# sourceMappingURL=button-C6rjowQi.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-
|
|
1
|
+
{"version":3,"file":"button-C6rjowQi.js","names":[],"sources":["../src/hooks/use-reduced-motion.ts","../src/components/ui/spinner.tsx","../src/components/ui/button.tsx"],"sourcesContent":["import { useSyncExternalStore } from 'react'\n\n/*\n * Único hook de leitura de \"menos movimento\" do sistema operacional (prefers-reduced-motion).\n * Usado pelo Spinner e pelo Progress indeterminado para parar a animação sem depender só do\n * CSS, e assim ficar testável (mocke matchMedia para simular a preferência).\n */\n\nfunction subscribe(cb: () => void) {\n const mq = matchMedia('(prefers-reduced-motion: reduce)')\n mq.addEventListener('change', cb)\n return () => mq.removeEventListener('change', cb)\n}\n\nfunction getCurrent() {\n return matchMedia('(prefers-reduced-motion: reduce)').matches\n}\n\nexport function usePrefersReducedMotion() {\n return useSyncExternalStore(subscribe, getCurrent, () => false)\n}\n","import { Loader2 } from 'lucide-react'\nimport { usePrefersReducedMotion } from '@/hooks/use-reduced-motion'\nimport { cn } from '@/lib/cn'\n\n/*\n * Indicador de carregamento único do sistema (A17 do plano da v2). Substitui qualquer\n * `Loader2 animate-spin` solto em Button, Input e Select. Sem label é decorativo\n * (aria-hidden); com label, anuncia o carregamento a quem usa leitor de tela. Para de girar\n * quando o sistema pede menos movimento.\n */\n\nexport interface SpinnerProps {\n size?: 'sm' | 'md' | 'lg'\n /** Nome do que está carregando. Vazio (padrão): decorativo, sem anúncio de leitor de tela. */\n label?: string\n className?: string\n}\n\nconst sizeClass: Record<NonNullable<SpinnerProps['size']>, string> = {\n sm: 'size-icon-sm',\n md: 'size-icon-md',\n lg: 'size-icon-lg',\n}\n\nexport function Spinner({ size = 'md', label, className }: SpinnerProps) {\n const reduced = usePrefersReducedMotion()\n const icon = (\n <Loader2 aria-hidden className={cn(sizeClass[size], reduced ? '' : 'animate-spin')} />\n )\n\n if (!label) {\n return (\n <span data-rendra=\"SPIN-001\" aria-hidden className={cn('inline-flex', className)}>\n {icon}\n </span>\n )\n }\n\n return (\n <span\n data-rendra=\"SPIN-001\"\n role=\"status\"\n className={cn('inline-flex items-center gap-2', className)}\n >\n {icon}\n <span className=\"sr-only\">{label}</span>\n </span>\n )\n}\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\nimport { resolveCatalogCode } from '@/catalog/components'\nimport { Spinner } from '@/components/ui/spinner'\nimport { cn } from '@/lib/cn'\n\n/**\n * Botão único do sistema. Variantes, tamanho, ícone, só ícone, carregamento e\n * largura total são props: nunca crie outro arquivo de botão.\n * Altura vem de h-control-*: 44px ou mais no mobile, compacta a partir de md.\n */\nexport const buttonVariants = cva(\n 'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] duration-150 ease-out select-none active:scale-98 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0',\n {\n variants: {\n variant: {\n // Hover troca para a cor de hover da marca e eleva um nível; pressionar comprime.\n primary:\n 'bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover hover:text-primary-hover-foreground hover:shadow-md active:bg-primary-hover active:text-primary-hover-foreground active:shadow-sm',\n secondary:\n 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover hover:text-secondary-hover-foreground hover:shadow-md active:bg-secondary-hover active:text-secondary-hover-foreground active:shadow-sm',\n outline:\n 'border border-input bg-card text-foreground hover:border-primary hover:bg-primary-soft hover:text-primary-soft-foreground active:bg-primary-soft',\n // Transparentes: no hover, assumem a cor primária do template.\n ghost:\n 'text-foreground hover:bg-primary-soft hover:text-primary-soft-foreground active:bg-primary-soft',\n destructive:\n 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover hover:shadow-md active:bg-destructive-hover active:shadow-sm',\n link: 'min-h-touch min-w-touch text-primary-text underline-offset-4 hover:text-primary-hover hover:underline md:min-h-0 md:min-w-0',\n },\n size: {\n sm: 'h-control-sm px-3 text-sm [&_svg]:size-icon-sm',\n md: 'h-control-md px-4 text-sm [&_svg]:size-icon-sm',\n lg: 'h-control-lg px-6 text-base [&_svg]:size-icon-md',\n },\n iconOnly: { true: 'px-0', false: '' },\n fullWidth: { true: 'w-full', false: '' },\n },\n compoundVariants: [\n { iconOnly: true, size: 'sm', className: 'w-control-sm' },\n { iconOnly: true, size: 'md', className: 'w-control-md' },\n { iconOnly: true, size: 'lg', className: 'w-control-lg' },\n { variant: 'link', className: 'h-auto px-0' },\n ],\n defaultVariants: { variant: 'primary', size: 'md', iconOnly: false, fullWidth: false },\n },\n)\n\ntype Variants = VariantProps<typeof buttonVariants>\n\nexport interface ButtonProps\n extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<Variants, 'iconOnly' | 'fullWidth'> {\n /** Ícone à esquerda do texto (ou o próprio conteúdo, com iconOnly). */\n icon?: ReactNode\n /** Ícone à direita do texto. */\n iconRight?: ReactNode\n /** Botão só com ícone: quadrado, e aria-label passa a ser obrigatório. */\n iconOnly?: boolean\n /** Mostra indicador, bloqueia cliques e marca aria-busy. */\n loading?: boolean\n /** Ocupa toda a largura do contêiner. */\n fullWidth?: boolean\n /** Renderiza o filho (ex.: <Link>) com a aparência de botão. */\n asChild?: boolean\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n className,\n variant,\n size,\n icon,\n iconRight,\n iconOnly = false,\n loading = false,\n fullWidth = false,\n asChild = false,\n disabled,\n type = 'button',\n children,\n ...props\n },\n ref,\n) {\n if (import.meta.env.DEV && iconOnly && !props['aria-label']) {\n console.warn('Button com iconOnly precisa de aria-label.')\n }\n const classes = cn(buttonVariants({ variant, size, iconOnly, fullWidth }), className)\n const code = resolveCatalogCode('Button', { variant: variant ?? 'primary' })\n\n if (asChild) {\n return (\n <Slot.Root ref={ref} data-rendra={code} className={classes} {...props}>\n {children}\n </Slot.Root>\n )\n }\n\n // Ícone dentro do botão segue o tamanho do próprio botão (sm/md -> sm, lg -> md, como o\n // [&_svg]:size-icon-* de buttonVariants já fazia com o Loader2 solto).\n const leading = loading ? <Spinner size={size === 'lg' ? 'md' : 'sm'} /> : icon\n return (\n <button\n ref={ref}\n type={type}\n data-rendra={code}\n className={classes}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n {...props}\n >\n {leading}\n {iconOnly ? (loading ? null : children) : children}\n {!iconOnly && iconRight}\n </button>\n )\n})\n"],"mappings":";;;;;;;;;AAQA,SAAS,UAAU,IAAgB;CACjC,MAAM,KAAK,WAAW,kCAAkC;CACxD,GAAG,iBAAiB,UAAU,EAAE;CAChC,aAAa,GAAG,oBAAoB,UAAU,EAAE;AAClD;AAEA,SAAS,aAAa;CACpB,OAAO,WAAW,kCAAkC,CAAC,CAAC;AACxD;AAEA,SAAgB,0BAA0B;CACxC,OAAO,qBAAqB,WAAW,kBAAkB,KAAK;AAChE;;;ACFA,IAAM,YAA+D;CACnE,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAgB,QAAQ,EAAE,OAAO,MAAM,OAAO,aAA2B;CACvE,MAAM,UAAU,wBAAwB;CACxC,MAAM,OACJ,oBAAC,SAAD;EAAS,eAAA;EAAY,WAAW,GAAG,UAAU,OAAO,UAAU,KAAK,cAAc;CAAI,CAAA;CAGvF,IAAI,CAAC,OACH,OACE,oBAAC,QAAD;EAAM,eAAY;EAAW,eAAA;EAAY,WAAW,GAAG,eAAe,SAAS;EAC5E,UAAA;CACG,CAAA;CAIV,OACE,qBAAC,QAAD;EACE,eAAY;EACZ,MAAK;EACL,WAAW,GAAG,kCAAkC,SAAS;EAH3D,UAAA,CAKG,MACD,oBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAY,CAAA,CACnC;;AAEV;;;;;;;;ACpCA,IAAa,iBAAiB,IAC5B,uaACA;CACE,UAAU;EACR,SAAS;GAEP,SACE;GACF,WACE;GACF,SACE;GAEF,OACE;GACF,aACE;GACF,MAAM;EACR;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,UAAU;GAAE,MAAM;GAAQ,OAAO;EAAG;EACpC,WAAW;GAAE,MAAM;GAAU,OAAO;EAAG;CACzC;CACA,kBAAkB;EAChB;GAAE,UAAU;GAAM,MAAM;GAAM,WAAW;EAAe;EACxD;GAAE,UAAU;GAAM,MAAM;GAAM,WAAW;EAAe;EACxD;GAAE,UAAU;GAAM,MAAM;GAAM,WAAW;EAAe;EACxD;GAAE,SAAS;GAAQ,WAAW;EAAc;CAC9C;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,UAAU;EAAO,WAAW;CAAM;AACvF,CACF;AAoBA,IAAa,SAAS,WAA2C,SAAS,OACxE,EACE,WACA,SACA,MACA,MACA,WACA,WAAW,OACX,UAAU,OACV,YAAY,OACZ,UAAU,OACV,UACA,OAAO,UACP,UACA,GAAG,SAEL,KACA;CAIA,MAAM,UAAU,GAAG,eAAe;EAAE;EAAS;EAAM;EAAU;CAAU,CAAC,GAAG,SAAS;CACpF,MAAM,OAAO,mBAAmB,UAAU,EAAE,SAAS,WAAW,UAAU,CAAC;CAE3E,IAAI,SACF,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,eAAa;EAAM,WAAW;EAAS,GAAI;EAC7D;CACQ,CAAA;CAMf,MAAM,UAAU,UAAU,oBAAC,SAAD,EAAS,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA,IAAI;CAC3E,OACE,qBAAC,UAAD;EACO;EACC;EACN,eAAa;EACb,WAAW;EACX,UAAU,YAAY;EACtB,aAAW,WAAW,KAAA;EACtB,GAAI;EAPN,UAAA;GASG;GACA,WAAY,UAAU,OAAO,WAAY;GACzC,CAAC,YAAY;EACR;;AAEZ,CAAC"}
|
package/dist/chart.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/*! Rendra Design System v2.
|
|
2
|
-
import { t as cn } from "./cn-
|
|
3
|
-
import { p as resolveCatalogCode } from "./components-
|
|
4
|
-
import { t as Button } from "./button-
|
|
5
|
-
import { n as useBreakpoint } from "./use-breakpoint-
|
|
1
|
+
/*! Rendra Design System v2.4.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
|
+
import { t as cn } from "./cn-DXDpTGsu.js";
|
|
3
|
+
import { p as resolveCatalogCode } from "./components-hp7iWioq.js";
|
|
4
|
+
import { t as Button } from "./button-C6rjowQi.js";
|
|
5
|
+
import { n as useBreakpoint } from "./use-breakpoint-Dyp-0E_c.js";
|
|
6
6
|
import { ArrowDown, BarChart3, List } from "lucide-react";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { useId, useRef, useState } from "react";
|
package/dist/cli/auditar.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! Rendra Design System v2.
|
|
1
|
+
/*! Rendra Design System v2.4.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
2
|
import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
|
|
3
3
|
import { join, relative, sep } from "node:path";
|
|
4
4
|
//#region src/cli/auditar.ts
|
|
@@ -39,6 +39,8 @@ var LINE_RULES = [
|
|
|
39
39
|
skipLine: isCommentLine
|
|
40
40
|
}
|
|
41
41
|
];
|
|
42
|
+
/** Identificadores das sete regras genéricas (as seis de linha e `fora-da-escala`). */
|
|
43
|
+
var IDS_REGRAS_GENERICAS = [...LINE_RULES.map((r) => r.id), "fora-da-escala"];
|
|
42
44
|
var ALLOWED_STEPS = /* @__PURE__ */ new Set([
|
|
43
45
|
"0",
|
|
44
46
|
"1",
|
|
@@ -84,42 +86,90 @@ function auditLines(text) {
|
|
|
84
86
|
});
|
|
85
87
|
return found;
|
|
86
88
|
}
|
|
87
|
-
var
|
|
89
|
+
var NOMES_PULADOS = /* @__PURE__ */ new Set([
|
|
88
90
|
"node_modules",
|
|
89
91
|
"dist",
|
|
90
92
|
"build",
|
|
91
93
|
".git",
|
|
92
94
|
".storybook-static"
|
|
93
95
|
]);
|
|
94
|
-
|
|
96
|
+
/** `./src/brand/` e `src\\brand` viram `src/brand`; o que sobrar vazio (`.`, `./`) é descartado. */
|
|
97
|
+
function normalizarPrefixo(prefixo) {
|
|
98
|
+
let p = prefixo.replace(/\\/g, "/");
|
|
99
|
+
while (p.startsWith("./")) p = p.slice(2);
|
|
100
|
+
p = p.replace(/\/+$/, "");
|
|
101
|
+
return p === "." ? "" : p;
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* `file` (relativo a `cwd`, com `/`) está numa das pastas de `prefixos`? Prefixo de pasta:
|
|
105
|
+
* `src/brand` casa `src/brand` e `src/brand/x.ts`, nunca `src/brand-novo/x.ts` nem, com
|
|
106
|
+
* `src/br`, `src/brand`.
|
|
107
|
+
*/
|
|
108
|
+
function casaPrefixo(file, prefixos) {
|
|
109
|
+
return prefixos.some((bruto) => {
|
|
110
|
+
const p = normalizarPrefixo(bruto);
|
|
111
|
+
return p !== "" && (file === p || file.startsWith(p + "/"));
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Lista os arquivos sob `dir`. `pular(nome, caminho)` decide por pasta ou arquivo se a entrada
|
|
116
|
+
* fica de fora (a pasta pulada não é aberta). Ordem: a do sistema de arquivos, como sempre.
|
|
117
|
+
*/
|
|
118
|
+
function percorrer(dir, pular) {
|
|
95
119
|
return readdirSync(dir).flatMap((name) => {
|
|
96
|
-
if (SKIP_DIR_NAMES.has(name)) return [];
|
|
97
120
|
const full = join(dir, name);
|
|
98
|
-
|
|
121
|
+
if (pular(name, full)) return [];
|
|
122
|
+
return statSync(full).isDirectory() ? percorrer(full, pular) : [full];
|
|
99
123
|
});
|
|
100
124
|
}
|
|
125
|
+
var EXTENSAO_VARRIDA = /\.(tsx?|jsx?|css)$/;
|
|
126
|
+
/**
|
|
127
|
+
* Arquivos que `auditar` (e `auditarTudo`, no modo `cli`) examinam: `.ts`/`.tsx`/`.js`/`.jsx`/
|
|
128
|
+
* `.css`, sem teste nem story, sem `NOMES_PULADOS` e sem as pastas de `ignorar`. Caminhos
|
|
129
|
+
* absolutos, na ordem do sistema de arquivos, sem repetição. Sem `pastas`, a raiz é
|
|
130
|
+
* `cwd/src` (quando existe) ou `cwd`; com `pastas`, são exatamente essas, relativas a `cwd`.
|
|
131
|
+
*/
|
|
132
|
+
function coletarArquivos(cwd, opcoes = {}) {
|
|
133
|
+
const ignorar = opcoes.ignorar ?? [];
|
|
134
|
+
const raizes = opcoes.pastas && opcoes.pastas.length > 0 ? opcoes.pastas.map((p) => join(cwd, p)) : [existsSync(join(cwd, "src")) ? join(cwd, "src") : cwd];
|
|
135
|
+
const pular = (nome, caminho) => NOMES_PULADOS.has(nome) || casaPrefixo(relativoA(cwd, caminho), ignorar);
|
|
136
|
+
const arquivos = /* @__PURE__ */ new Set();
|
|
137
|
+
for (const raiz of raizes) {
|
|
138
|
+
if (!existsSync(raiz)) continue;
|
|
139
|
+
for (const f of percorrer(raiz, pular)) arquivos.add(f);
|
|
140
|
+
}
|
|
141
|
+
return [...arquivos].filter((f) => EXTENSAO_VARRIDA.test(f) && !f.includes(".test.") && !f.includes(".stories."));
|
|
142
|
+
}
|
|
143
|
+
/** Caminho relativo a `base`, com `/` em qualquer sistema. */
|
|
144
|
+
function relativoA(base, caminho) {
|
|
145
|
+
return relative(base, caminho).split(sep).join("/");
|
|
146
|
+
}
|
|
101
147
|
/**
|
|
102
148
|
* Varre `cwd` (ou `cwd/src`, quando existir: a convenção deste boilerplate e da maioria dos
|
|
103
149
|
* projetos React) por arquivos `.ts`/`.tsx`/`.js`/`.jsx`/`.css`, ignorando teste e story, e
|
|
104
150
|
* devolve toda violação das sete regras genéricas. É o que `rendra auditar [cwd]` chama; não
|
|
105
151
|
* imprime nada e não lança (a CLI decide o formato de saída e o código de saída).
|
|
152
|
+
*
|
|
153
|
+
* Com `opcoes.pastas`, varre exatamente essas pastas (relativas a `cwd`, sem o atalho para
|
|
154
|
+
* `src`); com `opcoes.ignorar`, pula as pastas dadas; `opcoes.regras` desliga regras por id.
|
|
155
|
+
* `file` sai sempre relativo a `cwd`, com `/`, ordenado por arquivo e linha.
|
|
106
156
|
*/
|
|
107
|
-
function auditar(cwd) {
|
|
108
|
-
const root = existsSync(join(cwd, "src")) ? join(cwd, "src") : cwd;
|
|
109
|
-
if (!existsSync(root)) return [];
|
|
110
|
-
const files = walk(root).filter((f) => /\.(tsx?|jsx?|css)$/.test(f) && !f.includes(".test.") && !f.includes(".stories."));
|
|
157
|
+
function auditar(cwd, opcoes = {}) {
|
|
111
158
|
const problems = [];
|
|
112
|
-
for (const file of
|
|
113
|
-
const rel =
|
|
159
|
+
for (const file of coletarArquivos(cwd, opcoes)) {
|
|
160
|
+
const rel = relativoA(cwd, file);
|
|
114
161
|
const text = readFileSync(file, "utf8");
|
|
115
|
-
for (const violation of auditLines(text))
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
162
|
+
for (const violation of auditLines(text)) {
|
|
163
|
+
if (opcoes.regras?.[violation.rule] === false) continue;
|
|
164
|
+
problems.push({
|
|
165
|
+
file: rel,
|
|
166
|
+
...violation
|
|
167
|
+
});
|
|
168
|
+
}
|
|
119
169
|
}
|
|
120
170
|
return problems.sort((a, b) => a.file.localeCompare(b.file) || a.line - b.line);
|
|
121
171
|
}
|
|
122
172
|
//#endregion
|
|
123
|
-
export { LINE_RULES, auditLines, auditar };
|
|
173
|
+
export { EXTENSAO_VARRIDA, IDS_REGRAS_GENERICAS, LINE_RULES, NOMES_PULADOS, auditLines, auditar, casaPrefixo, coletarArquivos, percorrer, relativoA };
|
|
124
174
|
|
|
125
175
|
//# sourceMappingURL=auditar.js.map
|