Deployed 49afdb49 to dev with MkDocs 1.6.1 and mike 2.1.3

2025-11-19 06:18:31 +00:00 · 2025-10-07 22:18:41 +00:00 · 2025-10-07 22:18:41 +00:00 · 5c55ebeac8
commit 5c55ebeac8
parent 01f6852b4d
188 changed files with 3598 additions and 863 deletions
--- a/dev/examples/form_submission/component.py
+++ b/dev/examples/form_submission/component.py
@ -0,0 +1,66 @@
+from typing import NamedTuple
+
+from django.http import HttpRequest, HttpResponse
+
+from django_components import Component, get_component_url, register, types
+
+DESCRIPTION = "Handle the entire form submission flow in a single file and without Django's Form class."
+
+
+@register("thank_you_message")
+class ThankYouMessage(Component):
+    class Kwargs(NamedTuple):
+        name: str
+
+    def get_template_data(self, args, kwargs: Kwargs, slots, context):
+        return {"name": kwargs.name}
+
+    template: types.django_html = """
+        <div class="p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg mt-4">
+            <p>Thank you for your submission, {{ name }}!</p>
+        </div>
+    """
+
+
+@register("contact_form")
+class ContactFormComponent(Component):
+    def get_template_data(self, args, kwargs: NamedTuple, slots, context):
+        # Send the form data to the HTTP handlers of this component
+        submit_url = get_component_url(ContactFormComponent)
+        return {
+            "submit_url": submit_url,
+        }
+
+    template: types.django_html = """
+        <form hx-post="{{ submit_url }}" hx-target="#thank-you-container" hx-swap="innerHTML" class="space-y-4">
+            {% csrf_token %}
+            <div>
+                <label for="name" class="block text-sm font-medium text-gray-700">
+                    Name
+                </label>
+                <input
+                    type="text"
+                    name="name"
+                    id="name"
+                    class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                >
+            </div>
+            <div>
+                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    Submit
+                </button>
+            </div>
+        </form>
+        <div id="thank-you-container"></div>
+    """  # noqa: E501
+
+    class View:
+        public = True
+
+        # Submit handler
+        def post(self, request: HttpRequest, *args, **kwargs) -> HttpResponse:
+            # Access the submitted data
+            name = request.POST.get("name", "stranger")
+
+            # Respond with the "thank you" message
+            return ThankYouMessage.render_to_response(kwargs={"name": name})
--- a/dev/examples/form_submission/images/form_submission.gif
+++ b/dev/examples/form_submission/images/form_submission.gif
--- a/dev/examples/form_submission/index.html
+++ b/dev/examples/form_submission/index.html
--- a/dev/examples/form_submission/page.py
+++ b/dev/examples/form_submission/page.py
@ -0,0 +1,36 @@
+from django.http import HttpRequest, HttpResponse
+
+from django_components import Component, types
+
+
+class FormSubmissionPage(Component):
+    class Media:
+        js = (
+            "https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,container-queries",
+            "https://unpkg.com/htmx.org@2.0.7",
+        )
+
+    template: types.django_html = """
+        {% load component_tags %}
+        <html>
+            <head>
+                <title>Form Submission Example</title>
+            </head>
+            <body class="bg-gray-100 p-8" hx-boost="true">
+                <div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow-md">
+                    <h1 class="text-2xl font-bold mb-4">
+                        Self-Contained Form Component
+                    </h1>
+                    <p class="text-gray-600 mb-6">
+                        This form's HTML and submission logic are all
+                        handled within a single component file.
+                    </p>
+                    {% component "contact_form" / %}
+                </div>
+            </body>
+        </html>
+    """
+
+    class View:
+        def get(self, request: HttpRequest) -> HttpResponse:
+            return FormSubmissionPage.render_to_response(request=request)
--- a/dev/examples/form_submission/test_example_form_submission.py
+++ b/dev/examples/form_submission/test_example_form_submission.py
@ -0,0 +1,39 @@
+import pytest
+from django.template import Context, Template
+
+from django_components import registry, types
+from django_components.testing import djc_test
+
+
+def _import_components():
+    from docs.examples.form_submission.component import ContactFormComponent, ThankYouMessage  # noqa: PLC0415
+
+    registry.register("contact_form", ContactFormComponent)
+    registry.register("thank_you_message", ThankYouMessage)
+
+
+@pytest.mark.django_db
+@djc_test
+class TestFormSubmission:
+    def test_form_renders(self):
+        _import_components()
+        template_str: types.django_html = """
+            {% load component_tags %}
+            {% component "contact_form" / %}
+        """
+        template = Template(template_str)
+        rendered = template.render(Context({}))
+        assert 'hx-post="' in rendered
+        assert '<div id="thank-you-container" data-djc-id-ca1bc3f=""></div>' in rendered
+        assert "Thank you" not in rendered
+
+    def test_form_submission(self):
+        _import_components()
+        template_str: types.django_html = """
+            {% load component_tags %}
+            {% component "thank_you_message" name="John Doe" / %}
+        """
+        template = Template(template_str)
+        rendered = template.render(Context({}))
+        assert "Thank you for your submission, John Doe!" in rendered
+        assert '<div id="thank-you-container"></div>' not in rendered