feat: Twig Components

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+* [PR-23](https://github.com/itk-dev/itk-project-database/pull/23)
+  Introduce reusable Twig components (page header, card header, empty state, KPI)
+  to replace repeated markup.
 * [PR-22](https://github.com/itk-dev/itk-project-database/pull/22)
   Use the ITK logo in the nav and login, tidy the dashboard header, and refresh
   the login screen.

composer.json

@@ -26,6 +26,7 @@
         "symfony/translation": "~8.1.0",
         "symfony/twig-bundle": "~8.1.0",
         "symfony/ux-turbo": "^3.2",
+        "symfony/ux-twig-component": "^3.2",
         "symfony/validator": "~8.1.0",
         "symfony/yaml": "~8.1.0",
         "twig/extra-bundle": "^2.12 || ^3.0",

config/bundles.php

@@ -17,4 +17,5 @@
     Symfony\Bundle\MercureBundle\MercureBundle::class => ['all' => true],
     DH\AuditorBundle\DHAuditorBundle::class => ['all' => true],
     ITKDev\EntityBundle\ITKDevEntityBundle::class => ['all' => true],
+    Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
 ];

config/packages/twig_component.yaml

@@ -0,0 +1,5 @@
+twig_component:
+  anonymous_template_directory: 'components/'
+  defaults:
+    # Namespace & directory for components
+    App\Twig\Components\: 'components/'

symfony.lock

@@ -310,6 +310,18 @@
             "config/packages/ux_turbo.yaml"
         ]
     },
+    "symfony/ux-twig-component": {
+        "version": "3.2",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.13",
+            "ref": "f367ae2a1faf01c503de2171f1ec22567febeead"
+        },
+        "files": [
+            "config/packages/twig_component.yaml"
+        ]
+    },
     "symfony/validator": {
         "version": "8.1",
         "recipe": {

templates/admin/areas/edit.html.twig

@@ -3,18 +3,15 @@
 {% block title %}{{ 'area.edit.title'|trans }} · {{ 'app.name'|trans }}{% endblock %}
 
 {% block admin_content %}
-    <div class="page__header" style="margin-bottom: var(--itk-space-5);">
-        <div>
+    <twig:Page:Header :title="area.name" style="margin-bottom: var(--itk-space-5);">
+        <twig:block name="breadcrumb">
             <div class="breadcrumb"><a href="{{ path('admin_areas') }}">{{ 'nav.areas'|trans }}</a></div>
-            <h1 class="page__title">{{ area.name }}</h1>
-        </div>
-        <div class="page__actions">
-            <form method="post" action="{{ path('admin_area_delete', {id: area.id}) }}"
-                  onsubmit="return confirm('{{ 'action.confirm_delete'|trans|e('js') }}');">
-                <input type="hidden" name="_token" value="{{ csrf_token('delete-area-' ~ area.id) }}">
-                <button type="submit" class="btn btn--danger">{{ 'action.delete'|trans }}</button>
-            </form>
-        </div>
-    </div>
+        </twig:block>
+        <form method="post" action="{{ path('admin_area_delete', {id: area.id}) }}"
+              onsubmit="return confirm('{{ 'action.confirm_delete'|trans|e('js') }}');">
+            <input type="hidden" name="_token" value="{{ csrf_token('delete-area-' ~ area.id) }}">
+            <button type="submit" class="btn btn--danger">{{ 'action.delete'|trans }}</button>
+        </form>
+    </twig:Page:Header>
     {{ include('admin/areas/_form.html.twig', {button_label: 'action.save'}) }}
 {% endblock %}

templates/admin/areas/index.html.twig

@@ -3,22 +3,13 @@
 {% block title %}{{ 'area.index.title'|trans }} · {{ 'app.name'|trans }}{% endblock %}
 
 {% block admin_content %}
-    <div class="page__header" style="margin-bottom: var(--itk-space-5);">
-        <div>
-            <h1 class="page__title">{{ 'area.index.title'|trans }}</h1>
-            <p class="page__subtitle">{{ 'area.index.subtitle'|trans }}</p>
-        </div>
-        <div class="page__actions">
-            <a href="{{ path('admin_area_new') }}" class="btn btn--primary">{{ 'action.new'|trans }}</a>
-        </div>
-    </div>
+    <twig:Page:Header :title="'area.index.title'|trans" :subtitle="'area.index.subtitle'|trans" style="margin-bottom: var(--itk-space-5);">
+        <a href="{{ path('admin_area_new') }}" class="btn btn--primary">{{ 'action.new'|trans }}</a>
+    </twig:Page:Header>
 
     <div class="card">
         {% if areas is empty %}
-            <div class="empty-state">
-                <div class="empty-state__title">{{ 'area.empty.title'|trans }}</div>
-                <p>{{ 'area.empty.hint'|trans }}</p>
-            </div>
+            <twig:EmptyState :title="'area.empty.title'|trans" :hint="'area.empty.hint'|trans" />
         {% else %}
             <div class="table-wrap">
                 <table class="table">

templates/admin/areas/new.html.twig

@@ -3,11 +3,10 @@
 {% block title %}{{ 'area.new.title'|trans }} · {{ 'app.name'|trans }}{% endblock %}
 
 {% block admin_content %}
-    <div class="page__header" style="margin-bottom: var(--itk-space-5);">
-        <div>
+    <twig:Page:Header :title="'area.new.title'|trans" style="margin-bottom: var(--itk-space-5);">
+        <twig:block name="breadcrumb">
             <div class="breadcrumb"><a href="{{ path('admin_areas') }}">{{ 'nav.areas'|trans }}</a></div>
-            <h1 class="page__title">{{ 'area.new.title'|trans }}</h1>
-        </div>
-    </div>
+        </twig:block>
+    </twig:Page:Header>
     {{ include('admin/areas/_form.html.twig', {button_label: 'action.create'}) }}
 {% endblock %}

templates/admin/contacts/edit.html.twig

@@ -3,17 +3,14 @@
 {% block title %}{{ 'contact.edit.title'|trans }} · {{ 'app.name'|trans }}{% endblock %}
 
 {% block admin_content %}
-    <div class="page__header" style="margin-bottom: var(--itk-space-5);">
-        <div>
+    <twig:Page:Header :title="contact.name" style="margin-bottom: var(--itk-space-5);">
+        <twig:block name="breadcrumb">
             <div class="breadcrumb"><a href="{{ path('admin_contacts') }}">{{ 'nav.contacts'|trans }}</a></div>
-            <h1 class="page__title">{{ contact.name }}</h1>
-        </div>
-        <div class="page__actions">
-            <form method="post" action="{{ path('admin_contact_delete', {id: contact.id}) }}" onsubmit="return confirm('{{ 'action.confirm_delete'|trans|e('js') }}');">
-                <input type="hidden" name="_token" value="{{ csrf_token('delete-contact-' ~ contact.id) }}">
-                <button type="submit" class="btn btn--danger">{{ 'action.delete'|trans }}</button>
-            </form>
-        </div>
-    </div>
+        </twig:block>
+        <form method="post" action="{{ path('admin_contact_delete', {id: contact.id}) }}" onsubmit="return confirm('{{ 'action.confirm_delete'|trans|e('js') }}');">
+            <input type="hidden" name="_token" value="{{ csrf_token('delete-contact-' ~ contact.id) }}">
+            <button type="submit" class="btn btn--danger">{{ 'action.delete'|trans }}</button>
+        </form>
+    </twig:Page:Header>
     {{ include('admin/contacts/_form.html.twig', {button_label: 'action.save'}) }}
 {% endblock %}

templates/admin/contacts/index.html.twig

@@ -3,22 +3,13 @@
 {% block title %}{{ 'contact.index.title'|trans }} · {{ 'app.name'|trans }}{% endblock %}
 
 {% block admin_content %}
-    <div class="page__header" style="margin-bottom: var(--itk-space-5);">
-        <div>
-            <h1 class="page__title">{{ 'contact.index.title'|trans }}</h1>
-            <p class="page__subtitle">{{ 'contact.index.subtitle'|trans }}</p>
-        </div>
-        <div class="page__actions">
-            <a href="{{ path('admin_contact_new') }}" class="btn btn--primary">{{ 'action.new'|trans }}</a>
-        </div>
-    </div>
+    <twig:Page:Header :title="'contact.index.title'|trans" :subtitle="'contact.index.subtitle'|trans" style="margin-bottom: var(--itk-space-5);">
+        <a href="{{ path('admin_contact_new') }}" class="btn btn--primary">{{ 'action.new'|trans }}</a>
+    </twig:Page:Header>
 
     <div class="card">
         {% if contacts is empty %}
-            <div class="empty-state">
-                <div class="empty-state__title">{{ 'contact.empty.title'|trans }}</div>
-                <p>{{ 'contact.empty.hint'|trans }}</p>
-            </div>
+            <twig:EmptyState :title="'contact.empty.title'|trans" :hint="'contact.empty.hint'|trans" />
         {% else %}
             <div class="table-wrap">
                 <table class="table">

templates/admin/contacts/new.html.twig

@@ -3,11 +3,10 @@
 {% block title %}{{ 'contact.new.title'|trans }} · {{ 'app.name'|trans }}{% endblock %}
 
 {% block admin_content %}
-    <div class="page__header" style="margin-bottom: var(--itk-space-5);">
-        <div>
+    <twig:Page:Header :title="'contact.new.title'|trans" style="margin-bottom: var(--itk-space-5);">
+        <twig:block name="breadcrumb">
             <div class="breadcrumb"><a href="{{ path('admin_contacts') }}">{{ 'nav.contacts'|trans }}</a></div>
-            <h1 class="page__title">{{ 'contact.new.title'|trans }}</h1>
-        </div>
-    </div>
+        </twig:block>
+    </twig:Page:Header>
     {{ include('admin/contacts/_form.html.twig', {button_label: 'action.create'}) }}
 {% endblock %}

templates/admin/departments/edit.html.twig

@@ -3,17 +3,14 @@
 {% block title %}{{ 'department.edit.title'|trans }} · {{ 'app.name'|trans }}{% endblock %}
 
 {% block admin_content %}
-    <div class="page__header" style="margin-bottom: var(--itk-space-5);">
-        <div>
+    <twig:Page:Header :title="department.name" style="margin-bottom: var(--itk-space-5);">
+        <twig:block name="breadcrumb">
             <div class="breadcrumb"><a href="{{ path('admin_departments') }}">{{ 'nav.departments'|trans }}</a></div>
-            <h1 class="page__title">{{ department.name }}</h1>
-        </div>
-        <div class="page__actions">
-            <form method="post" action="{{ path('admin_department_delete', {id: department.id}) }}" onsubmit="return confirm('{{ 'action.confirm_delete'|trans|e('js') }}');">
-                <input type="hidden" name="_token" value="{{ csrf_token('delete-department-' ~ department.id) }}">
-                <button type="submit" class="btn btn--danger">{{ 'action.delete'|trans }}</button>
-            </form>
-        </div>
-    </div>
+        </twig:block>
+        <form method="post" action="{{ path('admin_department_delete', {id: department.id}) }}" onsubmit="return confirm('{{ 'action.confirm_delete'|trans|e('js') }}');">
+            <input type="hidden" name="_token" value="{{ csrf_token('delete-department-' ~ department.id) }}">
+            <button type="submit" class="btn btn--danger">{{ 'action.delete'|trans }}</button>
+        </form>
+    </twig:Page:Header>
     {{ include('admin/departments/_form.html.twig', {button_label: 'action.save'}) }}
 {% endblock %}

templates/admin/departments/index.html.twig

@@ -3,22 +3,13 @@
 {% block title %}{{ 'department.index.title'|trans }} · {{ 'app.name'|trans }}{% endblock %}
 
 {% block admin_content %}
-    <div class="page__header" style="margin-bottom: var(--itk-space-5);">
-        <div>
-            <h1 class="page__title">{{ 'department.index.title'|trans }}</h1>
-            <p class="page__subtitle">{{ 'department.index.subtitle'|trans }}</p>
-        </div>
-        <div class="page__actions">
-            <a href="{{ path('admin_department_new') }}" class="btn btn--primary">{{ 'action.new'|trans }}</a>
-        </div>
-    </div>
+    <twig:Page:Header :title="'department.index.title'|trans" :subtitle="'department.index.subtitle'|trans" style="margin-bottom: var(--itk-space-5);">
+        <a href="{{ path('admin_department_new') }}" class="btn btn--primary">{{ 'action.new'|trans }}</a>
+    </twig:Page:Header>
 
     <div class="card">
         {% if departments is empty %}
-            <div class="empty-state">
-                <div class="empty-state__title">{{ 'department.empty.title'|trans }}</div>
-                <p>{{ 'department.empty.hint'|trans }}</p>
-            </div>
+            <twig:EmptyState :title="'department.empty.title'|trans" :hint="'department.empty.hint'|trans" />
         {% else %}
             <div class="table-wrap">
                 <table class="table">

templates/admin/departments/new.html.twig

@@ -3,11 +3,10 @@
 {% block title %}{{ 'department.new.title'|trans }} · {{ 'app.name'|trans }}{% endblock %}
 
 {% block admin_content %}
-    <div class="page__header" style="margin-bottom: var(--itk-space-5);">
-        <div>
+    <twig:Page:Header :title="'department.new.title'|trans" style="margin-bottom: var(--itk-space-5);">
+        <twig:block name="breadcrumb">
             <div class="breadcrumb"><a href="{{ path('admin_departments') }}">{{ 'nav.departments'|trans }}</a></div>
-            <h1 class="page__title">{{ 'department.new.title'|trans }}</h1>
-        </div>
-    </div>
+        </twig:block>
+    </twig:Page:Header>
     {{ include('admin/departments/_form.html.twig', {button_label: 'action.create'}) }}
 {% endblock %}

templates/admin/users/edit.html.twig

@@ -3,17 +3,14 @@
 {% block title %}{{ 'admin.users.edit'|trans }} · {{ 'app.name'|trans }}{% endblock %}
 
 {% block admin_content %}
-    <div class="page__header" style="margin-bottom: var(--itk-space-5);">
-        <h1 class="page__title">{{ user.email }}</h1>
+    <twig:Page:Header :title="user.email" style="margin-bottom: var(--itk-space-5);">
         {% if user.id != app.user.id %}
-            <div class="page__actions">
-                <form method="post" action="{{ path('admin_user_delete', {id: user.id}) }}" onsubmit="return confirm('{{ 'action.confirm_delete'|trans|e('js') }}');">
-                    <input type="hidden" name="_token" value="{{ csrf_token('delete-user-' ~ user.id) }}">
-                    <button type="submit" class="btn btn--danger">{{ 'action.delete'|trans }}</button>
-                </form>
-            </div>
+            <form method="post" action="{{ path('admin_user_delete', {id: user.id}) }}" onsubmit="return confirm('{{ 'action.confirm_delete'|trans|e('js') }}');">
+                <input type="hidden" name="_token" value="{{ csrf_token('delete-user-' ~ user.id) }}">
+                <button type="submit" class="btn btn--danger">{{ 'action.delete'|trans }}</button>
+            </form>
         {% endif %}
-    </div>
+    </twig:Page:Header>
 
     {{ form_start(form, {attr: {class: 'form'}}) }}
         <div class="form-section">