Add bootstrap form

Author: Archmonger

pyproject.toml

@@ -94,6 +94,7 @@ extra-dependencies = [
   "twisted",
   "tblib",
   "servestatic",
+  "django-bootstrap5",
 ]
 matrix-name-format = "{variable}-{value}"
 
@@ -140,7 +141,12 @@ pythonpath = [".", "tests/"]
 ################################
 
 [tool.hatch.envs.django]
-extra-dependencies = ["channels[daphne]>=4.0.0", "twisted", "servestatic"]
+extra-dependencies = [
+  "channels[daphne]>=4.0.0",
+  "twisted",
+  "servestatic",
+  "django-bootstrap5",
+]
 
 [tool.hatch.envs.django.scripts]
 runserver = [

src/reactpy_django/components.py

@@ -117,9 +117,22 @@ def django_js(static_path: str, key: Key | None = None):
 
 
 def django_form(
-    form: type[Form], *, top_children: Sequence = (), bottom_children: Sequence = (), key: Key | None = None
+    form: type[Form],
+    *,
+    extra_props: dict[str, Any] | None = None,
+    form_template: str | None = None,
+    top_children: Sequence = (),
+    bottom_children: Sequence = (),
+    key: Key | None = None,
 ):
-    return _django_form(form=form, top_children=top_children, bottom_children=bottom_children, key=key)
+    return _django_form(
+        form=form,
+        extra_props=extra_props or {},
+        form_template=form_template,
+        top_children=top_children,
+        bottom_children=bottom_children,
+        key=key,
+    )
 
 
 def pyscript_component(

src/reactpy_django/forms/components.py

@@ -1,12 +1,10 @@
 from __future__ import annotations
 
 from pathlib import Path
-from pprint import pprint
 from typing import TYPE_CHECKING, Any
 from uuid import uuid4
 
 from django.forms import Form
-from django.utils import timezone
 from reactpy import component, hooks, html, utils
 from reactpy.core.events import event
 from reactpy.web import export, module_from_file
@@ -30,20 +28,20 @@
 
 
 @component
-def _django_form(form: type[Form], top_children: Sequence, bottom_children: Sequence):
-    # TODO: Implement form restoration on page reload. Probably want to create a new setting called
-    # form_restoration_method that can be set to "URL", "CLIENT_STORAGE", "SERVER_SESSION", or None.
-    # Or maybe just recommend pre-rendering to have the browser handle it.
-    # Be clear that URL mode will limit you to one form per page.
-    # TODO: Test this with django-bootstrap, django-colorfield, django-ace, django-crispy-forms
-    # TODO: Add pre-submit and post-submit hooks
+def _django_form(
+    form: type[Form], extra_props: dict, form_template: str | None, top_children: Sequence, bottom_children: Sequence
+):
+    # TODO: Implement form restoration on page reload. Maybe this involves creating a new setting called
+    # `form_restoration_method` that can be set to "URL", "CLIENT_STORAGE", "SERVER_SESSION", or None.
+    # Perhaps pre-rendering is robust enough already handle this scenario?
+    # Additionaly, "URL" mode would limit the user to one form per page.
+    # TODO: Test this with django-colorfield, django-ace, django-crispy-forms
+    # TODO: Add pre-submit, post-submit, error, and success hooks
     # TODO: Add auto-save option for database-backed forms
     uuid_ref = hooks.use_ref(uuid4().hex.replace("-", ""))
     top_children_count = hooks.use_ref(len(top_children))
     bottom_children_count = hooks.use_ref(len(bottom_children))
     submitted_data, set_submitted_data = hooks.use_state({} or None)
-    last_changed = hooks.use_ref(timezone.now())
-
     uuid = uuid_ref.current
 
     # Don't allow the count of top and bottom children to change
@@ -61,42 +59,35 @@ def _django_form(form: type[Form], top_children: Sequence, bottom_children: Sequ
                 "Do NOT initialize your form by calling it (ex. `MyForm()`)."
             )
             raise TypeError(msg) from e
-        raise
+        raise e
 
     # Run the form validation, if data was provided
     if submitted_data:
         initialized_form.full_clean()
-
-    @event(prevent_default=True)
-    def on_submit(_event):
-        """The server was notified that a form was submitted. Note that actual submission behavior is handled by `on_submit_callback`."""
-        last_changed.set_current(timezone.now())
+        print("Form errors:", initialized_form.errors.as_data())
 
     def on_submit_callback(new_data: dict[str, Any]):
+        """Callback function provided directly to the client side listener. This is responsible for transmitting
+        the submitted form data to the server for processing."""
         convert_multiple_choice_fields(new_data, initialized_form)
         convert_boolean_fields(new_data, initialized_form)
 
-        # TODO: ReactPy's use_state hook really should be de-duplicating this by itself. Needs upstream fix.
+        # TODO: The `use_state`` hook really should be de-duplicating this by itself. Needs upstream fix.
         if submitted_data != new_data:
             set_submitted_data(new_data)
 
-    def on_change(_event):
-        last_changed.set_current(timezone.now())
-
-    rendered_form = utils.html_to_vdom(
-        initialized_form.render(),
-        convert_html_props_to_reactjs,
-        convert_textarea_children_to_prop,
-        set_value_prop_on_select_element,
-        ensure_input_elements_are_controlled(on_change),
-        intercept_anchor_links,
-        strict=False,
-    )
-
     return html.form(
-        {"id": f"reactpy-{uuid}", "onSubmit": on_submit},
+        {"id": f"reactpy-{uuid}", "onSubmit": event(lambda _: None, prevent_default=True)} | extra_props,
         DjangoForm({"onSubmitCallback": on_submit_callback, "formId": f"reactpy-{uuid}"}),
         *top_children,
-        rendered_form,
+        utils.html_to_vdom(
+            initialized_form.render(form_template),
+            convert_html_props_to_reactjs,
+            convert_textarea_children_to_prop,
+            set_value_prop_on_select_element,
+            ensure_input_elements_are_controlled(),
+            intercept_anchor_links,
+            strict=False,
+        ),
         *bottom_children,
     )

tests/test_app/forms/components.py

@@ -6,5 +6,14 @@
 
 
 @component
-def basic_form(form_template=None):
-    return django_form(BasicForm, form_template=form_template, bottom_children=(html.input({"type": "submit"}),))
+def basic_form():
+    return django_form(BasicForm, bottom_children=(html.input({"type": "submit"}),))
+
+
+@component
+def bootstrap_form():
+    return django_form(
+        BasicForm,
+        extra_props={"style": {"maxWidth": "600px", "margin": "auto"}},
+        form_template="bootstrap_form_template.html",
+    )

tests/test_app/forms/urls.py

@@ -1,7 +1,8 @@
 from django.urls import path
 
-from .views import form
+from . import views
 
 urlpatterns = [
-    path("form/", form),
+    path("form/", views.form),
+    path("form/bootstrap/", views.bootstrap_form),
 ]

tests/test_app/forms/views.py

@@ -3,3 +3,7 @@
 
 def form(request):
     return render(request, "form.html", {})
+
+
+def bootstrap_form(request):
+    return render(request, "bootstrap_form.html", {})

tests/test_app/settings_multi_db.py

@@ -27,6 +27,7 @@
     "django.contrib.staticfiles",
     "reactpy_django",  # Django compatiblity layer for ReactPy
     "test_app",  # This test application
+    "django_bootstrap5",
 ]
 MIDDLEWARE = [
     "django.middleware.security.SecurityMiddleware",

tests/test_app/settings_single_db.py

@@ -27,6 +27,7 @@
     "django.contrib.staticfiles",
     "reactpy_django",  # Django compatiblity layer for ReactPy
     "test_app",  # This test application
+    "django_bootstrap5",
 ]
 MIDDLEWARE = [
     "django.middleware.security.SecurityMiddleware",

tests/test_app/templates/bootstrap_form.html

@@ -0,0 +1,31 @@
+{% load static %} {% load reactpy %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+        crossorigin="anonymous"></script>
+    <title>ReactPy</title>
+    <style>
+        iframe {
+            width: 100%;
+            height: 45px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>ReactPy Bootstrap Form Test Page</h1>
+    <hr>
+    {% component "test_app.forms.components.bootstrap_form" %}
+    <hr>
+</body>
+
+</html>

tests/test_app/templates/bootstrap_form_template.html

@@ -0,0 +1,6 @@
+{% load django_bootstrap5 %}
+
+{% csrf_token %}
+{% bootstrap_form form %}
+{% bootstrap_button button_type="submit" content="OK" %}
+{% bootstrap_button button_type="reset" content="Cancel" %}