Django Pattern Library

.github/workflows/project_ci.yml

@@ -1,7 +1,7 @@
 # In YAML, 'raw' and 'endraw' can't come at the beginning of a token or at the end of a quoted value, which is why they're in weird places. They are
 # needed to escape YAML templating variables, which still allowing cookiecutter to replace the value of the repository name.
 
-# Instructions to clear caches:
+# Instructions to clear all caches:
 # 1) List all caches for this repo using the Github CLI: gh api  -H "Accept: application/vnd.github+json" /repos/Lightmatter/django-hydra/actions/caches
 # 2) Delete each cache id from the list, e.g.: gh api --method DELETE  -H "Accept: application/vnd.github+json" /repos/Lightmatter/django-hydra/actions/caches/1
 

{{cookiecutter.repo_name}}/pyproject.toml

@@ -62,6 +62,7 @@ pydocstyle = "^6.3.0"
 pylint-django = "^2.5.3"
 pylint-celery = "^0.3"
 ruff = "^0.0.216"
+django-pattern-library = { git = "https://github.com/gone/django-pattern-library.git", branch = "jinja" }
 
 [tool.poetry.group.test.dependencies]
 pytest = "^7.2.1"

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/config/settings/base.py

@@ -79,6 +79,7 @@
     "heroicons",
     "hijack",
     "hijack.contrib.admin",
+    "pattern_library",
 ]
 LOCAL_APPS = [
     "{{cookiecutter.repo_name}}.home.apps.HomeConfig",
@@ -221,13 +222,38 @@
             "builtins": [
                 "django.templatetags.static",
                 "{{cookiecutter.repo_name}}.util.templatetags.filters",
+                "pattern_library.loader_tags",
             ],
             # https://docs.djangoproject.com/en/dev/ref/settings/#template-context-processors
             "context_processors": CONTEXT_PROCESSORS,
         },
     },
 ]
 
+PATTERN_LIBRARY = {
+    # Groups of templates for the pattern library navigation. The keys
+    # are the group titles and the values are lists of template name prefixes that will
+    # be searched to populate the groups.
+    "SECTIONS": (
+        ("account", [("account/components"), "account/snippets"]),
+        ("forms", ["forms"]),
+        ("header", ["header"]),
+        ("components", ["components"]),
+        ("samples", ["samples"]),
+    ),
+    # Configure which files to detect as templates.
+    "TEMPLATE_SUFFIX": ".jinja",
+    # Set which template components should be rendered inside of,
+    # so they may use page-level component dependencies like CSS.
+    "PATTERN_BASE_TEMPLATE_NAME": "library_base.jinja",
+    # Any template in BASE_TEMPLATE_NAMES or any template that extends a template in
+    # BASE_TEMPLATE_NAMES is a "page" and will be rendered as-is without being wrapped.
+    "BASE_TEMPLATE_NAMES": [
+        "patterns/base_page.jinja",
+        "account/account_base.jinja",
+    ],
+}
+
 # https://docs.djangoproject.com/en/dev/ref/settings/#form-renderer
 FORM_RENDERER = "django.forms.renderers.TemplatesSetting"
 

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/config/settings/local.py

@@ -44,6 +44,8 @@
 # other middleware that modify the response.
 MIDDLEWARE.remove("corsheaders.middleware.CorsMiddleware")
 MIDDLEWARE.remove("csp.middleware.CSPMiddleware")
+if DEBUG:
+    X_FRAME_OPTIONS = "SAMEORIGIN"
 
 # https://django-debug-toolbar.readthedocs.io/en/latest/installation.html#middleware
 MIDDLEWARE = [

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/config/urls.py

@@ -1,10 +1,15 @@
 # flake8: noqa: F811
+from django.apps import apps
 from django.conf import settings
 from django.conf.urls import handler400, handler403, handler404, handler500
 from django.contrib import admin
 from django.urls import include, path
-
-from {{cookiecutter.repo_name}}.home.views import FourHundy, FourOhFour, FourOhThree, WorkedLocally
+from {{cookiecutter.repo_name}}.home.views import (
+    FourHundy,
+    FourOhFour,
+    FourOhThree,
+    WorkedLocally,
+)
 
 handler400 = FourHundy
 handler403 = FourOhThree
@@ -43,6 +48,11 @@
 
         urlpatterns = [path("__debug__/", include(debug_toolbar.urls))] + urlpatterns
 
+    if apps.is_installed("pattern_library"):
+        urlpatterns += [
+            path("pattern-library/", include("pattern_library.urls")),
+        ]
+
 
 urlpatterns += [
     path("account/", include("{{cookiecutter.repo_name}}.user.urls", namespace="user")),

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/account/components/account_box.jinja

@@ -1,18 +1,3 @@
-{% set default_title %}
-Did YOU ever hear the Tragedy of Darth Plagueis the Wise?
-{% endset %}
-{% set default_content %}
-<h2>I thought not. It's not a story the Jedi would tell you.</h2>
-{% endset %}
-{% set default_back %}
-<a class="absolute top-6 left-6 cursor-pointer "
-   hx-get="{{ url('user:account_welcome') }}"
-   hx-select="#account-box"
-   hx-target="#account-box"
-   hx-swap="outerHTML">
-    {{ heroicon_solid("arrow-left", class="h-6 w-6 cursor-pointer") }}
-</a>
-{% endset %}
 {% macro account_box(title=default_title, content=default_content, back=default_back ) %}
     <div class="mt-20 sm:mx-auto sm:w-full sm:max-w-md" id="account-box">
         <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10 flex flex-col justify-center relative">
@@ -25,3 +10,7 @@ Did YOU ever hear the Tragedy of Darth Plagueis the Wise?
         </div>
     </div>
 {% endmacro %}
+
+{% if is_pattern_library %}
+    {{ account_box(dpl_account_objects.title, dpl_account_objects.content, dpl_account_objects.back) }}
+{% endif %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/account/components/account_box.yaml

@@ -0,0 +1,11 @@
+context:
+    dpl_account_objects:
+        back: <a class="absolute top-6 left-6 cursor-pointer "
+            hx-get="/account/welcome/"
+            hx-select="#account-box"
+            hx-target="#account-box"
+            hx-swap="outerHTML">
+            Go Back
+            </a>
+        title: Did YOU ever hear the Tragedy of Darth Plagueis the Wise?
+        content: <h2>I thought not. It's not a story the Jedi would tell you.</h2>

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/components/button/button.jinja

@@ -49,6 +49,11 @@
         </a>
     {% endif %}
 {% endmacro %}
+
+{% if is_pattern_library %}
+   {{ button() }}
+{% endif %}
+
 {#
     force tailwind to include these styles:
     text-primary-content bg-primary hover:bg-primary-focus border-primary bg-primary-content hover:text-primary-focus text-primary

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/components/flyout/flyout.jinja

@@ -17,3 +17,9 @@
           </div>
     </div>
 {% endmacro %}
+
+{% if is_pattern_library %}
+     {% call flyout(button=default_button) %}
+          {{dpl_default_content}}
+     {% endcall %}
+{% endif %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/components/flyout/flyout.yaml

@@ -0,0 +1,5 @@
+context:
+    dpl_default_content: <div role="menu"
+        aria-orientation="vertical"
+        aria-labelledby="user-menu-button"
+        tabindex="-1"><h3>Hello World</h3></div>

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/components/links/link.jinja

@@ -3,3 +3,7 @@
        target="{{ target }}"
        class="text-blue-500; hover:text-blue-700; underline">{{ text }}</a>
 {% endmacro %}
+
+{% if is_pattern_library %}
+   {{ link(jpl_url, jpl_text, jpl_target) }}
+{% endif %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/components/links/link.yaml

@@ -0,0 +1,4 @@
+context:
+    jpl_url: "https://example.com/"
+    jpl_text: "Example Link"
+    jpl_target: "_blank"

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/components/modal/modal.jinja

@@ -20,7 +20,7 @@
                 x-transition
                 class="relative w-full bg-white rounded-xl shadow-lg overflow-y-auto {{width_class}}"
             >
-                <!-- All header, body and footer content should be included within the macro block -->
+                {# All header, body and footer content should be included within the macro block #}
                 {{caller()}}
             </div>
         </div>

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/components/toggle/toggle.jinja

@@ -8,7 +8,7 @@
           :class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }">
         {{ heroicon_outline("x-mark", class="h-3 w-3 text-gray-400") }}
     </span>
-    <!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" -->
+    {# Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" #}
     <span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
           aria-hidden="true"
           x-state:on="Enabled"
@@ -76,3 +76,7 @@
         {% endif %}
     </div>
 {% endmacro %}
+
+{% if is_pattern_library %}
+   {{ toggle() }}
+{% endif %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/components/util.jinja

@@ -5,3 +5,7 @@
         {% endif %}
     {% endfor %}
 {% endmacro %}
+
+{% if is_pattern_library %}
+    {{ form_attrs(attrs) }}
+{% endif %}