@octavius2929-personal/design-system 0.1.0
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/LICENSE +21 -0
- package/README.md +53 -0
- package/dist/index.cjs +2199 -0
- package/dist/index.css +1878 -0
- package/dist/index.d.cts +512 -0
- package/dist/index.d.ts +512 -0
- package/dist/index.js +2134 -0
- package/package.json +93 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 justinoctavius
|
|
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
|
|
10
|
+
furnished 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, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# design-system
|
|
2
|
+
|
|
3
|
+
Librería de componentes **React** con estilos en TypeScript (vanilla-extract). Generada con `@octavius2929-personal/scaffold-generator`.
|
|
4
|
+
|
|
5
|
+
## Comandos
|
|
6
|
+
|
|
7
|
+
| Comando | Qué hace |
|
|
8
|
+
|---|---|
|
|
9
|
+
| `npm run build` | Compila a `dist/` (ESM + CJS + tipos + `index.css`) con tsup |
|
|
10
|
+
| `npm run dev` | tsup en modo watch |
|
|
11
|
+
| `npm test` | Corre vitest una vez |
|
|
12
|
+
| `npm run test:watch` | Vitest en watch |
|
|
13
|
+
| `npm run test:coverage` | Corre vitest con coverage y valida el umbral |
|
|
14
|
+
| `npm run typecheck` | `tsc --noEmit` |
|
|
15
|
+
| `npm run lint` | Biome (lint + formato) |
|
|
16
|
+
| `npm run lint:fix` | Biome con `--write` |
|
|
17
|
+
|
|
18
|
+
## Arquitectura
|
|
19
|
+
|
|
20
|
+
- **`src/components/`** — componentes React, cada uno en su carpeta (`types.ts` + `use-styles.css.ts` + `use-styles.ts` + `index.tsx` + tests). Ver `src/components/README.md`.
|
|
21
|
+
- **`src/hooks/`** — hooks reutilizables, cada uno en su carpeta.
|
|
22
|
+
- **`src/theme/`** — sistema de temas: schemas (paletas) × modo (light/dark/sepia/contrast), tokens, tipografía y `ThemeProvider`/`useTheme`. Ver `src/theme/README.md`.
|
|
23
|
+
- **`src/index.ts`** — API pública: exportá acá solo lo que querés que consuman.
|
|
24
|
+
|
|
25
|
+
El ejemplo (`Button` + `useToggle`) es demostrativo — reemplazalo por tus componentes.
|
|
26
|
+
|
|
27
|
+
## Estilos y tema
|
|
28
|
+
|
|
29
|
+
- Los estilos se escriben en **TypeScript** con [vanilla-extract](https://vanilla-extract.style) (`.css.ts`),
|
|
30
|
+
type-safe y **zero-runtime**: se compilan a un único `dist/index.css`.
|
|
31
|
+
- Cada componente trae su `use-styles.css.ts` con clases **encapsuladas** (scope automático) que usan los
|
|
32
|
+
**tokens del tema** (ver `src/theme/`).
|
|
33
|
+
- **Consumir:** importá el CSS una vez: `import "design-system/styles.css"`.
|
|
34
|
+
- **Schemas × modo:** la librería trae paletas (`schemas`), cada una con `light` y `dark`. Envolvé tu app:
|
|
35
|
+
`import { ThemeProvider } from "design-system"` → `<ThemeProvider defaultSchema="ocean" defaultMode="dark">…</ThemeProvider>`.
|
|
36
|
+
- **Cambiar tema:** `const { schema, mode, setSchema, setMode, toggleMode } = useTheme();` (la lista de paletas está en `schemaNames`).
|
|
37
|
+
Los componentes toman el tema activo solos; sin `ThemeProvider` usan `default`/`light`.
|
|
38
|
+
- **Schema/tema custom:** agregá un schema en `src/theme/schemas/`, o creá un tema con
|
|
39
|
+
`createTheme(theme, { /* tokens con la forma del contract */ })` (type-safe).
|
|
40
|
+
- **Tipografía por roles:** clases listas `text.h1 … text.small`: `import { text } from "design-system"` → `<h1 className={text.h1}>`.
|
|
41
|
+
|
|
42
|
+
## Calidad
|
|
43
|
+
|
|
44
|
+
- **Biome** hace lint + formato (`npm run lint`).
|
|
45
|
+
- **Husky + lint-staged**: en cada commit se formatea/lintea lo staged **y se corren los tests relacionados** (`vitest related`). Se activa solo tras `npm install` (script `prepare`).
|
|
46
|
+
- **TDD** con Vitest + Testing Library: para componentes/hooks nuevos, escribí el test primero.
|
|
47
|
+
- **Coverage:** `npm run test:coverage` valida el umbral configurado en `vitest.config.ts` (constante `COVERAGE_THRESHOLD`, default 80%; ponelo en 0 para desactivar).
|
|
48
|
+
|
|
49
|
+
## Publicar
|
|
50
|
+
|
|
51
|
+
1. Ajustá `name`, `version` y `description` en `package.json`.
|
|
52
|
+
2. `npm run build` genera `dist/` (incluye `index.css`).
|
|
53
|
+
3. `npm publish` (el campo `files` ya limita el tarball a `dist/`). Recordales a los consumidores importar `<pkg>/styles.css`.
|