@octavius2929-personal/design-system 0.14.0 → 0.16.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.
Files changed (9) hide show
  1. package/dist/index.cjs +3141 -238
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +205 -603
  4. package/dist/index.d.ts +205 -603
  5. package/dist/index.js +2959 -151
  6. package/dist/index.js.map +1 -1
  7. package/package.json +3 -11
  8. package/LICENSE +0 -21
  9. package/README.md +0 -117
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@octavius2929-personal/design-system",
3
- "version": "0.14.0",
3
+ "version": "0.16.0",
4
4
  "description": "Librería de componentes React con estilos en TypeScript (vanilla-extract) y theming por schema × modo (light/dark/sepia/contrast).",
5
5
  "license": "MIT",
6
6
  "author": "justinoctavius <justinoctavio2001@gmail.com>",
@@ -19,9 +19,6 @@
19
19
  "typescript",
20
20
  "theming"
21
21
  ],
22
- "workspaces": [
23
- "examples/*"
24
- ],
25
22
  "type": "module",
26
23
  "main": "./dist/index.cjs",
27
24
  "module": "./dist/index.js",
@@ -64,8 +61,7 @@
64
61
  "lint:fix": "biome check --write .",
65
62
  "storybook": "storybook dev -p 6006",
66
63
  "storybook:build": "storybook build",
67
- "prepublishOnly": "npm run build",
68
- "prepare": "husky"
64
+ "prepublishOnly": "npm run build"
69
65
  },
70
66
  "engines": {
71
67
  "node": ">=22"
@@ -75,9 +71,7 @@
75
71
  "react-dom": ">=18"
76
72
  },
77
73
  "devDependencies": {
78
- "@biomejs/biome": "^1.8.0",
79
- "@commitlint/cli": "^21.0.2",
80
- "@commitlint/config-conventional": "^21.0.2",
74
+ "@octavius2929-personal/design-system-core": "*",
81
75
  "@playwright/test": "^1.60.0",
82
76
  "@storybook/addon-a11y": "^8.6.18",
83
77
  "@storybook/addon-essentials": "^8.6.14",
@@ -93,9 +87,7 @@
93
87
  "@vitest/coverage-v8": "^1.6.0",
94
88
  "commitlint": "^21.0.2",
95
89
  "http-server": "^14.1.1",
96
- "husky": "^9.0.0",
97
90
  "jsdom": "^24.0.0",
98
- "lint-staged": "^15.2.0",
99
91
  "react": "^18.3.0",
100
92
  "react-dom": "^18.3.0",
101
93
  "semantic-release": "^24.0.0",
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2026 Justin Octavio <justinoctavio2001@gmail.com>
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 DELETED
@@ -1,117 +0,0 @@
1
- # design-system
2
-
3
- Librería de componentes **React** con estilos en TypeScript (vanilla-extract). Generada con `@octavius2929-personal/scaffold-generator`.
4
-
5
- ## Instalación
6
-
7
- ```bash
8
- npm install @octavius2929-personal/design-system
9
- ```
10
-
11
- `react` y `react-dom` son **peer dependencies** (`>=18`): asegurate de tenerlos instalados en tu app.
12
-
13
- ## Uso
14
-
15
- 1. Importá el CSS **una sola vez** (en el entrypoint de tu app, p. ej. `main.tsx`):
16
-
17
- ```ts
18
- import "@octavius2929-personal/design-system/styles.css";
19
- ```
20
-
21
- 2. Envolvé tu app con `ThemeProvider` y usá los componentes:
22
-
23
- ```tsx
24
- import { ThemeProvider, Button } from "@octavius2929-personal/design-system";
25
-
26
- export function App() {
27
- return (
28
- <ThemeProvider defaultSchema="tinta" defaultMode="light">
29
- <Button variant="filled" tone="accent" size="md" onClick={() => alert("¡Hola!")}>
30
- Continuar
31
- </Button>
32
- </ThemeProvider>
33
- );
34
- }
35
- ```
36
-
37
- `ThemeProvider` es **opcional**: sin él los componentes usan el schema `tinta` en modo `light` (las vars de `:root`).
38
-
39
- 3. Para cambiar el schema (paleta) o el modo en runtime, usá `useTheme()` desde un componente dentro del provider:
40
-
41
- ```tsx
42
- import { useTheme, schemaNames } from "@octavius2929-personal/design-system";
43
-
44
- function ThemeSwitch() {
45
- const { schema, mode, setSchema, toggleMode } = useTheme();
46
- return (
47
- <>
48
- <select value={schema} onChange={(e) => setSchema(e.target.value as typeof schema)}>
49
- {schemaNames.map((name) => (
50
- <option key={name} value={name}>
51
- {name}
52
- </option>
53
- ))}
54
- </select>
55
- <button type="button" onClick={toggleMode}>
56
- Modo: {mode}
57
- </button>
58
- </>
59
- );
60
- }
61
- ```
62
-
63
- Los componentes toman el tema activo solos (no hace falta un wrapper con clase). La lista de paletas disponibles está en el export `schemaNames`.
64
-
65
- ## Comandos
66
-
67
- | Comando | Qué hace |
68
- |---|---|
69
- | `npm run build` | Compila a `dist/` (ESM + CJS + tipos + `index.css`) con tsup |
70
- | `npm run dev` | tsup en modo watch |
71
- | `npm test` | Corre vitest una vez |
72
- | `npm run test:watch` | Vitest en watch |
73
- | `npm run test:coverage` | Corre vitest con coverage y valida el umbral |
74
- | `npm run typecheck` | `tsc --noEmit` |
75
- | `npm run lint` | Biome (lint + formato) |
76
- | `npm run lint:fix` | Biome con `--write` |
77
-
78
- ## Arquitectura
79
-
80
- - **`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`.
81
- - **`src/hooks/`** — hooks reutilizables, cada uno en su carpeta.
82
- - **`src/theme/`** — sistema de temas: schemas (paletas) × modo (light/dark/sepia/contrast), tokens, tipografía y `ThemeProvider`/`useTheme`. Ver `src/theme/README.md`.
83
- - **`src/index.ts`** — API pública: exportá acá solo lo que querés que consuman.
84
-
85
- El ejemplo (`Button` + `useToggle`) es demostrativo — reemplazalo por tus componentes.
86
-
87
- ## Estilos y tema
88
-
89
- - Los estilos se escriben en **TypeScript** con [vanilla-extract](https://vanilla-extract.style) (`.css.ts`),
90
- type-safe y **zero-runtime**: se compilan a un único `dist/index.css`.
91
- - Cada componente trae su `use-styles.css.ts` con clases **encapsuladas** (scope automático) que usan los
92
- **tokens del tema** (ver `src/theme/`).
93
- - **Consumir:** importá el CSS una vez: `import "design-system/styles.css"`.
94
- - **Schemas × modo:** la librería trae paletas (`schemas`), cada una con `light` y `dark`. Envolvé tu app:
95
- `import { ThemeProvider } from "design-system"` → `<ThemeProvider defaultSchema="ocean" defaultMode="dark">…</ThemeProvider>`.
96
- - **Cambiar tema:** `const { schema, mode, setSchema, setMode, toggleMode } = useTheme();` (la lista de paletas está en `schemaNames`).
97
- Los componentes toman el tema activo solos; sin `ThemeProvider` usan `default`/`light`.
98
- - **Schema/tema custom:** agregá un schema en `src/theme/schemas/`, o creá un tema con
99
- `createTheme(theme, { /* tokens con la forma del contract */ })` (type-safe).
100
- - **Tipografía por roles:** clases listas `text.h1 … text.small`: `import { text } from "design-system"` → `<h1 className={text.h1}>`.
101
-
102
- ## Calidad
103
-
104
- - **Biome** hace lint + formato (`npm run lint`).
105
- - **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`).
106
- - **TDD** con Vitest + Testing Library: para componentes/hooks nuevos, escribí el test primero.
107
- - **Coverage:** `npm run test:coverage` valida el umbral configurado en `vitest.config.ts` (constante `COVERAGE_THRESHOLD`, default 80%; ponelo en 0 para desactivar).
108
-
109
- ## Publicar
110
-
111
- 1. Ajustá `name`, `version` y `description` en `package.json`.
112
- 2. `npm run build` genera `dist/` (incluye `index.css`).
113
- 3. `npm publish` (el campo `files` ya limita el tarball a `dist/`). Recordales a los consumidores importar `<pkg>/styles.css`.
114
-
115
- ## Versionado
116
-
117
- El versionado es **semántico** (SemVer) y se deriva automáticamente de los [conventional commits](https://www.conventionalcommits.org/). Las versiones y el changelog de cada release viven en los **[GitHub Releases](https://github.com/proyectos-octavio/design-system/releases)** del repositorio — no hay `CHANGELOG.md` en el árbol del proyecto porque el proceso de release no commitea de vuelta.