@voltro/ui-shadcn 0.1.0

package/src/widgets.tsx

@@ -0,0 +1,297 @@
+// shadcn-styled widgets that plug into the @voltro/ui widget seam. Plain,
+// accessible HTML with Tailwind utility classes against the design tokens in
+// `./tokens.css`. Drop them in app-wide:
+//
+//   import { shadcnWidgets } from '@voltro/ui-shadcn'
+//   import '@voltro/ui-shadcn/tokens.css'
+//   <WidgetRegistryProvider widgets={shadcnWidgets}>…</WidgetRegistryProvider>
+//
+// They implement the SAME `Widget` contract as @voltro/ui's plain defaults —
+// the seam falls back to the plain default for any kind not overridden here.
+
+import { useId, type ReactNode } from 'react'
+import type { Widget, WidgetProps, WidgetRegistry } from '@voltro/ui'
+
+const cx = {
+  field: 'voltro-field flex flex-col gap-1',
+  label: 'text-sm font-medium text-foreground',
+  control:
+    'block w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm ' +
+    'focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+  checkbox: 'h-4 w-4 rounded border-input text-primary focus:ring-2 focus:ring-ring',
+  error: 'text-sm text-destructive',
+}
+
+const asString = (v: unknown): string => (v === undefined || v === null ? '' : String(v))
+const describedBy = (id: string, error: string | undefined): string | undefined =>
+  error !== undefined ? `${id}-error` : undefined
+
+const Shell = (props: {
+  readonly id: string
+  readonly label: string
+  readonly required: boolean
+  readonly error?: string | undefined
+  readonly children: ReactNode
+}): ReactNode => (
+  <div className={cx.field}>
+    <label className={cx.label} htmlFor={props.id}>
+      {props.label}
+      {props.required ? ' *' : ''}
+    </label>
+    {props.children}
+    {props.error !== undefined ? (
+      <p id={`${props.id}-error`} className={cx.error} role="alert">
+        {props.error}
+      </p>
+    ) : null}
+  </div>
+)
+
+const inputWidget = (type: string, toValue: (raw: string) => unknown): Widget => {
+  const Component: Widget = (props) => {
+    const id = useId()
+    return (
+      <Shell id={id} label={props.label} required={props.required} error={props.error}>
+        <input
+          id={id}
+          type={type}
+          name={props.name}
+          className={cx.control}
+          value={asString(props.value)}
+          onChange={(e) => props.onChange(toValue(e.target.value))}
+          disabled={props.disabled}
+          required={props.required}
+          aria-invalid={props.error !== undefined}
+          aria-describedby={describedBy(id, props.error)}
+        />
+      </Shell>
+    )
+  }
+  return Component
+}
+
+const TextareaWidget: Widget = (props) => {
+  const id = useId()
+  return (
+    <Shell id={id} label={props.label} required={props.required} error={props.error}>
+      <textarea
+        id={id}
+        name={props.name}
+        className={cx.control}
+        value={asString(props.value)}
+        onChange={(e) => props.onChange(e.target.value)}
+        disabled={props.disabled}
+        required={props.required}
+        aria-invalid={props.error !== undefined}
+        aria-describedby={describedBy(id, props.error)}
+      />
+    </Shell>
+  )
+}
+
+const CheckboxWidget: Widget = (props) => {
+  const id = useId()
+  return (
+    <div className="voltro-field flex items-center gap-2">
+      <input
+        id={id}
+        type="checkbox"
+        name={props.name}
+        className={cx.checkbox}
+        checked={props.value === true}
+        onChange={(e) => props.onChange(e.target.checked)}
+        disabled={props.disabled}
+        aria-invalid={props.error !== undefined}
+        aria-describedby={describedBy(id, props.error)}
+      />
+      <label className={cx.label} htmlFor={id}>
+        {props.label}
+        {props.required ? ' *' : ''}
+      </label>
+      {props.error !== undefined ? (
+        <p id={`${id}-error`} className={cx.error} role="alert">
+          {props.error}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+const SwitchWidget: Widget = (props) => {
+  const id = useId()
+  const on = props.value === true
+  return (
+    <div className="voltro-field flex items-center gap-2">
+      <button
+        id={id}
+        type="button"
+        role="switch"
+        aria-checked={on}
+        onClick={() => props.onChange(!on)}
+        disabled={props.disabled}
+        aria-invalid={props.error !== undefined}
+        aria-describedby={describedBy(id, props.error)}
+        className={
+          'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-input ' +
+          'transition-colors focus:outline-none focus:ring-2 focus:ring-ring ' +
+          'disabled:cursor-not-allowed disabled:opacity-50 ' +
+          (on ? 'bg-primary' : 'bg-input')
+        }
+      >
+        <span
+          aria-hidden="true"
+          className={
+            'block h-4 w-4 rounded-full bg-background shadow-sm transition-transform ' +
+            (on ? 'translate-x-4' : 'translate-x-0.5')
+          }
+        />
+      </button>
+      <label className={cx.label} htmlFor={id}>
+        {props.label}
+        {props.required ? ' *' : ''}
+      </label>
+      {props.error !== undefined ? (
+        <p id={`${id}-error`} className={cx.error} role="alert">
+          {props.error}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+const SelectWidget: Widget = (props) => {
+  const id = useId()
+  return (
+    <Shell id={id} label={props.label} required={props.required} error={props.error}>
+      <select
+        id={id}
+        name={props.name}
+        className={cx.control}
+        value={asString(props.value)}
+        onChange={(e) => props.onChange(e.target.value)}
+        disabled={props.disabled}
+        required={props.required}
+        aria-invalid={props.error !== undefined}
+        aria-describedby={describedBy(id, props.error)}
+      >
+        <option value="">—</option>
+        {(props.options ?? []).map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </Shell>
+  )
+}
+
+const RadioWidget: Widget = (props) => {
+  const id = useId()
+  return (
+    <fieldset className={cx.field} aria-invalid={props.error !== undefined}>
+      <legend className={cx.label}>
+        {props.label}
+        {props.required ? ' *' : ''}
+      </legend>
+      <div className="flex flex-col gap-1">
+        {(props.options ?? []).map((o) => {
+          const oid = `${id}-${o.value}`
+          return (
+            <span key={o.value} className="flex items-center gap-2">
+              <input
+                id={oid}
+                type="radio"
+                name={props.name}
+                value={o.value}
+                className={cx.checkbox}
+                checked={asString(props.value) === o.value}
+                onChange={() => props.onChange(o.value)}
+                disabled={props.disabled}
+              />
+              <label className="text-sm text-foreground" htmlFor={oid}>
+                {o.label}
+              </label>
+            </span>
+          )
+        })}
+      </div>
+      {props.error !== undefined ? (
+        <p id={`${id}-error`} className={cx.error} role="alert">
+          {props.error}
+        </p>
+      ) : null}
+    </fieldset>
+  )
+}
+
+const MultiSelectWidget: Widget = (props) => {
+  const id = useId()
+  const selected = Array.isArray(props.value) ? props.value.map(String) : []
+  return (
+    <Shell id={id} label={props.label} required={props.required} error={props.error}>
+      <select
+        id={id}
+        name={props.name}
+        multiple
+        className={cx.control + ' min-h-24'}
+        value={selected}
+        onChange={(e) => props.onChange(Array.from(e.target.selectedOptions, (o) => o.value))}
+        disabled={props.disabled}
+        aria-invalid={props.error !== undefined}
+        aria-describedby={describedBy(id, props.error)}
+      >
+        {(props.options ?? []).map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </Shell>
+  )
+}
+
+const FileWidget: Widget = (props) => {
+  const id = useId()
+  return (
+    <Shell id={id} label={props.label} required={props.required} error={props.error}>
+      <input
+        id={id}
+        type="file"
+        name={props.name}
+        className={
+          cx.control +
+          ' file:mr-3 file:rounded file:border-0 file:bg-primary file:px-2 file:py-1 ' +
+          'file:text-sm file:text-primary-foreground'
+        }
+        onChange={(e) => props.onChange(e.target.value)}
+        disabled={props.disabled}
+        required={props.required}
+        aria-invalid={props.error !== undefined}
+        aria-describedby={describedBy(id, props.error)}
+      />
+    </Shell>
+  )
+}
+
+/** Tailwind-styled widgets keyed by widget kind. Pass to
+ *  `<WidgetRegistryProvider widgets={shadcnWidgets}>`. Any kind not listed
+ *  here falls back to @voltro/ui's plain accessible default — today that is
+ *  only `hidden` (invisible anyway) and `custom` (the render-prop signal).
+ *  Value contracts mirror the plain defaults exactly: `daterange` and
+ *  `async-select` are styled text inputs until the framework grows richer
+ *  bindings for those kinds (same ceiling as @voltro/ui's defaults). */
+export const shadcnWidgets: WidgetRegistry = {
+  text: inputWidget('text', (s) => s),
+  number: inputWidget('number', (s) => (s === '' ? undefined : Number(s))),
+  date: inputWidget('date', (s) => s),
+  datetime: inputWidget('datetime-local', (s) => s),
+  daterange: inputWidget('text', (s) => s),
+  'async-select': inputWidget('text', (s) => s),
+  textarea: TextareaWidget,
+  checkbox: CheckboxWidget,
+  switch: SwitchWidget,
+  select: SelectWidget,
+  radio: RadioWidget,
+  'multi-select': MultiSelectWidget,
+  file: FileWidget,
+}