@pilotiq/pilotiq 0.24.1 → 0.24.2

package/src/react/fields/CheckboxInput.tsx

@@ -1,39 +0,0 @@
-import React, { useState } from 'react'
-import { useFieldState } from '../FormStateContext.js'
-import { Checkbox } from '../ui/checkbox.js'
-
-export function CheckboxInput({
-  name, defaultChecked, disabled, label,
-}: {
-  name:           string
-  defaultChecked: boolean
-  disabled:       boolean
-  /** Inline label rendered next to the box. Distinct from the field-shell label. */
-  label?:         string
-}): React.ReactElement {
-  const fs = useFieldState(name)
-  const [localChecked, setLocalChecked] = useState(defaultChecked)
-  const checked = fs.controlled
-    ? (fs.value === true || fs.value === 'true' || fs.value === 1 || fs.value === '1')
-    : localChecked
-  const onChange = (next: boolean): void => {
-    if (fs.controlled) { fs.setValue(next); fs.triggerLive(next) }
-    else { setLocalChecked(next); fs.triggerLive(next) }
-  }
-  return (
-    <div className="flex items-center gap-2">
-      <input type="hidden" name={name} value={checked ? 'true' : 'false'} />
-      <Checkbox
-        id={name}
-        checked={checked}
-        onCheckedChange={onChange}
-        disabled={disabled}
-      />
-      {label && (
-        <label htmlFor={name} className="text-sm leading-none cursor-pointer">
-          {label}
-        </label>
-      )}
-    </div>
-  )
-}

package/src/react/fields/CheckboxListInput.tsx

@@ -1,102 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from 'react'
-import { useFieldState, FormIdContext } from '../FormStateContext.js'
-import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
-import { Checkbox } from '../ui/checkbox.js'
-
-/**
- * Multi-choice. Value is `string[]`. Renders as either a vertical
- * stack (columns=1, default) or a CSS grid (columns=2/3/…). On submit,
- * each checked option contributes a `name=value` body entry which the
- * server normalizes to a string[] in `coerceFormValues`.
- */
-export function CheckboxListInput({
-  name, defaultValue, disabled, options, columns,
-}: {
-  name:         string
-  defaultValue: unknown
-  disabled:     boolean
-  options:      Array<{ value: string; label: string; disabled?: boolean }>
-  columns:      number
-}): React.ReactElement {
-  const fs = useFieldState(name)
-
-  // Normalize the initial value: string[] passes through; null/undefined → [];
-  // single string → [string]. Defensive against record shapes that store
-  // checkbox lists as JSON strings.
-  const toArray = (v: unknown): string[] => {
-    if (v === undefined || v === null) return []
-    if (Array.isArray(v)) return v.map(String)
-    return [String(v)]
-  }
-
-  const [localValue, setLocalValue] = useState<string[]>(toArray(defaultValue))
-  const value = fs.controlled ? toArray(fs.value) : localValue
-
-  const onToggle = (optValue: string, checked: boolean): void => {
-    const next = checked
-      ? Array.from(new Set([...value, optValue]))
-      : value.filter(v => v !== optValue)
-    if (fs.controlled) { fs.setValue(next); fs.triggerLive(next) }
-    else { setLocalValue(next); fs.triggerLive(next) }
-  }
-
-  // Cross-tree applier — the visible checkboxes are React-controlled
-  // (Base UI `<Checkbox checked={…}>`); the per-option hidden mirrors
-  // share the `[name]` attribute, so FieldShell's generic applier would
-  // overwrite every one of them with the suggestion's stringified value
-  // instead of replacing the array. FieldShell skips its generic
-  // registration for fieldType === 'checkboxList'.
-  const fsRef = useRef(fs)
-  useEffect(() => { fsRef.current = fs }, [fs])
-  const formId = useContext(FormIdContext) || undefined
-  useEffect(() => {
-    if (name.includes('.')) return
-    const applier: PendingSuggestionApplier = (suggestion) => {
-      const next = toArray(suggestion.suggestedValue)
-      const cur = fsRef.current
-      if (cur.controlled) { cur.setValue(next); cur.triggerLive(next) }
-      else { setLocalValue(next); cur.triggerLive(next) }
-    }
-    return registerPendingSuggestionApplier(formId, name, applier)
-  }, [name, formId])
-
-  const layout = columns > 1
-    ? `grid grid-cols-${columns} gap-2`
-    : 'flex flex-col gap-2'
-
-  return (
-    <div className={layout}>
-      {/* Mirror the array as repeated hidden inputs for native form submit. */}
-      {value.map((v, i) => (
-        <input key={`hidden-${i}`} type="hidden" name={name} value={v} />
-      ))}
-      {options.map((o) => {
-        const id = `${name}-${o.value}`
-        const checked = value.includes(o.value)
-        // Per-option disabled (from `disableOptionsWhenSelectedInSiblingRepeaterItems`)
-        // greys out unchecked taken values but keeps already-checked ones
-        // editable so the user can uncheck their own pick — otherwise a row
-        // would be stuck holding a value it can't release.
-        const optDisabled = disabled || (Boolean(o.disabled) && !checked)
-        return (
-          <label
-            key={o.value}
-            htmlFor={id}
-            className={
-              'flex items-center gap-2 text-sm ' +
-              (optDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer')
-            }
-          >
-            <Checkbox
-              id={id}
-              checked={checked}
-              onCheckedChange={(c: boolean) => onToggle(o.value, c)}
-              disabled={optDisabled}
-            />
-            <span>{o.label}</span>
-          </label>
-        )
-      })}
-    </div>
-  )
-}

package/src/react/fields/ColorInput.tsx

@@ -1,71 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from 'react'
-import { useFieldState, FormIdContext } from '../FormStateContext.js'
-import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
-import { Input } from '../ui/input.js'
-
-/**
- * Hex color input. Renders the native `<input type="color">` next to
- * a text mirror so users can paste literal hex codes. Both inputs
- * stay in sync via the shared value state.
- */
-export function ColorInput({
-  name, defaultValue, disabled,
-}: {
-  name:         string
-  defaultValue: unknown
-  disabled:     boolean
-}): React.ReactElement {
-  const fs = useFieldState(name)
-  const initial = typeof defaultValue === 'string' && defaultValue ? defaultValue : '#000000'
-  const [localValue, setLocalValue] = useState<string>(initial)
-
-  const value = fs.controlled
-    ? (typeof fs.value === 'string' && fs.value ? fs.value : '#000000')
-    : localValue
-
-  const setValue = (v: string): void => {
-    if (fs.controlled) { fs.setValue(v); fs.triggerLive(v) }
-    else { setLocalValue(v); fs.triggerLive(v) }
-  }
-
-  // Cross-tree applier — color/text inputs are React-controlled (`value`,
-  // not `defaultValue`), so a DOM-write to the hidden mirror wouldn't
-  // reach them. FieldShell skips its generic registration for
-  // fieldType === 'color'.
-  const fsRef = useRef(fs)
-  useEffect(() => { fsRef.current = fs }, [fs])
-  const formId = useContext(FormIdContext) || undefined
-  useEffect(() => {
-    if (name.includes('.')) return
-    const applier: PendingSuggestionApplier = (suggestion) => {
-      const raw = suggestion.suggestedValue
-      const next = typeof raw === 'string' && raw ? raw : '#000000'
-      const cur = fsRef.current
-      if (cur.controlled) { cur.setValue(next); cur.triggerLive(next) }
-      else { setLocalValue(next); cur.triggerLive(next) }
-    }
-    return registerPendingSuggestionApplier(formId, name, applier)
-  }, [name, formId])
-
-  return (
-    <div className="flex items-center gap-2">
-      <input type="hidden" name={name} value={value} />
-      <input
-        type="color"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        disabled={disabled}
-        className="h-9 w-12 cursor-pointer rounded-md border border-input bg-transparent"
-      />
-      <Input
-        type="text"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        disabled={disabled}
-        placeholder="#rrggbb"
-        className="font-mono"
-        maxLength={7}
-      />
-    </div>
-  )
-}

package/src/react/fields/DateFieldInput.tsx

@@ -1,70 +0,0 @@
-import React, { useState } from 'react'
-import { CalendarIcon } from 'lucide-react'
-import { useFieldState } from '../FormStateContext.js'
-import { Calendar } from '../ui/calendar.js'
-import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover.js'
-
-export function DateFieldInput({
-  name, defaultValue, disabled, placeholder,
-}: {
-  name:         string
-  defaultValue: string | undefined
-  disabled:     boolean
-  placeholder:  string | undefined
-}): React.ReactElement {
-  const fs = useFieldState(name)
-  const initial = defaultValue ? new Date(defaultValue) : undefined
-  const [localDate, setLocalDate] = useState<Date | undefined>(
-    initial && !isNaN(initial.getTime()) ? initial : undefined,
-  )
-  let date: Date | undefined
-  if (fs.controlled) {
-    const ctxStr = fs.value !== undefined && fs.value !== null && fs.value !== '' ? String(fs.value) : ''
-    if (ctxStr) {
-      const parsed = new Date(ctxStr)
-      date = isNaN(parsed.getTime()) ? undefined : parsed
-    }
-  } else {
-    date = localDate
-  }
-  const onSelect = (next: Date | undefined): void => {
-    const iso = next ? next.toISOString().slice(0, 10) : ''
-    if (fs.controlled) {
-      fs.setValue(iso)
-      fs.triggerLive(iso)
-    } else {
-      setLocalDate(next)
-      fs.triggerLive(iso)
-    }
-  }
-  const formatted = date ? date.toISOString().slice(0, 10) : ''
-  const display   = date
-    ? date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
-    : (placeholder ?? 'Pick a date')
-
-  return (
-    <>
-      <input type="hidden" name={name} value={formatted} />
-      <Popover>
-        <PopoverTrigger
-          render={
-            <button
-              type="button"
-              id={name}
-              disabled={disabled}
-              className={`flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 ${
-                date ? 'text-foreground' : 'text-muted-foreground'
-              }`}
-            >
-              <span>{display}</span>
-              <CalendarIcon className="size-4 opacity-60" />
-            </button>
-          }
-        />
-        <PopoverContent className="w-auto p-0" align="start">
-          <Calendar mode="single" selected={date} onSelect={onSelect} initialFocus />
-        </PopoverContent>
-      </Popover>
-    </>
-  )
-}

package/src/react/fields/DateTimeInput.tsx

@@ -1,62 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from 'react'
-import { useFieldState, FormIdContext } from '../FormStateContext.js'
-import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
-import { Input } from '../ui/input.js'
-
-/**
- * Native `<input type="datetime-local">` — adequate for v1. Same dual
- * controlled/uncontrolled handling as the other field inputs. Coercion
- * downstream parses the `YYYY-MM-DDTHH:mm` shape into a `Date`.
- */
-export function DateTimeInput({
-  name, defaultValue, disabled, placeholder,
-}: {
-  name:         string
-  defaultValue: string | undefined
-  disabled:     boolean
-  placeholder:  string | undefined
-}): React.ReactElement {
-  const fs = useFieldState(name)
-
-  const initial = defaultValue ?? ''
-  const [localValue, setLocalValue] = useState<string>(initial)
-  const value = fs.controlled
-    ? (fs.value !== undefined && fs.value !== null && fs.value !== '' ? String(fs.value) : '')
-    : localValue
-
-  const setValue = (v: string): void => {
-    if (fs.controlled) { fs.setValue(v); fs.triggerLive(v) }
-    else { setLocalValue(v); fs.triggerLive(v) }
-  }
-
-  // Cross-tree applier — the visible `<input type="datetime-local">` is
-  // React-controlled (`value`, not `defaultValue`), so a DOM-write to
-  // it bypasses the controller. FieldShell skips its generic
-  // registration for fieldType === 'dateTime'.
-  const fsRef = useRef(fs)
-  useEffect(() => { fsRef.current = fs }, [fs])
-  const formId = useContext(FormIdContext) || undefined
-  useEffect(() => {
-    if (name.includes('.')) return
-    const applier: PendingSuggestionApplier = (suggestion) => {
-      const v = suggestion.suggestedValue
-      const next = v == null || v === '' ? '' : String(v)
-      const cur = fsRef.current
-      if (cur.controlled) { cur.setValue(next); cur.triggerLive(next) }
-      else { setLocalValue(next); cur.triggerLive(next) }
-    }
-    return registerPendingSuggestionApplier(formId, name, applier)
-  }, [name, formId])
-
-  return (
-    <Input
-      type="datetime-local"
-      id={name}
-      name={name}
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-      disabled={disabled}
-      placeholder={placeholder}
-    />
-  )
-}