dars-framework 1.2.3__py3-none-any.whl

dars/templates/examples/advanced/SimpleModermWeb/modern_web_app.py

@@ -0,0 +1,452 @@
+#!/usr/bin/env python3
+"""
+Template: Aplicación Web Moderna con Propiedades Extendidas
+===========================================================
+
+Este template demuestra todas las nuevas propiedades extendidas de la clase App:
+- SEO completo (meta tags, keywords, description, robots)
+- Open Graph para redes sociales (Facebook, LinkedIn, etc.)
+- Twitter Cards para compartir en Twitter
+- Progressive Web App (PWA) con manifest y configuración móvil
+- Favicon y iconos para diferentes dispositivos
+- Colores de tema y configuración visual
+- URL canónica y configuración de robots
+
+Además incluye todos los nuevos componentes básicos:
+- Checkbox, RadioButton, Select, Slider, DatePicker
+
+Uso:
+    dars init mi_app_moderna --template advanced/modern_web_app
+    dars export mi_app_moderna.py --format html --output ./mi_app_moderna
+    dars preview ./mi_app_moderna
+"""
+
+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.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.card import Card
+from dars.scripts.script import InlineScript
+
+# Crear aplicación con todas las propiedades extendidas modernas
+app = App(
+    # === PROPIEDADES BÁSICAS ===
+    title="Mi Aplicación Web Moderna | Dars Framework",
+    description="Una aplicación web moderna creada con Dars Framework que demuestra SEO avanzado, Open Graph, Twitter Cards, PWA y todos los componentes básicos disponibles.",
+    author="Tu Nombre",
+    keywords=["dars", "framework", "python", "web", "moderna", "seo", "pwa", "responsive"],
+    language="es",
+    
+    # === ICONOS Y FAVICON ===
+    favicon="/assets/favicon.ico",
+    icon="/assets/icon-192x192.png",
+    apple_touch_icon="/assets/apple-touch-icon.png",
+    manifest="/assets/manifest.json",
+    
+    # === COLORES DE TEMA (PWA) ===
+    theme_color="#1e3a8a",  # Azul profesional
+    background_color="#f8fafc",  # Gris claro
+    
+    # === OPEN GRAPH (REDES SOCIALES) ===
+    og_title="Mi Aplicación Web Moderna - Dars Framework",
+    og_description="Descubre cómo crear aplicaciones web modernas con Python usando Dars Framework. SEO optimizado, PWA, y componentes interactivos.",
+    og_image="https://mi-dominio.com/assets/og-image-1200x630.jpg",
+    og_url="https://mi-dominio.com",
+    og_type="website",
+    og_site_name="Mi Aplicación Moderna",
+    
+    # === TWITTER CARDS ===
+    twitter_card="summary_large_image",
+    twitter_site="@mi_usuario",
+    twitter_creator="@desarrollador",
+    
+    # === SEO AVANZADO ===
+    robots="index, follow, max-snippet:-1, max-image-preview:large",
+    canonical_url="https://mi-dominio.com",
+    
+    # === PWA CONFIGURACIÓN ===
+    pwa_enabled=True,
+    pwa_name="Mi App Moderna",
+    pwa_short_name="AppModerna",
+    pwa_display="standalone",
+    pwa_orientation="portrait-primary"
+)
+
+# === CONTENEDOR PRINCIPAL ===
+main_container = Container(style={
+    'max-width': '1200px',
+    'margin': '0 auto',
+    'padding': '20px',
+    'font-family': 'system-ui, -apple-system, sans-serif'
+})
+
+# === SECCIÓN HERO ===
+hero_section = Container(style={
+    'text-align': 'center',
+    'padding': '60px 20px',
+    'background': 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)',
+    'border-radius': '20px',
+    'margin-bottom': '40px',
+    'box-shadow': '0 10px 40px rgba(0,0,0,0.1)'
+})
+
+hero_title = Text(
+    text="🌟 Aplicación Web Moderna",
+    style={
+        'font-size': '48px',
+        'font-weight': '800',
+        'color': '#1e3a8a',
+        'margin-bottom': '20px',
+        'display': 'block'
+    }
+)
+
+hero_subtitle = Text(
+    text="Demostrando todas las características modernas del framework Dars",
+    style={
+        'font-size': '20px',
+        'color': '#64748b',
+        'margin-bottom': '30px',
+        'display': 'block'
+    }
+)
+
+cta_button = Button(
+    text="🚀 Explorar Componentes",
+    style={
+        'background': 'linear-gradient(45deg, #1e3a8a, #3b82f6)',
+        'color': 'white',
+        'padding': '15px 30px',
+        'font-size': '18px',
+        'font-weight': 'bold',
+        'border': 'none',
+        'border-radius': '25px',
+        'cursor': 'pointer',
+        'box-shadow': '0 8px 25px rgba(30, 58, 138, 0.4)'
+    }
+)
+
+# === SECCIÓN DE CARACTERÍSTICAS ===
+features_section = Container(style={
+    'padding': '60px 20px',
+    'background': 'white',
+    'border-radius': '20px',
+    'margin-bottom': '40px',
+    'box-shadow': '0 5px 30px rgba(0,0,0,0.08)'
+})
+
+features_title = Text(
+    text="✨ Características Modernas",
+    style={
+        'font-size': '36px',
+        'font-weight': '700',
+        'color': '#1e3a8a',
+        'text-align': 'center',
+        'margin-bottom': '40px',
+        'display': 'block'
+    }
+)
+
+features_grid = Container(style={
+    'display': 'grid',
+    'grid-template-columns': 'repeat(auto-fit, minmax(300px, 1fr))',
+    'gap': '30px'
+})
+
+# Crear tarjetas de características
+features_data = [
+    ('🔍', 'SEO Avanzado', 'Meta tags completos, keywords, description, robots.txt y URL canónica.'),
+    ('📱', 'Progressive Web App', 'Configuración PWA completa con manifest, iconos y colores de tema.'),
+    ('🌐', 'Open Graph & Twitter', 'Integración completa con redes sociales para compartir perfectamente.'),
+    ('🎨', 'Componentes Modernos', 'Checkbox, RadioButton, Select, Slider, DatePicker con diseño moderno.')
+]
+
+for icon, title, description in features_data:
+    feature_card = Card(
+        title=f"{icon} {title}",
+        style={
+            'border': 'none',
+            'border-radius': '15px',
+            'box-shadow': '0 8px 30px rgba(0,0,0,0.12)',
+            'border-left': '5px solid #3b82f6'
+        }
+    )
+    
+    feature_description = Text(
+        text=description,
+        style={
+            'color': '#64748b',
+            'line-height': '1.6'
+        }
+    )
+    
+    feature_card.add_child(feature_description)
+    features_grid.add_child(feature_card)
+
+# === SECCIÓN DE FORMULARIO ===
+form_section = Container(style={
+    'padding': '60px 20px',
+    'background': 'linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%)',
+    'border-radius': '20px',
+    'margin-bottom': '40px'
+})
+
+form_title = Text(
+    text="📝 Formulario Interactivo",
+    style={
+        'font-size': '36px',
+        'font-weight': '700',
+        'color': '#1e3a8a',
+        'text-align': 'center',
+        'margin-bottom': '40px',
+        'display': 'block'
+    }
+)
+
+form_container = Container(style={
+    'max-width': '600px',
+    'margin': '0 auto',
+    'background': 'white',
+    'padding': '40px',
+    'border-radius': '15px',
+    'box-shadow': '0 10px 40px rgba(0,0,0,0.1)'
+})
+
+# Campos del formulario
+name_input = Input(
+    placeholder="Tu nombre completo",
+    style={
+        'width': '100%',
+        'padding': '12px',
+        'margin-bottom': '20px',
+        'border': '2px solid #e2e8f0',
+        'border-radius': '8px'
+    }
+)
+
+email_input = Input(
+    placeholder="tu@email.com",
+    input_type="email",
+    style={
+        'width': '100%',
+        'padding': '12px',
+        'margin-bottom': '20px',
+        'border': '2px solid #e2e8f0',
+        'border-radius': '8px'
+    }
+)
+
+terms_checkbox = Checkbox(
+    label="Acepto los términos y condiciones",
+    style={'margin': '20px 0'}
+)
+
+# RadioButtons
+user_type_title = Text(
+    text="Tipo de usuario:",
+    style={'font-weight': 'bold', 'margin': '20px 0 10px 0', 'display': 'block'}
+)
+
+developer_radio = RadioButton(
+    label="Desarrollador",
+    name="user_type",
+    value="developer",
+    style={'margin': '5px 0'}
+)
+
+designer_radio = RadioButton(
+    label="Diseñador",
+    name="user_type", 
+    value="designer",
+    style={'margin': '5px 0'}
+)
+
+# Select
+country_select = Select(
+    placeholder="Selecciona tu país",
+    style={
+        'width': '100%',
+        'padding': '12px',
+        'margin': '20px 0',
+        'border': '2px solid #e2e8f0',
+        'border-radius': '8px'
+    }
+)
+
+country_select.add_option(SelectOption(value="es", label="España"))
+country_select.add_option(SelectOption(value="mx", label="México"))
+country_select.add_option(SelectOption(value="ar", label="Argentina"))
+country_select.add_option(SelectOption(value="us", label="Estados Unidos"))
+
+# Slider
+experience_title = Text(
+    text="Años de experiencia:",
+    style={'font-weight': 'bold', 'margin': '20px 0 10px 0', 'display': 'block'}
+)
+
+experience_slider = Slider(
+    min_value=0,
+    max_value=20,
+    value=5,
+    show_value=True,
+    label="años",
+    style={'margin': '10px 0 20px 0'}
+)
+
+# DatePicker
+birth_date_title = Text(
+    text="Fecha de nacimiento:",
+    style={'font-weight': 'bold', 'margin': '20px 0 10px 0', 'display': 'block'}
+)
+
+birth_date_picker = DatePicker(
+    format="DD/MM/YYYY",
+    style={
+        'width': '100%',
+        'padding': '12px',
+        'margin': '10px 0 20px 0',
+        'border': '2px solid #e2e8f0',
+        'border-radius': '8px'
+    }
+)
+
+submit_button = Button(
+    text="🚀 Enviar Formulario",
+    style={
+        'background': 'linear-gradient(45deg, #10b981, #059669)',
+        'color': 'white',
+        'padding': '15px 30px',
+        'font-size': '16px',
+        'font-weight': 'bold',
+        'border': 'none',
+        'border-radius': '8px',
+        'cursor': 'pointer',
+        'width': '100%',
+        'margin-top': '20px'
+    }
+)
+
+# Script interactivo
+interactive_script = InlineScript("""
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('🚀 Aplicación Web Moderna cargada');
+    
+    // Mostrar información de meta tags
+    const metaInfo = {
+        title: document.title,
+        description: document.querySelector('meta[name="description"]')?.content,
+        themeColor: document.querySelector('meta[name="theme-color"]')?.content,
+        manifest: document.querySelector('link[rel="manifest"]')?.href
+    };
+    console.log('🔍 Meta Tags:', metaInfo);
+    
+    // Manejar formulario
+    const submitButton = document.querySelector('button[style*="10b981"]');
+    if (submitButton) {
+        submitButton.addEventListener('click', function(e) {
+            e.preventDefault();
+            
+            const formData = {
+                name: document.querySelector('input[placeholder*="nombre"]')?.value,
+                email: document.querySelector('input[type="email"]')?.value,
+                terms: document.querySelector('input[type="checkbox"]')?.checked,
+                userType: document.querySelector('input[type="radio"]:checked')?.value,
+                country: document.querySelector('select')?.value,
+                experience: document.querySelector('input[type="range"]')?.value,
+                birthDate: document.querySelector('input[type="date"]')?.value
+            };
+            
+            if (!formData.name || !formData.email || !formData.terms) {
+                alert('⚠️ Por favor completa todos los campos obligatorios');
+                return;
+            }
+            
+            alert(`✅ ¡Formulario enviado exitosamente!
+            
+Datos recibidos:
+• Nombre: ${formData.name}
+• Email: ${formData.email}
+• Tipo: ${formData.userType || 'No especificado'}
+• País: ${formData.country || 'No especificado'}
+• Experiencia: ${formData.experience || 0} años
+
+¡Gracias por probar la aplicación!`);
+        });
+    }
+    
+    // PWA Installation
+    window.addEventListener('beforeinstallprompt', (e) => {
+        e.preventDefault();
+        const installBtn = document.createElement('button');
+        installBtn.textContent = '📲 Instalar App';
+        installBtn.style.cssText = `
+            position: fixed; bottom: 20px; right: 20px;
+            background: linear-gradient(45deg, #8b5cf6, #a855f7);
+            color: white; border: none; padding: 12px 20px;
+            border-radius: 25px; cursor: pointer; font-weight: bold;
+            box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4); z-index: 1000;
+        `;
+        installBtn.addEventListener('click', () => e.prompt());
+        document.body.appendChild(installBtn);
+    });
+});
+""")
+
+# === ENSAMBLAR APLICACIÓN ===
+hero_section.add_child(hero_title)
+hero_section.add_child(hero_subtitle)
+hero_section.add_child(cta_button)
+
+features_section.add_child(features_title)
+features_section.add_child(features_grid)
+
+form_container.add_child(name_input)
+form_container.add_child(email_input)
+form_container.add_child(terms_checkbox)
+form_container.add_child(user_type_title)
+form_container.add_child(developer_radio)
+form_container.add_child(designer_radio)
+form_container.add_child(country_select)
+form_container.add_child(experience_title)
+form_container.add_child(experience_slider)
+form_container.add_child(birth_date_title)
+form_container.add_child(birth_date_picker)
+form_container.add_child(submit_button)
+
+form_section.add_child(form_title)
+form_section.add_child(form_container)
+
+main_container.add_child(hero_section)
+main_container.add_child(features_section)
+main_container.add_child(form_section)
+
+# Configurar aplicación
+app.set_root(main_container)
+app.add_script(interactive_script)
+
+# Usar métodos extendidos
+app.add_keywords(["responsive", "interactivo", "moderno"])
+app.set_theme_colors("#1e3a8a", "#f8fafc")
+app.enable_pwa("Mi App Moderna", "AppModerna")
+
+# Estilos globales
+app.add_global_style('body', {
+    'margin': '0',
+    'padding': '20px',
+    'background': 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)',
+    'font-family': 'system-ui, -apple-system, sans-serif'
+})
+
+app.add_global_style('button:hover', {
+    'transform': 'translateY(-2px)',
+    'transition': 'all 0.3s ease'
+})
+
+if __name__ == "__main__":
+    app.rTimeCompile()  # Preview/compilación rápida

dars/templates/examples/advanced/VariousComponents/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/ZtaMDev/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/dState/state_mods_demo.py

@@ -0,0 +1,68 @@
+from dars.all import *
+from dars.core.state import dState, Mod
+
+app = App(title="Dars State Mods Demo", theme="dark")
+# Base components
+counter_text = Text("0", id="Counter", style={
+    'font-size': '48px',
+    'font-weight': 'bold',
+    'margin-bottom': '16px'
+})
+status_text = Text("State: 0", id="Status", style={'margin-bottom': '16px'})
+
+# Define a state bound to the counter_text element
+counter = dState("counter", component=counter_text, states=[0,1,2,3])
+
+# cState rules (compact Mod specs)
+# - When entering state 1: increment text by +1
+counter.cState(1, mods=[
+    Mod.inc(counter_text, prop='text', by=1),
+    Mod.set(status_text, text='State: 1'),
+])
+# - When entering state 2: decrement text by -1
+counter.cState(2, mods=[
+    Mod.dec(counter_text, prop='text', by=1),
+    Mod.set(status_text, text='State: 2'),
+])
+# - When entering state 3: toggle CSS class and append text
+counter.cState(3, mods=[
+    Mod.toggle_class(counter_text, name='highlight', on=None),
+    Mod.append_text(counter_text, value='!'),
+    # Prepare status to show state 0 upon auto-cycle (state 0 is immutable, no rules)
+    Mod.set(status_text, text='State: 0'),
+])
+# Auto-cycle back to 0 after applying state 3 mods
+counter.cState(3).goto(0)
+
+# Controls
+inc_btn = Button("Next (+1)", id="NextBtn", on_click=counter.state(goto='+1'))
+dec_btn = Button("Prev (-1)", id="PrevBtn", on_click=counter.state(goto='-1'))
+# Full replace example (cComp=True) using deferred mod to avoid mutating at authoring time
+swap_btn = Button(
+    "Swap HTML",
+    id="SwapBtn",
+    on_click=counter.state(2, cComp=True, render=counter_text.mod(text="SWAPPED"))
+)
+
+# Layout
+index = Page(
+    Container(
+        counter_text,
+        status_text,
+        Container(
+            inc_btn,
+            dec_btn,
+            swap_btn,
+            class_name="controls",
+            style={'display': 'flex', 'gap': '8px'}
+        ),
+        class_name="wrapper",
+        style={'display': 'flex', 'flex-direction': 'column', 'align-items': 'center', 'padding': '40px'}
+    )
+)
+
+
+app.add_page("index", index, title="State Mods Demo", index=True)
+
+if __name__ == "__main__":
+    app.rTimeCompile()