OnSpot-UX

OnSpot-UX es el sistema de diseño y librería de componentes UI desarrollada específicamente para el ecosistema OnSpot. Proporciona componentes reutilizables, consistentes y optimizados para las necesidades del proyecto.

Contenido

Fundamentos

• Introducción - Conceptos básicos y filosofía del sistema de diseño
• Componentes - Catálogo completo de componentes disponibles
• Storybook - Documentación interactiva y herramienta de desarrollo

Características Principales

🎨 Sistema de Diseño Consistente

• Tokens de diseño unificados (colores, tipografía, espaciado)
• Componentes reutilizables con API consistente
• Temas personalizables (claro/oscuro)
• Responsive design por defecto

🧩 Componentes Modulares

• Componentes básicos (Button, Input, Modal)
• Componentes complejos (DataTable, Forms, Navigation)
• Layouts predefinidos
• Iconografía integrada

🛠️ Herramientas de Desarrollo

• Storybook para desarrollo aislado
• TypeScript para tipado fuerte
• Documentación automática de props
• Testing integrado

Instalación y Configuración

Instalación

npm install @twlgroup/onspot-ux

Configuración Básica

import { ThemeProvider } from "@twlgroup/onspot-ux";

function App() {
  return (
    <ThemeProvider theme="light">
      {/* Tu aplicación */}
    </ThemeProvider>
  );
}

Importación de Componentes

import { Button, Modal, Form } from "@twlgroup/onspot-ux";

Filosofía de Diseño

Principios

1. Consistencia - Misma experiencia en toda la aplicación
2. Accesibilidad - Componentes accesibles por defecto
3. Flexibilidad - Personalizable sin perder consistencia
4. Performance - Optimizado para rendimiento
5. Mantenibilidad - Fácil de actualizar y extender

Tokens de Diseño

// Colores principales
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;

// Espaciado
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;

// Tipografía
$font-family: 'Inter', sans-serif;
$font-size-sm: 14px;
$font-size-md: 16px;
$font-size-lg: 18px;

Flujo de Trabajo

Para Desarrolladores

1. Explora Storybook - Revisa componentes disponibles
2. Lee la documentación - Entiende las props y uso
3. Implementa componentes - Usa en tu aplicación
4. Personaliza si es necesario - Siguiendo las guías
5. Contribuye - Propón mejoras o nuevos componentes

Para Diseñadores

1. Revisa tokens de diseño - Usa colores y espaciado consistentes
2. Consulta componentes existentes - Antes de crear nuevos
3. Propón nuevos componentes - Siguiendo los principios
4. Valida en Storybook - Asegura implementación correcta

Componentes Destacados

Básicos

• Button - Botones con múltiples variantes
• Input - Campos de entrada con validación
• Modal - Ventanas modales accesibles
• Card - Contenedores de contenido

Complejos

• DataTable - Tablas con funcionalidades avanzadas
• Form - Formularios con validación integrada
• Navigation - Componentes de navegación
• Charts - Gráficos y visualizaciones

Próximos Pasos

1. Lee la Introducción para entender los conceptos
2. Explora los Componentes disponibles
3. Experimenta con Storybook para desarrollo
4. Implementa en tu proyecto siguiendo las mejores prácticas

Recursos Adicionales

• Repositorio: Código fuente y contribuciones
• Figma: Diseños y especificaciones
• Slack: Canal de soporte y discusión
• Roadmap: Próximas funcionalidades

---

Versión: 1.3.21 | Actualizado: hace 1 mes