ywana-core8 0.1.84 → 0.1.86

package/doc/README.md

@@ -0,0 +1,196 @@
+# Ywana Core8 - Documentación de Componentes
+
+Este directorio contiene la documentación interactiva de todos los componentes de Ywana Core8, implementada como un sitio web estático con React.
+
+## 🌐 Sitio Web
+
+El sitio web principal se encuentra en `index.html` y proporciona:
+
+- **Menú lateral navegable** con todos los componentes organizados por categorías
+- **Búsqueda en tiempo real** de componentes
+- **Filtrado por categorías** (Input, Data Display, Layout, etc.)
+- **Vista previa interactiva** de cada componente
+- **Diseño responsive** que funciona en desktop y móvil
+
+## 📁 Estructura de Archivos
+
+```
+doc/
+├── index.html              # Página principal del sitio web
+├── app.js                  # Aplicación React principal
+├── styles.css              # Estilos del sitio web
+├── generate-examples.cjs   # Script para generar archivos HTML
+├── lib/                    # Componentes y ejemplos
+│   ├── *.js               # Componentes React
+│   ├── *.css              # Estilos de componentes
+│   ├── *.example.js       # Archivos de ejemplos
+│   ├── *.example.html     # Páginas HTML generadas
+│   ├── react.development.js
+│   ├── react-dom.development.js
+│   └── ExampleLayout.js   # Layout común para ejemplos
+└── README.md              # Este archivo
+```
+
+## 🚀 Uso
+
+### Ver la Documentación
+
+1. Abrir `doc/index.html` en un navegador web
+2. Navegar por el menú lateral para ver diferentes componentes
+3. Usar la búsqueda para encontrar componentes específicos
+4. Filtrar por categoría usando el dropdown
+
+### Agregar Nuevos Componentes
+
+1. **Crear el componente**: `lib/mi-componente.js`
+2. **Crear los estilos**: `lib/mi-componente.css`
+3. **Crear el ejemplo**: `lib/mi-componente.example.js`
+4. **Actualizar la configuración** en `app.js`:
+   ```javascript
+   {
+       id: 'mi-componente',
+       title: 'Mi Componente',
+       description: 'Descripción del componente',
+       category: 'Input', // o la categoría apropiada
+       icon: 'icono_material',
+       file: 'mi-componente.example.js'
+   }
+   ```
+5. **Regenerar archivos HTML**: `node generate-examples.cjs`
+
+## 📊 Componentes Disponibles
+
+### Input (9 componentes)
+- **Button** - Botones y acciones interactivas
+- **Checkbox** - Casillas de verificación
+- **Color** - Selector y visualizador de colores
+- **Form** - Formularios y validación
+- **Radio** - Botones de radio
+- **Switch** - Interruptores de encendido/apagado
+- **TextField** - Campos de texto y entrada
+- **TokenField** - Campo de tokens y etiquetas
+
+### Data Display (8 componentes)
+- **Actions Cell** - Celda de acciones con overflow automático
+- **Chip** - Etiquetas y chips interactivos
+- **Icon** - Iconos de Material Design
+- **List** - Listas y elementos de lista
+- **Property** - Visualizador de propiedades
+- **Table** - Tabla de datos original
+- **Table2** - Tabla de datos mejorada
+- **Tree** - Árbol jerárquico de datos
+
+### Layout (3 componentes)
+- **Accordion** - Componente de acordeón expandible
+- **Header** - Cabeceras y navegación
+- **Section** - Secciones y contenedores
+
+### Navigation (1 componente)
+- **Tab** - Pestañas y navegación por tabs
+
+### Feedback (1 componente)
+- **Progress** - Indicadores de progreso
+
+### Overview (1 componente)
+- **Components** - Vista general de todos los componentes
+
+## 🛠️ Desarrollo
+
+### Tecnologías Utilizadas
+
+- **React 18** (modo desarrollo)
+- **Babel Standalone** (transformación JSX en el navegador)
+- **Material Icons** (iconografía)
+- **CSS Variables** (theming)
+- **Vanilla JavaScript** (sin bundlers)
+
+### Características Técnicas
+
+- **Sin Build Process**: Todo funciona directamente en el navegador
+- **Hot Reload**: Los cambios se ven inmediatamente al recargar
+- **Modular**: Cada componente es independiente
+- **Responsive**: Diseño adaptativo para todos los dispositivos
+- **Accesible**: Navegación por teclado y screen readers
+
+### Scripts Útiles
+
+```bash
+# Generar todos los archivos HTML de ejemplos
+node generate-examples.cjs
+
+# Servir localmente (opcional)
+python -m http.server 8000
+# o
+npx serve .
+```
+
+## 🎨 Personalización
+
+### Temas y Colores
+
+Los colores se definen en CSS Variables en `index.html`:
+
+```css
+:root {
+    --primary-color: #1976d2;
+    --primary-color-light: #42a5f5;
+    --primary-color-lighter: #e3f2fd;
+    --text-color: #212121;
+    --background-color: #fafafa;
+    /* ... más variables */
+}
+```
+
+### Layout de Ejemplos
+
+Todos los ejemplos usan `ExampleLayout.js` que proporciona:
+
+- **Navegación lateral** con secciones y subsecciones
+- **Snippets de código** con syntax highlighting
+- **Responsive design** automático
+- **Scroll spy** para navegación activa
+
+## 📱 Responsive Design
+
+El sitio web es completamente responsive:
+
+- **Desktop**: Sidebar fijo de 320px
+- **Tablet**: Sidebar colapsable
+- **Mobile**: Sidebar overlay con navegación táctil
+
+## 🔍 Búsqueda y Filtrado
+
+- **Búsqueda en tiempo real** por nombre y descripción
+- **Filtrado por categorías** con contador de resultados
+- **Navegación por teclado** para accesibilidad
+- **URLs amigables** (futuro: deep linking)
+
+## 📈 Métricas
+
+- **22 componentes** documentados
+- **6 categorías** organizadas
+- **100% responsive** design
+- **0 dependencias** de build
+- **< 2MB** tamaño total
+
+## 🚀 Despliegue
+
+El sitio está configurado para GitHub Pages:
+
+1. Los archivos están en la carpeta `doc/`
+2. GitHub Pages sirve automáticamente desde esta carpeta
+3. Accesible en: `https://[usuario].github.io/[repo]/`
+
+## 🤝 Contribución
+
+Para contribuir:
+
+1. Agregar nuevos componentes siguiendo la estructura existente
+2. Actualizar la configuración en `app.js`
+3. Regenerar archivos HTML con el script
+4. Probar localmente antes de hacer commit
+5. Documentar cambios en este README
+
+---
+
+**Ywana Core8** - Sistema de Diseño y Componentes React