dars-framework 1.0.0__py3-none-any.whl

dars/scripts/script.py

@@ -0,0 +1,38 @@
+from abc import ABC, abstractmethod
+from typing import Optional
+
+class Script(ABC):
+    """Clase base para la definición de scripts"""
+    def __init__(self, target_language: str = "javascript"):
+        if target_language not in ["javascript", "typescript"]:
+            raise ValueError("El lenguaje objetivo debe ser 'javascript' o 'typescript'")
+        self.target_language = target_language
+        
+    @abstractmethod
+    def get_code(self) -> str:
+        """Retorna el código del script en el lenguaje objetivo"""
+        pass
+
+class InlineScript(Script):
+    """Script definido directamente en el código Python"""
+    def __init__(self, code: str, target_language: str = "javascript"):
+        super().__init__(target_language)
+        self.code = code
+        
+    def get_code(self) -> str:
+        return self.code
+        
+class FileScript(Script):
+    """Script cargado desde un archivo externo"""
+    def __init__(self, file_path: str, target_language: str = "javascript"):
+        super().__init__(target_language)
+        self.file_path = file_path
+        
+    def get_code(self) -> str:
+        try:
+            with open(self.file_path, 'r') as f:
+                return f.read()
+        except FileNotFoundError:
+            raise FileNotFoundError(f"El archivo de script no se encontró: {self.file_path}")
+
+

dars/templates/examples/advanced/all_components_demo.py

@@ -0,0 +1,87 @@
+#!/usr/bin/env python3
+"""
+Plantilla: Todos los Componentes Dars - Básicos y Avanzados
+Demuestra el uso completo e integrado de todos los componentes básicos y avanzados:
+Text, Button, Input, Container, Image, Link, Textarea, Checkbox, RadioButton, Select, Slider, DatePicker,
+Table, Tabs, Accordion, ProgressBar, Spinner, Tooltip
+
+Uso:
+dars init mi_proyecto -t advanced/all_components_demo
+"""
+
+from dars.core.app import App
+from dars.components.basic.container import Container
+from dars.components.basic.text import Text
+from dars.components.basic.button import Button
+from dars.components.basic.input import Input
+from dars.components.basic.image import Image
+from dars.components.basic.link import Link
+from dars.components.basic.textarea import Textarea
+from dars.components.basic.checkbox import Checkbox
+from dars.components.basic.radiobutton import RadioButton
+from dars.components.basic.select import Select, SelectOption
+from dars.components.basic.slider import Slider
+from dars.components.basic.datepicker import DatePicker
+from dars.components.advanced.table import Table
+from dars.components.advanced.tabs import Tabs
+from dars.components.advanced.accordion import Accordion
+from dars.components.basic.progressbar import ProgressBar
+from dars.components.basic.spinner import Spinner
+from dars.components.basic.tooltip import Tooltip
+
+# App principal
+app = App(title="Dars - Todos los Componentes Básicos y Avanzados")
+
+main = Container(style={
+    'max-width': '900px',
+    'margin': '40px auto',
+    'padding': '32px',
+    'background': 'white',
+    'border-radius': '12px',
+    'box-shadow': '0 2px 12px rgba(0,0,0,0.08)'
+})
+
+main.children += [
+    Text("Demostración de TODOS los componentes de Dars", style={"font-size": "2rem", "font-weight": "bold", "margin-bottom": "24px"}),
+    # Básicos
+    Text("Componentes Básicos", style={"font-size": "1.3rem", "margin": "24px 0 12px 0", "color": "#007bff"}),
+    Text("Texto de ejemplo", style={"margin-bottom": "8px"}),
+    Button("Botón primario"),
+    Input(placeholder="Campo de texto"),
+    Image(src="https://via.placeholder.com/120x60.png?text=Logo", alt="Logo Demo", style={"margin": "10px 0"}),
+    Link("Ir a Dars Framework", href="https://github.com/zondahuman/Dars-Framework", target="_blank"),
+    Textarea(value="Texto multilinea de ejemplo", rows=3),
+    Checkbox(label="Acepto términos y condiciones", checked=True),
+    RadioButton(label="Opción A", name="grupo1", checked=True),
+    RadioButton(label="Opción B", name="grupo1"),
+    Select(options=[SelectOption("uno", "Uno"), SelectOption("dos", "Dos")], value="uno", placeholder="Selecciona una opción"),
+    Slider(min_value=0, max_value=100, value=50, label="Volumen", show_value=True),
+    DatePicker(value="2025-08-06"),
+    # Avanzados
+    Text("Componentes Avanzados", style={"font-size": "1.3rem", "margin": "32px 0 12px 0", "color": "#4a90e2"}),
+    Table(
+        columns=[{"title": "Nombre", "field": "nombre"}, {"title": "Edad", "field": "edad"}],
+        data=[{"nombre": "Ana", "edad": 28}, {"nombre": "Luis", "edad": 34}],
+        page_size=10
+    ),
+    Tabs(
+        tabs=["Tab 1", "Tab 2"],
+        panels=[Text("Contenido de la pestaña 1"), Text("Contenido de la pestaña 2")],
+        selected=0
+    ),
+    Accordion(
+        sections=[
+            ("Sección 1", Text("Contenido de la sección 1")),
+            ("Sección 2", Text("Contenido de la sección 2"))
+        ],
+        open_indices=[0]
+    ),
+    ProgressBar(value=70, max_value=100),
+    Spinner(),
+    Tooltip(child=Button("Pasa el mouse"), text="¡Tooltip de ejemplo!", position="top")
+]
+
+app.root = main
+
+if __name__ == "__main__":
+    app.rTimeCompile()

dars/templates/examples/advanced/dashboard.py

@@ -0,0 +1,440 @@
+#!/usr/bin/env python3
+"""
+Dars - Ejemplo Avanzado: Dashboard
+Demuestra layouts complejos, múltiples componentes y funcionalidad avanzada
+"""
+
+import sys
+import os
+
+from dars.core.app import App
+from dars.components.basic.text import Text
+from dars.components.basic.button import Button
+from dars.components.basic.input import Input
+from dars.components.basic.container import Container
+from dars.scripts.script import InlineScript
+
+# Crear la aplicación
+app = App(title="Dashboard Empresarial - Dars")
+
+# Contenedor principal
+main_container = Container(
+    style={
+        'display': 'flex',
+        'min-height': '100vh',
+        'background-color': '#f8f9fa',
+        'font-family': 'Arial, sans-serif'
+    }
+)
+
+# Sidebar
+sidebar = Container(
+    id="sidebar",
+    style={
+        'width': '250px',
+        'background-color': '#2c3e50',
+        'color': 'white',
+        'padding': '20px',
+        'box-shadow': '2px 0 5px rgba(0,0,0,0.1)'
+    }
+)
+
+# Logo/Título del sidebar
+logo = Text(
+    text="📊 Dashboard",
+    style={
+        'font-size': '24px',
+        'font-weight': 'bold',
+        'margin-bottom': '30px',
+        'text-align': 'center',
+        'color': '#ecf0f1'
+    }
+)
+
+# Menú de navegación
+menu_items = [
+    ("🏠 Inicio", "inicio"),
+    ("📈 Ventas", "ventas"),
+    ("👥 Usuarios", "usuarios"),
+    ("⚙️ Configuración", "config")
+]
+
+menu_container = Container(style={'margin-bottom': '30px'})
+
+for texto, id_item in menu_items:
+    menu_item = Button(
+        id=f"menu-{id_item}",
+        text=texto,
+        style={
+            'width': '100%',
+            'background-color': 'transparent',
+            'color': '#ecf0f1',
+            'border': 'none',
+            'padding': '12px 16px',
+            'text-align': 'left',
+            'cursor': 'pointer',
+            'border-radius': '6px',
+            'margin-bottom': '8px',
+            'font-size': '16px'
+        }
+    )
+    menu_container.add_child(menu_item)
+
+# Área de contenido principal
+content_area = Container(
+    id="content-area",
+    style={
+        'flex': '1',
+        'padding': '30px',
+        'overflow-y': 'auto'
+    }
+)
+
+# Header del contenido
+header = Container(
+    style={
+        'display': 'flex',
+        'justify-content': 'space-between',
+        'align-items': 'center',
+        'margin-bottom': '30px',
+        'padding-bottom': '20px',
+        'border-bottom': '2px solid #dee2e6'
+    }
+)
+
+titulo_pagina = Text(
+    id="titulo-pagina",
+    text="Panel de Control",
+    style={
+        'font-size': '32px',
+        'color': '#2c3e50',
+        'font-weight': 'bold'
+    }
+)
+
+usuario_info = Text(
+    text="👤 Admin Usuario",
+    style={
+        'font-size': '16px',
+        'color': '#6c757d'
+    }
+)
+
+# Tarjetas de estadísticas
+stats_container = Container(
+    id="stats-container",
+    style={
+        'display': 'grid',
+        'grid-template-columns': 'repeat(auto-fit, minmax(250px, 1fr))',
+        'gap': '20px',
+        'margin-bottom': '30px'
+    }
+)
+
+# Función para crear tarjetas de estadísticas
+def crear_stat_card(titulo, valor, icono, color):
+    card = Container(
+        style={
+            'background-color': 'white',
+            'padding': '24px',
+            'border-radius': '12px',
+            'box-shadow': '0 2px 10px rgba(0,0,0,0.1)',
+            'border-left': f'4px solid {color}'
+        }
+    )
+    
+    card_header = Container(
+        style={
+            'display': 'flex',
+            'justify-content': 'space-between',
+            'align-items': 'center',
+            'margin-bottom': '10px'
+        }
+    )
+    
+    card_title = Text(
+        text=titulo,
+        style={
+            'font-size': '14px',
+            'color': '#6c757d',
+            'font-weight': '500'
+        }
+    )
+    
+    card_icon = Text(
+        text=icono,
+        style={
+            'font-size': '24px'
+        }
+    )
+    
+    card_value = Text(
+        text=valor,
+        style={
+            'font-size': '28px',
+            'color': '#2c3e50',
+            'font-weight': 'bold'
+        }
+    )
+    
+    card_header.add_child(card_title)
+    card_header.add_child(card_icon)
+    card.add_child(card_header)
+    card.add_child(card_value)
+    
+    return card
+
+# Crear tarjetas de estadísticas
+stats_data = [
+    ("Ventas Totales", "$125,430", "💰", "#28a745"),
+    ("Usuarios Activos", "1,234", "👥", "#007bff"),
+    ("Pedidos Hoy", "89", "📦", "#ffc107"),
+    ("Ingresos Mes", "$45,210", "📈", "#dc3545")
+]
+
+for titulo, valor, icono, color in stats_data:
+    stats_container.add_child(crear_stat_card(titulo, valor, icono, color))
+
+# Área de contenido dinámico
+dynamic_content = Container(
+    id="dynamic-content",
+    style={
+        'background-color': 'white',
+        'padding': '30px',
+        'border-radius': '12px',
+        'box-shadow': '0 2px 10px rgba(0,0,0,0.1)'
+    }
+)
+
+# Contenido inicial
+contenido_inicial = Text(
+    id="contenido-texto",
+    text="Bienvenido al Dashboard. Selecciona una opción del menú para ver más información.",
+    style={
+        'font-size': '18px',
+        'color': '#6c757d',
+        'text-align': 'center',
+        'line-height': '1.6'
+    }
+)
+
+# Script para funcionalidad del dashboard
+script = InlineScript("""
+// Estado de la aplicación
+let currentPage = 'inicio';
+
+// Contenido de las páginas
+const pageContent = {
+    inicio: {
+        titulo: 'Panel de Control',
+        contenido: 'Bienvenido al Dashboard. Aquí puedes ver un resumen de todas las métricas importantes de tu negocio.'
+    },
+    ventas: {
+        titulo: 'Gestión de Ventas',
+        contenido: 'Aquí puedes ver todas las ventas realizadas, generar reportes y analizar tendencias de ventas.'
+    },
+    usuarios: {
+        titulo: 'Gestión de Usuarios',
+        contenido: 'Administra los usuarios del sistema, sus permisos y actividad reciente.'
+    },
+    config: {
+        titulo: 'Configuración',
+        contenido: 'Configura los parámetros del sistema, notificaciones y preferencias generales.'
+    }
+};
+
+// Función para cambiar de página
+function cambiarPagina(pagina) {
+    if (currentPage === pagina) return;
+    
+    currentPage = pagina;
+    
+    // Actualizar título
+    const titulo = document.getElementById('titulo-pagina');
+    if (titulo) {
+        titulo.textContent = pageContent[pagina].titulo;
+    }
+    
+    // Actualizar contenido
+    const contenido = document.getElementById('contenido-texto');
+    if (contenido) {
+        contenido.textContent = pageContent[pagina].contenido;
+    }
+    
+    // Actualizar estilos del menú
+    actualizarMenuActivo(pagina);
+    
+    // Animación de entrada
+    const dynamicContent = document.getElementById('dynamic-content');
+    if (dynamicContent) {
+        dynamicContent.style.opacity = '0';
+        setTimeout(() => {
+            dynamicContent.style.opacity = '1';
+        }, 150);
+    }
+}
+
+// Actualizar elemento activo del menú
+function actualizarMenuActivo(paginaActiva) {
+    const menuItems = ['inicio', 'ventas', 'usuarios', 'config'];
+    
+    menuItems.forEach(item => {
+        const elemento = document.getElementById(`menu-${item}`);
+        if (elemento) {
+            if (item === paginaActiva) {
+                elemento.style.backgroundColor = '#34495e';
+                elemento.style.color = '#3498db';
+            } else {
+                elemento.style.backgroundColor = 'transparent';
+                elemento.style.color = '#ecf0f1';
+            }
+        }
+    });
+}
+
+// Animación de las tarjetas de estadísticas
+function animarEstadisticas() {
+    const statsContainer = document.getElementById('stats-container');
+    if (!statsContainer) return;
+    
+    const cards = statsContainer.children;
+    
+    Array.from(cards).forEach((card, index) => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(20px)';
+        
+        setTimeout(() => {
+            card.style.transition = 'all 0.5s ease';
+            card.style.opacity = '1';
+            card.style.transform = 'translateY(0)';
+        }, index * 100);
+    });
+}
+
+// Efecto de hover en las tarjetas
+function configurarEfectosHover() {
+    const statsContainer = document.getElementById('stats-container');
+    if (!statsContainer) return;
+    
+    const cards = statsContainer.children;
+    
+    Array.from(cards).forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-5px)';
+            this.style.boxShadow = '0 4px 20px rgba(0,0,0,0.15)';
+            this.style.transition = 'all 0.3s ease';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0)';
+            this.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
+        });
+    });
+}
+
+// Simulación de datos en tiempo real
+function actualizarDatosEnTiempoReal() {
+    const valores = [
+        { selector: 'Ventas Totales', base: 125430, variacion: 1000 },
+        { selector: 'Usuarios Activos', base: 1234, variacion: 10 },
+        { selector: 'Pedidos Hoy', base: 89, variacion: 5 },
+        { selector: 'Ingresos Mes', base: 45210, variacion: 500 }
+    ];
+    
+    valores.forEach(item => {
+        const elementos = Array.from(document.querySelectorAll('span')).filter(el => 
+            el.parentElement && el.parentElement.textContent.includes(item.selector)
+        );
+        
+        if (elementos.length > 0) {
+            const elemento = elementos[elementos.length - 1]; // Último elemento (el valor)
+            const variacion = Math.floor(Math.random() * item.variacion * 2) - item.variacion;
+            const nuevoValor = item.base + variacion;
+            
+            if (item.selector.includes('$')) {
+                elemento.textContent = `$${nuevoValor.toLocaleString()}`;
+            } else {
+                elemento.textContent = nuevoValor.toLocaleString();
+            }
+        }
+    });
+}
+
+// Configurar sidebar responsive
+function configurarSidebarResponsive() {
+    const sidebar = document.getElementById('sidebar');
+    const contentArea = document.getElementById('content-area');
+    
+    function checkScreenSize() {
+        if (window.innerWidth < 768) {
+            sidebar.style.position = 'fixed';
+            sidebar.style.left = '-250px';
+            sidebar.style.zIndex = '1000';
+            sidebar.style.transition = 'left 0.3s ease';
+            contentArea.style.marginLeft = '0';
+        } else {
+            sidebar.style.position = 'static';
+            sidebar.style.left = '0';
+            contentArea.style.marginLeft = '0';
+        }
+    }
+    
+    window.addEventListener('resize', checkScreenSize);
+    checkScreenSize();
+}
+
+// Inicialización
+document.addEventListener('DOMContentLoaded', function() {
+    // Configurar eventos del menú
+    const menuItems = ['inicio', 'ventas', 'usuarios', 'config'];
+    menuItems.forEach(item => {
+        const elemento = document.getElementById(`menu-${item}`);
+        if (elemento) {
+            elemento.addEventListener('click', () => cambiarPagina(item));
+        }
+    });
+    
+    // Configurar página inicial
+    cambiarPagina('inicio');
+    
+    // Configurar animaciones y efectos
+    setTimeout(() => {
+        animarEstadisticas();
+        configurarEfectosHover();
+    }, 100);
+    
+    // Configurar responsive
+    configurarSidebarResponsive();
+    
+    // Actualizar datos cada 30 segundos
+    setInterval(actualizarDatosEnTiempoReal, 30000);
+    
+    console.log('Dashboard Dars cargado correctamente');
+});
+""")
+
+# Ensamblar la aplicación
+sidebar.add_child(logo)
+sidebar.add_child(menu_container)
+
+header.add_child(titulo_pagina)
+header.add_child(usuario_info)
+
+dynamic_content.add_child(contenido_inicial)
+
+content_area.add_child(header)
+content_area.add_child(stats_container)
+content_area.add_child(dynamic_content)
+
+main_container.add_child(sidebar)
+main_container.add_child(content_area)
+
+app.set_root(main_container)
+app.add_script(script)
+
+# Para exportar esta aplicación, ejecuta:
+# ./dars_exporter export examples/advanced/dashboard.py --format html --output ./dashboard_output
+
+if __name__ == "__main__":
+    app.rTimeCompile()  # Preview/compilación rápida
+