First commit
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
# @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.
|
||||
Reference in New Issue
Block a user