ywana-core8 0.1.103 → 0.2.1

package/doc/README.md

@@ -1,196 +0,0 @@
-# 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