88 lines
2.1 KiB
Markdown
88 lines
2.1 KiB
Markdown
# Instalación, consumo y theming
|
|
|
|
## Instalar localmente
|
|
|
|
Construye la librería:
|
|
|
|
```bash
|
|
npm install
|
|
npm run build:lib
|
|
```
|
|
|
|
Desde otra aplicación Vue:
|
|
|
|
```bash
|
|
npm install ../design_system
|
|
```
|
|
|
|
El paquete está configurado para publicarse en el registro npm de Gitea de `omararch48`. La publicación sigue siendo manual y requiere `GITEA_NPM_TOKEN`.
|
|
|
|
## Publicar en Gitea
|
|
|
|
Define un token personal con permiso de paquetes sin guardarlo en el repositorio:
|
|
|
|
```bash
|
|
export GITEA_NPM_TOKEN="tu-token"
|
|
npm publish
|
|
```
|
|
|
|
El hook `prepublishOnly` ejecuta type-check, pruebas y build de la librería antes de subir el paquete. Gitea no permite reemplazar una combinación existente de nombre y versión; incrementa la versión antes de una publicación posterior:
|
|
|
|
```bash
|
|
npm version patch
|
|
npm publish
|
|
```
|
|
|
|
El scope `@omaresquivel` apunta a:
|
|
|
|
```text
|
|
https://gitea.autobyte.dev/api/packages/omararch48/npm/
|
|
```
|
|
|
|
## Importar
|
|
|
|
```ts
|
|
import { DsButton, DsPanel, DsTextInput } from "@omaresquivel/design-system";
|
|
import "@omaresquivel/design-system/style.css";
|
|
```
|
|
|
|
Vue `^3.5.0` es peer dependency. Tailwind, Vite y TypeScript no son dependencias runtime del consumidor.
|
|
|
|
## Registro global opcional
|
|
|
|
```ts
|
|
import { DesignSystem } from "@omaresquivel/design-system";
|
|
import "@omaresquivel/design-system/style.css";
|
|
|
|
app.use(DesignSystem);
|
|
```
|
|
|
|
## Personalizar el tema
|
|
|
|
Carga las personalizaciones después del CSS del paquete:
|
|
|
|
```css
|
|
:root {
|
|
--ds-color-primary: #2563eb;
|
|
--ds-color-primary-hover: #1d4ed8;
|
|
--ds-color-focus-ring: #60a5fa;
|
|
--ds-radius-lg: 1rem;
|
|
}
|
|
```
|
|
|
|
No es necesario configurar `@source`, copiar `@apply` ni exponer Tailwind al consumidor. Si una aplicación ya usa Tailwind, ambos pueden coexistir porque los selectores del sistema llevan el prefijo `ds-` y los tokens llevan `--ds-`.
|
|
|
|
## Enlace durante desarrollo
|
|
|
|
Puede usarse una dependencia local en `package.json`:
|
|
|
|
```json
|
|
{
|
|
"dependencies": {
|
|
"@omaresquivel/design-system": "file:../design_system"
|
|
}
|
|
}
|
|
```
|
|
|
|
Después de modificar la librería ejecuta `npm run build:lib` y actualiza la instalación de la aplicación consumidora según el flujo de su gestor de paquetes.
|