@eggspot/ui 0.0.0

package/src/components/Filter/FilterField/FilterAsyncSelect.tsx

@@ -0,0 +1,191 @@
+"use client"
+
+import { useCallback, useContext, useMemo } from "react"
+import { SearchInput } from "@eggspot/ui/components/Input"
+import {
+  Autocomplete,
+  Collection,
+  ListBox,
+  ListBoxLoadMoreItem,
+  ListLayout,
+  RootMenuTriggerStateContext,
+  Virtualizer,
+} from "react-aria-components"
+
+import {
+  useFilterContext,
+  useFilterItem,
+  useFilterItemClose,
+} from "../Filter.store"
+import type {
+  OptionsLoader,
+  SelectOption,
+  SerializableSelectOption,
+} from "../Filter.types"
+import { isSelectOptionArray } from "../Filter.types"
+import { ListBoxOptionItem } from "./OptionItem"
+
+interface FilterAsyncSelectProps {
+  field?: string
+  options: SelectOption[]
+  multi?: boolean
+  renderIcon?: (option: SelectOption, isSelected: boolean) => React.ReactNode
+  placeholder?: string
+  emptyMessage?: string
+  optionsLoader: OptionsLoader
+}
+
+export function FilterAsyncSelect({
+  field: fieldProp,
+  options,
+  multi = true,
+  renderIcon,
+  placeholder = "Search...",
+  emptyMessage = "No matching options",
+  optionsLoader,
+}: FilterAsyncSelectProps) {
+  const { value: filters, setFieldValue } = useFilterContext()
+  const filterItem = useFilterItem()
+  const onClose = useFilterItemClose()
+  const menuState = useContext(RootMenuTriggerStateContext)
+
+  const field = fieldProp ?? filterItem?.field
+
+  if (!field) {
+    throw new Error(
+      "FilterAsyncSelect requires a field prop or must be used within a FilterItemProvider"
+    )
+  }
+
+  const raw = filters[field]
+
+  const storedOptions = useMemo(() => {
+    if (isSelectOptionArray(raw)) return raw
+    return []
+  }, [raw])
+
+  const selectedValues = useMemo(() => {
+    if (!raw) return []
+    if (isSelectOptionArray(raw)) {
+      return raw.map((opt) => opt.value)
+    }
+    if (Array.isArray(raw)) {
+      return raw.map(String)
+    }
+    return [String(raw)]
+  }, [raw])
+
+  const selectedKeys = useMemo(() => new Set(selectedValues), [selectedValues])
+
+  const optionsWithId = useMemo(
+    () => options.map((opt) => ({ ...opt, id: String(opt.value) })),
+    [options]
+  )
+
+  const handleSelectionChange = useCallback(
+    (keys: Set<React.Key>) => {
+      const selectedIds = Array.from(keys).map(String)
+
+      const allAvailableOptions = new Map<string, SerializableSelectOption>()
+
+      storedOptions.forEach((opt) => {
+        allAvailableOptions.set(opt.value, opt)
+      })
+
+      options.forEach((opt) => {
+        const { icon, ...rest } = opt
+        allAvailableOptions.set(String(opt.value), rest)
+      })
+
+      const selectedOptions = selectedIds
+        .map((id) => allAvailableOptions.get(id))
+        .filter((opt): opt is SerializableSelectOption => opt !== undefined)
+
+      setFieldValue(
+        field,
+        selectedOptions.length > 0 ? selectedOptions : undefined
+      )
+
+      if (!multi && selectedOptions.length > 0) {
+        menuState?.close()
+        onClose?.()
+      }
+    },
+    [field, options, storedOptions, setFieldValue, multi, onClose]
+  )
+
+  const isInitialLoading = optionsLoader.isFetching && options.length === 0
+
+  return (
+    <div className="flex max-h-[300px] min-w-[200px] flex-col">
+      <Autocomplete disableVirtualFocus>
+        <div className="border-gray-6 border-b px-3 py-2">
+          <SearchInput
+            autoFocus
+            placeholder={placeholder}
+            className="placeholder:text-gray-11 h-7 rounded border-0 bg-transparent pl-0 text-xs ring-0!"
+            onChange={optionsLoader.onSearch}
+          />
+        </div>
+
+        {isInitialLoading ? (
+          <div className="py-1">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <SkeletonOption key={i} />
+            ))}
+          </div>
+        ) : (
+          <Virtualizer
+            layout={ListLayout}
+            layoutOptions={{ estimatedRowHeight: 32 }}
+          >
+            <ListBox
+              aria-label="Filter options"
+              selectionMode={multi ? "multiple" : "single"}
+              selectedKeys={selectedKeys}
+              onSelectionChange={(keys) =>
+                handleSelectionChange(keys as Set<string>)
+              }
+              className="max-h-[250px] flex-1 overflow-auto py-1 outline-none"
+              renderEmptyState={() => (
+                <div className="text-gray-11 px-3 py-6 text-center text-xs">
+                  {emptyMessage}
+                </div>
+              )}
+            >
+              <Collection items={optionsWithId}>
+                {(option) => (
+                  <ListBoxOptionItem
+                    option={option}
+                    multi={multi}
+                    renderIcon={renderIcon}
+                  />
+                )}
+              </Collection>
+
+              {optionsLoader.hasNextPage && (
+                <ListBoxLoadMoreItem
+                  onLoadMore={optionsLoader.onFetchNextPage}
+                  isLoading={optionsLoader.isFetching}
+                  className="py-1"
+                >
+                  <SkeletonOption />
+                  <SkeletonOption />
+                </ListBoxLoadMoreItem>
+              )}
+            </ListBox>
+          </Virtualizer>
+        )}
+      </Autocomplete>
+    </div>
+  )
+}
+
+function SkeletonOption() {
+  return (
+    <div className="flex h-8 animate-pulse items-center gap-2.5 px-3 py-1.5">
+      <div className="border-gray-6 bg-gray-4 size-4 shrink-0 rounded border" />
+      <div className="bg-gray-4 h-4 max-w-[120px] flex-1 rounded" />
+    </div>
+  )
+}

package/src/components/Filter/FilterField/FilterDateMode.tsx

@@ -0,0 +1,241 @@
+"use client"
+
+import { useContext, useEffect, useRef } from "react"
+import {
+  Menu,
+  MenuItem,
+  MenuPopover,
+  MenuSeparator,
+  MenuSubTrigger,
+} from "@eggspot/ui/components/Menu"
+import dayjs from "dayjs"
+import { RootMenuTriggerStateContext } from "react-aria-components"
+
+import {
+  useFilterContext,
+  useFilterItem,
+  useFilterItemClose,
+} from "../Filter.store"
+import type { DateModeFilterValue } from "../Filter.types"
+import { FilterDateRange } from "./FilterDateRange"
+import { FilterSingleDate } from "./FilterSingleDate"
+
+function normalizeValue(value: unknown): DateModeFilterValue | null {
+  if (value == null) return null
+
+  if (typeof value === "object" && !Array.isArray(value) && "mode" in value) {
+    const v = value as DateModeFilterValue
+    return {
+      ...v,
+      from: v.from ? new Date(v.from) : undefined,
+      to: v.to ? new Date(v.to) : undefined,
+    }
+  }
+
+  if (Array.isArray(value) && value.length === 2) {
+    const [fromRaw, toRaw] = value
+    return {
+      mode: "range",
+      from: fromRaw ? new Date(fromRaw as any) : undefined,
+      to: toRaw ? new Date(toRaw as any) : undefined,
+    }
+  }
+
+  return null
+}
+
+export function FilterDateMode() {
+  const { value, setFieldValue } = useFilterContext()
+  const item = useFilterItem()
+  const field = item?.field
+
+  if (!field) {
+    throw new Error("FilterDateMode must be used within a FilterItemProvider")
+  }
+
+  const current = normalizeValue(value[field])
+  const today = dayjs()
+  const todayEnd = today.endOf("day").toDate()
+  const todayStart = today.startOf("day").toDate()
+
+  const updateValue = (newValue: DateModeFilterValue | undefined) => {
+    setFieldValue(field, newValue)
+  }
+
+  const getDateForSingleDate = (
+    targetMode: "from" | "to"
+  ): Date | undefined => {
+    if (!current) return undefined
+    if (current.mode === targetMode) {
+      return targetMode === "from" ? current.from : current.to
+    }
+    return undefined
+  }
+
+  const getRangeForDateRange = (): [Date, Date] | undefined => {
+    if (!current) return undefined
+    if (current.mode === "range" && current.from && current.to) {
+      return [current.from, current.to]
+    }
+    return undefined
+  }
+
+  const tempFieldFrom = `${field}__temp_from`
+  const tempFieldTo = `${field}__temp_to`
+  const tempFieldRange = `${field}__temp_range`
+
+  const prevCurrentRef = useRef<DateModeFilterValue | null>(null)
+
+  const menuState = useContext(RootMenuTriggerStateContext)
+  const onClose = useFilterItemClose()
+
+  useEffect(() => {
+    const currentChanged =
+      (!current && prevCurrentRef.current) ||
+      (current && !prevCurrentRef.current) ||
+      (current &&
+        prevCurrentRef.current &&
+        (current.mode !== prevCurrentRef.current.mode ||
+          current.from?.getTime() !== prevCurrentRef.current.from?.getTime() ||
+          current.to?.getTime() !== prevCurrentRef.current.to?.getTime()))
+
+    if (currentChanged) {
+      prevCurrentRef.current = current
+    }
+
+    const dateForFrom = getDateForSingleDate("from")
+    const dateForTo = getDateForSingleDate("to")
+    const rangeForRange = getRangeForDateRange()
+    const currentFrom = value[tempFieldFrom] as Date | undefined
+    const currentTo = value[tempFieldTo] as Date | undefined
+    const currentRange = value[tempFieldRange] as [Date, Date] | undefined
+
+    if (dateForFrom?.getTime() !== currentFrom?.getTime()) {
+      setFieldValue(tempFieldFrom, dateForFrom)
+    }
+    if (dateForTo?.getTime() !== currentTo?.getTime()) {
+      setFieldValue(tempFieldTo, dateForTo)
+    }
+    const rangeChanged =
+      (!rangeForRange && currentRange) ||
+      (rangeForRange && !currentRange) ||
+      (rangeForRange &&
+        currentRange &&
+        (rangeForRange[0]?.getTime() !== currentRange[0]?.getTime() ||
+          rangeForRange[1]?.getTime() !== currentRange[1]?.getTime()))
+    if (rangeChanged) {
+      setFieldValue(tempFieldRange, rangeForRange)
+    }
+  }, [
+    current,
+    tempFieldFrom,
+    tempFieldTo,
+    tempFieldRange,
+    setFieldValue,
+    value,
+  ])
+
+  const applyPreset = (preset: "lastWeek" | "thisWeek" | "thisMonth") => {
+    let start: dayjs.Dayjs
+    let end: dayjs.Dayjs
+
+    switch (preset) {
+      case "lastWeek":
+        start = today.startOf("week").subtract(1, "week")
+        end = start.endOf("week")
+        break
+      case "thisWeek":
+        start = today.startOf("week")
+        end = today.endOf("week")
+        break
+      case "thisMonth":
+        start = today.startOf("month")
+        end = today.endOf("month")
+        break
+    }
+
+    updateValue({
+      mode: "range",
+      from: start.startOf("day").toDate(),
+      to: end.endOf("day").toDate(),
+      preset,
+    })
+    menuState?.close()
+    onClose?.()
+  }
+
+  return (
+    <Menu aria-label="Date filter options" className="min-w-[220px]">
+      <MenuSubTrigger>
+        <MenuItem>From date</MenuItem>
+        <MenuPopover className="p-0">
+          <FilterSingleDate
+            field={tempFieldFrom}
+            onSelect={(date) => {
+              if (!date) {
+                updateValue(undefined)
+                return
+              }
+              const fromDate = dayjs(date).startOf("day").toDate()
+              updateValue({
+                mode: "from",
+                from: fromDate,
+                to: undefined,
+              })
+            }}
+          />
+        </MenuPopover>
+      </MenuSubTrigger>
+
+      <MenuSubTrigger>
+        <MenuItem>To date</MenuItem>
+        <MenuPopover className="p-0">
+          <FilterSingleDate
+            field={tempFieldTo}
+            onSelect={(date) => {
+              if (!date) {
+                updateValue(undefined)
+                return
+              }
+              const toDate = dayjs(date).endOf("day").toDate()
+              updateValue({
+                mode: "to",
+                from: undefined,
+                to: toDate,
+              })
+            }}
+          />
+        </MenuPopover>
+      </MenuSubTrigger>
+
+      <MenuSubTrigger>
+        <MenuItem>Custom date</MenuItem>
+        <MenuPopover className="p-0">
+          <FilterDateRange
+            field={tempFieldRange}
+            onSelectRange={(range) => {
+              if (!range) {
+                updateValue(undefined)
+                return
+              }
+              updateValue({
+                mode: "range",
+                from: range[0],
+                to: range[1],
+              })
+            }}
+          />
+        </MenuPopover>
+      </MenuSubTrigger>
+
+      <MenuSeparator />
+
+      {/* PRESETS */}
+      <MenuItem onAction={() => applyPreset("lastWeek")}>Last week</MenuItem>
+
+      <MenuItem onAction={() => applyPreset("thisWeek")}>This week</MenuItem>
+
+      <MenuItem onAction={() => applyPreset("thisMonth")}>This month</MenuItem>
+    </Menu>
+  )
+}

package/src/components/Filter/FilterField/FilterDateRange.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import { useContext, useState } from "react"
+import { Button } from "@eggspot/ui/components/Button"
+import {
+  CalendarCell,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHeader,
+  CalendarHeaderCell,
+  CalendarHeading,
+  RangeCalendar,
+} from "@eggspot/ui/components/Calendar"
+import { cn } from "@eggspot/ui/lib/utils"
+import {
+  fromDate,
+  getLocalTimeZone,
+  today,
+  type CalendarDate,
+} from "@internationalized/date"
+import dayjs from "dayjs"
+import {
+  RootMenuTriggerStateContext,
+  type DateRange,
+} from "react-aria-components"
+
+import {
+  useFilterContext,
+  useFilterItem,
+  useFilterItemClose,
+} from "../Filter.store"
+
+interface FilterDateRangeProps {
+  field?: string
+  onSelectRange?: (range: [Date, Date] | undefined) => void
+}
+
+export function FilterDateRange({
+  field: fieldProp,
+  onSelectRange,
+}: FilterDateRangeProps) {
+  const { value, setFieldValue } = useFilterContext()
+  const filterItem = useFilterItem()
+  const onClose = useFilterItemClose()
+  const menuState = useContext(RootMenuTriggerStateContext)
+  const field = fieldProp ?? filterItem?.field
+  if (!field) throw new Error("...")
+
+  const raw = value[field] as [Date, Date] | null | undefined
+  const [startDate, endDate] = raw ?? []
+
+  const tz = getLocalTimeZone()
+  const todayDate = today(tz)
+
+  const initialStart = startDate ? fromDate(startDate, tz) : undefined
+  const initialEnd = endDate ? fromDate(endDate, tz) : undefined
+
+  const [draftRange, setDraftRange] = useState<DateRange | null>(
+    initialStart && initialEnd ? { start: initialStart, end: initialEnd } : null
+  )
+
+  const calendarValue = draftRange ?? null
+
+  const applyRange = (range: [Date, Date] | undefined) => {
+    if (onSelectRange) {
+      onSelectRange(range)
+    } else {
+      setFieldValue(field, range)
+    }
+  }
+
+  const commitDraft = () => {
+    if (!draftRange?.start || !draftRange?.end) {
+      applyRange(undefined)
+      onClose?.()
+      return
+    }
+    const start = draftRange.start.toDate(tz)
+    const end = draftRange.end.toDate(tz)
+    applyRange([
+      dayjs(start).startOf("day").toDate(),
+      dayjs(end).endOf("day").toDate(),
+    ])
+    menuState?.close()
+    onClose?.()
+  }
+
+  const handleClear = () => {
+    setDraftRange(null)
+    applyRange(undefined)
+  }
+
+  return (
+    <div className="flex h-[352px] min-w-[280px] flex-col p-2">
+      <RangeCalendar
+        aria-label="Select date range"
+        className="w-full flex-1"
+        value={calendarValue}
+        onChange={setDraftRange}
+        defaultFocusedValue={calendarValue?.start ?? todayDate}
+      >
+        <CalendarHeading />
+        <CalendarGrid className="border-spacing-x-0 border-spacing-y-0.5">
+          <CalendarGridHeader>
+            {(day) => (
+              <CalendarHeaderCell className="text-center">
+                {day}
+              </CalendarHeaderCell>
+            )}
+          </CalendarGridHeader>
+          <CalendarGridBody>
+            {(date) => (
+              <RangeCalendarCell
+                date={date as CalendarDate}
+                range={draftRange}
+              />
+            )}
+          </CalendarGridBody>
+        </CalendarGrid>
+      </RangeCalendar>
+
+      <div className="border-gray-6 flex justify-center gap-2 border-t pt-2">
+        <Button
+          size="sm"
+          variant="ghost"
+          intent="primary"
+          onClick={commitDraft}
+          isDisabled={!draftRange}
+        >
+          Apply
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          intent="secondary"
+          onClick={handleClear}
+          isDisabled={!raw}
+          className="ml-2"
+        >
+          Clear
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+function RangeCalendarCell({
+  date,
+  range,
+}: {
+  date: CalendarDate
+  range: DateRange | null
+}) {
+  const hasRange =
+    !!range?.start && !!range?.end && range.start.compare(range.end) !== 0
+  return (
+    <CalendarCell
+      date={date}
+      className={cn(
+        "data-selected:bg-accent-4 data-selected:text-accent-12 data-selected:rounded-none",
+        "data-selection-start:rounded-l-md",
+        "data-selection-end:rounded-r-md",
+        "data-selection-start:data-selection-end:rounded-md",
+        "data-selected:data-selection-start:bg-accent-9 data-selected:data-selection-start:text-accent-contrast",
+        "data-selected:data-selection-end:bg-accent-9 data-selected:data-selection-end:text-accent-contrast"
+      )}
+    />
+  )
+}