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

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)