mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 10:11:09 -05:00
677 lines
34 KiB
HTML
677 lines
34 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>UI Component Comparison Test</title>
|
|
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet">
|
|
<style>
|
|
.test-section {
|
|
margin: 2rem 0;
|
|
padding: 1rem;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
}
|
|
.button-pair {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin: 1rem 0;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.button-container {
|
|
border: 1px solid #d1d5db;
|
|
padding: 0.5rem;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
}
|
|
.button-container::before {
|
|
content: attr(data-label);
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 8px;
|
|
background: white;
|
|
padding: 0 4px;
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
}
|
|
.test-description {
|
|
font-weight: bold;
|
|
color: #374151;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.html-output {
|
|
background: #f9fafb;
|
|
border: 1px solid #e5e7eb;
|
|
padding: 1rem;
|
|
margin: 0.5rem 0;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 p-8" x-data="componentTestSuite()">
|
|
<div class="max-w-6xl mx-auto">
|
|
<h1 class="text-3xl font-bold mb-8 text-center">UI Component Comparison Test</h1>
|
|
<p class="text-center text-gray-600 mb-8">Comparing old include method vs new cotton component method for Button, Input, and Card components</p>
|
|
|
|
<!-- Test 1: All Variants with Default Size -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 1: All Variants (Default Size)</h2>
|
|
|
|
<div class="test-description">Default Variant</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button variant="default">Default Button</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button variant="default">Default Button</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Destructive Variant</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button variant="destructive">Delete Item</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button variant="destructive">Delete Item</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Outline Variant</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button variant="outline">Outline Button</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button variant="outline">Outline Button</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Secondary Variant</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button variant="secondary">Secondary Button</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button variant="secondary">Secondary Button</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Ghost Variant</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button variant="ghost">Ghost Button</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button variant="ghost">Ghost Button</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Link Variant</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button variant="link">Link Button</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button variant="link">Link Button</c-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test 2: All Sizes with Default Variant -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 2: All Sizes (Default Variant)</h2>
|
|
|
|
<div class="test-description">Default Size</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button size="default">Default Size</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button size="default">Default Size</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Small Size</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button size="sm">Small Size</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button size="sm">Small Size</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Large Size</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button size="lg">Large Size</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button size="lg">Large Size</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Icon Size</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button size="icon">🔥</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button size="icon">🔥</c-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test 3: HTMX Attributes -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 3: HTMX Attributes</h2>
|
|
|
|
<div class="test-description">hx-get Attribute</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button hx_get="/api/content/" hx_target="#content">Load Content</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button hx-get="/api/content/" hx-target="#content">Load Content</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">hx-post Attribute</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button hx_post="/api/submit/" hx_target="#result" hx_swap="innerHTML">Submit Form</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button hx-post="/api/submit/" hx-target="#result" hx-swap="innerHTML">Submit Form</c-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test 4: Icons -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 4: Icons</h2>
|
|
|
|
<div class="test-description">Left Icon</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button icon_left="fas fa-save">Save</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button icon_left="fas fa-save">Save</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Right Icon</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button icon_right="fas fa-arrow-right">Next</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button icon_right="fas fa-arrow-right">Next</c-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test 5: Additional Classes and Attributes -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 5: Additional Classes and Attributes</h2>
|
|
|
|
<div class="test-description">Custom Classes</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button class="border-2 border-red-500 shadow-lg">Custom Button</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button class="border-2 border-red-500 shadow-lg">Custom Button</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Type Attribute</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button type="submit">Submit</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button type="submit">Submit</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Disabled State</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button disabled>Disabled</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button disabled>Disabled</c-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test 6: Complex Combinations -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 6: Complex Combinations</h2>
|
|
|
|
<div class="test-description">Destructive + Large + Icon + HTMX</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button variant="destructive" size="lg" icon_left="fas fa-trash" hx_post="/api/delete-all/" hx_target="#main" class="font-bold">Delete All</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button variant="destructive" size="lg" icon_left="fas fa-trash" hx-post="/api/delete-all/" hx-target="#main" class="font-bold">Delete All</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Outline + Small + Right Icon + Custom Attributes</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-button variant="outline" size="sm" icon_right="fas fa-download" attrs='data-testid="export-btn" title="Export data"'>Export</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-button variant="outline" size="sm" icon_right="fas fa-download" data-testid="export-btn" title="Export data">Export</c-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test 7: Legacy Underscore Props vs Modern Hyphenated Attributes -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 7: Legacy Underscore Props vs Modern Hyphenated Attributes</h2>
|
|
<p class="text-sm text-gray-600 mb-4">This test verifies backward compatibility - cotton components should accept both legacy underscore props (hx_get, x_data) and modern hyphenated attributes (hx-get, x-data).</p>
|
|
|
|
<div class="test-description">Legacy hx_get vs Modern hx-get</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include with hx_get">
|
|
<c-button hx_get="/api/content/" hx_target="#content">Load Content</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton with hx_get">
|
|
<c-button hx_get="/api/content/" hx_target="#content">Load Content</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton with hx-get">
|
|
<c-button hx-get="/api/content/" hx-target="#content">Load Content</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Legacy hx_post vs Modern hx-post</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include with hx_post">
|
|
<c-button hx_post="/api/submit/" hx_target="#result" hx_swap="innerHTML">Submit Form</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton with hx_post">
|
|
<c-button hx_post="/api/submit/" hx_target="#result" hx_swap="innerHTML">Submit Form</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton with hx-post">
|
|
<c-button hx-post="/api/submit/" hx-target="#result" hx-swap="innerHTML">Submit Form</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Legacy x_data vs Modern x-data</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include with x_data">
|
|
<c-button x_data="{ clicked: false }">Alpine Button</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton with x_data">
|
|
<c-button x_data="{ clicked: false }">Alpine Button</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton with x-data">
|
|
<c-button x-data="{ clicked: false }">Alpine Button</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Legacy onclick vs Modern onclick</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include with onclick">
|
|
<c-button onclick="alert('Clicked!')">Click Handler</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton with onclick">
|
|
<c-button onclick="alert('Clicked!')">Click Handler</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Legacy type vs Modern type</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include with type">
|
|
<c-button type="submit">Submit Form</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton with type">
|
|
<c-button type="submit">Submit Form</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Legacy disabled vs Modern disabled</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include with disabled">
|
|
<c-button disabled>Disabled Button</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton with disabled">
|
|
<c-button disabled>Disabled Button</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Complex Legacy Props Combination</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include with Legacy Props">
|
|
<c-button variant="destructive" size="lg" hx_post="/api/complex/" hx_target="#result" x_data="{ processing: false }" type="submit">Legacy Complex</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton with Legacy Props">
|
|
<c-button variant="destructive" size="lg" hx_post="/api/complex/" hx_target="#result" x_data="{ processing: false }" type="submit">Legacy Complex</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton with Modern Props">
|
|
<c-button variant="destructive" size="lg" hx-post="/api/complex/" hx-target="#result" x-data="{ processing: false }" type="submit">Modern Complex</c-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Alpine.js x_on Special Case</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include with x_on">
|
|
<c-button x_on='@click="clicked = true"'>Alpine Click</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton with x_on">
|
|
<c-button x_on="@click='clicked = true'">Alpine Click</c-button>
|
|
</div>
|
|
<div class="button-container" data-label="Cotton with @click directly">
|
|
<c-button @click="clicked = true">Alpine Click</c-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test 8: Input Component Tests -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 8: Input Component Comparison</h2>
|
|
|
|
<div class="test-description">Basic Text Input</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-input type="text" placeholder="Enter your name" name="name" />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-input type="text" placeholder="Enter your name" name="name" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Email Input with Value</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-input type="email" placeholder="email@example.com" name="email" value="test@example.com" />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-input type="email" placeholder="email@example.com" name="email" value="test@example.com" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Password Input</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-input type="password" placeholder="Password" name="password" required />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-input type="password" placeholder="Password" name="password" required />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Number Input with Min/Max</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-input type="number" placeholder="Age" name="age" attrs='min="18" max="100"' />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-input type="number" placeholder="Age" name="age" min="18" max="100" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Disabled Input</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-input type="text" placeholder="Disabled input" name="disabled" disabled value="Cannot edit" />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-input type="text" placeholder="Disabled input" name="disabled" disabled value="Cannot edit" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Readonly Input</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-input type="text" name="readonly" readonly value="Read only value" />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-input type="text" name="readonly" readonly value="Read only value" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Input with Custom Class</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-input type="text" placeholder="Custom styled" name="custom" class="border-blue-500 bg-blue-50" />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-input type="text" placeholder="Custom styled" name="custom" class="border-blue-500 bg-blue-50" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Input with HTMX Attributes</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-input type="text" placeholder="Search..." name="search" hx_get="/api/search/" hx_target="#results" hx_trigger="keyup changed delay:300ms" />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-input type="text" placeholder="Search..." name="search" hx-get="/api/search/" hx-target="#results" hx-trigger="keyup changed delay:300ms" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Input with Alpine.js</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-input type="text" placeholder="Alpine input" name="alpine" x_model="inputValue" />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-input type="text" placeholder="Alpine input" name="alpine" x-model="inputValue" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test 8: Card Component Tests -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 8: Card Component Comparison</h2>
|
|
|
|
<div class="test-description">Basic Card with Title</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-card title="Basic Card" content="This is a simple card with just a title and content." />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-card title="Basic Card">This is a simple card with just a title and content.</c-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Card with Title and Description</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-card title="Card with Description" description="This card has both a title and a description" content="Here is the main content of the card." />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-card title="Card with Description" description="This card has both a title and a description">Here is the main content of the card.</c-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Card with Custom Header Content</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-card header_content='<div class="flex items-center gap-2"><h3 class="text-lg font-bold">Custom Header</h3><span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">New</span></div>' content="This card has custom header content instead of a simple title." />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-card header_content='<div class="flex items-center gap-2"><h3 class="text-lg font-bold">Custom Header</h3><span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">New</span></div>'>This card has custom header content instead of a simple title.</c-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Card with Body Content (instead of slot)</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-card title="Body Content Card" body_content='<p class="text-gray-600">This content is passed via body_content parameter.</p><button class="mt-2 px-4 py-2 bg-blue-500 text-white rounded">Action Button</button>' />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-card title="Body Content Card" body_content='<p class="text-gray-600">This content is passed via body_content parameter.</p><button class="mt-2 px-4 py-2 bg-blue-500 text-white rounded">Action Button</button>'></c-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Card with Footer</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-card title="Card with Footer" content="This card has footer content at the bottom." footer_content='<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded mr-2">Cancel</button><button class="px-4 py-2 bg-blue-500 text-white rounded">Save</button>' />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-card title="Card with Footer" footer_content='<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded mr-2">Cancel</button><button class="px-4 py-2 bg-blue-500 text-white rounded">Save</button>'>This card has footer content at the bottom.</c-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Complete Card (All Sections)</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-card title="Complete Card" description="This card has all possible sections" content="Main content goes here. This is the primary content area." footer_content='<span class="text-sm text-gray-500">Last updated: Today</span>' />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-card title="Complete Card" description="This card has all possible sections" footer_content='<span class="text-sm text-gray-500">Last updated: Today</span>'>Main content goes here. This is the primary content area.</c-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Card with Custom Classes</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-card title="Custom Styled Card" content="This card has custom styling applied." class="border-2 border-green-200 bg-green-50 shadow-lg" />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-card title="Custom Styled Card" class="border-2 border-green-200 bg-green-50 shadow-lg">This card has custom styling applied.</c-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-description">Content-Only Card (No Header)</div>
|
|
<div class="button-pair">
|
|
<div class="button-container" data-label="Include Version">
|
|
<c-card content="This card has only content, no header or footer sections." />
|
|
</div>
|
|
<div class="button-container" data-label="Cotton Version">
|
|
<c-card>This card has only content, no header or footer sections.</c-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HTML Output Comparison Section -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">HTML Output Inspection</h2>
|
|
<p class="text-sm text-gray-600 mb-4">Use browser dev tools to inspect the HTML output and ensure it's identical.</p>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<div>
|
|
<h3 class="font-semibold mb-2">Include Version HTML:</h3>
|
|
<div id="include-html" class="html-output">
|
|
<!-- JavaScript will populate this -->
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold mb-2">Cotton Version HTML:</h3>
|
|
<div id="cotton-html" class="html-output">
|
|
<!-- JavaScript will populate this -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alpine.js -->
|
|
<script src="{% static 'js/alpine.min.js' %}" defer></script>
|
|
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
// Component Test Suite Component
|
|
Alpine.data('componentTestSuite', () => ({
|
|
init() {
|
|
// Extract HTML after Alpine.js initializes
|
|
this.$nextTick(() => {
|
|
setTimeout(() => this.extractComponentHTML(), 100);
|
|
this.addCompareButton();
|
|
});
|
|
},
|
|
|
|
// Function to normalize HTML for comparison
|
|
normalizeHTML(html) {
|
|
return html
|
|
.replace(/\s+/g, ' ')
|
|
.replace(/> </g, '><')
|
|
.trim();
|
|
},
|
|
|
|
// Function to extract HTML from all component containers
|
|
extractComponentHTML() {
|
|
const containers = this.$el.querySelectorAll('.button-container');
|
|
const includeHTMLs = [];
|
|
const cottonHTMLs = [];
|
|
let componentIndex = 1;
|
|
|
|
containers.forEach((container, index) => {
|
|
const label = container.getAttribute('data-label');
|
|
// Look for button, input, or div (card) elements
|
|
const element = container.querySelector('button') ||
|
|
container.querySelector('input') ||
|
|
container.querySelector('div.rounded-lg');
|
|
|
|
if (element && label) {
|
|
const html = element.outerHTML;
|
|
const normalized = this.normalizeHTML(html);
|
|
|
|
if (label === 'Include Version') {
|
|
includeHTMLs.push(`<!-- Component ${componentIndex} -->\n${normalized}\n`);
|
|
} else if (label === 'Cotton Version') {
|
|
cottonHTMLs.push(`<!-- Component ${componentIndex} -->\n${normalized}\n`);
|
|
componentIndex++;
|
|
}
|
|
}
|
|
});
|
|
|
|
const includeElement = this.$el.querySelector('#include-html');
|
|
const cottonElement = this.$el.querySelector('#cotton-html');
|
|
|
|
if (includeElement) includeElement.textContent = includeHTMLs.join('\n');
|
|
if (cottonElement) cottonElement.textContent = cottonHTMLs.join('\n');
|
|
},
|
|
|
|
// Function to compare HTML outputs
|
|
compareHTML() {
|
|
const includeHTML = this.$el.querySelector('#include-html')?.textContent || '';
|
|
const cottonHTML = this.$el.querySelector('#cotton-html')?.textContent || '';
|
|
|
|
if (includeHTML === cottonHTML) {
|
|
this.$dispatch('comparison-result', {
|
|
success: true,
|
|
message: '✅ HTML outputs are identical!'
|
|
});
|
|
} else {
|
|
this.$dispatch('comparison-result', {
|
|
success: false,
|
|
message: '❌ HTML outputs differ. Check the HTML Output section for details.',
|
|
includeHTML,
|
|
cottonHTML
|
|
});
|
|
console.log('Include HTML:', includeHTML);
|
|
console.log('Cotton HTML:', cottonHTML);
|
|
}
|
|
},
|
|
|
|
// Add compare button
|
|
addCompareButton() {
|
|
const compareBtn = document.createElement('button');
|
|
compareBtn.textContent = 'Compare HTML Outputs';
|
|
compareBtn.className = 'fixed bottom-4 right-4 bg-blue-500 text-white px-4 py-2 rounded shadow-lg hover:bg-blue-600';
|
|
compareBtn.addEventListener('click', () => this.compareHTML());
|
|
document.body.appendChild(compareBtn);
|
|
}
|
|
}));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|