move to penguinui continues3
Some checks failed
CI / Check Style (push) Has been cancelled
CI / Run Clippy (push) Has been cancelled
CI / Run Tests (push) Has been cancelled

This commit is contained in:
Priec
2026-06-18 00:54:30 +02:00
parent 1538d870b9
commit 0a619517b6
16 changed files with 171 additions and 149 deletions

View File

@@ -168,72 +168,49 @@ and then use it (instead of hand-rolling):
---
## 9. Checkbox
**Penguin UI: `checkbox/` (3 variants)**
## 9. Checkbox — ✅ DONE
**Penguin UI: `checkbox/default-checkbox.html`**
| # | Location | What it is | Size |
|---|----------|------------|------|
| 15 | `assets/views/admin/catalog/product_form.html:85-89` | "Published" checkbox | ~5 lines |
| 16 | `assets/views/admin/catalog/category_form.html:67-71` | "Published" checkbox | ~5 lines |
| 17 | `assets/views/admin/shipping/index.html:25-29` | "Enabled" checkbox | ~5 lines |
- Exact upstream mirror at `assets/views/penguinui/checkbox/default-checkbox.html` (reference only)
- `ui::checkbox(name, label, id, value="on", checked, attrs)` macro in `macros/ui.html`
(full Penguin control: custom box + check-icon + label, `has-checked:`/`peer` variants).
- Adopted: product/category "Published" + shipping "Enabled".
---
## 10. Text Input — ✅ DONE
**Penguin UI: `text-input/default-text-input.html`**
## 10. Text Input
**Penguin UI: `text-input/` (8 variants)**
- Exact upstream mirror at `assets/views/penguinui/text-input/default-text-input.html` (reference only)
- `ui::input(name, type, id, value, placeholder, required, autocomplete, attrs, extra, width="w-full")`
macro — **verbatim** Penguin classes (`bg-surface-alt`, `focus-visible:outline-*`).
Adopted at every text/email/number/password input: login (2), checkout (email,
name, phone, address, city, zip), product form (6), category form (3), product
detail quantity, shipping price (`width="w-28"`).
- The cart-body quantity input keeps its complex `@change` handler **inline** with
the same Penguin classes (mixed single/double quotes can't pass through a macro arg).
- Note: padding is Penguin's `px-2 py-2` (was `px-3`) and bg is `bg-surface-alt` (was
`bg-surface`) — the real Penguin look.
| # | Location | What it is | Size |
|---|----------|------------|------|
| 18 | `assets/views/shop/checkout.html:37-44` | Email + name text inputs | ~8 lines |
| 19 | `assets/views/shop/checkout.html:84-99` | Address, city, ZIP text inputs | ~16 lines |
| 20 | `assets/views/admin/login.html:34-51` | Email + password inputs (with focus ring styles) | ~18 lines |
| 21 | `assets/views/admin/catalog/product_form.html:19-68` | Name, price, currency, stock, SKU, slug inputs + textarea | ~50 lines |
| 22 | `assets/views/admin/catalog/category_form.html:19-55` | Name, slug, position inputs + textarea | ~37 lines |
| 23 | `assets/views/shop/show.html:46-48` | Quantity number input | ~3 lines |
| 24 | `assets/views/shop/_cart_body.html:30-38` | Quantity number input with `@change` confirmation dialog | ~9 lines |
| 25 | `assets/views/admin/shipping/index.html:20-24` | Price text input | ~5 lines |
## 11. Textarea — ✅ DONE
**Penguin UI: `text-area/default-textarea.html`**
**Pattern: Every input is hand-styled with:**
```
w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface
focus:outline-2 focus:outline-primary
dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark
```
This exact class string appears 15+ times across the codebase.
- Exact upstream mirror at `assets/views/penguinui/text-area/default-textarea.html` (reference only)
- `ui::textarea(name, id, value, rows, placeholder, required, attrs, extra)` macro.
- Adopted: checkout note, product & category description.
---
## 12. Select/Dropdown (Native) — ✅ DONE
**Penguin UI: `select/default-select.html`**
## 11. Textarea
**Penguin UI: `textarea/`**
- Exact upstream mirror at `assets/views/penguinui/select/default-select.html` (reference only)
- Adopted inline (3 sites: product category, category parent, order status) — Penguin
`appearance-none` select on `bg-surface-alt` wrapped in `relative` with the chevron
SVG. Inline rather than a macro because the `<option>` set is caller-specific.
| # | Location | What it is | Size |
|---|----------|------------|------|
| 26 | `assets/views/shop/checkout.html:183-186` | Order note textarea | ~4 lines |
| 27 | `assets/views/admin/catalog/product_form.html:71-73` | Product description textarea | ~3 lines |
| 28 | `assets/views/admin/catalog/category_form.html:53-55` | Category description textarea | ~3 lines |
## 13. File Input — ✅ DONE
**Penguin UI: `file-input/default-file-input.html`**
---
## 12. Select/Dropdown (Native)
**Penguin UI: `select/` (7 variants)**
| # | Location | What it is | Size |
|---|----------|------------|------|
| 29 | `assets/views/admin/catalog/product_form.html:53-60` | Category select | ~8 lines |
| 30 | `assets/views/admin/catalog/category_form.html:40-49` | Parent category select (tree indented with `—&nbsp;`) | ~10 lines |
| 31 | `assets/views/admin/orders/show.html:108-112` | Order status select | ~5 lines |
---
## 13. File Input
**Penguin UI: `file-input/`**
| # | Location | What it is | Size |
|---|----------|------------|------|
| 32 | `assets/views/admin/catalog/product_form.html:78-82` | Product image upload | ~5 lines |
| 33 | `assets/views/admin/catalog/category_form.html:58-64` | Category image upload | ~7 lines |
**Both use the same Tailwind `file:mr-3 file:...` prefix pattern for styling.**
- Exact upstream mirror at `assets/views/penguinui/file-input/default-file-input.html` (reference only)
- `ui::file_input(name, id, accept, attrs, extra)` macro (verbatim Penguin `file:` styling).
- Adopted: product & category image upload.
---