Feature/toggle

.stylelintrc

@@ -8,13 +8,25 @@
         "tailwind",
         "components",
         "utilities",
-        "screen"
+        "screen",
+        "layer"
       ]
     }],
     "block-no-empty": true,
     "color-no-invalid-hex": true,
     "declaration-colon-space-after": "always",
     "scss/at-import-partial-extension": null,
+    "scss/at-rule-no-unknown": [ true, {
+      "ignoreAtRules": [
+        "extends",
+        "apply",
+        "tailwind",
+        "components",
+        "utilities",
+        "screen",
+        "layer"
+      ]
+    }],
     "indentation": 2,
     "max-empty-lines": 2,
     "rule-empty-line-before": [
@@ -29,4 +41,4 @@
       }
     ]
   }
-}
+}

frontend/css/app-base.css

@@ -10,3 +10,35 @@
  *
  */
 @import "@/css/app.scss";
+
+
+@layer base {
+  h1 {
+    @apply text-4xl font-bold mb-3;
+  }
+
+  h2 {
+    @apply text-3xl font-bold mb-2;
+  }
+
+
+  h3 {
+    @apply text-3xl font-semibold mb-2;
+  }
+
+  h4 {
+    @apply text-2xl font-semibold mb-1;
+  }
+
+  h5 {
+    @apply text-xl mb-1;
+  }
+
+  h6 {
+    @apply text-lg;
+  }
+
+  ul {
+    @apply list-disc list-inside;
+  }
+}

frontend/css/app-components.css

@@ -25,6 +25,5 @@
 /* @import './pages/homepage.pcss'; */
 
 @import "@/css/components/messages.scss";
-@import "@/css/components/buttons.scss";
 @import "@/css/components/links.scss";
 @import "@/css/components/forms.scss";

frontend/css/components/links.scss

@@ -1,6 +1,6 @@
 .link {
   @apply cursor-pointer no-underline;
-  @apply text-indigo-500;
+  @apply text-indigo-600;
   @apply hover:underline;
-  @apply hover:text-indigo-700;
+  @apply hover:text-indigo-800;
 }

sampleapp/config/jinja2.py

@@ -37,6 +37,12 @@ def random_chart(
     return results
 
 
+def convert_tf(item1: str | bool) -> bool:
+    if item1:
+        return "true"
+    return ""
+
+
 options = {
     "constants": {"csrf_cookie_name": "sampleapp"},
     "filters": {
@@ -49,5 +55,6 @@ def random_chart(
         "now": datetime.datetime.utcnow,
         "template_localtime": "django.utils.timezone.template_localtime",
         "random_chart": random_chart,
+        "convert_tf": convert_tf,
     },
 }

sampleapp/home/urls.py

@@ -10,6 +10,11 @@
         TemplateView.as_view(template_name="random_chart.jinja"),
         name="random_chart",
     ),
+    path(
+        "components/",
+        TemplateView.as_view(template_name="components.jinja"),
+        name="components",
+    ),
     path(r"error/", error, name="error"),
     path(r"", TemplateView.as_view(template_name="index.jinja"), name="home"),
 ]

sampleapp/templates/components.jinja

@@ -0,0 +1,82 @@
+{% extends "base.jinja" %}
+{% from 'components/button.jinja' import button %}
+{% from 'components/toggle.jinja' import toggle, toggle_label %}
+{% block title %}
+    Components
+{% endblock title %}
+{% block content %}
+    <div class="container p-2">
+        <h1>Components</h1>
+        <div>
+            <h2>Headings</h2>
+            <h1>Heading 1</h1>
+            <h2>Heading 2</h2>
+            <h3>Heading 3</h3>
+            <h4>Heading 4</h4>
+            <h5>Heading 5</h5>
+            <h6>Heading 6</h6>
+            <p>
+                Paragraph, <a href="#" class="link">link with link class</a>
+            </p>
+        </div>
+        <div>
+            <h2>Buttons</h2>
+            <div x-data="{ clicked: 'none' }"
+                 @button-click.window="clicked = $event.detail">
+                <h4>
+                    Clicked Button: <span x-text="clicked"></span>
+                </h4>
+                <div>
+                    <h3>Colors</h3>
+                    {{ button('primary normal rounded', color='primary', variant='normal', shape='rounded') }}
+                    {{ button('secondary normal rounded', color='secondary', variant='normal', shape='rounded') }}
+                    {{ button('accent normal rounded', color='accent', variant='normal', shape='rounded') }}
+                    {{ button('success normal rounded', color='success', variant='normal', shape='rounded') }}
+                    {{ button('info normal rounded', color='info', variant='normal', shape='rounded') }}
+                    {{ button('warning normal rounded', color='warning', variant='normal', shape='rounded') }}
+                    {{ button('error normal rounded', color='error', variant='normal', shape='rounded') }}
+                </div>
+                <div>
+                    <h3>Shapes</h3>
+                    {{ button('primary normal rounded', color='primary', variant='normal', shape='rounded') }}
+                    {{ button('primary normal square', color='primary', variant='normal', shape='square') }}
+                    {{ button('primary normal circle', color='primary', variant='normal', shape='circle') }}
+                </div>
+                <div>
+                    <h3>Outlines</h3>
+                    {{ button('primary outline rounded', color='primary', variant='outline', shape='rounded') }}
+                    {{ button('secondary outline rounded', color='secondary', variant='outline', shape='rounded') }}
+                    {{ button('accent outline rounded', color='accent', variant='outline', shape='rounded') }}
+                    {{ button('success outline rounded', color='success', variant='outline', shape='rounded') }}
+                    {{ button('info outline rounded', color='info', variant='outline', shape='rounded') }}
+                    {{ button('warning outline rounded', color='warning', variant='outline', shape='rounded') }}
+                    {{ button('error outline rounded', color='error', variant='outline', shape='rounded') }}
+                </div>
+                <div>
+                    <h3>Sizes</h3>
+                    {{ button('primary normal rounded xs', color='primary', size="xs") }}
+                    {{ button('primary normal rounded sm', color='primary', size="sm") }}
+                    {{ button('primary normal rounded md', color='primary', size="md") }}
+                    {{ button('primary normal rounded lg', color='primary', size="lg") }}
+                    {{ button('primary normal rounded xl', color='primary', size="xl") }}
+                </div>
+            </div>
+        </div>
+        <div>
+            <h2>Toggle</h2>
+            {{ toggle(color='primary', size="normal", icon=False) }}
+            {{ toggle(color='primary', size="normal", icon=True) }}
+            {{ toggle(color='primary', size="sm", icon=False) }}
+            {{ toggle(color='primary', size="sm", icon=True) }}
+            {{ toggle_label(side='left') }}
+            {{ toggle_label(side='right') }}
+            {{ toggle(color='primary', size="normal", icon=True) }}
+            {{ toggle(color='secondary', size="normal", icon=True) }}
+            {{ toggle(color='accent', size="normal", icon=True) }}
+            {{ toggle(color='success', size="normal", icon=True) }}
+            {{ toggle(color='info', size="normal", icon=True) }}
+            {{ toggle(color='warning', size="normal", icon=True) }}
+            {{ toggle(color='error', size="normal", icon=True) }}
+        </div>
+    </div>
+{% endblock content %}

sampleapp/templates/components/button.jinja

@@ -1,6 +1,42 @@
-{% macro button(button_content='Button', type='button') %}
+{% macro button(button_content='Button', dispatch_name='button-click', variant='normal', color='primary', shape='rounded', size='md', type='button') %}
+    {# Variant support: normal, outline #}
+    {# Color support: primary, secondary, accent, success, info, warning, error #}
+    {# Shape support: rounded, square, circle #}
+    {# Size support: xs, sm, md, lg, xl #}
+    {% set class="inline-flex items-center shadow-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-"+color+"-600" %}
+    {% if size == 'xs' %}
+        {% set class = class + " px-2.5 py-1.5 text-xs" %}
+    {% elif size == 'sm' %}
+        {% set class = class + " px-3 py-2 text-sm" %}
+    {% elif size == 'md' %}
+        {% set class = class + " px-4 py-2 text-sm" %}
+    {% elif size == 'lg' %}
+        {% set class = class + " px-4 py-2 text-base" %}
+    {% elif size == 'xl' %}
+        {% set class = class + " px-6 py-3 text-base" %}
+    {% endif %}
+    {% if shape == 'rounded' %}
+        {% set class = class + " rounded" %}
+    {% elif shape == 'circle' %}
+        {% set class = class + ' rounded-full' %}
+    {% endif %}
+    {% if variant == 'outline' %}
+        {% set class = "{} text-{} bg-{}-content hover:text-{}-focus border border-{}".format(class, color, color, color, color) %}
+    {% else %}
+        {% set class = "{} text-{}-content bg-{} hover:bg-{}-focus".format(class, color, color, color) %}
+    {% endif %}
     <button type="{{ type }}"
-            class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+            x-on:click="$dispatch('{{ dispatch_name }}', '{{ variant }} {{ color }} {{ shape }} {{ size }}')"
+            class="{{ class }}">
         {{ button_content }}
     </button>
 {% endmacro %}
+{#
+text-primary-content bg-primary hover:bg-primary-focus border-primary bg-primary-content hover:text-primary-focus text-primary
+text-secondary-content bg-secondary hover:bg-secondary-focus border-secondary bg-secondary-content hover:text-secondary-focus text-secondary
+text-accent-content bg-accent hover:bg-accent-focus border-accent bg-accent-content hover:text-accent-focus text-accent
+text-success-content bg-success hover:bg-success-focus border-success bg-success-content hover:text-success-focus text-success
+text-info-content bg-info hover:bg-info-focus border-info bg-info-content hover:text-info-focus text-info
+text-warning-content bg-warning hover:bg-warning-focus border-warning bg-warning-content hover:text-warning-focus text-warning
+text-error-content bg-error hover:bg-error-focus border-error bg-error-content hover:text-error-focus text-error
+#}

sampleapp/templates/components/link.jinja

@@ -0,0 +1,5 @@
+{% macro link(url, text='', target='') %}
+    <a href="{{ url }}"
+       target="{{ target }}"
+       class="text-blue-500; hover:text-blue-700; underline">{{ text }}</a>
+{% endmacro %}

sampleapp/templates/components/toggle.jinja

@@ -0,0 +1,88 @@
+{% macro toggle(dispatch_name='toggle-slide', color='primary', size="normal", icon=False, initial=False) %}
+    {% set initial_tf = convert_tf(initial) %}
+    {% set icon_span %}
+    <span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+          aria-hidden="true"
+          x-state:on="Enabled"
+          x-state:off="Not Enabled"
+          :class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }">
+        <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
+            <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"/>
+        </svg>
+    </span>
+    <!-- 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"
+          x-state:off="Not Enabled"
+          :class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }">
+        <svg class="h-3 w-3 text-{{ color }}"
+             fill="currentColor"
+             viewBox="0 0 12 12">
+            <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"/>
+        </svg>
+    </span>
+{% endset %}
+{% set class = "flex-shrink-0 inline-flex relative rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-{{ color }}" %}
+{% if size == 'small' or size == 'sm' %}
+    {% set class = class + 'group items-center justify-center h-5 w-10 ' %}
+{% else %}
+    {% set class = class + 'bg-gray-200 h-6 w-11 border-2 border-transparent transition-colors ease-in-out duration-200' %}
+{% endif %}
+<button type="button"
+        class="{{ class }}"
+        role="switch"
+        aria-checked="'{{ initial_tf }}'"
+        x-data="{on: '{{ initial_tf }}' }"
+        x-on:click="on = !on; $dispatch('{{ dispatch_name }}', on)"
+        x-state:on="Enabled"
+        x-state:off="Not Enabled"
+        :class="{ 'bg-{{ color }}': on, 'bg-gray-200': !(on) }">
+    <span class="sr-only">Use setting</span>
+    {% if size == 'small' or size == 'sm' %}
+        <span aria-hidden="true"
+              class="pointer-events-none absolute bg-white w-full h-full rounded-md"></span>
+        <span aria-hidden="true"
+              class="bg-gray-200 pointer-events-none absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200"
+              :class="{ 'bg-{{ color }}': on, 'bg-gray-200': !(on) }"
+              x-state:on="Enabled"
+              x-state:off="Not Enabled"></span>
+        <span aria-hidden="true"
+              x-state:on="Enabled"
+              x-state:off="Not Enabled"
+              :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"
+              class="translate-x-0 pointer-events-none absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform ring-0 transition-transform ease-in-out duration-200">
+            {% if icon %}{{ icon_span }}{% endif %}
+        </span>
+    {% else %}
+        <span aria-hidden="true"
+              class="translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+              x-state:on="Enabled"
+              x-state:off="Not Enabled"
+              :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }">
+            {% if icon %}{{ icon_span }}{% endif %}
+        </span>
+    {% endif %}
+</button>
+{% endmacro %}
+{% set default_toggle %}
+{{ toggle() }}
+{% endset %}
+{% macro toggle_label(toggle=default_toggle, side='right', label='100% Jedi Strength: Agen Kolar, Saesee Tiin, Kit Fisto, Mace Windu', description='99.9% Jedi Strength: Mace Windu') %}
+    <div class="flex items-center justify-between">
+        {% if side.lower() in ('left', 'l') %}
+            <span class="mr-2">{{ toggle }}</span>
+        {% endif %}
+        <span class="flex-grow flex flex-col">
+            <span class="text-sm font-medium text-gray-900">{{ label }}</span>
+            <span class="text-sm text-gray-500">{{ description }}</span>
+        </span>
+        {% if side.lower() not in ('left', 'l') %}
+            {{ toggle }}
+        {% endif %}
+    </div>
+{% endmacro %}

sampleapp/templates/django/forms/default.jinja

@@ -1,8 +1,9 @@
 {% from 'django/forms/inputgroup.jinja' import inputgroup %}
-{% macro default(field, errors) %}
+{% macro default(fields, errors, hidden_fields) %}
     <div class="form-wrapper">
         <span class="text-red">{{ errors }}</span>
         {% for field, errors in fields %}{{ inputgroup(field, errors )}}{% endfor %}
         {% for field in hidden_fields %}{{ field }}{% endfor %}
     </div>
 {% endmacro %}
+{{ default(fields, errors, hidden_fields) }}

sampleapp/templates/django/forms/widgets/input.jinja

@@ -1,4 +1,3 @@
 <input type="{{ widget.type }}"
        name="{{ widget.name }}"
-       {% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}
-       {% include "django/forms/widgets/attrs.jinja" %}>
+       {% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}>

sampleapp/templates/header/desktop_center.jinja

@@ -1,8 +1,7 @@
 <div class="hidden md:ml-6 md:flex md:space-x-8">
     <!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
-    <a href="#"
-       class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Dashboard </a>
-    <a href="#"
+    <a href={{ url('components') }} class="border-primary-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Components </a>
+    <a href=""
        class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Team </a>
     <a href="#"
        class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Projects </a>

sampleapp/templates/header/mobile_menu.jinja

@@ -12,7 +12,7 @@
     <div class="pt-2 pb-3 space-y-1">
         <!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
         <a href="#"
-           class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6">Dashboard</a>
+           class="bg-primary-50 border-primary-500 text-primary-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6">Dashboard</a>
         <a href="#"
            class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6">Team</a>
         <a href="#"