kitunga-web 0.1.87 → 0.1.88
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
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
# 🎨 Kitunga Web
|
|
2
|
+
|
|
3
|
+
> Biblioteca de componentes UI da Sinangu — usada pelos projectos Masolo.
|
|
4
|
+
|
|
5
|
+
## 📋 Visão Geral
|
|
6
|
+
|
|
7
|
+
O **Kitunga Web** é a biblioteca de componentes partilhados usada nos frontends da Sinangu. Inclui inputs, botões, cartões, estados vazios e outros elementos reutilizáveis construídos com **React**, **TypeScript**, **Next.js** e **CSS Modules**.
|
|
8
|
+
|
|
9
|
+
## 🛠️ Stack Tecnológica
|
|
10
|
+
|
|
11
|
+
- **React** >= 18
|
|
12
|
+
- **Next.js** 16 com App Router
|
|
13
|
+
- **TypeScript**
|
|
14
|
+
- **CSS Modules**
|
|
15
|
+
|
|
16
|
+
## 🚀 Início Rápido
|
|
17
|
+
|
|
18
|
+
### Pré-requisitos
|
|
19
|
+
- Node.js >= 18.0.0
|
|
20
|
+
- pnpm >= 8.0.0
|
|
21
|
+
|
|
22
|
+
### Instalação
|
|
23
|
+
```bash
|
|
24
|
+
pnpm install
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Scripts disponíveis
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
# Modo desenvolvimento (documentação + playground de componentes)
|
|
31
|
+
pnpm dev
|
|
32
|
+
|
|
33
|
+
# Build de produção do site de documentação
|
|
34
|
+
pnpm build
|
|
35
|
+
|
|
36
|
+
# Build da biblioteca para publicação
|
|
37
|
+
pnpm build:lib
|
|
38
|
+
|
|
39
|
+
# Publicar a biblioteca no npm
|
|
40
|
+
pnpm publish:lib
|
|
41
|
+
|
|
42
|
+
# Lint
|
|
43
|
+
pnpm lint
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## ⚙️ Gestão com PM2
|
|
47
|
+
|
|
48
|
+
O `kitunga-web` corre em modo de desenvolvimento na porta `3005` (definida em `.env.local`) e é gerido pelo PM2 através do `ecosystem.config.cjs`.
|
|
49
|
+
|
|
50
|
+
### Comandos úteis
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
# Iniciar o processo (modo dev com hot reload)
|
|
54
|
+
pm2 start ecosystem.config.cjs
|
|
55
|
+
|
|
56
|
+
# Parar o processo
|
|
57
|
+
pm2 stop kitunga-web
|
|
58
|
+
|
|
59
|
+
# Remover o processo do PM2
|
|
60
|
+
pm2 delete kitunga-web
|
|
61
|
+
|
|
62
|
+
# Reiniciar com a configuração actual
|
|
63
|
+
pm2 reload ecosystem.config.cjs
|
|
64
|
+
|
|
65
|
+
# Ver logs em tempo real
|
|
66
|
+
pm2 logs kitunga-web
|
|
67
|
+
|
|
68
|
+
# Listar processos
|
|
69
|
+
pm2 list
|
|
70
|
+
|
|
71
|
+
# Guardar a lista de processos para reiniciar após reboot
|
|
72
|
+
pm2 save
|
|
73
|
+
|
|
74
|
+
# Limpar logs antigos
|
|
75
|
+
pm2 flush
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Modo desenvolvimento (hot reload)
|
|
79
|
+
|
|
80
|
+
Por omissão, o PM2 corre `pnpm dev`.
|
|
81
|
+
|
|
82
|
+
```bash
|
|
83
|
+
pm2 start ecosystem.config.cjs
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Modo produção
|
|
87
|
+
|
|
88
|
+
1. Gera o build do site:
|
|
89
|
+
```bash
|
|
90
|
+
pnpm build
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
2. No `ecosystem.config.cjs`, muda `args` de `'dev'` para `'start'`:
|
|
94
|
+
```js
|
|
95
|
+
args: 'start'
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
3. Actualiza o PM2:
|
|
99
|
+
```bash
|
|
100
|
+
pm2 reload ecosystem.config.cjs
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## 📦 Publicação da biblioteca
|
|
104
|
+
|
|
105
|
+
Antes de consumir as alterações noutros projectos (como o `masolo-messenger-web`), é necessário gerar e publicar a biblioteca:
|
|
106
|
+
|
|
107
|
+
```bash
|
|
108
|
+
pnpm build:lib
|
|
109
|
+
pnpm publish:lib
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Depois actualiza a versão no `package.json` do projecto consumidor e corre `pnpm install`.
|
|
113
|
+
|
|
114
|
+
## 📄 Licença
|
|
115
|
+
|
|
116
|
+
Sinangu — Todos os direitos reservados.
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
align-items: center;
|
|
5
5
|
width: 100%;
|
|
6
|
-
max-width: 450px;
|
|
7
6
|
}
|
|
8
7
|
|
|
9
8
|
.inputWrapperMain {
|
|
@@ -65,7 +64,6 @@
|
|
|
65
64
|
/* Sizes */
|
|
66
65
|
.sm {
|
|
67
66
|
height: 32px;
|
|
68
|
-
max-width: 300px;
|
|
69
67
|
}
|
|
70
68
|
|
|
71
69
|
.sm .searchInput {
|
|
@@ -86,7 +84,6 @@
|
|
|
86
84
|
|
|
87
85
|
.lg {
|
|
88
86
|
height: 48px;
|
|
89
|
-
max-width: 600px;
|
|
90
87
|
}
|
|
91
88
|
|
|
92
89
|
.lg .searchInput {
|