WIP: Initial commit

.github/workflows/ci.yml

@@ -15,6 +15,6 @@ jobs:
       - name: Wait for response
         uses: nev7n/wait_for_response@v1
         with:
-          url: http://localhost:5001/ready/
+          url: http://localhost:5001/healthcheck/live/
       - name: Run the tests
         run: node test-fixtures.mjs || exit 1

.github/workflows/python-publish.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Wait for response
         uses: nev7n/wait_for_response@v1
         with:
-          url: http://localhost:5001/ready/
+          url: http://localhost:5001/healthcheck/live/
       - name: Run the tests
         run: node test-fixtures.mjs || exit 1
 
@@ -35,12 +35,12 @@ jobs:
       - name: Set up Python
         uses: actions/setup-python@v5
         with:
-          python-version: '3.x'
+          python-version: "3.x"
       - name: Install build dependencies
         run: |
           python -m pip install --upgrade pip
           pip install build
       - name: Build package
         run: python -m build
       - name: Publish package to PyPI
-        uses: pypa/gh-action-pypi-publish@release/v1
+        uses: pypa/gh-action-pypi-publish@release/v1

.prettierignore

@@ -0,0 +1 @@
+**/*.html

CHANGELOG.md

@@ -8,10 +8,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.8...HEAD)
 
 ### Added
+
 ### Changed
+
 ### Deprecated
+
 ### Removed
+
 ### Fixed
+
 ### Security
 
 ## [0.2.8](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.7...v0.2.8) - 2024-08-16
@@ -311,4 +316,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## 0.1.0 - 2023-11-28
 
-Initial release made to PyPi
+Initial release made to PyPi

docker-compose.yml

@@ -1,7 +1,6 @@
 services:
   app:
     build:
-      # context: test
       dockerfile: test/Dockerfile
     environment:
       - ENVIRONMENT=develop
@@ -12,3 +11,7 @@ services:
     volumes:
       - ./test:/app
       - ./tna_frontend_jinja:/home/app/tna_frontend_jinja
+  dev:
+    image: ghcr.io/nationalarchives/tna-python-dev:preview
+    volumes:
+      - ./:/app

package.json

@@ -1,6 +1,5 @@
 {
   "scripts": {
-    "prettier": "npx --yes prettier --write '*.{mjs,json}'",
     "test": "node test-fixtures.mjs"
   },
   "dependencies": {

test/app/__init__.py

@@ -1,16 +1,32 @@
+import os
+import sys
+
 from flask import Flask
+
 from .components import bp as components_bp
-from .utilities import bp as utilities_bp
+from .forms import bp as forms_bp
+# from .forms.routes import WTFormsHelpers
 from .templates import bp as templates_bp
+from .utilities import bp as utilities_bp
+
+
+sys.path.append('/home/app/')
+
+from tna_frontend_jinja.wtforms.widgets import WTFormsHelpers
 
 app = Flask(__name__, template_folder="/home/app/tna_frontend_jinja/templates")
 
+app.config["SECRET_KEY"] = os.environ.get("SECRET_KEY")
 
-@app.route("/ready/")
-def ready():
+
+@app.route("/healthcheck/live/")
+def healthcheck():
     return "ok"
 
 
 app.register_blueprint(components_bp, url_prefix="/components")
 app.register_blueprint(utilities_bp, url_prefix="/utilities")
 app.register_blueprint(templates_bp, url_prefix="/templates")
+app.register_blueprint(forms_bp, url_prefix="/forms")
+
+WTFormsHelpers(app)

test/app/components/routes.py

@@ -1,6 +1,6 @@
 import json
-from app.components import bp
 
+from app.components import bp
 from flask import render_template, request
 
 

test/app/forms/__init__.py

@@ -0,0 +1,5 @@
+from flask import Blueprint
+
+bp = Blueprint("forms", __name__, template_folder="test-templates")
+
+from app.forms import routes  # noqa: E402,F401

test/app/forms/routes.py

@@ -0,0 +1,36 @@
+import sys
+from app.forms import bp
+from flask import redirect, render_template, url_for
+from flask_wtf import FlaskForm
+from wtforms import StringField, SubmitField
+from wtforms.validators import Email, InputRequired, Length
+
+sys.path.append('/home/app/')
+from tna_frontend_jinja.wtforms.widgets import GovTextInput, GovSubmitInput
+
+
+class ExampleForm(FlaskForm):
+    email_address = StringField(
+        "Email address",
+        widget=GovTextInput(),
+        validators=[
+            InputRequired(message="Enter an email address"),
+            Length(
+                max=256, message="Email address must be 256 characters or fewer"
+            ),
+            Email(
+                message="Enter an email address in the correct format, like [email protected]"
+            ),
+        ],
+        description="We’ll only use this to send you a receipt",
+    )
+
+    submit = SubmitField("Continue", widget=GovSubmitInput())
+
+
+@bp.route("/", methods=["GET", "POST"])
+def index():
+    form = ExampleForm()
+    if form.validate_on_submit():
+        return redirect(url_for("forms.index"))
+    return render_template("example-form.html", form=form)

test/app/forms/test-templates/example-form.html

@@ -0,0 +1,44 @@
+{% extends "layouts/base.html" %}
+
+{%- from 'components/error-summary/macro.html' import tnaErrorSummary -%}
+
+{% block pageTitle %}{%- if form and form.errors %}Error: {% endif -%}Example form – GOV.UK Frontend WTForms Demo{% endblock %}
+
+{% block stylesheets %}
+  <link rel="stylesheet" href="https://use.typekit.net/kaq6qqh.css">
+  <link href="https://cdn.jsdelivr.net/npm/@nationalarchives/[email protected]/nationalarchives/all.css" rel="stylesheet" integrity="sha384-GFKsKURhzcIk6FnRgNbpibhx4qgCtEI8HV1kJ/4NkO0t3FFIWKnP7UlantvRj6FP" crossorigin="anonymous">
+{% endblock %}
+
+{% block cookies %}
+{% endblock %}
+
+{% block content %}
+<div class="tna-container tna-section">
+  <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
+    {% if form.errors %}
+      {{ tnaErrorSummary(wtforms_errors(form)) }}
+    {% endif %}
+    <h1 class="tna-heading-xl">Example form</h1>
+    <form action="" method="post" novalidate>
+      {{ form.csrf_token }}
+      {{ form.email_address(params={
+        'headingLevel': 2,
+        'type': 'email',
+        'autofill': 'email',
+        'spellcheck': False
+      }) }}
+      <div class="tna-button-group">
+        {{ form.submit }}
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}
+
+{% block bodyEnd %}
+  <script src="https://cdn.jsdelivr.net/npm/@nationalarchives/[email protected]/nationalarchives/all.js" integrity="sha384-s768ALHSnzGU2X2ENYTrlF+CfnKaa3Us1eU78VrZ4eTKwLjWob1Wbb9tIT2xfmBq" crossorigin="anonymous"></script>
+  <script>
+    // Initialise all TNA components
+    window.TNAFrontend.initAll();
+  </script>
+{% endblock %}

test/app/templates/routes.py

@@ -1,6 +1,6 @@
 import json
-from app.templates import bp
 
+from app.templates import bp
 from flask import render_template, request
 
 

test/app/utilities/routes.py

@@ -1,6 +1,6 @@
 import json
-from app.utilities import bp
 
+from app.utilities import bp
 from flask import render_template, request
 
 

test/pyproject.toml

@@ -10,7 +10,9 @@ readme = "README.md"
 python = "^3.12"
 Flask = "^3.0.3"
 Flask-WTF = "^1.2.1"
-
+deepmerge = "^1.1.1"
+markupsafe = "^2.1.5"
+email-validator = "^2.2.0"
 
 [build-system]
 requires = ["poetry-core"]

tna_frontend_jinja/templates/wtforms/button.html

@@ -0,0 +1,2 @@
+{%- from "components/button/macro.html" import tnaButton -%}
+{{ tnaButton(params) }}

tna_frontend_jinja/templates/wtforms/text-input.html

@@ -0,0 +1,2 @@
+{%- from "components/text-input/macro.html" import tnaTextInput -%}
+{{ tnaTextInput(params) }}