component-framework/examples/fastapi_form_example.py at master · fsecada01/component-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
"""FastAPI example with a form component demonstrating Pydantic validation."""

import sys
from pathlib import Path

from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from jinjax import Catalog
from pydantic import BaseModel, EmailStr, Field

# Add src to path
sys.path.insert(0, str(Path(__file__).parent.parent / "src"))

from component_framework.adapters.fastapi import create_component_routes
from component_framework.adapters.jinjax_renderer import JinjaxRenderer
from component_framework.core import Component, FormComponent, registry

# Initialize FastAPI
app = FastAPI(title="Component Framework - Form Demo")

# Setup Jinjax
templates_dir = Path(__file__).parent.parent / "templates" / "components"
catalog = Catalog()
catalog.add_folder(templates_dir)
catalog.jinja_env.autoescape = True

# Configure renderer globally
renderer = JinjaxRenderer(catalog)
Component.renderer = renderer


# ---------- Schema ----------


class ContactSchema(BaseModel):
    """Validation schema for the contact form."""

    name: str = Field(min_length=2, max_length=100)
    email: EmailStr
    message: str = Field(min_length=10, max_length=500)


# ---------- Component ----------


@registry.register("contact_form")
class ContactForm(FormComponent):
    """Contact form with server-side validation."""

    schema = ContactSchema
    template_name = "ContactForm"

    def on_submit(self):
        """Handle successful submission."""
        self.state["success_message"] = (
            f"Thanks {self.validated_data['name']}! We received your message."
        )


# Add component routes
create_component_routes(app)


@app.get("/", response_class=HTMLResponse)
async def index():
    """Serve demo page with initial form render."""
    form = ContactForm()
    result = form.dispatch()

    return f"""
    <!DOCTYPE html>
    <html>
    <head>
        <title>Form Component Demo</title>
        <script src="https://unpkg.com/htmx.org@1.9.10"></script>
        <style>
            body {{
                font-family: system-ui, -apple-system, sans-serif;
                max-width: 600px;
                margin: 50px auto;
                padding: 20px;
                color: #333;
            }}
            h1 {{ text-align: center; }}
            .info {{
                background: #e3f2fd;
                padding: 15px;
                border-radius: 8px;
                margin: 20px 0;
            }}
        </style>
    </head>
    <body>
        <h1>Form Component Demo</h1>

        <div class="info">
            <p>This form uses <strong>Pydantic validation</strong> on the server.
            Submit with invalid data to see field-level errors.</p>
        </div>

        {result["html"]}
    </body>
    </html>
    """


if __name__ == "__main__":
    import uvicorn

    print("Starting Form Component Demo")
    print("Open http://localhost:8000")
    uvicorn.run(app, host="0.0.0.0", port=8000)