Pixelon - Design System

Pixelon es un sistema de diseño (design system) desarrollado para la marca Goluti, construido con React, TypeScript y Sass, siguiendo la metodología Atomic Design.

🚀 Características

• 🧪 Atomic Design: Organización jerárquica de componentes (átomos, moléculas, organismos)
• 🎨 Sistema de Tokens: Variables CSS organizadas por dominio
• ⚡ TypeScript: Tipado estático y desarrollo seguro
• 📚 Storybook: Documentación interactiva de componentes
• 🧪 Testing: Pruebas unitarias con Vitest y Testing Library
• 🎯 Store Reactivo: Sistema de estado personalizado sin dependencias
• 📱 Mobile-First: Optimizado para dispositivos móviles
• ♿ Accesible: Cumple estándares WCAG 2.1

📦 Instalación

npm install pixelon

🛠️ Uso Básico

import { Button, Text, Icon, ICON_TYPES, Chat } from "pixelon";
import "pixelon/dist/styles.css";

function App() {
  return (
    <div>
      <Text variant="h1">¡Hola Pixelon!</Text>
      <Button 
        variant="primary" 
        icon={<Icon type={ICON_TYPES.PLUS} size="small" />}
        onClick={() => console.log("Click!")}
      >
        Click me
      </Button>
    </div>
  );
}

🏗️ Componentes Disponibles

🔸 Átomos

• Button - Botones con múltiples variantes
• Input - Campos de entrada de texto
• Text - Componentes de tipografía
• Textarea - Áreas de texto
• Avatar - Avatares de usuario
• Icon - Sistema centralizado de iconos SVG
• Link - Enlaces
• AttachmentPreview - Vista previa de archivos
• DateDivider - Separadores de fecha
• SelectMenu - Menús de selección
• AudioWaves - Visualización de ondas de audio

🔸 Moléculas

• ChatInput - Input de chat con funcionalidades avanzadas
• UserMessage - Mensajes del usuario
• AssistantMessage - Mensajes del asistente
• FileViewer - Visualizador de archivos
• MessageStatus - Estados de mensajes
• Modal - Componentes modales
• AudioPlayer - Reproductor de audio
• ChatHeader - Cabecera del chat

🔸 Organismos

• Chat - Sistema completo de chat con estado reactivo

🎨 Sistema de Diseño

Tokens de Diseño

/* Colores */
--chat-color-primary: #000000;
--chat-color-secondary: #343541;
--chat-color-background: #FFFFFF;

/* Tipografía */
--chat-font-family-base: 'Inter', sans-serif;
--chat-font-size-base: 1rem;

/* Espaciado */
--chat-spacing-md: 1rem;
--chat-spacing-lg: 1.5rem;

Breakpoints

• XS: 480px (móviles pequeños)
• SM: 640px (móviles)
• MD: 768px (tablets)
• LG: 1024px (desktop)

🧪 Desarrollo

Scripts Disponibles

# Desarrollo
npm run dev              # Servidor de desarrollo
npm run storybook        # Documentación interactiva

# Build
npm run build:lib        # Construir librería para npm
npm run build-storybook  # Construir Storybook

# Testing
npm test                 # Tests en modo watch
npm run test:run         # Ejecutar tests una vez
npm run test:ui          # Interfaz visual de testing

# Mobile
npm run mobile           # Storybook accesible desde móviles
npm run get:ip           # Obtener IP local

Estructura del Proyecto

pixelon/
├── docs/                          # 📁 Documentación centralizada
│   ├── main-spect.md             # Especificación principal
│   ├── architecture-project-spect.md   # Arquitectura del proyecto
│   ├── design-system-spect.md    # Sistema de diseño
│   ├── component-guidelines-spect.md   # Guías de componentes
│   ├── api-spect.md              # Documentación de API
│   ├── store-spect.md            # Sistema de store reactivo
│   └── icons-spect.md            # Sistema de iconos
├── src/
│   ├── components/
│   │   ├── atoms/                # Componentes atómicos
│   │   ├── molecules/            # Componentes moleculares
│   │   └── organisms/            # Componentes orgánicos
│   ├── core/                     # Constantes y utilidades
│   │   ├── constants/            # Constantes por dominio
│   │   ├── store/               # Sistema de store
│   │   └── functions/           # Funciones utilitarias
│   └── styles/                   # Estilos globales
│       ├── domains/             # Variables por dominio
│       └── global.scss          # Estilos globales
└── dist/                         # Build de distribución

🏪 Store Reactivo

Pixelon incluye un sistema de store reactivo personalizado para organismos complejos:

import { useChatStore, chatActions } from 'pixelon';

// Hook para suscribirse al store del chat
const { showThinking, updateThinkingState } = useChatStore();

// Acciones centralizadas
chatActions.textareaActions.focus();
chatActions.thinkingActions.show();
chatActions.combinedActions.handleMessageSend();

📱 Chat System

Sistema completo de chat con funcionalidades avanzadas:

import { Chat, ChatMessage } from 'pixelon';

const [messages, setMessages] = useState<ChatMessage[]>([]);
const [inputValue, setInputValue] = useState('');
const [isThinking, setIsThinking] = useState(false);

<Chat
  messages={messages}
  onSend={handleSend}
  onSendWithFiles={handleSendWithFiles}
  isAssistantThinking={isThinking}
  inputValue={inputValue}
  onInputChange={setInputValue}
  onRetry={handleRetry}
/>

🎯 Características del Sistema

Sistema de Iconos Centralizado

import { Icon, ICON_TYPES } from 'pixelon';

<Icon type={ICON_TYPES.PLUS} size="large" />
<Icon type={ICON_TYPES.MICROPHONE} />
<Icon type={ICON_TYPES.EXTERNAL_LINK} />

Hooks Especializados

• useChatStore - Gestión del estado del chat
• useChatHandlers - Handlers centralizados
• useAttachments - Manejo de archivos adjuntos
• useAutoScroll - Scroll automático
• useVirtualKeyboard - Detección de teclado virtual

Soporte de Archivos

• PDFs con visualización integrada
• Imágenes con preview
• Videos con reproducción
• Archivos genéricos con iconos

🔧 Configuración Build

TypeScript Build Optimizado

• Configuración separada para desarrollo y build (tsconfig.build.json)
• Sin advertencias de TypeScript en el build
• Generación automática de tipos
• Sourcemaps incluidos

Rollup Build

• CommonJS y ES Modules
• Tree-shaking optimizado
• Peer dependencies externalizadas
• CSS compilado incluido

📚 Documentación

Storybook

npm run storybook

Accede a localhost:6006 para la documentación interactiva.

Documentación Técnica

• Arquitectura del Proyecto
• Sistema de Diseño
• Guías de Componentes
• Documentación de API
• Sistema de Store
• Sistema de Iconos

🤝 Contribución

1. Fork el proyecto
2. Crea tu rama de feature (git checkout -b feature/AmazingFeature)
3. Haz commit de tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

Guías de Desarrollo

• Sigue la metodología Atomic Design
• Incluye tests para componentes nuevos
• Documenta en Storybook
• Mantén consistencia con el sistema de tokens
• Usa TypeScript con tipado estricto

🧪 Testing

# Ejecutar tests
npm test

# Tests con interfaz visual
npm run test:ui

# Coverage
npm run test:run

📋 Requisitos

• Node.js: ≥16.0.0
• React: ^18.0.0 || ^19.0.0
• React-DOM: ^18.0.0 || ^19.0.0

📄 Licencia

Este proyecto está bajo la licencia MIT - ver el archivo LICENSE para más detalles.

👨‍💻 Autor

Marlon Andrés León León

• Email: [email protected]
• GitHub: @dandres10

🔗 Enlaces

• Repositorio
• NPM Package
• Issues

Versión: 0.2.2
Última actualización: Enero 2025