Instalación, consumo y theming

Instalar localmente

Construye la librería:

npm install
npm run build:lib

Desde otra aplicación Vue:

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:

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:

npm version patch
npm publish

El scope @omaresquivel apunta a:

https://gitea.autobyte.dev/api/packages/omararch48/npm/

Importar

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

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:

: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:

{
  "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.

2.1 KiB Raw Permalink Blame History