@eggspot/ui 0.0.2 → 0.0.3

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

@@ -1,191 +0,0 @@
-"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

@@ -1,241 +0,0 @@
-"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

@@ -1,169 +0,0 @@
-"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"
-      )}
-    />
-  )
-}