67 lines
1.9 KiB
Markdown
67 lines
1.9 KiB
Markdown
# @omaresquivel/design-system
|
|
|
|
Sistema de diseño para estandarizar estilos y componentes en aplicaciones Vue 3. Su núcleo son tokens semánticos sobrescribibles y una hoja CSS compilada; los componentes `Ds*` ofrecen implementaciones accesibles y consistentes sobre esos fundamentos.
|
|
|
|
## Requisitos
|
|
|
|
- Node.js 22 o posterior.
|
|
- Vue 3.5 o posterior en la aplicación consumidora.
|
|
- Navegadores modernos compatibles con Tailwind CSS v4 y `<dialog>`.
|
|
|
|
## Desarrollo
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
El playground queda disponible en la dirección indicada por Vite. Incluye catálogo, perfil, configuración, formulario largo y estados de panel.
|
|
|
|
## Validación
|
|
|
|
```bash
|
|
npm run typecheck
|
|
npm test
|
|
npm run build
|
|
```
|
|
|
|
`npm run build` genera la librería en `dist/` y el catálogo en `dist-playground/`.
|
|
|
|
## Consumo
|
|
|
|
Mientras el paquete sea privado puede instalarse desde una ruta local:
|
|
|
|
```bash
|
|
npm install ../design_system
|
|
```
|
|
|
|
Importa componentes y la hoja compilada una sola vez:
|
|
|
|
```ts
|
|
import { DsButton, DsTextInput } from "@omaresquivel/design-system";
|
|
import "@omaresquivel/design-system/style.css";
|
|
```
|
|
|
|
También puede registrarse el catálogo completo:
|
|
|
|
```ts
|
|
import { createApp } from "vue";
|
|
import { DesignSystem } from "@omaresquivel/design-system";
|
|
import "@omaresquivel/design-system/style.css";
|
|
|
|
createApp(App).use(DesignSystem).mount("#app");
|
|
```
|
|
|
|
Se recomienda usar importaciones nombradas para conservar tree-shaking. La personalización se realiza sobrescribiendo variables `--ds-*`; no es necesario instalar Tailwind en la aplicación consumidora.
|
|
|
|
## Documentación
|
|
|
|
- [Investigación y decisiones](docs/research.md)
|
|
- [Fundamentos y tokens](docs/foundations.md)
|
|
- [Catálogo de componentes](docs/components.md)
|
|
- [Accesibilidad](docs/accessibility.md)
|
|
- [Instalación y theming](docs/installation.md)
|
|
- [Roadmap](docs/roadmap.md)
|
|
|
|
El paquete se publica en el registro npm de Gitea y no contiene lógica de negocio, router, almacenamiento ni acceso a APIs.
|