36 lines
1.8 KiB
Markdown
36 lines
1.8 KiB
Markdown
# HTMX Showcase — Validation Harness
|
|
|
|
Parallel to `app/page.tsx` (the React showcase), `public/htmx.html` is a plain HTML page that exercises the generated `dist/greyhaven.htmx.css` across every static component. Load it while running `pnpm dev` at `/htmx.html`.
|
|
|
|
## Purpose
|
|
|
|
Validate that `greyhaven.htmx.css` produces visually-equivalent output to the React components. The HTMX page only uses:
|
|
- `data-slot` / `data-variant` / `data-size` attributes
|
|
- Standard HTML tags (`<button>`, `<span>`, `<input>`, `<div>`)
|
|
- Inline SVGs for icons (no lucide-react)
|
|
|
|
No React, no JavaScript (apart from the theme toggle).
|
|
|
|
## Build
|
|
|
|
```bash
|
|
pnpm htmx-css:build # Regenerate dist/greyhaven.htmx.css from components/ui/*.tsx
|
|
pnpm htmx-demo:build # Compile htmx-demo/input.css + tokens + htmx.css → public/htmx.css
|
|
pnpm dev # Serves /htmx.html at http://localhost:3000/htmx.html
|
|
```
|
|
|
|
## What's covered
|
|
|
|
- Typography (H1/H2/H3 + body + UI label)
|
|
- Button — variants (6), sizes (3), states (5), icon sizes (3)
|
|
- Badge — core (4), tag/value (2), semantic (4), channel pills (5), on-muted-surface (6)
|
|
- Input + Textarea (default / with value / disabled) + Label
|
|
- Card (simple + with header/action/content/footer)
|
|
- Alert (default + destructive)
|
|
- Separator, Progress, Skeleton, Kbd
|
|
|
|
## What's intentionally out of scope
|
|
|
|
- Interactive components (Dialog, Dropdown, Popover, Select, Combobox, Accordion, Tabs, Tooltip) — their CSS rules exist in `greyhaven.htmx.css` but require Alpine.js or HTMX swap patterns for open/close state. Validate those in a separate runtime-integration test.
|
|
- Form Control primitives with JS state (Checkbox, Switch, RadioGroup, Slider) — Radix renders these with bespoke markup the CSS targets via `data-state=checked`. Native `<input type="checkbox">` won't match without additional bridging.
|