beth-clarity 1.0.3
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 +384 -0
- package/dist/beth-clarity.css +1 -0
- package/dist/clarity-design-system.es.js +117 -0
- package/dist/clarity-design-system.umd.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/vite.svg +1 -0
- package/package.json +91 -0
package/README.md
ADDED
|
@@ -0,0 +1,384 @@
|
|
|
1
|
+
# Clarity Design System
|
|
2
|
+
|
|
3
|
+
Design System React + TypeScript + Vite com componentes reutilizáveis.
|
|
4
|
+
|
|
5
|
+
## Tecnologias
|
|
6
|
+
|
|
7
|
+
- **Repositório**: [clarity-design-system](https://git-codecommit.us-east-2.amazonaws.com/v1/repos/clarity-design-system)
|
|
8
|
+
- **React 18** com TypeScript
|
|
9
|
+
- **Vite** para build e desenvolvimento
|
|
10
|
+
- **Storybook** para documentação de componentes
|
|
11
|
+
- **Vitest** para testes
|
|
12
|
+
- **ESLint** para linting
|
|
13
|
+
|
|
14
|
+
## Instalação
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
git clone https://git-codecommit.us-east-2.amazonaws.com/v1/repos/clarity-design-system
|
|
18
|
+
cd clarity-design-system
|
|
19
|
+
npm install
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## 🛠️ Scripts Disponíveis
|
|
23
|
+
|
|
24
|
+
### Desenvolvimento
|
|
25
|
+
|
|
26
|
+
- **`npm run dev`** - Inicia o servidor de desenvolvimento
|
|
27
|
+
- Executa o Vite em modo desenvolvimento
|
|
28
|
+
- Hot reload automático
|
|
29
|
+
- Disponível em: http://localhost:5173
|
|
30
|
+
|
|
31
|
+
- **`npm run dev:check`** - Desenvolvimento com verificação de tipos
|
|
32
|
+
- Executa o Vite + verificação de TypeScript em paralelo
|
|
33
|
+
- Mostra erros de tipos em tempo real
|
|
34
|
+
|
|
35
|
+
### Build e Deploy
|
|
36
|
+
|
|
37
|
+
- **`npm run build`** - Gera build de produção
|
|
38
|
+
- Verifica tipos com TypeScript
|
|
39
|
+
- Gera arquivos otimizados na pasta `dist/`
|
|
40
|
+
|
|
41
|
+
- **`npm run preview`** - Visualiza o build de produção
|
|
42
|
+
- Serve os arquivos da pasta `dist/`
|
|
43
|
+
- Útil para testar o build antes do deploy
|
|
44
|
+
|
|
45
|
+
### Qualidade de Código
|
|
46
|
+
|
|
47
|
+
- **`npm run lint`** - Executa o ESLint
|
|
48
|
+
- Verifica problemas de código e estilo
|
|
49
|
+
- Segue as regras configuradas no `eslint.config.js`
|
|
50
|
+
|
|
51
|
+
- **`npm run type-check`** - Verifica tipos TypeScript
|
|
52
|
+
- Executa verificação completa de tipos
|
|
53
|
+
- Não gera arquivos, apenas valida
|
|
54
|
+
|
|
55
|
+
### Testes
|
|
56
|
+
|
|
57
|
+
- **`npm test`** ou **`npm run test`** - Executa testes em modo watch
|
|
58
|
+
- Reexecuta testes automaticamente quando arquivos mudam
|
|
59
|
+
- Ideal para desenvolvimento
|
|
60
|
+
|
|
61
|
+
- **`npm run test:run`** - Executa todos os testes uma vez
|
|
62
|
+
- Execução única de todos os testes
|
|
63
|
+
- Ideal para CI/CD e verificações rápidas
|
|
64
|
+
|
|
65
|
+
- **`npm run test:ui`** - Interface gráfica dos testes
|
|
66
|
+
- Abre uma interface web para visualizar testes
|
|
67
|
+
- Disponível em: http://localhost:51204
|
|
68
|
+
- Permite executar testes específicos
|
|
69
|
+
|
|
70
|
+
- **`npm run test:coverage`** - Testes com relatório de cobertura
|
|
71
|
+
- Executa todos os testes
|
|
72
|
+
- Gera relatório de cobertura de código
|
|
73
|
+
- Mostra quais linhas não estão sendo testadas
|
|
74
|
+
|
|
75
|
+
- **`npm run test:watch`** - Modo watch explícito
|
|
76
|
+
- Mesmo comportamento do `npm test`
|
|
77
|
+
- Útil para scripts automatizados
|
|
78
|
+
|
|
79
|
+
## 🧪 Configuração de Testes
|
|
80
|
+
|
|
81
|
+
O projeto usa **Vitest** como framework de testes com as seguintes ferramentas:
|
|
82
|
+
|
|
83
|
+
- **Vitest** - Framework de testes rápido
|
|
84
|
+
- **@testing-library/react** - Utilitários para testar componentes React
|
|
85
|
+
- **@testing-library/jest-dom** - Matchers adicionais para DOM
|
|
86
|
+
- **@testing-library/user-event** - Simulação de eventos do usuário
|
|
87
|
+
- **jsdom** - Ambiente DOM para testes
|
|
88
|
+
- **Axios Mock** - Mock automático para requisições HTTP
|
|
89
|
+
|
|
90
|
+
### Estrutura de Testes
|
|
91
|
+
|
|
92
|
+
## 🌐 Mock do Axios
|
|
93
|
+
|
|
94
|
+
O projeto inclui configuração automática de mock para o Axios. Todas as requisições HTTP são automaticamente mockadas durante os testes.
|
|
95
|
+
|
|
96
|
+
### Configuração Automática
|
|
97
|
+
|
|
98
|
+
O mock está configurado no arquivo `src/test/setup.ts` e inclui:
|
|
99
|
+
- ✅ Todos os métodos HTTP (`get`, `post`, `put`, `delete`, `patch`)
|
|
100
|
+
- ✅ Suporte a `axios.create()` para instâncias customizadas
|
|
101
|
+
- ✅ Mock dos interceptors (request e response)
|
|
102
|
+
- ✅ Retorna promises resolvidas por padrão
|
|
103
|
+
|
|
104
|
+
### Exemplos de Uso nos Testes
|
|
105
|
+
|
|
106
|
+
#### 1. Mock de Requisição GET Simples
|
|
107
|
+
```typescript
|
|
108
|
+
import { render, screen, waitFor } from '@testing-library/react'
|
|
109
|
+
import { vi } from 'vitest'
|
|
110
|
+
import axios from 'axios'
|
|
111
|
+
import UserProfile from './UserProfile'
|
|
112
|
+
|
|
113
|
+
test('should display user name', async () => {
|
|
114
|
+
// Arrange: Mock da resposta da API
|
|
115
|
+
const mockUser = { id: 1, name: 'João Silva', email: 'joao@email.com' }
|
|
116
|
+
vi.mocked(axios.get).mockResolvedValueOnce({ data: mockUser })
|
|
117
|
+
|
|
118
|
+
// Act: Renderizar componente
|
|
119
|
+
render(<UserProfile userId={1} />)
|
|
120
|
+
|
|
121
|
+
// Assert: Verificar se o nome aparece na tela
|
|
122
|
+
await waitFor(() => {
|
|
123
|
+
expect(screen.getByText('João Silva')).toBeInTheDocument()
|
|
124
|
+
})
|
|
125
|
+
|
|
126
|
+
// Verificar se a requisição foi feita corretamente
|
|
127
|
+
expect(axios.get).toHaveBeenCalledWith('/api/users/1')
|
|
128
|
+
})
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
#### 2. Mock de Requisição POST
|
|
132
|
+
```typescript
|
|
133
|
+
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
|
|
134
|
+
import { vi } from 'vitest'
|
|
135
|
+
import axios from 'axios'
|
|
136
|
+
import CreateUserForm from './CreateUserForm'
|
|
137
|
+
|
|
138
|
+
test('should create user successfully', async () => {
|
|
139
|
+
// Arrange: Mock da resposta de criação
|
|
140
|
+
const newUser = { id: 2, name: 'Maria Santos' }
|
|
141
|
+
vi.mocked(axios.post).mockResolvedValueOnce({ data: newUser })
|
|
142
|
+
|
|
143
|
+
// Act: Renderizar e preencher formulário
|
|
144
|
+
render(<CreateUserForm />)
|
|
145
|
+
fireEvent.change(screen.getByLabelText(/nome/i), {
|
|
146
|
+
target: { value: 'Maria Santos' }
|
|
147
|
+
})
|
|
148
|
+
fireEvent.click(screen.getByRole('button', { name: /criar/i }))
|
|
149
|
+
|
|
150
|
+
// Assert: Verificar sucesso
|
|
151
|
+
await waitFor(() => {
|
|
152
|
+
expect(screen.getByText(/usuário criado com sucesso/i)).toBeInTheDocument()
|
|
153
|
+
})
|
|
154
|
+
|
|
155
|
+
expect(axios.post).toHaveBeenCalledWith('/api/users', {
|
|
156
|
+
name: 'Maria Santos'
|
|
157
|
+
})
|
|
158
|
+
})
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
#### 3. Mock de Erro de API
|
|
162
|
+
```typescript
|
|
163
|
+
import { render, screen, waitFor } from '@testing-library/react'
|
|
164
|
+
import { vi } from 'vitest'
|
|
165
|
+
import axios from 'axios'
|
|
166
|
+
import UserList from './UserList'
|
|
167
|
+
|
|
168
|
+
test('should handle API error gracefully', async () => {
|
|
169
|
+
// Arrange: Mock de erro
|
|
170
|
+
const errorMessage = 'Network Error'
|
|
171
|
+
vi.mocked(axios.get).mockRejectedValueOnce(new Error(errorMessage))
|
|
172
|
+
|
|
173
|
+
// Act: Renderizar componente
|
|
174
|
+
render(<UserList />)
|
|
175
|
+
|
|
176
|
+
// Assert: Verificar mensagem de erro
|
|
177
|
+
await waitFor(() => {
|
|
178
|
+
expect(screen.getByText(/erro ao carregar usuários/i)).toBeInTheDocument()
|
|
179
|
+
})
|
|
180
|
+
})
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
#### 4. Mock de Múltiplas Requisições
|
|
184
|
+
```typescript
|
|
185
|
+
import { render, screen, waitFor } from '@testing-library/react'
|
|
186
|
+
import { vi } from 'vitest'
|
|
187
|
+
import axios from 'axios'
|
|
188
|
+
import Dashboard from './Dashboard'
|
|
189
|
+
|
|
190
|
+
test('should load dashboard data', async () => {
|
|
191
|
+
// Arrange: Mock de múltiplas APIs
|
|
192
|
+
const mockUsers = [{ id: 1, name: 'João' }]
|
|
193
|
+
const mockStats = { total: 100, active: 85 }
|
|
194
|
+
|
|
195
|
+
vi.mocked(axios.get)
|
|
196
|
+
.mockResolvedValueOnce({ data: mockUsers }) // Primeira chamada
|
|
197
|
+
.mockResolvedValueOnce({ data: mockStats }) // Segunda chamada
|
|
198
|
+
|
|
199
|
+
// Act: Renderizar dashboard
|
|
200
|
+
render(<Dashboard />)
|
|
201
|
+
|
|
202
|
+
// Assert: Verificar dados carregados
|
|
203
|
+
await waitFor(() => {
|
|
204
|
+
expect(screen.getByText('João')).toBeInTheDocument()
|
|
205
|
+
expect(screen.getByText('Total: 100')).toBeInTheDocument()
|
|
206
|
+
})
|
|
207
|
+
|
|
208
|
+
expect(axios.get).toHaveBeenCalledTimes(2)
|
|
209
|
+
expect(axios.get).toHaveBeenNthCalledWith(1, '/api/users')
|
|
210
|
+
expect(axios.get).toHaveBeenNthCalledWith(2, '/api/stats')
|
|
211
|
+
})
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
#### 5. Mock de Instância Customizada do Axios
|
|
215
|
+
```typescript
|
|
216
|
+
import { render, screen, waitFor } from '@testing-library/react'
|
|
217
|
+
import { vi } from 'vitest'
|
|
218
|
+
import axios from 'axios'
|
|
219
|
+
import ApiService from '../services/ApiService'
|
|
220
|
+
import ProductList from './ProductList'
|
|
221
|
+
|
|
222
|
+
test('should use custom axios instance', async () => {
|
|
223
|
+
// Arrange: Mock da instância customizada
|
|
224
|
+
const mockProducts = [{ id: 1, name: 'Produto A' }]
|
|
225
|
+
const mockAxiosInstance = {
|
|
226
|
+
get: vi.fn().mockResolvedValue({ data: mockProducts })
|
|
227
|
+
}
|
|
228
|
+
vi.mocked(axios.create).mockReturnValue(mockAxiosInstance as any)
|
|
229
|
+
|
|
230
|
+
// Act: Renderizar componente que usa ApiService
|
|
231
|
+
render(<ProductList />)
|
|
232
|
+
|
|
233
|
+
// Assert: Verificar se usou a instância correta
|
|
234
|
+
await waitFor(() => {
|
|
235
|
+
expect(screen.getByText('Produto A')).toBeInTheDocument()
|
|
236
|
+
})
|
|
237
|
+
|
|
238
|
+
expect(mockAxiosInstance.get).toHaveBeenCalledWith('/products')
|
|
239
|
+
})
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
#### 6. Mock de Interceptors
|
|
243
|
+
```typescript
|
|
244
|
+
import { vi } from 'vitest'
|
|
245
|
+
import axios from 'axios'
|
|
246
|
+
import { setupAuthInterceptor } from '../services/auth'
|
|
247
|
+
|
|
248
|
+
test('should setup auth interceptor', () => {
|
|
249
|
+
// Arrange: Mock dos interceptors
|
|
250
|
+
const mockInterceptors = {
|
|
251
|
+
request: { use: vi.fn() },
|
|
252
|
+
response: { use: vi.fn() }
|
|
253
|
+
}
|
|
254
|
+
vi.mocked(axios.interceptors).request = mockInterceptors.request as any
|
|
255
|
+
vi.mocked(axios.interceptors).response = mockInterceptors.response as any
|
|
256
|
+
|
|
257
|
+
// Act: Configurar interceptor
|
|
258
|
+
setupAuthInterceptor()
|
|
259
|
+
|
|
260
|
+
// Assert: Verificar se foi configurado
|
|
261
|
+
expect(mockInterceptors.request.use).toHaveBeenCalled()
|
|
262
|
+
expect(mockInterceptors.response.use).toHaveBeenCalled()
|
|
263
|
+
})
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
### Dicas Importantes
|
|
267
|
+
|
|
268
|
+
1. **Reset entre testes**: O mock é automaticamente resetado entre testes
|
|
269
|
+
2. **Verificar chamadas**: Use `expect(axios.get).toHaveBeenCalledWith()` para verificar parâmetros
|
|
270
|
+
3. **Múltiplas respostas**: Use `.mockResolvedValueOnce()` para diferentes respostas em sequência
|
|
271
|
+
4. **Erros**: Use `.mockRejectedValueOnce()` para simular erros de rede
|
|
272
|
+
5. **Instâncias**: O mock também funciona com `axios.create()`
|
|
273
|
+
|
|
274
|
+
## 📁 Estrutura do Projeto
|
|
275
|
+
|
|
276
|
+
## 🔧 Tecnologias
|
|
277
|
+
|
|
278
|
+
- **React 19** - Biblioteca para interfaces
|
|
279
|
+
- **TypeScript** - Superset tipado do JavaScript
|
|
280
|
+
- **Vite** - Build tool e dev server
|
|
281
|
+
- **Vitest** - Framework de testes
|
|
282
|
+
- **ESLint** - Linter para qualidade de código
|
|
283
|
+
- **Bootstrap** - Framework CSS
|
|
284
|
+
- **Axios** - Cliente HTTP (com mock automático nos testes)
|
|
285
|
+
|
|
286
|
+
## 📝 Comandos Úteis
|
|
287
|
+
|
|
288
|
+
### 🚀 Desenvolvimento
|
|
289
|
+
```bash
|
|
290
|
+
# Desenvolvimento (ambiente development)
|
|
291
|
+
npm run dev
|
|
292
|
+
|
|
293
|
+
# Desenvolvimento com verificação de tipos em watch
|
|
294
|
+
npm run dev:check
|
|
295
|
+
|
|
296
|
+
# Desenvolvimento (ambiente homologação)
|
|
297
|
+
npm run dev:hml
|
|
298
|
+
|
|
299
|
+
# Desenvolvimento (ambiente produção)
|
|
300
|
+
npm run dev:prod
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
### 🏗️ Build para Deploy
|
|
304
|
+
```bash
|
|
305
|
+
# Build para desenvolvimento (saída: dist/dev/)
|
|
306
|
+
npm run build:dev
|
|
307
|
+
|
|
308
|
+
# Build para homologação (saída: dist/hml/)
|
|
309
|
+
npm run build:hml
|
|
310
|
+
|
|
311
|
+
# Build para produção (saída: dist/prod/)
|
|
312
|
+
npm run build:prod
|
|
313
|
+
|
|
314
|
+
# Build padrão (desenvolvimento)
|
|
315
|
+
npm run build
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
### 👀 Preview dos Builds
|
|
319
|
+
```bash
|
|
320
|
+
# Preview do build de desenvolvimento
|
|
321
|
+
npm run preview:dev
|
|
322
|
+
|
|
323
|
+
# Preview do build de homologação
|
|
324
|
+
npm run preview:hml
|
|
325
|
+
|
|
326
|
+
# Preview do build de produção
|
|
327
|
+
npm run preview:prod
|
|
328
|
+
|
|
329
|
+
# Preview padrão
|
|
330
|
+
npm run preview
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
### 🧪 Testes
|
|
334
|
+
```bash
|
|
335
|
+
# Executar testes
|
|
336
|
+
npm run test
|
|
337
|
+
|
|
338
|
+
# Executar testes com interface gráfica
|
|
339
|
+
npm run test:ui
|
|
340
|
+
|
|
341
|
+
# Executar testes uma vez (CI/CD)
|
|
342
|
+
npm run test:run
|
|
343
|
+
|
|
344
|
+
# Executar testes com cobertura
|
|
345
|
+
npm run test:coverage
|
|
346
|
+
|
|
347
|
+
# Executar testes em modo watch
|
|
348
|
+
npm run test:watch
|
|
349
|
+
|
|
350
|
+
# Executar testes específicos
|
|
351
|
+
npm test -- UserProfile.test.tsx
|
|
352
|
+
```
|
|
353
|
+
|
|
354
|
+
### 🔍 Qualidade de Código
|
|
355
|
+
```bash
|
|
356
|
+
# Verificar ESLint
|
|
357
|
+
npm run lint
|
|
358
|
+
|
|
359
|
+
# Verificar tipos TypeScript
|
|
360
|
+
npm run type-check
|
|
361
|
+
|
|
362
|
+
# Verificação completa
|
|
363
|
+
npm run lint && npm run type-check
|
|
364
|
+
```
|
|
365
|
+
|
|
366
|
+
### 🌍 Ambientes Disponíveis
|
|
367
|
+
|
|
368
|
+
| Ambiente | Servidor API | Saída do Build |
|
|
369
|
+
|----------|--------------|----------------|
|
|
370
|
+
| **Development** | `dev.bethebeth.com.br` | `dist/dev/` |
|
|
371
|
+
| **Homolog** | `hml.bethconecta.com.br` | `dist/hml/` |
|
|
372
|
+
| **Production** | `apps.bethconecta.com.br` | `dist/prod/` |
|
|
373
|
+
|
|
374
|
+
### 🚀 Fluxo Completo de Deploy
|
|
375
|
+
```bash
|
|
376
|
+
# Para desenvolvimento
|
|
377
|
+
npm run build:dev && npm run preview:dev
|
|
378
|
+
|
|
379
|
+
# Para homologação
|
|
380
|
+
npm run build:hml && npm run preview:hml
|
|
381
|
+
|
|
382
|
+
# Para produção
|
|
383
|
+
npm run build:prod && npm run preview:prod
|
|
384
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.clarity-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none;font-family:inherit;font-size:14px;line-height:1.5}.clarity-button--small{padding:4px 8px;font-size:12px;border-radius:4px}.clarity-button--medium{padding:8px 16px;font-size:14px}.clarity-button--large{padding:12px 24px;font-size:16px;border-radius:8px}.clarity-button--primary{background-color:var(--clarity-primary-500);color:#fff}.clarity-button--primary:hover:not(:disabled){background-color:var(--clarity-primary-600)}.clarity-button--secondary{background-color:var(--clarity-secondary-500);color:#fff}.clarity-button--secondary:hover:not(:disabled){background-color:var(--clarity-secondary-600)}.clarity-button--danger{background-color:var(--clarity-danger-500);color:#fff}.clarity-button--danger:hover:not(:disabled){background-color:var(--clarity-danger-600)}.clarity-button--success{background-color:var(--clarity-success-500);color:#fff}.clarity-button--success:hover:not(:disabled){background-color:var(--clarity-success-600)}.clarity-button--disabled{opacity:.5;cursor:not-allowed}.clarity-button--loading{cursor:wait}.clarity-button__spinner{width:16px;height:16px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}:root{--clarity-primary-500: #0ea5e9;--clarity-primary-600: #0284c7;--clarity-secondary-500: #64748b;--clarity-secondary-600: #475569;--clarity-danger-500: #ef4444;--clarity-danger-600: #dc2626;--clarity-success-500: #10b981;--clarity-success-600: #059669;--clarity-spacing-xs: 4px;--clarity-spacing-sm: 8px;--clarity-spacing-md: 16px;--clarity-spacing-lg: 24px;--clarity-spacing-xl: 32px;--clarity-font-family-sans: "Inter", system-ui, sans-serif;--clarity-font-size-base: 16px}*{box-sizing:border-box}.clarity-design-system{font-family:var(--clarity-font-family-sans);font-size:var(--clarity-font-size-base);line-height:1.5}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
const i = ({
|
|
3
|
+
variant: s = "primary",
|
|
4
|
+
size: o = "medium",
|
|
5
|
+
disabled: f = !1,
|
|
6
|
+
loading: a = !1,
|
|
7
|
+
children: t,
|
|
8
|
+
onClick: c,
|
|
9
|
+
type: r = "button",
|
|
10
|
+
className: l = "",
|
|
11
|
+
...d
|
|
12
|
+
}) => {
|
|
13
|
+
const e = "clarity-button", p = [
|
|
14
|
+
e,
|
|
15
|
+
`${e}--${s}`,
|
|
16
|
+
`${e}--${o}`,
|
|
17
|
+
a && `${e}--loading`,
|
|
18
|
+
f && `${e}--disabled`,
|
|
19
|
+
l
|
|
20
|
+
].filter(Boolean).join(" ");
|
|
21
|
+
return /* @__PURE__ */ n(
|
|
22
|
+
"button",
|
|
23
|
+
{
|
|
24
|
+
className: p,
|
|
25
|
+
disabled: f || a,
|
|
26
|
+
onClick: c,
|
|
27
|
+
type: r,
|
|
28
|
+
...d,
|
|
29
|
+
children: a ? /* @__PURE__ */ n("span", { className: `${e}__spinner`, children: "⟳" }) : t
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
}, b = {
|
|
33
|
+
primary: {
|
|
34
|
+
50: "#f0f9ff",
|
|
35
|
+
100: "#e0f2fe",
|
|
36
|
+
200: "#bae6fd",
|
|
37
|
+
300: "#7dd3fc",
|
|
38
|
+
400: "#38bdf8",
|
|
39
|
+
500: "#0ea5e9",
|
|
40
|
+
600: "#0284c7",
|
|
41
|
+
700: "#0369a1",
|
|
42
|
+
800: "#075985",
|
|
43
|
+
900: "#0c4a6e"
|
|
44
|
+
},
|
|
45
|
+
secondary: {
|
|
46
|
+
50: "#f8fafc",
|
|
47
|
+
100: "#f1f5f9",
|
|
48
|
+
200: "#e2e8f0",
|
|
49
|
+
300: "#cbd5e1",
|
|
50
|
+
400: "#94a3b8",
|
|
51
|
+
500: "#64748b",
|
|
52
|
+
600: "#475569",
|
|
53
|
+
700: "#334155",
|
|
54
|
+
800: "#1e293b",
|
|
55
|
+
900: "#0f172a"
|
|
56
|
+
},
|
|
57
|
+
danger: {
|
|
58
|
+
50: "#fef2f2",
|
|
59
|
+
100: "#fee2e2",
|
|
60
|
+
200: "#fecaca",
|
|
61
|
+
300: "#fca5a5",
|
|
62
|
+
400: "#f87171",
|
|
63
|
+
500: "#ef4444",
|
|
64
|
+
600: "#dc2626",
|
|
65
|
+
700: "#b91c1c",
|
|
66
|
+
800: "#991b1b",
|
|
67
|
+
900: "#7f1d1d"
|
|
68
|
+
},
|
|
69
|
+
success: {
|
|
70
|
+
50: "#ecfdf5",
|
|
71
|
+
100: "#d1fae5",
|
|
72
|
+
200: "#a7f3d0",
|
|
73
|
+
300: "#6ee7b7",
|
|
74
|
+
400: "#34d399",
|
|
75
|
+
500: "#10b981",
|
|
76
|
+
600: "#059669",
|
|
77
|
+
700: "#047857",
|
|
78
|
+
800: "#065f46",
|
|
79
|
+
900: "#064e3b"
|
|
80
|
+
}
|
|
81
|
+
}, m = {
|
|
82
|
+
xs: "4px",
|
|
83
|
+
sm: "8px",
|
|
84
|
+
md: "16px",
|
|
85
|
+
lg: "24px",
|
|
86
|
+
xl: "32px",
|
|
87
|
+
"2xl": "48px",
|
|
88
|
+
"3xl": "64px"
|
|
89
|
+
}, u = {
|
|
90
|
+
fontFamily: {
|
|
91
|
+
sans: ["Inter", "system-ui", "sans-serif"],
|
|
92
|
+
mono: ["Fira Code", "monospace"]
|
|
93
|
+
},
|
|
94
|
+
fontSize: {
|
|
95
|
+
xs: "12px",
|
|
96
|
+
sm: "14px",
|
|
97
|
+
base: "16px",
|
|
98
|
+
lg: "18px",
|
|
99
|
+
xl: "20px",
|
|
100
|
+
"2xl": "24px",
|
|
101
|
+
"3xl": "30px"
|
|
102
|
+
},
|
|
103
|
+
fontWeight: {
|
|
104
|
+
normal: 400,
|
|
105
|
+
medium: 500,
|
|
106
|
+
semibold: 600,
|
|
107
|
+
bold: 700
|
|
108
|
+
}
|
|
109
|
+
}, y = (...s) => s.filter(Boolean).join(" "), g = () => Math.random().toString(36).substr(2, 9);
|
|
110
|
+
export {
|
|
111
|
+
i as Button,
|
|
112
|
+
y as cn,
|
|
113
|
+
b as colors,
|
|
114
|
+
g as generateId,
|
|
115
|
+
m as spacing,
|
|
116
|
+
u as typography
|
|
117
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(e,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],n):(e=typeof globalThis<"u"?globalThis:e||self,n(e.ClarityDesignSystem={},e.React))})(this,(function(e,n){"use strict";const o=({variant:t="primary",size:p="medium",disabled:a=!1,loading:f=!1,children:u,onClick:b,type:m="button",className:x="",...y})=>{const s="clarity-button",g=[s,`${s}--${t}`,`${s}--${p}`,f&&`${s}--loading`,a&&`${s}--disabled`,x].filter(Boolean).join(" ");return n.jsx("button",{className:g,disabled:a||f,onClick:b,type:m,...y,children:f?n.jsx("span",{className:`${s}__spinner`,children:"⟳"}):u})},c={primary:{50:"#f0f9ff",100:"#e0f2fe",200:"#bae6fd",300:"#7dd3fc",400:"#38bdf8",500:"#0ea5e9",600:"#0284c7",700:"#0369a1",800:"#075985",900:"#0c4a6e"},secondary:{50:"#f8fafc",100:"#f1f5f9",200:"#e2e8f0",300:"#cbd5e1",400:"#94a3b8",500:"#64748b",600:"#475569",700:"#334155",800:"#1e293b",900:"#0f172a"},danger:{50:"#fef2f2",100:"#fee2e2",200:"#fecaca",300:"#fca5a5",400:"#f87171",500:"#ef4444",600:"#dc2626",700:"#b91c1c",800:"#991b1b",900:"#7f1d1d"},success:{50:"#ecfdf5",100:"#d1fae5",200:"#a7f3d0",300:"#6ee7b7",400:"#34d399",500:"#10b981",600:"#059669",700:"#047857",800:"#065f46",900:"#064e3b"}},i={xs:"4px",sm:"8px",md:"16px",lg:"24px",xl:"32px","2xl":"48px","3xl":"64px"},d={fontFamily:{sans:["Inter","system-ui","sans-serif"],mono:["Fira Code","monospace"]},fontSize:{xs:"12px",sm:"14px",base:"16px",lg:"18px",xl:"20px","2xl":"24px","3xl":"30px"},fontWeight:{normal:400,medium:500,semibold:600,bold:700}},r=(...t)=>t.filter(Boolean).join(" "),l=()=>Math.random().toString(36).substr(2,9);e.Button=o,e.cn=r,e.colors=c,e.generateId=l,e.spacing=i,e.typography=d,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
package/dist/vite.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
package/package.json
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "beth-clarity",
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"description": "Design System da Beth Health Tech com componentes React reutilizáveis",
|
|
5
|
+
"main": "dist/clarity-design-system.umd.js",
|
|
6
|
+
"module": "dist/clarity-design-system.es.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://git-codecommit.us-east-2.amazonaws.com/v1/repos/clarity-design-system"
|
|
11
|
+
},
|
|
12
|
+
"homepage": "https://git-codecommit.us-east-2.amazonaws.com/v1/repos/clarity-design-system",
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://git-codecommit.us-east-2.amazonaws.com/v1/repos/clarity-design-system/issues"
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"exports": {
|
|
20
|
+
".": {
|
|
21
|
+
"types": "./dist/index.d.ts",
|
|
22
|
+
"import": "./dist/clarity-design-system.es.js",
|
|
23
|
+
"require": "./dist/clarity-design-system.umd.js"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"scripts": {
|
|
27
|
+
"dev": "vite",
|
|
28
|
+
"build": "vite build --config vite.config.lib.ts",
|
|
29
|
+
"build:watch": "vite build --config vite.config.lib.ts --watch",
|
|
30
|
+
"storybook": "storybook dev -p 6006",
|
|
31
|
+
"build-storybook": "storybook build",
|
|
32
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
33
|
+
"type-check": "tsc --noEmit",
|
|
34
|
+
"test": "vitest",
|
|
35
|
+
"test:ui": "vitest --ui",
|
|
36
|
+
"test:run": "vitest run",
|
|
37
|
+
"test:coverage": "vitest run --coverage",
|
|
38
|
+
"preview": "vite preview",
|
|
39
|
+
"prepublishOnly": "npm run build"
|
|
40
|
+
},
|
|
41
|
+
"keywords": [
|
|
42
|
+
"react",
|
|
43
|
+
"design-system",
|
|
44
|
+
"components",
|
|
45
|
+
"ui",
|
|
46
|
+
"typescript"
|
|
47
|
+
],
|
|
48
|
+
"author": "Ayrton Medrano",
|
|
49
|
+
"license": "MIT",
|
|
50
|
+
"peerDependencies": {
|
|
51
|
+
"react": ">=18.0.0",
|
|
52
|
+
"react-dom": ">=18.0.0"
|
|
53
|
+
},
|
|
54
|
+
"dependencies": {
|
|
55
|
+
"clarity": "npm:@beth_health_tech/clarity-design-system@^1.0.0",
|
|
56
|
+
"react": ">=18.0.0",
|
|
57
|
+
"react-dom": ">=18.0.0"
|
|
58
|
+
},
|
|
59
|
+
"devDependencies": {
|
|
60
|
+
"@storybook/addon-essentials": "^8.4.7",
|
|
61
|
+
"@storybook/addon-interactions": "^8.4.7",
|
|
62
|
+
"@storybook/addon-links": "^8.4.7",
|
|
63
|
+
"@storybook/blocks": "^8.4.7",
|
|
64
|
+
"@storybook/react": "^8.4.7",
|
|
65
|
+
"@storybook/react-vite": "^8.4.7",
|
|
66
|
+
"@storybook/test": "^8.4.7",
|
|
67
|
+
"@testing-library/jest-dom": "^6.7.0",
|
|
68
|
+
"@testing-library/react": "^16.3.0",
|
|
69
|
+
"@testing-library/user-event": "^14.6.1",
|
|
70
|
+
"@types/node": "^24.3.0",
|
|
71
|
+
"@types/react": "^18.3.12",
|
|
72
|
+
"@types/react-dom": "^18.3.1",
|
|
73
|
+
"@typescript-eslint/eslint-plugin": "^8.39.1",
|
|
74
|
+
"@typescript-eslint/parser": "^8.39.1",
|
|
75
|
+
"@vitejs/plugin-react": "^4.3.3",
|
|
76
|
+
"@vitest/coverage-v8": "^3.2.4",
|
|
77
|
+
"@vitest/ui": "^3.2.4",
|
|
78
|
+
"eslint": "^9.33.0",
|
|
79
|
+
"eslint-plugin-react-hooks": "^5.2.0",
|
|
80
|
+
"eslint-plugin-react-refresh": "^0.4.20",
|
|
81
|
+
"globals": "^16.3.0",
|
|
82
|
+
"jsdom": "^26.1.0",
|
|
83
|
+
"react": "^18.3.1",
|
|
84
|
+
"react-dom": "^18.3.1",
|
|
85
|
+
"storybook": "^8.4.7",
|
|
86
|
+
"typescript": "~5.6.3",
|
|
87
|
+
"vite": "^6.3.5",
|
|
88
|
+
"vite-plugin-dts": "^4.3.0",
|
|
89
|
+
"vitest": "^3.2.4"
|
|
90
|
+
}
|
|
91
|
+
}
|