@monkey-mini-app/ui 0.1.0

package/dist/src/composites/date-range-picker.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { format, isSameMonth, isSameYear, type Locale } from "date-fns"
+import type { DateRange } from "react-day-picker"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+import { useDateLocale, useLabels } from "@monkey-mini-app/ui/i18n/context"
+import { Button } from "@monkey-mini-app/ui/components/button"
+import { Calendar } from "@monkey-mini-app/ui/components/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@monkey-mini-app/ui/components/popover"
+import { DateChrome } from "@monkey-mini-app/ui/composites/date-chrome"
+
+export type DateRangePickerProps = {
+  value?: DateRange
+  onChange?: (range: DateRange | undefined) => void
+  placeholder?: string
+  className?: string
+}
+
+function rangeLabel(value: DateRange, locale: Locale) {
+  const opts = { locale }
+  if (!value.from) return null
+  if (!value.to) return format(value.from, "yyyy, MMMM d", opts)
+  if (isSameYear(value.from, value.to) && isSameMonth(value.from, value.to)) {
+    return `${format(value.from, "yyyy, MMMM d", opts)}–${format(value.to, "d", opts)}`
+  }
+  if (isSameYear(value.from, value.to)) {
+    return `${format(value.from, "yyyy, MMM d", opts)} – ${format(value.to, "MMM d", opts)}`
+  }
+  return `${format(value.from, "MMM d, yyyy", opts)} – ${format(value.to, "MMM d, yyyy", opts)}`
+}
+
+/**
+ * Popover date range with month/year chrome.
+ * @when Filters needing from/to calendar days
+ * @example
+ * <DateRangePicker value={range} onChange={setRange} />
+ */
+export function DateRangePicker({
+  value,
+  onChange,
+  placeholder,
+  className,
+}: DateRangePickerProps) {
+  const t = useLabels("dateRangePicker")
+  const dateLocale = useDateLocale()
+  const text = placeholder ?? t.placeholder
+  const [month, setMonth] = React.useState(value?.from ?? new Date())
+  const label = value?.from ? rangeLabel(value, dateLocale) : text
+
+  React.useEffect(() => {
+    if (value?.from) setMonth(value.from)
+  }, [value?.from])
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            variant="secondary"
+            data-testid="date-range-picker-trigger"
+            className={cn(
+              "justify-between font-medium",
+              !value?.from && "text-muted-foreground",
+              className
+            )}
+          />
+        }
+      >
+        <span className="truncate">{label}</span>
+        <ChevronDown className="size-3.5 opacity-50" />
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-auto overflow-hidden p-0">
+        <DateChrome month={month} onMonthChange={setMonth}>
+          <Calendar
+            mode="range"
+            locale={dateLocale}
+            month={month}
+            onMonthChange={setMonth}
+            selected={value}
+            onSelect={onChange}
+            hideNavigation
+            numberOfMonths={1}
+            classNames={{ month_caption: "hidden", nav: "hidden" }}
+          />
+        </DateChrome>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/dist/src/composites/date-time-picker.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@monkey-mini-app/ui/components/button"
+import { Calendar } from "@monkey-mini-app/ui/components/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@monkey-mini-app/ui/components/popover"
+import { DateChrome } from "@monkey-mini-app/ui/composites/date-chrome"
+import { TimeWheel } from "@monkey-mini-app/ui/composites/time-picker"
+import { TimezoneSelect } from "@monkey-mini-app/ui/composites/timezone-select"
+import { useDateLocale, useLabels } from "@monkey-mini-app/ui/i18n/context"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+function merge(date: Date | undefined, hours: number, minutes: number): Date {
+  const next = new Date(date ?? new Date())
+  next.setHours(hours, minutes, 0, 0)
+  return next
+}
+
+export type DateTimePickerProps = {
+  value?: Date
+  onChange?: (date: Date | undefined) => void
+  timezone?: string
+  onTimezoneChange?: (zone: string) => void
+  placeholder?: string
+  className?: string
+}
+
+export function DateTimePicker({
+  value,
+  onChange,
+  timezone,
+  onTimezoneChange,
+  placeholder,
+  className,
+}: DateTimePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const [month, setMonth] = React.useState(value ?? new Date())
+  const hours = value?.getHours() ?? 0
+  const minutes = value?.getMinutes() ?? 0
+  const t = useLabels("dateTimePicker")
+  const dateLocale = useDateLocale()
+  const text = placeholder ?? t.placeholder
+  React.useEffect(() => {
+    if (value) setMonth(value)
+  }, [value])
+
+  return (
+    <div className="flex flex-wrap items-center gap-2" data-testid="date-time-picker">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          render={
+            <Button
+              variant="outline"
+              data-empty={!value}
+              data-testid="date-picker-trigger"
+              className={cn(
+                "w-[280px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground",
+                className
+              )}
+            />
+          }
+        >
+          <CalendarIcon />
+          {value ? format(value, "PPP p", { locale: dateLocale }) : <span>{text}</span>}
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0">
+          <div className="flex">
+            <DateChrome
+              month={month}
+              onMonthChange={setMonth}
+              onToday={() => onChange?.(merge(new Date(), hours, minutes))}
+            >
+              <Calendar
+                mode="single"
+                locale={dateLocale}
+                month={month}
+                onMonthChange={setMonth}
+                selected={value}
+                hideNavigation
+                classNames={{ month_caption: "hidden", nav: "hidden" }}
+                onSelect={(date) => onChange?.(merge(date, hours, minutes))}
+              />
+            </DateChrome>
+            <div className="flex gap-1 border-l px-2 py-2">
+              <TimeWheel
+                testId="time-hour"
+                visible={7}
+                values={Array.from({ length: 24 }, (_, i) => i)}
+                value={hours}
+                onChange={(h) => onChange?.(merge(value, h, minutes))}
+              />
+              <TimeWheel
+                testId="time-minute"
+                visible={7}
+                values={Array.from({ length: 60 }, (_, i) => i)}
+                value={minutes}
+                onChange={(m) => onChange?.(merge(value, hours, m))}
+              />
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+      {onTimezoneChange ? (
+        <TimezoneSelect value={timezone} onChange={onTimezoneChange} />
+      ) : null}
+    </div>
+  )
+}

package/dist/src/composites/date-time-range-picker.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { Label } from "@monkey-mini-app/ui/components/label"
+import { DateRangePicker } from "@monkey-mini-app/ui/composites/date-range-picker"
+import { DateTimePicker } from "@monkey-mini-app/ui/composites/date-time-picker"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+export type DateTimeRange = { start?: Date; end?: Date }
+
+export function DateTimeRangePicker({
+  value,
+  onChange,
+  allDay = false,
+}: {
+  value?: DateTimeRange
+  onChange?: (value: DateTimeRange) => void
+  allDay?: boolean
+}) {
+  const t = useLabels("dateTimeRange")
+  if (allDay) {
+    return (
+      <div data-testid="date-time-range-picker">
+        <DateRangePicker
+          value={{ from: value?.start, to: value?.end }}
+          onChange={(range) => onChange?.({ start: range?.from, end: range?.to })}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-2" data-testid="date-time-range-picker">
+      <div className="grid gap-1">
+        <Label>{t.start}</Label>
+        <DateTimePicker
+          value={value?.start}
+          onChange={(start) => onChange?.({ start, end: value?.end })}
+          className="w-full"
+        />
+      </div>
+      <div className="grid gap-1">
+        <Label>{t.end}</Label>
+        <DateTimePicker
+          value={value?.end}
+          onChange={(end) => onChange?.({ start: value?.start, end })}
+          className="w-full"
+        />
+      </div>
+    </div>
+  )
+}

package/dist/src/composites/duration-input.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import { Minus, Plus } from "lucide-react"
+
+import { Button } from "@monkey-mini-app/ui/components/button"
+import { Input } from "@monkey-mini-app/ui/components/input"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+export function parseDuration(input: string): number {
+  const hours = Number(/(\d+)\s*h/i.exec(input)?.[1] ?? 0)
+  const minutes = Number(/(\d+)\s*m/i.exec(input)?.[1] ?? 0)
+  if (!/[hm]/i.test(input) && /^\d+$/.test(input.trim())) {
+    return Number(input)
+  }
+  return hours * 60 + minutes
+}
+
+export function formatDuration(totalMinutes: number): string {
+  const hours = Math.floor(Math.max(0, totalMinutes) / 60)
+  const rest = Math.max(0, totalMinutes) % 60
+  if (hours && rest) return `${hours}h ${rest}m`
+  if (hours) return `${hours}h`
+  return `${rest}m`
+}
+
+function split(value?: string) {
+  const total = parseDuration(value ?? "0m")
+  return { hours: Math.floor(total / 60), minutes: total % 60 }
+}
+
+function Segment({
+  label,
+  value,
+  onChange,
+  min = 0,
+  max,
+}: {
+  label: string
+  value: number
+  onChange: (value: number) => void
+  min?: number
+  max?: number
+}) {
+  const t = useLabels("durationInput")
+  const clamp = (next: number) => {
+    if (max != null) next = Math.min(max, next)
+    return Math.max(min, next)
+  }
+  return (
+    <div className="flex items-center gap-1">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-xs"
+        aria-label={t.decrease(label)}
+        onClick={() => onChange(clamp(value - 1))}
+      >
+        <Minus />
+      </Button>
+      <Input
+        inputMode="numeric"
+        value={String(value)}
+        aria-label={label}
+        onChange={(event) => {
+          const next = Number(event.target.value.replace(/\D/g, "") || 0)
+          onChange(clamp(next))
+        }}
+        className="h-7 w-10 border-0 bg-transparent p-0 text-center shadow-none focus-visible:ring-0"
+      />
+      <span className="text-muted-foreground w-4 text-xs">{label}</span>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-xs"
+        aria-label={t.increase(label)}
+        onClick={() => onChange(clamp(value + 1))}
+      >
+        <Plus />
+      </Button>
+    </div>
+  )
+}
+
+export function DurationInput({
+  value,
+  onChange,
+}: {
+  value?: string
+  onChange?: (value: string, minutes: number) => void
+}) {
+  const t = useLabels("durationInput")
+  const { hours, minutes } = split(value)
+  const commit = (h: number, m: number) => {
+    let total = h * 60 + m
+    if (total < 0) total = 0
+    onChange?.(formatDuration(total), total)
+  }
+
+  return (
+    <div
+      data-testid="duration-input"
+      className="inline-flex items-center gap-1 rounded-lg border bg-background px-1 py-0.5"
+    >
+      <Segment
+        label={t.hours}
+        value={hours}
+        onChange={(h) => commit(h, minutes)}
+      />
+      <span className="text-muted-foreground/40">·</span>
+      <Segment
+        label={t.minutes}
+        value={minutes}
+        min={-1}
+        onChange={(m) => {
+          if (m >= 60) commit(hours + 1, 0)
+          else if (m < 0) commit(hours <= 0 ? 0 : hours - 1, hours <= 0 ? 0 : 59)
+          else commit(hours, m)
+        }}
+      />
+    </div>
+  )
+}

package/dist/src/composites/mini-calendar.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { Calendar } from "@monkey-mini-app/ui/components/calendar"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+export function MiniCalendar({
+  value,
+  onChange,
+  className,
+}: {
+  value?: Date
+  onChange?: (date: Date | undefined) => void
+  className?: string
+}) {
+  return (
+    <Calendar
+      mode="single"
+      selected={value}
+      onSelect={onChange}
+      data-testid="mini-calendar"
+      className={cn("rounded-xl border [--cell-size:--spacing(7)]", className)}
+    />
+  )
+}

package/dist/src/composites/number-field.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { Button } from "@monkey-mini-app/ui/components/button"
+import { Input } from "@monkey-mini-app/ui/components/input"
+import { Minus, Plus } from "lucide-react"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+export function NumberField({
+  value = 0,
+  onChange,
+  min,
+  max,
+  step = 1,
+}: {
+  value?: number
+  onChange?: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+}) {
+  const clamp = (next: number) => {
+    if (min != null) next = Math.max(min, next)
+    if (max != null) next = Math.min(max, next)
+    return next
+  }
+  const t = useLabels("numberField")
+  return (
+    <div className="flex items-center gap-1" data-testid="number-field">
+      <Button
+        variant="outline"
+        size="icon-xs"
+        aria-label={t.decrease}
+        onClick={() => onChange?.(clamp(value - step))}
+      >
+        <Minus />
+      </Button>
+      <Input
+        type="number"
+        value={value}
+        onChange={(event) => onChange?.(clamp(Number(event.target.value)))}
+        className="w-20 text-center"
+      />
+      <Button
+        variant="outline"
+        size="icon-xs"
+        aria-label={t.increase}
+        onClick={() => onChange?.(clamp(value + step))}
+      >
+        <Plus />
+      </Button>
+    </div>
+  )
+}

package/dist/src/composites/password-field.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import { Eye, EyeOff } from "lucide-react"
+
+import { Button } from "@monkey-mini-app/ui/components/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@monkey-mini-app/ui/components/input-group"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+export function PasswordField({
+  value,
+  onChange,
+}: {
+  value?: string
+  onChange?: (value: string) => void
+}) {
+  const t = useLabels("passwordField")
+  const [visible, setVisible] = React.useState(false)
+  return (
+    <InputGroup data-testid="password-field">
+      <InputGroupInput
+        type={visible ? "text" : "password"}
+        value={value ?? ""}
+        onChange={(event) => onChange?.(event.target.value)}
+        autoComplete="current-password"
+      />
+      <InputGroupAddon align="inline-end">
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          type="button"
+          aria-label={visible ? t.hide : t.show}
+          onClick={() => setVisible((v) => !v)}
+        >
+          {visible ? <EyeOff /> : <Eye />}
+        </Button>
+      </InputGroupAddon>
+    </InputGroup>
+  )
+}

package/dist/src/composites/phone-input.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { Input } from "@monkey-mini-app/ui/components/input"
+
+export function PhoneInput({
+  value,
+  onChange,
+}: {
+  value?: string
+  onChange?: (value: string) => void
+}) {
+  return (
+    <Input
+      data-testid="phone-input"
+      type="tel"
+      inputMode="tel"
+      placeholder="+86 138 0000 0000"
+      value={value ?? ""}
+      onChange={(event) => onChange?.(event.target.value)}
+    />
+  )
+}

package/dist/src/composites/rating.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { Star } from "lucide-react"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+export function Rating({
+  value = 0,
+  onChange,
+  max = 5,
+}: {
+  value?: number
+  onChange?: (value: number) => void
+  max?: number
+}) {
+  return (
+    <div className="flex items-center gap-0.5" data-testid="rating">
+      {Array.from({ length: max }, (_, index) => {
+        const score = index + 1
+        return (
+          <button
+            key={score}
+            type="button"
+            aria-label={`${score} star`}
+            onClick={() => onChange?.(score)}
+            className="text-muted-foreground hover:text-foreground"
+          >
+            <Star
+              className={cn(
+                "size-4",
+                score <= value && "fill-amber-400 text-amber-400"
+              )}
+            />
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/dist/src/composites/relative-date-picker.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { subDays } from "date-fns"
+import type { DateRange } from "react-day-picker"
+
+import { Button } from "@monkey-mini-app/ui/components/button"
+import { DateRangePicker } from "@monkey-mini-app/ui/composites/date-range-picker"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+export type RelativePreset = "today" | "7d" | "30d" | "sprint" | "custom"
+
+function rangeFor(id: RelativePreset): DateRange | undefined {
+  const now = new Date()
+  if (id === "today") return { from: now, to: now }
+  if (id === "7d") return { from: subDays(now, 6), to: now }
+  if (id === "30d") return { from: subDays(now, 29), to: now }
+  if (id === "sprint") return { from: subDays(now, 13), to: now }
+  return undefined
+}
+
+export function RelativeDatePicker({
+  preset = "7d",
+  value,
+  onPresetChange,
+  onChange,
+}: {
+  preset?: RelativePreset
+  value?: DateRange
+  onPresetChange?: (preset: RelativePreset) => void
+  onChange?: (range: DateRange | undefined) => void
+}) {
+  const t = useLabels("relativeDate")
+  const presets: { id: RelativePreset; label: string }[] = [
+    { id: "today", label: t.today },
+    { id: "7d", label: t.last7d },
+    { id: "30d", label: t.last30d },
+    { id: "sprint", label: t.sprint },
+    { id: "custom", label: t.custom },
+  ]
+  return (
+    <div className="flex flex-col gap-2" data-testid="relative-date-picker">
+      <div className="flex flex-wrap gap-1">
+        {presets.map((item) => (
+          <Button
+            key={item.id}
+            size="sm"
+            variant={preset === item.id ? "default" : "outline"}
+            onClick={() => {
+              onPresetChange?.(item.id)
+              if (item.id !== "custom") onChange?.(rangeFor(item.id))
+            }}
+          >
+            {item.label}
+          </Button>
+        ))}
+      </div>
+      {preset === "custom" ? (
+        <DateRangePicker value={value} onChange={onChange} />
+      ) : null}
+    </div>
+  )
+}

package/dist/src/composites/search-input.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { Search } from "lucide-react"
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@monkey-mini-app/ui/components/input-group"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+export function SearchInput({
+  value,
+  onChange,
+  onDebouncedChange,
+  delay = 250,
+  placeholder,
+}: {
+  value?: string
+  onChange?: (value: string) => void
+  onDebouncedChange?: (value: string) => void
+  delay?: number
+  placeholder?: string
+}) {
+  const t = useLabels("searchInput")
+  const [inner, setInner] = React.useState(value ?? "")
+  React.useEffect(() => setInner(value ?? ""), [value])
+  React.useEffect(() => {
+    const id = window.setTimeout(() => onDebouncedChange?.(inner), delay)
+    return () => window.clearTimeout(id)
+  }, [inner, delay, onDebouncedChange])
+
+  return (
+    <InputGroup className="max-w-sm" data-testid="search-input">
+      <InputGroupAddon>
+        <Search className="size-3.5" />
+      </InputGroupAddon>
+      <InputGroupInput
+        value={inner}
+        placeholder={placeholder ?? t.placeholder}
+        onChange={(event) => {
+          setInner(event.target.value)
+          onChange?.(event.target.value)
+        }}
+      />
+    </InputGroup>
+  )
+}