pixelon 0.1.1 → 0.1.2

package/README.md

@@ -1,54 +1,389 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
+# Pixelon - Design System
+
+Design system de la marca Goluti construido con React, TypeScript y Atomic Design.
+
+## 🚀 Instalación
+
+```bash
+npm install pixelon
+```
+
+## 🎨 Importación de Estilos
+
+Tienes varias opciones para importar los estilos de Pixelon:
+
+### Opción 1: Ruta directa (tradicional)
+```tsx
+import 'pixelon/styles';
+```
+
+### Opción 2: Con exports (recomendado)
+```tsx
+import 'pixelon/styles';
+```
+
+### Opción 3: En tu archivo CSS principal
+```css
+@import 'pixelon/styles';
+```
+
+### Opción 4: En tu archivo SCSS
+```scss
+@import 'pixelon/styles';
+```
+
+## 📦 Uso Básico
+
+```tsx
+import React from 'react';
+import { Button, Text, Input } from 'pixelon';
+
+// Importar estilos (elige una opción):
+import 'pixelon/styles';        // Opción 1: Ruta directa
+import 'pixelon/styles';                 // Opción 2: Con exports (recomendado)
+
+function App() {
+  return (
+    <div>
+      <Text variant="h1">Hola Pixelon</Text>
+      <Input label="Email" placeholder="tu@email.com" />
+      <Button variant="primary">Enviar</Button>
+    </div>
+  );
+}
+```
+
+## 🎨 Ejemplos de Componentes
+
+### Botones
+
+```tsx
+import { Button } from 'pixelon';
+
+function ButtonExamples() {
+  return (
+    <div>
+      {/* Botón primario */}
+      <Button variant="primary">Botón Primario</Button>
+      
+      {/* Botón secundario */}
+      <Button variant="secondary">Botón Secundario</Button>
+      
+      {/* Botón fantasma */}
+      <Button variant="ghost">Botón Fantasma</Button>
+      
+      {/* Botón con icono */}
+      <Button variant="icon" icon="📧">Enviar</Button>
+      
+      {/* Botón circular */}
+      <Button variant="circle" icon="➕" />
+      
+      {/* Botón de carga */}
+      <Button variant="primary" isLoading>Procesando...</Button>
+      
+      {/* Botón de ancho completo */}
+      <Button variant="primary" fullWidth>Botón Completo</Button>
+    </div>
+  );
+}
+```
+
+### Texto
+
+```tsx
+import { Text } from 'pixelon';
+
+function TextExamples() {
+  return (
+    <div>
+      {/* Títulos */}
+      <Text variant="h1">Título Principal</Text>
+      <Text variant="h2">Subtítulo</Text>
+      <Text variant="h3">Sección</Text>
+      
+      {/* Texto de cuerpo */}
+      <Text variant="body">Texto normal del cuerpo</Text>
+      <Text variant="small">Texto pequeño</Text>
+      <Text variant="caption">Texto de caption</Text>
+      
+      {/* Pesos de fuente */}
+      <Text variant="body" weight="normal">Normal</Text>
+      <Text variant="body" weight="medium">Medium</Text>
+      <Text variant="body" weight="semibold">Semibold</Text>
+      <Text variant="body" weight="bold">Bold</Text>
+      
+      {/* Colores */}
+      <Text variant="body" color="primary">Texto primario</Text>
+      <Text variant="body" color="secondary">Texto secundario</Text>
+      
+      {/* Alineación */}
+      <Text variant="body" align="left">Izquierda</Text>
+      <Text variant="body" align="center">Centro</Text>
+      <Text variant="body" align="right">Derecha</Text>
+    </div>
+  );
+}
+```
+
+### Campos de Entrada
+
+```tsx
+import { Input } from 'pixelon';
+
+function InputExamples() {
+  return (
+    <div>
+      {/* Input básico */}
+      <Input label="Nombre" placeholder="Tu nombre" />
+      
+      {/* Input con error */}
+      <Input 
+        label="Email" 
+        placeholder="tu@email.com"
+        error="Email inválido"
+      />
+      
+      {/* Input con icono */}
+      <Input 
+        label="Buscar"
+        placeholder="Buscar..."
+        icon="🔍"
+      />
+      
+      {/* Input de ancho completo */}
+      <Input 
+        label="Descripción"
+        placeholder="Describe tu proyecto"
+        fullWidth
+      />
+      
+      {/* Input para chat */}
+      <Input 
+        variant="chat"
+        placeholder="Escribe un mensaje..."
+      />
+    </div>
+  );
+}
+```
+
+### Chat Completo
+
+```tsx
+import { Chat } from 'pixelon';
+
+function ChatExample() {
+  return (
+    <div style={{ height: '100vh' }}>
+      <Chat 
+        onSendMessage={(message) => {
+          console.log('Mensaje enviado:', message);
+        }}
+        onFileUpload={(files) => {
+          console.log('Archivos subidos:', files);
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### Componentes de Chat Individuales
+
+```tsx
+import { 
+  AssistantMessage, 
+  UserMessage, 
+  ChatInput, 
+  ChatHeader 
+} from 'pixelon';
+
+function ChatComponentsExample() {
+  return (
+    <div>
+      {/* Header del chat */}
+      <ChatHeader title="Soporte Técnico" />
+      
+      {/* Mensaje del asistente */}
+      <AssistantMessage 
+        content="¡Hola! ¿En qué puedo ayudarte?"
+        timestamp="10:30 AM"
+      />
+      
+      {/* Mensaje del usuario */}
+      <UserMessage 
+        content="Necesito ayuda con mi cuenta"
+        timestamp="10:31 AM"
+      />
+      
+      {/* Input del chat */}
+      <ChatInput 
+        onSend={(message) => console.log(message)}
+        onFileUpload={(files) => console.log(files)}
+      />
+    </div>
+  );
+}
+```
+
+### Avatares
+
+```tsx
+import { Avatar } from 'pixelon';
+
+function AvatarExamples() {
+  return (
+    <div>
+      {/* Avatar de usuario */}
+      <Avatar 
+        variant="user"
+        size="medium"
+        src="/path/to/image.jpg"
+        fallback="AL"
+      />
+      
+      {/* Avatar del asistente */}
+      <Avatar 
+        variant="assistant"
+        size="large"
+      />
+      
+      {/* Tamaños */}
+      <Avatar size="small" fallback="U" />
+      <Avatar size="medium" fallback="U" />
+      <Avatar size="large" fallback="U" />
+    </div>
+  );
+}
+```
+
+### Enlaces
+
+```tsx
+import { Link } from 'pixelon';
+
+function LinkExamples() {
+  return (
+    <div>
+      {/* Enlace básico */}
+      <Link href="/documentacion">Documentación</Link>
+      
+      {/* Enlace externo */}
+      <Link 
+        href="https://github.com/dandres10/pixelon"
+        external
+      >
+        Ver en GitHub
+      </Link>
+      
+      {/* Variantes */}
+      <Link variant="primary">Enlace Primario</Link>
+      <Link variant="secondary">Enlace Secundario</Link>
+      
+      {/* Tamaños */}
+      <Link size="small">Enlace Pequeño</Link>
+      <Link size="medium">Enlace Mediano</Link>
+      <Link size="large">Enlace Grande</Link>
+      
+      {/* Con subrayado */}
+      <Link underline>Enlace Subrayado</Link>
+    </div>
+  );
+}
+```
+
+## 🎨 Personalización de Estilos
+
+### Variables CSS
+
+```css
+:root {
+  /* Colores principales */
+  --color-primary: #000000;
+  --color-secondary: #343541;
+  --color-background: #FFFFFF;
+  
+  /* Tipografía */
+  --font-family-base: 'Inter', sans-serif;
+  --font-size-base: 1rem;
+  
+  /* Espaciado */
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  
+  /* Bordes */
+  --border-radius-md: 0.375rem;
+}
+```
+
+### Tema Oscuro
+
+```tsx
+// Activar tema oscuro
+document.documentElement.setAttribute('data-theme', 'dark');
+
+// Volver al tema claro
+document.documentElement.setAttribute('data-theme', 'light');
+```
+
+## 📦 Componentes Disponibles
+
+### Atoms
+- `Button` - Botones con múltiples variantes
+- `Input` - Campos de entrada
+- `Text` - Componentes de texto
+- `Textarea` - Áreas de texto
+- `Link` - Enlaces
+- `Avatar` - Avatares de usuario
+- `AttachmentPreview` - Vista previa de archivos
+- `SelectMenu` - Menús de selección
+- `DateDivider` - Divisores de fecha
+- `Logo` - Logo de la marca
+
+### Molecules
+- `AssistantMessage` - Mensajes del asistente
+- `AssistantThinkingIndicator` - Indicador de pensamiento
+- `ChatHeader` - Encabezado del chat
+- `ChatInput` - Entrada del chat
+- `FileViewer` - Visor de archivos
+- `FullscreenViewer` - Visor pantalla completa
+- `MessageStatus` - Estado de mensajes
+- `Modal` - Ventanas modales
+- `UserAttachments` - Adjuntos del usuario
+- `UserMessage` - Mensajes del usuario
+
+### Organisms
+- `Chat` - Componente de chat completo
+
+## 📋 Requisitos
+
+- React 18+ o 19+
+- TypeScript (recomendado)
+- Node.js 16+
+
+## 🔧 Desarrollo
+
+```bash
+# Instalar dependencias
+npm install
+
+# Ejecutar Storybook
+npm run storybook
+
+# Construir librería
+npm run build:lib
+
+# Ejecutar tests
+npm test
 ```
+
+## 📞 Soporte
+
+Para soporte técnico:
+
+📧 **Email:** dandresleon64@gmail.com  
+🌐 **GitHub:** https://github.com/dandres10/pixelon
+
+## 📄 Licencia
+
+Copyright © 2024 Marlon Andrés León León. Todos los derechos reservados.

package/package.json

@@ -1,11 +1,22 @@
 {
   "name": "pixelon",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Design system de la marca goluti",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": {
+      "import": "./dist/styles.css",
+      "require": "./dist/styles.css"
+    }
+  },
   "files": [
     "dist",
     "src/styles"