@cnc-ti/layout-basic 8.3.29 → 8.5.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 +59 -0
- package/dist/index.css +325 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +278 -1
- package/dist/index.d.ts +278 -1
- package/dist/index.js +2273 -8319
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2296 -8346
- package/dist/index.mjs.map +1 -1
- package/package.json +18 -5
package/README.md
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# @cnc-ti/layout-basic
|
|
2
|
+
|
|
3
|
+
Biblioteca de componentes React da CNC. Reúne o cabeçalho, a navegação e os
|
|
4
|
+
controles de formulário compartilhados pelos sistemas internos — GEV, RENAR,
|
|
5
|
+
GDS, Gestão de Câmaras, Gestão de Demandas, OráculoS e afins — para que todos
|
|
6
|
+
tenham a mesma identidade visual sem reimplementar a mesma tela em cada projeto.
|
|
7
|
+
|
|
8
|
+
Construída sobre Radix UI e Tailwind CSS, com classes prefixadas por `cnc-`
|
|
9
|
+
para não colidir com os estilos da aplicação que a consome.
|
|
10
|
+
|
|
11
|
+
## Instalação
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @cnc-ti/layout-basic
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Uso
|
|
18
|
+
|
|
19
|
+
Importe o CSS uma vez, no ponto de entrada da aplicação:
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import "@cnc-ti/layout-basic/styles";
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
E use os componentes:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { HeaderContainer, HeaderNotifications, Button } from "@cnc-ti/layout-basic";
|
|
29
|
+
|
|
30
|
+
export function Layout() {
|
|
31
|
+
return (
|
|
32
|
+
<HeaderContainer
|
|
33
|
+
logo="/images/logo.svg"
|
|
34
|
+
notifications={<HeaderNotifications email={usuario.email} sistema="gev" baseUrl={API_NOTIFICACOES} />}
|
|
35
|
+
>
|
|
36
|
+
<Button>Entrar</Button>
|
|
37
|
+
</HeaderContainer>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## O que vem na caixa
|
|
43
|
+
|
|
44
|
+
- **Layout** — `HeaderContainer`, `AplicationsHeader`, `Sidebar`, `AppsMenu`, `HeaderNotifications`
|
|
45
|
+
- **Formulários** — `Input`, `Select`, `Combobox`, `Checkbox`, `Switch`, `Filter`
|
|
46
|
+
- **Exibição** — `Card`, `CardList`, `Badge`, `Tabs`, `Collapsible`
|
|
47
|
+
- **Sobreposição** — `Modal`, `Dialog`, `Popover`, `DropdownMenu`, `Command`
|
|
48
|
+
|
|
49
|
+
A referência completa de props fica nos tipos do próprio pacote e no Storybook interno.
|
|
50
|
+
|
|
51
|
+
## Requisitos
|
|
52
|
+
|
|
53
|
+
- React >= 18
|
|
54
|
+
- `react-hook-form` >= 7 — peer opcional, necessária para o `Filter`
|
|
55
|
+
- Font Awesome carregado na aplicação — usado pelos ícones do `AppsMenu`
|
|
56
|
+
|
|
57
|
+
## Licença
|
|
58
|
+
|
|
59
|
+
MIT
|