Skalar Design System

Sistema de diseño de componentes UI para los proyectos de Skalar.

Instalación

Configurar token de acceso

Este es un paquete privado de npm. Solicita tu token de acceso al administrador y configúralo:

# Opción 1: Archivo .npmrc en tu proyecto
echo "//registry.npmjs.org/:_authToken=YOUR_TOKEN_HERE" >> .npmrc

# Opción 2: Configuración global
npm config set //registry.npmjs.org/:_authToken YOUR_TOKEN_HERE

Instalar el paquete

pnpm add @skalar-app/design-system
# o
npm install @skalar-app/design-system

Uso

import { Button, Card, InputField } from '@skalar-app/design-system';
import type { ButtonProps } from '@skalar-app/design-system';

function App() {
  return (
    <Card>
      <Button variant="brand" size="md">Click me</Button>
    </Card>
  );
}

Desarrollo

# Instalar dependencias
pnpm install

# Correr Storybook
pnpm storybook

Publicar una versión

La publicación a npm se hace vía GitHub Actions, de forma manual — no publiques a mano (npm/pnpm publish desde local está desaconsejado: build viejo, registry equivocado, etc.).

gh workflow run release.yml --ref dev -f bump=patch   # patch | minor | major

O desde GitHub: Actions → "Release (publish to npm)" → Run workflow (elige rama dev y el tipo de bump).

• El workflow hace todo el proceso fijo: install → build → bump de versión → publish → commit "chore: release X".
• Lánzalo siempre sobre dev (no main, que está protegida): el bump queda en dev y luego sube a main por PR.
• Solo corre cuando lo disparas tú. Mergear a main no publica ni construye nada.

Crear nuevo componente

1. Crear carpeta en src/shared/ui/NombreComponente/
2. Crear archivos:
   • NombreComponente.tsx
   • NombreComponente.stories.tsx
   • index.ts
3. Exportar en src/index.ts

Estándares

• ✅ TypeScript estricto
• ✅ Props documentadas con JSDoc
• ✅ Stories completas para todos los estados
• ✅ Usar clsx para clases condicionales
• ✅ Seguir estructura de componentes existentes
• ❌ NO usar iconos inline (según estándares del proyecto)