Skip to content

Commit bd19ea5

Browse files
Samuel Ferreiraclaude
Samuel Ferreira
and
claude
committed
feat: react-ui-kit — design system React + TS (componentes acessíveis, tokens, dark mode)
- 8 componentes tipados e acessíveis (Button, Badge, Input, Card, Alert, Avatar, Spinner, Switch) - design tokens via CSS variables com dark mode - build dual: lib publicável (tsup, ESM+CJS+dts) e docs (Vite) - 8 testes (Vitest + Testing Library), CI e deploy no Pages Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
0 parents  commit bd19ea5

26 files changed

Lines changed: 5323 additions & 0 deletions

‎.github/workflows/ci.yml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
name: CI
2+
3+
on:
4+
push:
5+
branches: [main]
6+
pull_request:
7+
branches: [main]
8+
9+
jobs:
10+
test:
11+
runs-on: ubuntu-latest
12+
steps:
13+
- uses: actions/checkout@v4
14+
- uses: actions/setup-node@v4
15+
with:
16+
node-version: 20
17+
cache: npm
18+
- run: npm ci
19+
- name: Type check
20+
run: npm run typecheck
21+
- name: Test
22+
run: npm test
23+
- name: Build library
24+
run: npm run build:lib

‎.github/workflows/deploy.yml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
name: Deploy Docs to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: pages
15+
cancel-in-progress: true
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- uses: actions/checkout@v4
22+
- uses: actions/setup-node@v4
23+
with:
24+
node-version: 20
25+
cache: npm
26+
- run: npm ci
27+
- name: Build docs site
28+
run: npm run build
29+
- uses: actions/upload-pages-artifact@v3
30+
with:
31+
path: site
32+
33+
deploy:
34+
needs: build
35+
runs-on: ubuntu-latest
36+
environment:
37+
name: github-pages
38+
url: ${{ steps.deployment.outputs.page_url }}
39+
steps:
40+
- id: deployment
41+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules/
2+
dist/
3+
site/
4+
*.log
5+
coverage/

‎LICENSE‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
MIT License
2+
3+
Copyright (c) 2026 Samuel Ferreira
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is furnished
10+
to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
17+
CLAIM, DAMAGES OR OTHER LIABILITY, ARISING FROM, OUT OF OR IN CONNECTION WITH
18+
THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<h1 align="center">🎨 react-ui-kit</h1>
2+
3+
<p align="center">
4+
Design system em <b>React + TypeScript</b> — componentes acessíveis, design tokens, dark mode e tree-shaking.
5+
</p>
6+
7+
<p align="center">
8+
<img src="https://img.shields.io/badge/React-20232A?style=flat&logo=react&logoColor=61DAFB"/>
9+
<img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat&logo=typescript&logoColor=white"/>
10+
<img src="https://github.com/Samuelf27/react-ui-kit/actions/workflows/ci.yml/badge.svg"/>
11+
<img src="https://img.shields.io/badge/tests-8%20passing-34d399?style=flat"/>
12+
<img src="https://img.shields.io/badge/a11y-acessível-6f42c1?style=flat"/>
13+
<img src="https://img.shields.io/badge/license-MIT-green?style=flat"/>
14+
</p>
15+
16+
<p align="center">
17+
<a href="https://samuelf27.github.io/react-ui-kit/"><b>🔗 Documentação ao vivo</b></a>
18+
</p>
19+
20+
---
21+
22+
## 📌 Sobre
23+
24+
Uma **biblioteca de componentes** reutilizáveis — o tipo de infraestrutura de frontend que toda empresa de software mantém. Componentes acessíveis (ARIA, foco, labels), tematizáveis via **design tokens** (CSS variables) com **dark mode**, tipados em TypeScript e **tree-shakeable**.
25+
26+
> A própria documentação é construída com os componentes da biblioteca (*dogfooding*).
27+
28+
## 📦 Instalação
29+
30+
```bash
31+
npm install @samuelf27/react-ui-kit
32+
```
33+
34+
```tsx
35+
import { Button, Badge, Input } from '@samuelf27/react-ui-kit';
36+
import '@samuelf27/react-ui-kit/styles.css'; // importe os estilos uma vez
37+
38+
export default function App() {
39+
return <Button variant="primary">Salvar</Button>;
40+
}
41+
```
42+
43+
🌗 **Dark mode:** adicione a classe `dark` (ou `data-theme="dark"`) em um ancestral.
44+
45+
## 🧩 Componentes
46+
47+
`Button` · `Badge` · `Input` · `Card` · `Alert` · `Avatar` · `Spinner` · `Switch`
48+
49+
Todos com props tipadas, `forwardRef` onde faz sentido e foco/ARIA adequados.
50+
51+
## 🎨 Design tokens
52+
53+
O tema é controlado por CSS variables (`--ui-primary`, `--ui-radius`, `--ui-fg`...). Sobrescreva no seu CSS para customizar a marca sem tocar nos componentes.
54+
55+
## 🛠️ Desenvolvimento
56+
57+
```bash
58+
npm install
59+
npm run dev # site de documentação (Vite)
60+
npm test # testes (Vitest + Testing Library)
61+
npm run typecheck # checagem de tipos
62+
npm run build:lib # gera dist/ (ESM + CJS + .d.ts + styles.css)
63+
```
64+
65+
## 🤖 CI/CD
66+
67+
- **CI** (`ci.yml`): typecheck + testes + build da lib a cada push
68+
- **Deploy** (`deploy.yml`): publica a documentação no GitHub Pages
69+
70+
## 📄 Licença
71+
72+
[MIT](LICENSE) © Samuel Ferreira
73+
74+
---
75+
76+
<p align="center">
77+
<a href="https://github.com/Samuelf27">GitHub</a> · <a href="https://www.linkedin.com/in/samuel-ferreira27/">LinkedIn</a>
78+
</p>

‎index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="description" content="react-ui-kit — design system em React + TypeScript. Componentes acessíveis, design tokens e dark mode." />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet" />
9+
<title>react-ui-kit · Design System</title>
10+
</head>
11+
<body>
12+
<div id="root"></div>
13+
<script type="module" src="/src/showcase/main.tsx"></script>
14+
</body>
15+
</html>

0 commit comments

Comments
 (0)