nextpy-framework 1.0.0__py3-none-any.whl

nextpy/components/feedback.py

@@ -0,0 +1,210 @@
+"""
+Feedback components for NextPy
+Alert, Toast, Progress, Spinner, Badge, etc.
+"""
+
+from typing import Optional
+
+
+def Alert(
+    message: str = "",
+    type: str = "info",
+    title: Optional[str] = None,
+    dismissible: bool = False,
+    **kwargs
+) -> str:
+    """Alert component"""
+    colors = {
+        "info": "bg-blue-50 border-l-4 border-blue-600 text-blue-900",
+        "success": "bg-green-50 border-l-4 border-green-600 text-green-900",
+        "warning": "bg-yellow-50 border-l-4 border-yellow-600 text-yellow-900",
+        "error": "bg-red-50 border-l-4 border-red-600 text-red-900",
+    }
+    
+    color_class = colors.get(type, colors["info"])
+    close_btn = '<button class="ml-auto">×</button>' if dismissible else ""
+    title_html = f'<h3 class="font-bold mb-1">{title}</h3>' if title else ""
+    
+    return f'''<div class="p-4 rounded-lg {color_class} flex items-start gap-3">
+        {title_html}
+        <p>{message}</p>
+        {close_btn}
+    </div>'''
+
+
+def Badge(
+    text: str = "",
+    color: str = "blue",
+    size: str = "md",
+    **kwargs
+) -> str:
+    """Badge component"""
+    sizes = {
+        "sm": "px-2 py-1 text-xs",
+        "md": "px-3 py-1 text-sm",
+        "lg": "px-4 py-2 text-base",
+    }
+    
+    colors_class = {
+        "blue": "bg-blue-100 text-blue-800",
+        "red": "bg-red-100 text-red-800",
+        "green": "bg-green-100 text-green-800",
+        "yellow": "bg-yellow-100 text-yellow-800",
+        "purple": "bg-purple-100 text-purple-800",
+        "gray": "bg-gray-100 text-gray-800",
+    }
+    
+    size_class = sizes.get(size, sizes["md"])
+    color_class = colors_class.get(color, colors_class["blue"])
+    
+    return f'<span class="inline-block rounded-full {size_class} {color_class}">{text}</span>'
+
+
+def Progress(
+    value: int = 0,
+    max: int = 100,
+    show_label: bool = True,
+    **kwargs
+) -> str:
+    """Progress bar component"""
+    percentage = (value / max) * 100
+    label_html = f'<span class="text-xs font-semibold">{percentage:.0f}%</span>' if show_label else ""
+    
+    return f'''<div class="flex items-center gap-2">
+        <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
+            <div class="h-full bg-blue-600" style="width: {percentage}%"></div>
+        </div>
+        {label_html}
+    </div>'''
+
+
+def Spinner(
+    size: str = "md",
+    color: str = "blue",
+    **kwargs
+) -> str:
+    """Spinner/loading component"""
+    sizes = {
+        "sm": "w-4 h-4",
+        "md": "w-8 h-8",
+        "lg": "w-12 h-12",
+    }
+    
+    colors_class = {
+        "blue": "text-blue-600",
+        "red": "text-red-600",
+        "green": "text-green-600",
+        "gray": "text-gray-600",
+    }
+    
+    size_class = sizes.get(size, sizes["md"])
+    color_class = colors_class.get(color, colors_class["blue"])
+    
+    return f'''<svg class="animate-spin {size_class} {color_class}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>'''
+
+
+def Skeleton(
+    width: str = "w-full",
+    height: str = "h-4",
+    count: int = 1,
+    **kwargs
+) -> str:
+    """Skeleton loader component"""
+    skeletons = ""
+    for _ in range(count):
+        skeletons += f'<div class="bg-gray-200 rounded animate-pulse {width} {height} mb-2"></div>'
+    
+    return skeletons
+
+
+def Toast(
+    message: str = "",
+    type: str = "info",
+    duration: int = 3000,
+    **kwargs
+) -> str:
+    """Toast notification component"""
+    colors = {
+        "info": "bg-blue-600",
+        "success": "bg-green-600",
+        "warning": "bg-yellow-600",
+        "error": "bg-red-600",
+    }
+    
+    color_class = colors.get(type, colors["info"])
+    
+    return f'''<div class="fixed bottom-4 right-4 {color_class} text-white px-6 py-3 rounded-lg shadow-lg animate-fade-in-up" role="alert">
+        {message}
+    </div>
+    <style>
+        @keyframes fadeInUp {{
+            from {{ opacity: 0; transform: translateY(20px); }}
+            to {{ opacity: 1; transform: translateY(0); }}
+        }}
+        .animate-fade-in-up {{ animation: fadeInUp 0.3s ease-in-out; }}
+    </style>'''
+
+
+def Tooltip(
+    text: str = "",
+    content: str = "",
+    position: str = "top",
+    **kwargs
+) -> str:
+    """Tooltip component"""
+    positions = {
+        "top": "bottom-full mb-2",
+        "bottom": "top-full mt-2",
+        "left": "right-full mr-2",
+        "right": "left-full ml-2",
+    }
+    
+    pos_class = positions.get(position, positions["top"])
+    
+    return f'''<div class="relative inline-block group">
+        <span class="cursor-help underline decoration-dotted">{text}</span>
+        <div class="absolute {pos_class} opacity-0 group-hover:opacity-100 transition-opacity bg-gray-900 text-white px-3 py-2 rounded text-sm whitespace-nowrap pointer-events-none">
+            {content}
+        </div>
+    </div>'''
+
+
+def Loader(
+    text: str = "Loading...",
+    **kwargs
+) -> str:
+    """Loader component with text"""
+    return f'''<div class="flex flex-col items-center justify-center gap-4">
+        {Spinner(size="lg")}
+        <p class="text-gray-600 font-semibold">{text}</p>
+    </div>'''
+
+
+def Empty(
+    icon: str = "📭",
+    title: str = "No data",
+    message: str = "Nothing to display",
+    **kwargs
+) -> str:
+    """Empty state component"""
+    return f'''<div class="flex flex-col items-center justify-center py-16 text-center">
+        <div class="text-5xl mb-4">{icon}</div>
+        <h3 class="text-xl font-bold text-gray-900 mb-2">{title}</h3>
+        <p class="text-gray-600">{message}</p>
+    </div>'''
+
+
+__all__ = [
+    'Alert',
+    'Badge',
+    'Progress',
+    'Spinner',
+    'Skeleton',
+    'Toast',
+    'Tooltip',
+    'Loader',
+    'Empty',
+]

nextpy/components/form.py

@@ -0,0 +1,346 @@
+"""
+Form components for NextPy
+Input, TextArea, Select, Checkbox, Radio, Form, etc.
+"""
+
+from typing import Optional, List, Dict, Any
+
+
+def Input(
+    name: str = "",
+    type: str = "text",
+    placeholder: str = "",
+    value: str = "",
+    required: bool = False,
+    disabled: bool = False,
+    class_name: str = "",
+    **kwargs
+) -> str:
+    """Input component"""
+    req = "required" if required else ""
+    dis = "disabled" if disabled else ""
+    default_class = "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+    
+    return f'''<input 
+        type="{type}"
+        name="{name}"
+        placeholder="{placeholder}"
+        value="{value}"
+        class="{class_name or default_class}"
+        {req}
+        {dis}
+    >'''
+
+
+def TextArea(
+    name: str = "",
+    placeholder: str = "",
+    value: str = "",
+    rows: int = 4,
+    required: bool = False,
+    disabled: bool = False,
+    class_name: str = "",
+    **kwargs
+) -> str:
+    """TextArea component"""
+    req = "required" if required else ""
+    dis = "disabled" if disabled else ""
+    default_class = "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+    
+    return f'''<textarea 
+        name="{name}"
+        placeholder="{placeholder}"
+        rows="{rows}"
+        class="{class_name or default_class}"
+        {req}
+        {dis}
+    >{value}</textarea>'''
+
+
+def Select(
+    name: str = "",
+    options: Optional[List[Dict[str, str]]] = None,
+    value: str = "",
+    required: bool = False,
+    disabled: bool = False,
+    class_name: str = "",
+    **kwargs
+) -> str:
+    """Select dropdown component"""
+    if options is None:
+        options = []
+    
+    req = "required" if required else ""
+    dis = "disabled" if disabled else ""
+    default_class = "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+    
+    option_html = ""
+    for opt in options:
+        selected = "selected" if opt.get("value") == value else ""
+        option_html += f'<option value="{opt.get("value")}" {selected}>{opt.get("label")}</option>'
+    
+    return f'''<select 
+        name="{name}"
+        class="{class_name or default_class}"
+        {req}
+        {dis}
+    >{option_html}</select>'''
+
+
+def Checkbox(
+    name: str = "",
+    label: str = "",
+    checked: bool = False,
+    required: bool = False,
+    disabled: bool = False,
+    **kwargs
+) -> str:
+    """Checkbox component"""
+    check = "checked" if checked else ""
+    dis = "disabled" if disabled else ""
+    req = "required" if required else ""
+    
+    return f'''<label class="flex items-center gap-2">
+        <input 
+            type="checkbox"
+            name="{name}"
+            class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500"
+            {check}
+            {req}
+            {dis}
+        >
+        <span>{label}</span>
+    </label>'''
+
+
+def Radio(
+    name: str = "",
+    label: str = "",
+    value: str = "",
+    checked: bool = False,
+    required: bool = False,
+    disabled: bool = False,
+    **kwargs
+) -> str:
+    """Radio button component"""
+    check = "checked" if checked else ""
+    dis = "disabled" if disabled else ""
+    req = "required" if required else ""
+    
+    return f'''<label class="flex items-center gap-2">
+        <input 
+            type="radio"
+            name="{name}"
+            value="{value}"
+            class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-2 focus:ring-blue-500"
+            {check}
+            {req}
+            {dis}
+        >
+        <span>{label}</span>
+    </label>'''
+
+
+def RadioGroup(
+    name: str = "",
+    options: Optional[List[Dict[str, str]]] = None,
+    value: str = "",
+    **kwargs
+) -> str:
+    """Radio group component"""
+    if options is None:
+        options = []
+    
+    html = f'<fieldset class="space-y-3">'
+    
+    for opt in options:
+        checked = opt.get("value") == value
+        label = opt.get("label", "")
+        opt_value = opt.get("value", "")
+        html += Radio(
+            name=name,
+            label=label,
+            value=opt_value,
+            checked=checked
+        )
+    
+    html += '</fieldset>'
+    return html
+
+
+def Form(
+    children: str = "",
+    action: str = "",
+    method: str = "POST",
+    onsubmit: str = "",
+    class_name: str = "",
+    **kwargs
+) -> str:
+    """Form component"""
+    submit_handler = f'onsubmit="{onsubmit}"' if onsubmit else ""
+    default_class = "space-y-6"
+    
+    return f'''<form 
+        action="{action}"
+        method="{method}"
+        class="{class_name or default_class}"
+        {submit_handler}
+    >{children}</form>'''
+
+
+def FormGroup(
+    label: str = "",
+    children: str = "",
+    error: str = "",
+    **kwargs
+) -> str:
+    """Form group component (label + input)"""
+    error_html = f'<p class="text-red-600 text-sm mt-1">{error}</p>' if error else ""
+    
+    return f'''<div class="space-y-2">
+        {f'<label class="block text-sm font-semibold text-gray-900">{label}</label>' if label else ''}
+        {children}
+        {error_html}
+    </div>'''
+
+
+def FileInput(
+    name: str = "",
+    accept: str = "",
+    multiple: bool = False,
+    required: bool = False,
+    disabled: bool = False,
+    **kwargs
+) -> str:
+    """File input component"""
+    req = "required" if required else ""
+    dis = "disabled" if disabled else ""
+    mult = "multiple" if multiple else ""
+    
+    return f'''<input 
+        type="file"
+        name="{name}"
+        accept="{accept}"
+        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+        {mult}
+        {req}
+        {dis}
+    >'''
+
+
+def DateInput(
+    name: str = "",
+    label: str = "",
+    value: str = "",
+    required: bool = False,
+    **kwargs
+) -> str:
+    """Date input component"""
+    req = "required" if required else ""
+    label_html = f'<label class="block text-sm font-medium mb-1">{label}</label>' if label else ''
+    return f'''<div class="mb-4">
+        {label_html}
+        <input type="date" name="{name}" value="{value}" {req}
+            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"/>
+    </div>'''
+
+
+def TimeInput(
+    name: str = "",
+    label: str = "",
+    value: str = "",
+    required: bool = False,
+    **kwargs
+) -> str:
+    """Time input component"""
+    req = "required" if required else ""
+    label_html = f'<label class="block text-sm font-medium mb-1">{label}</label>' if label else ''
+    return f'''<div class="mb-4">
+        {label_html}
+        <input type="time" name="{name}" value="{value}" {req}
+            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"/>
+    </div>'''
+
+
+def PasswordInput(
+    name: str = "",
+    label: str = "",
+    placeholder: str = "",
+    required: bool = False,
+    **kwargs
+) -> str:
+    """Password input component"""
+    req = "required" if required else ""
+    label_html = f'<label class="block text-sm font-medium mb-1">{label}</label>' if label else ''
+    return f'''<div class="mb-4">
+        {label_html}
+        <input type="password" name="{name}" placeholder="{placeholder}" {req}
+            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"/>
+    </div>'''
+
+
+def RangeInput(
+    name: str = "",
+    label: str = "",
+    value: int = 50,
+    min: int = 0,
+    max: int = 100,
+    **kwargs
+) -> str:
+    """Range slider component"""
+    return f'''<div class="mb-4">
+        {f'<label class="block text-sm font-medium mb-1">{label} (<span id="{name}_value">{value}</span>)</label>' if label else ''}
+        <input type="range" name="{name}" value="{value}" min="{min}" max="{max}"
+            onchange="document.getElementById('{name}_value').textContent = this.value"
+            class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"/>
+    </div>'''
+
+
+def ColorInput(
+    name: str = "",
+    label: str = "",
+    value: str = "#3b82f6",
+    **kwargs
+) -> str:
+    """Color picker component"""
+    return f'''<div class="mb-4">
+        {f'<label class="block text-sm font-medium mb-1">{label}</label>' if label else ''}
+        <input type="color" name="{name}" value="{value}"
+            class="w-16 h-10 border border-gray-300 rounded-lg cursor-pointer"/>
+    </div>'''
+
+
+def NumberInput(
+    name: str = "",
+    placeholder: str = "",
+    value: str = "",
+    min: str = "",
+    max: str = "",
+    step: str = "1",
+    required: bool = False,
+    **kwargs
+) -> str:
+    """Number input component"""
+    return Input(
+        name=name,
+        type="number",
+        placeholder=placeholder,
+        value=value,
+        required=required
+    )
+
+
+__all__ = [
+    'Input',
+    'TextArea',
+    'Select',
+    'Checkbox',
+    'Radio',
+    'RadioGroup',
+    'Form',
+    'FormGroup',
+    'FileInput',
+    'PasswordInput',
+    'EmailInput',
+    'NumberInput',
+]