mirror of
https://github.com/MervinPraison/PraisonAIUI.git
synced 2026-11-12 18:47:48 -10:00
Mervin Praison
85986b2907
feat(components): expand UI component showcase to 54 components Enhanced the component showcase to demonstrate all 54 UI components, added system info, new input types, pagination, and improved captions for better user experience and detailed insights. ```
264 lines
12 KiB
Python
264 lines
12 KiB
Python
"""Component Showcase — demonstrates all 54 UI components.
|
|
|
|
Run:
|
|
cd examples/python/19-components-showcase
|
|
python -m praisonaiui app.py --style dashboard
|
|
"""
|
|
|
|
import praisonaiui as aiui
|
|
|
|
|
|
@aiui.page("all-components", title="All Components", icon="🧩", group="Showcase")
|
|
async def all_components():
|
|
return aiui.layout([
|
|
aiui.header("All 54 Components", level=1),
|
|
aiui.caption("A comprehensive showcase of every UI component available."),
|
|
aiui.separator(),
|
|
|
|
# ── Cards & Metrics ──
|
|
aiui.header("Cards & Metrics", level=2),
|
|
aiui.columns([
|
|
aiui.card("Total Users", value=1_234, footer="+12% this week"),
|
|
aiui.card("Revenue", value="$45,600", footer="+8% this month"),
|
|
aiui.card("Active Now", value=42),
|
|
]),
|
|
aiui.columns([
|
|
aiui.metric("Requests", value="12.3k", delta="+15%"),
|
|
aiui.metric("Errors", value=23, delta="+3", delta_color="inverse"),
|
|
aiui.metric("Latency", value="45ms", delta="-12ms"),
|
|
]),
|
|
aiui.stat_group([
|
|
{"label": "CPU", "value": "72%", "delta": "+5%"},
|
|
{"label": "Memory", "value": "4.2 GB", "delta": "-200MB"},
|
|
{"label": "Disk", "value": "120 GB", "delta": "stable"},
|
|
]),
|
|
aiui.key_value_list([
|
|
{"label": "Version", "value": "2.1.0"},
|
|
{"label": "Environment", "value": "Production"},
|
|
{"label": "Region", "value": "us-east-1"},
|
|
{"label": "Uptime", "value": "99.97%"},
|
|
], title="System Info"),
|
|
aiui.separator(),
|
|
|
|
# ── Text & Display ──
|
|
aiui.header("Text & Display", level=2),
|
|
aiui.text("A simple text block for paragraphs and descriptions."),
|
|
aiui.caption("This is a caption — small, muted text for annotations."),
|
|
aiui.markdown_text("**Bold**, *italic*, and `code` in markdown."),
|
|
aiui.code_block("def hello():\n print('Hello, world!')", language="python"),
|
|
aiui.json_view({"status": "ok", "items": [1, 2, 3], "nested": {"key": "value"}}),
|
|
aiui.html_embed('<div style="padding:12px;background:#1e293b;border-radius:8px;color:#94a3b8">Custom HTML embed — any trusted content works here.</div>'),
|
|
aiui.separator(),
|
|
|
|
# ── Feedback & Status ──
|
|
aiui.header("Feedback & Status", level=2),
|
|
aiui.columns([
|
|
aiui.alert("This is an info message.", variant="info", title="Info"),
|
|
aiui.alert("Operation completed.", variant="success", title="Success"),
|
|
]),
|
|
aiui.columns([
|
|
aiui.alert("Please check your input.", variant="warning", title="Warning"),
|
|
aiui.alert("Something went wrong.", variant="error", title="Error"),
|
|
]),
|
|
aiui.callout("This is a helpful tip for users.", variant="info", title="Tip"),
|
|
aiui.toast("Changes saved successfully!", variant="success"),
|
|
aiui.progress_bar("Upload Progress", value=73),
|
|
aiui.columns([
|
|
aiui.badge("New"),
|
|
aiui.badge("Beta", variant="secondary"),
|
|
aiui.badge("Deprecated", variant="destructive"),
|
|
aiui.badge("v2.0", variant="outline"),
|
|
]),
|
|
aiui.spinner("Loading data..."),
|
|
aiui.empty("No results found"),
|
|
aiui.columns([
|
|
aiui.skeleton(variant="text"),
|
|
aiui.skeleton(variant="card", height="80px"),
|
|
aiui.skeleton(variant="avatar"),
|
|
]),
|
|
aiui.separator(),
|
|
|
|
# ── Media & Navigation ──
|
|
aiui.header("Media & Navigation", level=2),
|
|
aiui.image_display(
|
|
"https://placehold.co/600x200/1a1a2e/6366f1?text=PraisonAI",
|
|
alt="Placeholder", caption="A sample image", width="100%",
|
|
),
|
|
aiui.gallery([
|
|
{"src": "https://placehold.co/200/1a1a2e/6366f1?text=1", "alt": "Item 1", "caption": "First"},
|
|
{"src": "https://placehold.co/200/1a1a2e/22c55e?text=2", "alt": "Item 2", "caption": "Second"},
|
|
{"src": "https://placehold.co/200/1a1a2e/ef4444?text=3", "alt": "Item 3", "caption": "Third"},
|
|
{"src": "https://placehold.co/200/1a1a2e/eab308?text=4", "alt": "Item 4", "caption": "Fourth"},
|
|
]),
|
|
aiui.audio_player("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"),
|
|
aiui.video_player("https://www.w3schools.com/html/mov_bbb.mp4", poster="https://placehold.co/600x300/1a1a2e/6366f1?text=Video"),
|
|
aiui.avatar(name="Alice Smith", fallback="AS"),
|
|
aiui.link("Visit Documentation", href="https://docs.praison.ai", external=True),
|
|
aiui.file_download("Download Report", href="/api/report.csv", filename="report.csv"),
|
|
aiui.breadcrumb([
|
|
{"label": "Home", "href": "/"},
|
|
{"label": "Dashboard", "href": "/dashboard"},
|
|
{"label": "Analytics"},
|
|
]),
|
|
aiui.button_group([
|
|
{"label": "Save", "variant": "default"},
|
|
{"label": "Cancel", "variant": "outline"},
|
|
{"label": "Delete", "variant": "destructive"},
|
|
]),
|
|
aiui.pagination(total=250, page=3, per_page=10),
|
|
aiui.separator(),
|
|
|
|
# ── Layout ──
|
|
aiui.header("Layout Components", level=2),
|
|
aiui.divider("Section Break"),
|
|
aiui.container([
|
|
aiui.text("Content inside a container with a title."),
|
|
aiui.badge("Contained"),
|
|
], title="Named Container"),
|
|
aiui.expander("Click to expand", children=[
|
|
aiui.text("Hidden content revealed on expand."),
|
|
aiui.code_block("secret = 42", language="python"),
|
|
]),
|
|
aiui.dialog("Settings Dialog", children=[
|
|
aiui.text_input("API Key", placeholder="sk-..."),
|
|
aiui.switch_input("Debug Mode"),
|
|
], description="Configure your application settings."),
|
|
aiui.tooltip_wrap(aiui.badge("Hover me"), content="This is a tooltip!"),
|
|
aiui.popover(
|
|
aiui.badge("Click for details"),
|
|
children=[
|
|
aiui.text("Popover content with nested components."),
|
|
aiui.badge("Inside popover", variant="secondary"),
|
|
],
|
|
),
|
|
aiui.separator(),
|
|
|
|
# ── Data ──
|
|
aiui.header("Data Display", level=2),
|
|
aiui.table(
|
|
headers=["Agent", "Tasks", "Status", "Last Active"],
|
|
rows=[
|
|
["Researcher", 15, "Active", "2 min ago"],
|
|
["Writer", 8, "Idle", "1 hour ago"],
|
|
["Coder", 23, "Active", "Just now"],
|
|
],
|
|
),
|
|
aiui.chart("Monthly Revenue", data=[
|
|
{"month": "Jan", "value": 4000},
|
|
{"month": "Feb", "value": 5200},
|
|
{"month": "Mar", "value": 4800},
|
|
], chart_type="bar"),
|
|
])
|
|
|
|
|
|
@aiui.page("form-inputs", title="Form Inputs", icon="📝", group="Showcase")
|
|
async def form_inputs():
|
|
return aiui.layout([
|
|
aiui.header("Form Input Components", level=1),
|
|
aiui.caption("All 12 form input types — display-only, no server-side state."),
|
|
aiui.separator(),
|
|
|
|
aiui.columns([
|
|
aiui.text_input("Full Name", value="Alice Smith", placeholder="Enter your name"),
|
|
aiui.number_input("Age", value=28, min_val=0, max_val=150, step=1),
|
|
]),
|
|
aiui.columns([
|
|
aiui.select_input("Country", options=["USA", "UK", "Canada", "Australia"], value="USA"),
|
|
aiui.slider_input("Volume", value=65, min_val=0, max_val=100, step=5),
|
|
]),
|
|
aiui.columns([
|
|
aiui.checkbox_input("I agree to the terms", checked=True),
|
|
aiui.switch_input("Enable notifications", checked=False),
|
|
]),
|
|
aiui.radio_input("Preferred language", options=["Python", "JavaScript", "Go", "Rust"], value="Python"),
|
|
aiui.textarea_input(
|
|
"Bio",
|
|
value="I'm a developer who loves building AI tools.",
|
|
placeholder="Tell us about yourself...",
|
|
rows=4,
|
|
),
|
|
aiui.separator(),
|
|
|
|
aiui.header("New Input Types", level=2),
|
|
aiui.multiselect_input("Skills", options=["Python", "TypeScript", "Go", "Rust", "SQL"], value=["Python", "TypeScript"]),
|
|
aiui.columns([
|
|
aiui.date_input("Start Date", value="2026-03-16"),
|
|
aiui.time_input("Meeting Time", value="14:30"),
|
|
]),
|
|
aiui.color_picker_input("Theme Color", value="#6366f1"),
|
|
])
|
|
|
|
|
|
@aiui.page("layouts", title="Nested Layouts", icon="📐", group="Showcase")
|
|
async def nested_layouts():
|
|
return aiui.layout([
|
|
aiui.header("Nested Layout Showcase", level=1),
|
|
aiui.separator(),
|
|
|
|
aiui.tabs([
|
|
{
|
|
"label": "Overview",
|
|
"children": [
|
|
aiui.stat_group([
|
|
{"label": "Total Users", "value": "12.5k", "delta": "+8%"},
|
|
{"label": "Active Sessions", "value": 342, "delta": "+12%"},
|
|
{"label": "Avg Response", "value": "1.2s", "delta": "-0.3s"},
|
|
]),
|
|
aiui.key_value_list([
|
|
{"label": "Deployment", "value": "v2.1.0"},
|
|
{"label": "Last Deploy", "value": "2 hours ago"},
|
|
{"label": "Status", "value": "Healthy"},
|
|
], title="Quick Info"),
|
|
],
|
|
},
|
|
{
|
|
"label": "Details",
|
|
"children": [
|
|
aiui.breadcrumb([
|
|
{"label": "Dashboard", "href": "/"},
|
|
{"label": "System", "href": "/system"},
|
|
{"label": "Health"},
|
|
]),
|
|
aiui.container([
|
|
aiui.columns([
|
|
aiui.card("Agents Running", value=5),
|
|
aiui.card("Tasks Queued", value=23),
|
|
]),
|
|
aiui.table(
|
|
headers=["Metric", "Value", "Trend"],
|
|
rows=[
|
|
["CPU Usage", "45%", "↑"],
|
|
["Memory", "2.1 GB", "→"],
|
|
["Disk I/O", "120 MB/s", "↓"],
|
|
],
|
|
),
|
|
], title="System Health"),
|
|
aiui.pagination(total=150, page=1, per_page=10),
|
|
],
|
|
},
|
|
{
|
|
"label": "Settings",
|
|
"children": [
|
|
aiui.alert("Changes require restart.", variant="warning", title="Note"),
|
|
aiui.text_input("API Key", placeholder="sk-..."),
|
|
aiui.switch_input("Debug Mode"),
|
|
aiui.select_input("Log Level", options=["DEBUG", "INFO", "WARNING", "ERROR"], value="INFO"),
|
|
aiui.color_picker_input("Accent Color", value="#6366f1"),
|
|
aiui.dialog("Advanced Settings", children=[
|
|
aiui.number_input("Max Workers", value=4, min_val=1, max_val=32),
|
|
aiui.slider_input("Timeout (s)", value=30, min_val=5, max_val=300),
|
|
aiui.checkbox_input("Enable experimental features"),
|
|
], description="These settings require expertise."),
|
|
],
|
|
},
|
|
]),
|
|
|
|
aiui.separator(),
|
|
|
|
aiui.accordion([
|
|
{"title": "What is PraisonAI?", "content": "PraisonAI is a platform for building AI-powered applications with minimal code."},
|
|
{"title": "How do components work?", "content": "Components are plain Python dicts with a 'type' key. The frontend renders them automatically."},
|
|
{"title": "Can I nest components?", "content": "Yes! Use layout(), container(), tabs(), and accordion() to nest components arbitrarily."},
|
|
]),
|
|
])
|