@freighttech/ui 0.13.18

package/src/backend/inputs/TagsInput.tsx

@@ -0,0 +1,297 @@
+"use client"
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '../../primitives/button'
+import { IconButton } from '../../primitives/icon-button'
+
+export type TagsInputOption = {
+  value: string
+  label: string
+  description?: string | null
+}
+
+export type TagsInputProps = {
+  value: string[]
+  onChange: (next: string[]) => void
+  placeholder?: string
+  suggestions?: Array<string | TagsInputOption>
+  loadSuggestions?: (query?: string) => Promise<Array<string | TagsInputOption>>
+  selectedOptions?: TagsInputOption[]
+  resolveLabel?: (value: string) => string
+  resolveDescription?: (value: string) => string | null | undefined
+  autoFocus?: boolean
+  disabled?: boolean
+  allowCustomValues?: boolean
+  showSuggestionsOnFocus?: boolean
+}
+
+function normalizeOptions(input?: Array<string | TagsInputOption>): TagsInputOption[] {
+  if (!Array.isArray(input)) return []
+  return input
+    .map((option) => {
+      if (typeof option === 'string') {
+        const trimmed = option.trim()
+        if (!trimmed) return null
+        return { value: trimmed, label: trimmed }
+      }
+      const value = typeof option.value === 'string' ? option.value.trim() : ''
+      if (!value) return null
+      return {
+        value,
+        label: option.label?.trim() || value,
+        description: option.description ?? null,
+      }
+    })
+    .filter((option): option is TagsInputOption => !!option)
+}
+
+export function TagsInput({
+  value,
+  onChange,
+  placeholder,
+  suggestions,
+  loadSuggestions,
+  selectedOptions,
+  resolveLabel,
+  resolveDescription,
+  autoFocus,
+  disabled = false,
+  allowCustomValues = true,
+  showSuggestionsOnFocus = true,
+}: TagsInputProps) {
+  const t = useT()
+  const [input, setInput] = React.useState('')
+  const [asyncOptions, setAsyncOptions] = React.useState<TagsInputOption[]>([])
+  const [loading, setLoading] = React.useState(false)
+  const [touched, setTouched] = React.useState(false)
+  const suppressBlurCommitRef = React.useRef(false)
+  const valueRef = React.useRef(value)
+
+  React.useEffect(() => {
+    valueRef.current = value
+  }, [value])
+
+  const staticOptions = React.useMemo(() => normalizeOptions(suggestions), [suggestions])
+  const selectedOptionList = React.useMemo(
+    () => normalizeOptions(selectedOptions),
+    [selectedOptions]
+  )
+
+  const optionMap = React.useMemo(() => {
+    const map = new Map<string, TagsInputOption>()
+    const register = (option: TagsInputOption) => {
+      if (!map.has(option.value)) {
+        map.set(option.value, option)
+      }
+    }
+    staticOptions.forEach(register)
+    asyncOptions.forEach(register)
+    selectedOptionList.forEach(register)
+    value.forEach((val) => {
+      if (map.has(val)) return
+      map.set(val, {
+        value: val,
+        label: resolveLabel?.(val) ?? val,
+        description: resolveDescription?.(val) ?? null,
+      })
+    })
+    return map
+  }, [asyncOptions, resolveDescription, resolveLabel, selectedOptionList, staticOptions, value])
+
+  const availableOptions = React.useMemo(() => {
+    return Array.from(optionMap.values()).filter((option) => !value.includes(option.value))
+  }, [optionMap, value])
+
+  const filteredSuggestions = React.useMemo(() => {
+    const query = input.toLowerCase().trim()
+    if (!query) return availableOptions.slice(0, 8)
+    return availableOptions.filter((option) => {
+      const labelMatch = option.label.toLowerCase().includes(query)
+      const descMatch = option.description?.toLowerCase().includes(query)
+      return labelMatch || Boolean(descMatch)
+    })
+  }, [availableOptions, input])
+
+  React.useEffect(() => {
+    if (!loadSuggestions || !touched || disabled) return
+    const query = input.trim()
+    let cancelled = false
+    const handle = window.setTimeout(async () => {
+      setLoading(true)
+      try {
+        const items = await loadSuggestions(query)
+        if (!cancelled) {
+          setAsyncOptions(normalizeOptions(items))
+        }
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }, 200)
+    return () => {
+      cancelled = true
+      window.clearTimeout(handle)
+    }
+  }, [disabled, input, loadSuggestions, touched])
+
+  const addValue = React.useCallback(
+    (nextValue: string) => {
+      if (disabled) return
+      const trimmed = nextValue.trim()
+      if (!trimmed) return
+      const currentValue = valueRef.current
+      if (currentValue.includes(trimmed)) return
+      const next = [...currentValue, trimmed]
+      valueRef.current = next
+      onChange(next)
+    },
+    [disabled, onChange]
+  )
+
+  const findOptionForInput = React.useCallback(
+    (raw: string): TagsInputOption | null => {
+      const query = raw.trim().toLowerCase()
+      if (!query) return null
+      for (const option of optionMap.values()) {
+        if (option.value === raw.trim()) return option
+        if (option.label.toLowerCase() === query) return option
+      }
+      return null
+    },
+    [optionMap]
+  )
+
+  const addTag = React.useCallback(
+    (raw: string) => {
+      if (disabled) return
+      const option = findOptionForInput(raw)
+      if (option) {
+        addValue(option.value)
+        return
+      }
+      if (!allowCustomValues) return
+      addValue(raw)
+    },
+    [addValue, allowCustomValues, disabled, findOptionForInput]
+  )
+
+  const removeTag = React.useCallback(
+    (tag: string) => {
+      if (disabled) return
+      const next = valueRef.current.filter((candidate) => candidate !== tag)
+      valueRef.current = next
+      onChange(next)
+    },
+    [disabled, onChange]
+  )
+
+  return (
+    <div
+      className={[
+        'w-full rounded border px-2 py-1',
+        disabled ? 'bg-muted text-muted-foreground/80 cursor-not-allowed' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      aria-disabled={disabled || undefined}
+    >
+      <div className="flex flex-wrap gap-1">
+        {value.map((tag) => {
+          const option = optionMap.get(tag)
+          const label = option?.label ?? tag
+          const description = option?.description
+          return (
+            <span key={tag} className="inline-flex items-center gap-2 rounded-sm bg-muted px-2 py-0.5 text-xs">
+              <span className="flex flex-col items-start leading-tight">
+                <span className="whitespace-nowrap">{label}</span>
+                {description ? (
+                  <span className="text-[10px] text-muted-foreground">{description}</span>
+                ) : null}
+              </span>
+              <IconButton
+                type="button"
+                variant="ghost"
+                size="xs"
+                className="opacity-60 hover:opacity-100"
+                onClick={() => removeTag(tag)}
+                disabled={disabled}
+              >
+                ×
+              </IconButton>
+            </span>
+          )
+        })}
+        <input
+          className="flex-1 min-w-[80px] sm:min-w-[120px] border-0 py-1 text-sm outline-none disabled:bg-transparent"
+          value={input}
+          placeholder={placeholder || t('ui.inputs.tagsInput.placeholder', 'Add tag and press Enter')}
+          autoFocus={autoFocus}
+          data-crud-focus-target=""
+          disabled={disabled}
+          onFocus={() => {
+            if (showSuggestionsOnFocus) {
+              setTouched(true)
+            }
+          }}
+          onMouseDown={() => {
+            setTouched(true)
+          }}
+          onChange={(event) => {
+            setTouched(true)
+            setInput(event.target.value)
+          }}
+          onKeyDown={(event) => {
+            if (disabled) return
+            if (event.key === 'Enter' || event.key === ',') {
+              event.preventDefault()
+              addTag(input)
+              setInput('')
+            } else if (event.key === 'Backspace' && input === '' && value.length > 0) {
+              removeTag(value[value.length - 1])
+            }
+          }}
+          onBlur={() => {
+            if (disabled) return
+            if (suppressBlurCommitRef.current) {
+              suppressBlurCommitRef.current = false
+              setInput('')
+              return
+            }
+            addTag(input)
+            setInput('')
+          }}
+        />
+        {loading && touched ? (
+          <div className="basis-full mt-1 text-xs text-muted-foreground">Loading suggestions…</div>
+        ) : null}
+        {!loading && filteredSuggestions.length ? (
+          <div className="basis-full mt-1 flex flex-col gap-1">
+            {filteredSuggestions.map((option) => (
+              <Button
+                key={option.value}
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="w-full justify-start font-normal flex flex-col items-start text-xs px-1.5 py-1"
+                onMouseDown={(event) => {
+                  suppressBlurCommitRef.current = true
+                  event.preventDefault()
+                }}
+                onClick={() => {
+                  suppressBlurCommitRef.current = false
+                  addValue(option.value)
+                  setInput('')
+                }}
+              >
+                <span>{option.label}</span>
+                {option.description ? (
+                  <span className="text-[10px] text-muted-foreground">{option.description}</span>
+                ) : null}
+              </Button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/backend/inputs/TimeInput.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type TimeInputProps = {
+  value?: string | null
+  onChange: (time: string) => void
+  disabled?: boolean
+  className?: string
+  minuteStep?: number
+  hourLabel?: string
+  minuteLabel?: string
+}
+
+function padTwo(n: number): string {
+  return String(n).padStart(2, '0')
+}
+
+function parseTime(value: string | null | undefined): { hour: number; minute: number } {
+  if (!value) return { hour: 0, minute: 0 }
+  const parts = value.split(':')
+  const hour = parseInt(parts[0] ?? '0', 10)
+  const minute = parseInt(parts[1] ?? '0', 10)
+  return {
+    hour: isNaN(hour) ? 0 : Math.max(0, Math.min(23, hour)),
+    minute: isNaN(minute) ? 0 : Math.max(0, Math.min(59, minute)),
+  }
+}
+
+function snapMinute(minute: number, step: number): number {
+  if (step <= 1) return minute
+  return Math.round(minute / step) * step % 60
+}
+
+export function TimeInput({
+  value,
+  onChange,
+  disabled = false,
+  className,
+  minuteStep = 1,
+  hourLabel: hourLabelProp,
+  minuteLabel: minuteLabelProp,
+}: TimeInputProps) {
+  const t = useT()
+  const hourLabel = hourLabelProp ?? t('ui.timePicker.hourLabel', 'Hour')
+  const minuteLabel = minuteLabelProp ?? t('ui.timePicker.minuteLabel', 'Minute')
+
+  const { hour, minute } = parseTime(value)
+
+  const emitChange = React.useCallback(
+    (nextHour: number, nextMinute: number) => {
+      onChange(`${padTwo(nextHour)}:${padTwo(nextMinute)}`)
+    },
+    [onChange]
+  )
+
+  const handleHourKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (disabled) return
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        emitChange((hour + 1) % 24, minute)
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        emitChange((hour + 23) % 24, minute)
+      }
+    },
+    [disabled, emitChange, hour, minute]
+  )
+
+  const handleMinuteKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (disabled) return
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        const step = minuteStep > 1 ? minuteStep : 1
+        emitChange(hour, (minute + step) % 60)
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        const step = minuteStep > 1 ? minuteStep : 1
+        emitChange(hour, (minute + 60 - step) % 60)
+      }
+    },
+    [disabled, emitChange, hour, minute, minuteStep]
+  )
+
+  const handleHourChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (disabled) return
+      const raw = parseInt(e.target.value, 10)
+      if (isNaN(raw)) return
+      emitChange(Math.max(0, Math.min(23, raw)), minute)
+    },
+    [disabled, emitChange, minute]
+  )
+
+  const handleMinuteChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (disabled) return
+      const raw = parseInt(e.target.value, 10)
+      if (isNaN(raw)) return
+      const snapped = minuteStep > 1 ? snapMinute(raw, minuteStep) : Math.max(0, Math.min(59, raw))
+      emitChange(hour, snapped)
+    },
+    [disabled, emitChange, hour, minuteStep]
+  )
+
+  const inputClass = cn(
+    'w-14 h-9 rounded border text-center text-sm tabular-nums',
+    'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
+    disabled && 'bg-muted text-muted-foreground cursor-not-allowed',
+    'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed'
+  )
+
+  return (
+    <div className={cn('flex items-center gap-1', className)}>
+      <input
+        type="number"
+        min={0}
+        max={23}
+        value={padTwo(hour)}
+        onChange={handleHourChange}
+        onKeyDown={handleHourKeyDown}
+        disabled={disabled}
+        aria-label={hourLabel}
+        data-crud-focus-target=""
+        className={inputClass}
+      />
+      <span className="text-sm font-medium select-none">:</span>
+      <input
+        type="number"
+        min={0}
+        max={59}
+        step={minuteStep}
+        value={padTwo(minute)}
+        onChange={handleMinuteChange}
+        onKeyDown={handleMinuteKeyDown}
+        disabled={disabled}
+        aria-label={minuteLabel}
+        className={inputClass}
+      />
+    </div>
+  )
+}

package/src/backend/inputs/TimePicker.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import * as React from 'react'
+import { ClockIcon } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover'
+import { TimeInput } from './TimeInput'
+
+export type TimePickerProps = {
+  value?: string | null
+  onChange: (time: string | null) => void
+  placeholder?: string
+  disabled?: boolean
+  readOnly?: boolean
+  className?: string
+  minuteStep?: number
+  showNowButton?: boolean
+  showClearButton?: boolean
+}
+
+function currentHHMM(): string {
+  const now = new Date()
+  const hour = String(now.getHours()).padStart(2, '0')
+  const minute = String(now.getMinutes()).padStart(2, '0')
+  return `${hour}:${minute}`
+}
+
+export function TimePicker({
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+  readOnly = false,
+  className,
+  minuteStep = 1,
+  showNowButton = true,
+  showClearButton = true,
+}: TimePickerProps) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+
+  const placeholderText = placeholder ?? t('ui.timePicker.placeholder', 'Pick a time')
+  const nowText = t('ui.timePicker.nowButton', 'Now')
+  const clearText = t('ui.timePicker.clearButton', 'Clear')
+
+  const handleTimeChange = React.useCallback(
+    (time: string) => {
+      onChange(time)
+    },
+    [onChange]
+  )
+
+  const handleNow = React.useCallback(() => {
+    onChange(currentHHMM())
+    setOpen(false)
+  }, [onChange])
+
+  const handleClear = React.useCallback(() => {
+    onChange(null)
+    setOpen(false)
+  }, [onChange])
+
+  const isInteractive = !disabled && !readOnly
+
+  return (
+    <Popover open={open} onOpenChange={isInteractive ? setOpen : undefined}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          data-crud-focus-target=""
+          disabled={disabled}
+          aria-haspopup="dialog"
+          className={cn(
+            'w-full h-9 flex items-center gap-2 rounded border px-3 text-sm text-left',
+            'bg-background transition-colors',
+            'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
+            'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed',
+            readOnly && 'cursor-default opacity-70',
+            !value && 'text-muted-foreground',
+            className
+          )}
+          onClick={isInteractive ? undefined : (e) => e.preventDefault()}
+        >
+          <ClockIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
+          <span className="flex-1 truncate">{value ?? placeholderText}</span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="p-3 w-auto min-w-[180px]">
+        <TimeInput
+          value={value}
+          onChange={handleTimeChange}
+          minuteStep={minuteStep}
+        />
+        {(showNowButton || showClearButton) && (
+          <div className="flex items-center justify-between gap-2 mt-3 pt-2 border-t">
+            {showNowButton && (
+              <button
+                type="button"
+                onClick={handleNow}
+                className="text-sm text-primary hover:underline focus:outline-none"
+              >
+                {nowText}
+              </button>
+            )}
+            {showClearButton && (
+              <button
+                type="button"
+                onClick={handleClear}
+                className="text-sm text-muted-foreground hover:text-foreground hover:underline focus:outline-none ml-auto"
+              >
+                {clearText}
+              </button>
+            )}
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/backend/inputs/__tests__/DatePicker.test.tsx

@@ -0,0 +1,76 @@
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+}))
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+}))
+
+import * as React from 'react'
+import { renderToString } from 'react-dom/server'
+import { DatePicker } from '../DatePicker'
+
+// Note: Tests for Today/Clear button visibility require opening the Radix Popover
+// (portal content is not rendered by renderToString when popover is closed).
+// Those tests are covered by integration tests (TC-DTP-004) post-migration.
+
+function render(element: React.ReactElement): string {
+  return renderToString(element)
+}
+
+describe('DatePicker SSR render', () => {
+  it('shows placeholder text when no value', () => {
+    const html = render(<DatePicker onChange={jest.fn()} placeholder="Pick a date" />)
+    expect(html).toContain('Pick a date')
+  })
+
+  it('shows formatted date in trigger when value is provided', () => {
+    const date = new Date(2026, 1, 22) // Feb 22, 2026
+    const html = render(<DatePicker value={date} onChange={jest.fn()} displayFormat="yyyy-MM-dd" />)
+    expect(html).toContain('2026-02-22')
+  })
+
+  it('renders trigger button with aria-haspopup="dialog"', () => {
+    const html = render(<DatePicker onChange={jest.fn()} />)
+    expect(html).toContain('aria-haspopup="dialog"')
+  })
+
+  it('renders trigger with data-crud-focus-target for CrudForm auto-focus', () => {
+    const html = render(<DatePicker onChange={jest.fn()} />)
+    expect(html).toContain('data-crud-focus-target')
+  })
+
+  it('renders disabled trigger when disabled prop is true', () => {
+    const html = render(<DatePicker onChange={jest.fn()} disabled />)
+    expect(html).toContain('disabled')
+  })
+
+  it('does not show date value when value is null', () => {
+    const html = render(<DatePicker value={null} onChange={jest.fn()} placeholder="Pick a date" />)
+    expect(html).toContain('Pick a date')
+  })
+})
+
+describe('DatePicker — day selection midnight contract', () => {
+  it('selected day has time set to local midnight (00:00:00.000)', () => {
+    // Mirrors handleDaySelect logic: new Date(day).setHours(0, 0, 0, 0)
+    const day = new Date(2026, 1, 22, 14, 30, 15, 500)
+    const result = new Date(day)
+    result.setHours(0, 0, 0, 0)
+    expect(result.getHours()).toBe(0)
+    expect(result.getMinutes()).toBe(0)
+    expect(result.getSeconds()).toBe(0)
+    expect(result.getMilliseconds()).toBe(0)
+    expect(result.getDate()).toBe(22)
+    expect(result.getMonth()).toBe(1)
+  })
+
+  it('YYYY-MM-DD string formatted via date-fns roundtrips via parseISO without UTC shift', () => {
+    const { format, parseISO } = require('date-fns')
+    const original = new Date(2026, 1, 22) // local Feb 22
+    const str = format(original, 'yyyy-MM-dd')
+    const restored = parseISO(str) // parseISO treats YYYY-MM-DD as local midnight
+    expect(restored.getFullYear()).toBe(2026)
+    expect(restored.getMonth()).toBe(1)
+    expect(restored.getDate()).toBe(22)
+  })
+})