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.
Files changed (7) hide show
  1. package/README.md +384 -0
  2. package/dist/beth-clarity.css +1 -0
  3. package/dist/clarity-design-system.es.js +117 -0
  4. package/dist/clarity-design-system.umd.js +1 -0
  5. package/dist/index.d.ts +1 -0
  6. package/dist/vite.svg +1 -0
  7. 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
+ ```
package/dist/beth-clarity.css ADDED
@@ -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}
package/dist/clarity-design-system.es.js ADDED
@@ -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
+ };
package/dist/clarity-design-system.umd.js ADDED
@@ -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
+ }