Soadtech UI

Librería de componentes UI distribuible como código fuente, estilo shadcn/ui. Los componentes se copian directamente a tu proyecto — sin dependencias de runtime.

Componentes disponibles

| Componente | Descripción | |------------|-------------| | Avatar | Avatar con imagen, iniciales o icono fallback. Soporta indicador de estado y 5 tamaños (xs-xl). | | Alert | Notificación con 5 variantes de color (default, positive, primary, negative, warning) y layouts compact/expanded. | | Accordion | Secciones expandibles con modo single/multiple. Animación CSS grid, accesibilidad completa con teclado. |

Instalación

Usando el CLI

# Copiar un componente a tu proyecto
node cli/add.js avatar

# Copiar todos los componentes
node cli/add.js --all

# Ver qué archivos se copiarían sin ejecutar
node cli/add.js alert --dry-run

# Especificar ruta destino
node cli/add.js accordion --path=./src/ui

Manual

Copia la carpeta del componente deseado desde components/, junto con:

• tokens/ — Design tokens CSS (colores, tipografía, espaciado)
• lib/utils.ts — Utilidad cn() para merge de classnames

Uso

// Importar tokens en tu entry point
import "./tokens/index.css";

// Usar componentes
import { Avatar } from "./components/avatar";
import { Alert } from "./components/alert";
import { Accordion } from "./components/accordion";

<Avatar name="Jane Smith" size="lg" status="online" />

<Alert variant="positive" title="Éxito" description="Operación completada." />

<Accordion
  items={[
    { id: "1", title: "Pregunta", content: "Respuesta" },
  ]}
  type="single"
/>

Design Tokens

Todos los tokens usan el prefijo --st- y se definen en tokens/base.css:

• Colores: neutrals (gray-50 a gray-900), positive (green), primary (cyan), negative (red), warning (yellow)
• Tipografía: system font stack, tamaños xs-xl, pesos normal/medium/semibold/bold
• Espaciado: escala de 4px (--st-space-1 a --st-space-12)
• Dark mode: [data-theme="dark"] en el elemento html

Convenciones CSS

• BEM con prefijo: .st-accordion, .st-accordion__item, .st-accordion__item--open
• Custom properties privadas: --_alert-bg, --_avatar-size para encapsular variantes
• Especificidad plana: solo selectores de clase, sin IDs

Estructura

soadtech-ui/
├── package.json
├── tsconfig.json
├── registry.json           # Manifiesto de componentes
├── cli/add.js              # CLI para copiar componentes
├── tokens/
│   ├── base.css            # Design tokens
│   ├── themes/light.css
│   ├── themes/dark.css
│   └── index.css
├── lib/utils.ts            # cn() utility
├── components/
│   ├── accordion/
│   ├── alert/
│   └── avatar/
└── docs/                   # Documentación por componente

Requisitos

• React >= 18 (peer dependency)
• TypeScript >= 5.7 (dev)
• Los componentes se distribuyen como fuente TSX/CSS, sin paso de build

Licencia

MIT