DenozordecandClaude Sonnet 5.5
f3531c64f9
Install ReUI (MCP, skill, @reui registry, Tailwind v4, shadcn base-nova) and move the shared UI onto it: Button, Tag, Check, Input/Textarea, Segmented, Alert, Panel, Dialog, Tooltip, Menu and Select (Popover), Toast (sonner), the Table frame (DataGrid), the Dashboard KPI strip, the shnt Ops palette, Geist and the type scale. Design only: behaviour, texts and roles are unchanged. Tests that asserted the old DOM were updated; the tests now format numbers in English wherever they run. docs/reui-migration-plan.md records the plan and its decisions. Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import styles from './Check.module.css'
|
|
|
|
/*
|
|
The checkbox with its label and help. It was written three times (Settings, DHCP
|
|
and Administration), byte for byte identical apart from the styles module.
|
|
|
|
And it brings the **switch**, which is the only gesture of its own this console has
|
|
allowed itself. A yes/no setting is not the same as ticking a table row: the first
|
|
changes how the server behaves and stays that way, the second is a selection that
|
|
lasts one click. Upstream paints them the same because Bootstrap 3 only had a
|
|
checkbox. Here the setting gets a switch and the selection stays a checkbox, which
|
|
is the difference the shape had to say and was not saying.
|
|
|
|
Underneath it is still an `input[type=checkbox]`: same keyboard, same role, same
|
|
tests. What changes is what you see.
|
|
*/
|
|
|
|
export function Check({
|
|
label,
|
|
checked,
|
|
onChange,
|
|
help,
|
|
disabled,
|
|
toggle = false,
|
|
}: {
|
|
label: string
|
|
checked: boolean
|
|
onChange: (v: boolean) => void
|
|
help?: ReactNode
|
|
disabled?: boolean
|
|
/** A setting that stays put. False for a row selection. */
|
|
toggle?: boolean
|
|
}) {
|
|
const common = {
|
|
checked,
|
|
disabled,
|
|
'aria-label': label,
|
|
onCheckedChange: (v: boolean) => onChange(v),
|
|
}
|
|
return (
|
|
<div>
|
|
<div className={styles.check}>
|
|
{/* The control carries the name itself and the text beside it only forwards the
|
|
click: a wrapping <label> would name the hidden input as well, and the one
|
|
control would be found twice. A switch is announced as a checkbox on
|
|
purpose: same role, same keyboard as the input it replaces. */}
|
|
{toggle ? (
|
|
<Switch role="checkbox" nativeButton render={<button type="button" />} {...common} />
|
|
) : (
|
|
<Checkbox nativeButton render={<button type="button" />} {...common} />
|
|
)}
|
|
<span className={styles.text} onClick={() => !disabled && onChange(!checked)}>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
{help && <div className={styles.help}>{help}</div>}
|
|
</div>
|
|
)
|
|
}
|