@rock10/ui 1.0.5 → 1.0.7
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 +81 -0
- package/package.json +23 -3
package/README.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# @rock10/ui
|
|
2
|
+
|
|
3
|
+
Biblioteca de componentes de interface (UI) reutilizáveis para os portais e sistemas do ecossistema **Rock10 Replay**.
|
|
4
|
+
|
|
5
|
+
Construída utilizando **React**, **TypeScript**, **Tailwind CSS** e empacotada com **Vite**.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 🚀 Instalação
|
|
10
|
+
|
|
11
|
+
Como o pacote faz parte do escopo privado/público `@rock10`, instale-o diretamente através do NPM:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @rock10/ui
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
### Importação de Estilos (Obrigatório)
|
|
18
|
+
|
|
19
|
+
Para que as classes do Tailwind CSS e estilos internos dos componentes funcionem corretamente, importe o arquivo CSS global da biblioteca no ponto de entrada da sua aplicação (ex: `main.tsx` ou `App.tsx`):
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import '@rock10/ui/dist/style.css';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## 📦 Componentes Disponíveis
|
|
28
|
+
|
|
29
|
+
A biblioteca fornece os seguintes componentes customizáveis e preparados para acessibilidade:
|
|
30
|
+
|
|
31
|
+
* **`IconButton`**: Botão otimizado para ícones com suporte a diferentes tamanhos, variantes de gradiente, estados de carregamento e foco acessível.
|
|
32
|
+
* **`ConfirmDialog`**: Caixa de diálogo modal de confirmação para ações destrutivas ou importantes.
|
|
33
|
+
* **`Modal`**: Base de modal com suporte a controle de scroll e fechamento via clique externo.
|
|
34
|
+
* **`DatePicker` & `DateSelector`**: Seletores e painéis inteligentes para filtragem de datas.
|
|
35
|
+
* **`DownloadButton`**: Botão com animações e microinterações específicas para exportação de dados.
|
|
36
|
+
* **`EmptyState`**: Layout padrão para exibir estados vazios ou sem dados nos portais.
|
|
37
|
+
* **`SearchBar`**: Barra de pesquisa de alta performance com debounce/limpeza integrada.
|
|
38
|
+
* **`LikeButton`**: Botão interativo para ações rápidas de engajamento.
|
|
39
|
+
* **`Loading`**: Feedbacks visuais e loaders para carregamentos assíncronos.
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## 💻 Desenvolvimento Local
|
|
44
|
+
|
|
45
|
+
Para clonar e fazer melhorias na biblioteca:
|
|
46
|
+
|
|
47
|
+
### Instalar dependências
|
|
48
|
+
```bash
|
|
49
|
+
npm install
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Ambiente de Desenvolvimento & Documentação (Storybook)
|
|
53
|
+
Inicie o Storybook local para inspecionar, testar e documentar os componentes isoladamente:
|
|
54
|
+
```bash
|
|
55
|
+
npm run storybook
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Rodar a suíte de testes (Vitest + JSDom + Playwright)
|
|
59
|
+
Tanto testes unitários locais quanto testes de renderização do Storybook em navegador headless:
|
|
60
|
+
```bash
|
|
61
|
+
npm run test
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Gerar build de produção
|
|
65
|
+
Compila os componentes para a pasta `dist/` gerando os bundles UMD/ES e os arquivos de declaração de tipos (`.d.ts`):
|
|
66
|
+
```bash
|
|
67
|
+
npm run build
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## 🦋 Publicando Novas Versões
|
|
73
|
+
|
|
74
|
+
Esta biblioteca utiliza **Changesets** para gerenciar versionamento e changelogs automáticos.
|
|
75
|
+
|
|
76
|
+
1. Ao criar uma modificação que impacte a versão, rode:
|
|
77
|
+
```bash
|
|
78
|
+
npx changeset
|
|
79
|
+
```
|
|
80
|
+
2. Siga as perguntas no console para definir se é patch/minor/major e descrever as alterações.
|
|
81
|
+
3. Para mais detalhes sobre publicação manual ou via CI, veja o guia completo em [como-publicar.md](file:///c:/AtualDev/Prototipo/Rock10Replay/rock10-ui/Docs/como-publicar.md).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rock10/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.umd.js",
|
|
6
6
|
"module": "./dist/index.es.js",
|
|
@@ -19,7 +19,11 @@
|
|
|
19
19
|
"scripts": {
|
|
20
20
|
"dev": "vite",
|
|
21
21
|
"build": "tsc && vite build",
|
|
22
|
-
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
|
22
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
23
|
+
"test": "vitest run",
|
|
24
|
+
"test:watch": "vitest",
|
|
25
|
+
"storybook": "storybook dev -p 6006",
|
|
26
|
+
"build-storybook": "storybook build"
|
|
23
27
|
},
|
|
24
28
|
"dependencies": {
|
|
25
29
|
"class-variance-authority": "^0.7.1",
|
|
@@ -32,14 +36,30 @@
|
|
|
32
36
|
"react-dom": "^18.2.0"
|
|
33
37
|
},
|
|
34
38
|
"devDependencies": {
|
|
39
|
+
"@changesets/cli": "^2.31.0",
|
|
40
|
+
"@chromatic-com/storybook": "^5.2.1",
|
|
41
|
+
"@storybook/addon-a11y": "^10.5.0",
|
|
42
|
+
"@storybook/addon-docs": "^10.5.0",
|
|
43
|
+
"@storybook/addon-mcp": "^0.7.0",
|
|
44
|
+
"@storybook/addon-vitest": "^10.5.0",
|
|
45
|
+
"@storybook/react-vite": "^10.5.0",
|
|
46
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
47
|
+
"@testing-library/react": "^16.3.2",
|
|
48
|
+
"@testing-library/user-event": "^14.6.1",
|
|
35
49
|
"@types/react": "^18.2.66",
|
|
36
50
|
"@types/react-dom": "^18.2.22",
|
|
37
51
|
"@vitejs/plugin-react-swc": "^3.5.0",
|
|
52
|
+
"@vitest/browser-playwright": "4.1.10",
|
|
53
|
+
"@vitest/coverage-v8": "4.1.10",
|
|
38
54
|
"autoprefixer": "^10.4.18",
|
|
55
|
+
"jsdom": "^28.1.0",
|
|
56
|
+
"playwright": "^1.61.1",
|
|
39
57
|
"postcss": "^8.4.35",
|
|
58
|
+
"storybook": "^10.5.0",
|
|
40
59
|
"tailwindcss": "^4.0.0",
|
|
41
60
|
"typescript": "^5.2.2",
|
|
42
61
|
"vite": "^5.2.0",
|
|
43
|
-
"vite-plugin-dts": "^3.7.3"
|
|
62
|
+
"vite-plugin-dts": "^3.7.3",
|
|
63
|
+
"vitest": "^4.1.10"
|
|
44
64
|
}
|
|
45
65
|
}
|