Add new component system for buttons, cards, and inputs

Integrates Django Cotton to replace existing UI components with a new templating system. Adds a test page to compare the new components against the old ones.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: dcfff319-6e91-4220-98a9-8295b87755b7
Replit-Commit-Checkpoint-Type: intermediate_checkpoint

backend/templates/cotton/button.html

@@ -0,0 +1,72 @@
+{% comment %}
+Button Component - Django Cotton Version of shadcn/ui Button  
+Usage: <c-button variant="default" size="default">Click me</c-button>
+Preserves EXACT same HTML output as the original include version
+{% endcomment %}
+
+<c-vars 
+    variant="default" 
+    size="default"
+    icon_left=""
+    icon_right=""
+    type=""
+    onclick=""
+    hx_get=""
+    hx_post=""
+    hx_target=""
+    hx_swap=""
+    x_data=""
+    x_on=""
+    disabled=""
+/>
+
+<button 
+  class="
+    inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium 
+    ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 
+    focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
+    {% if variant == 'default' %}
+      bg-primary text-primary-foreground hover:bg-primary/90
+    {% elif variant == 'destructive' %}
+      bg-destructive text-destructive-foreground hover:bg-destructive/90
+    {% elif variant == 'outline' %}
+      border border-input bg-background hover:bg-accent hover:text-accent-foreground
+    {% elif variant == 'secondary' %}
+      bg-secondary text-secondary-foreground hover:bg-secondary/80
+    {% elif variant == 'ghost' %}
+      hover:bg-accent hover:text-accent-foreground
+    {% elif variant == 'link' %}
+      text-primary underline-offset-4 hover:underline
+    {% endif %}
+    {% if size == 'default' %}
+      h-10 px-4 py-2
+    {% elif size == 'sm' %}
+      h-9 rounded-md px-3
+    {% elif size == 'lg' %}
+      h-11 rounded-md px-8
+    {% elif size == 'icon' %}
+      h-10 w-10
+    {% endif %}
+    {{ class|default:'' }}
+  "
+  {% if type %}type="{{ type }}"{% endif %}
+  {% if onclick %}onclick="{{ onclick }}"{% endif %}
+  {% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
+  {% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
+  {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
+  {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
+  {% if x_data %}x-data="{{ x_data }}"{% endif %}
+  {% if x_on %}{{ x_on }}{% endif %}
+  {% if disabled %}disabled{% endif %}
+  {{ attrs }}
+>
+  {% if icon_left %}
+    <i class="{{ icon_left }} w-4 h-4"></i>
+  {% endif %}
+  
+  {{ slot }}
+  
+  {% if icon_right %}
+    <i class="{{ icon_right }} w-4 h-4"></i>
+  {% endif %}
+</button>

backend/templates/cotton/card.html

@@ -0,0 +1,50 @@
+{% comment %}
+Card Component - Django Cotton Version of shadcn/ui Card
+Usage: <c-card title="Card Title" description="Card description">Card content</c-card>
+Preserves EXACT same HTML output as the original include version
+{% endcomment %}
+
+<c-vars 
+    title=""
+    description=""
+    content=""
+    header_content=""
+    body_content=""
+    footer_content=""
+/>
+
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm {{ class|default:'' }}">
+  {% if title or header_content %}
+  <div class="flex flex-col space-y-1.5 p-6">
+    {% if title %}
+    <h3 class="text-2xl font-semibold leading-none tracking-tight">{{ title }}</h3>
+    {% endif %}
+    {% if description %}
+    <p class="text-sm text-muted-foreground">{{ description }}</p>
+    {% endif %}
+    {% if header_content %}
+    {{ header_content|safe }}
+    {% endif %}
+  </div>
+  {% endif %}
+  
+  {% if content or body_content or slot %}
+  <div class="p-6 pt-0">
+    {% if content %}
+    {{ content|safe }}
+    {% endif %}
+    {% if body_content %}
+    {{ body_content|safe }}
+    {% endif %}
+    {% if slot %}
+    {{ slot }}
+    {% endif %}
+  </div>
+  {% endif %}
+  
+  {% if footer_content %}
+  <div class="flex items-center p-6 pt-0">
+    {{ footer_content|safe }}
+  </div>
+  {% endif %}
+</div>

backend/templates/cotton/input.html

@@ -0,0 +1,47 @@
+{% comment %}
+Input Component - Django Cotton Version of shadcn/ui Input
+Usage: <c-input type="text" placeholder="Enter text..." name="field_name" />
+Preserves EXACT same HTML output as the original include version
+{% endcomment %}
+
+<c-vars 
+    type="text"
+    name=""
+    id=""
+    placeholder=""
+    value=""
+    required=""
+    disabled=""
+    readonly=""
+    autocomplete=""
+    x_model=""
+    x_on=""
+    hx_get=""
+    hx_post=""
+    hx_target=""
+    hx_trigger=""
+    hx_swap=""
+    hx_include=""
+/>
+
+<input 
+  type="{{ type|default:'text' }}"
+  class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {{ class|default:'' }}"
+  {% if name %}name="{{ name }}"{% endif %}
+  {% if id %}id="{{ id }}"{% endif %}
+  {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
+  {% if value %}value="{{ value }}"{% endif %}
+  {% if required %}required{% endif %}
+  {% if disabled %}disabled{% endif %}
+  {% if readonly %}readonly{% endif %}
+  {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
+  {% if x_model %}x-model="{{ x_model }}"{% endif %}
+  {% if x_on %}{{ x_on }}{% endif %}
+  {% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
+  {% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
+  {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
+  {% if hx_trigger %}hx-trigger="{{ hx_trigger }}"{% endif %}
+  {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
+  {% if hx_include %}hx-include="{{ hx_include }}"{% endif %}
+  {{ attrs }}
+/>