@eggspot/ui 0.0.2 → 0.0.3

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

@@ -1,208 +0,0 @@
-"use client"
-
-import { useCallback, useContext, useMemo, useState } from "react"
-import { SearchInput } from "@eggspot/ui/components/Input"
-import { cn } from "@eggspot/ui/lib/utils"
-import { Check, Minus } from "lucide-react"
-import {
-  Menu as AriaMenu,
-  MenuItem as AriaMenuItem,
-  Collection,
-  ListLayout,
-  RootMenuTriggerStateContext,
-  Virtualizer,
-} from "react-aria-components"
-
-import {
-  useFilterContext,
-  useFilterItem,
-  useFilterItemClose,
-} from "../Filter.store"
-import type { SelectOption } from "../Filter.types"
-import { isSelectOptionArray } from "../Filter.types"
-import { MenuOptionItem } from "./OptionItem"
-
-interface FilterSelectProps {
-  field?: string
-  options?: SelectOption[]
-  multi?: boolean
-  renderIcon?: (option: SelectOption, isSelected: boolean) => React.ReactNode
-  placeholder?: string
-  emptyMessage?: string
-}
-
-export function FilterSelect({
-  field: fieldProp,
-  options: optionsProp,
-  multi = true,
-  renderIcon,
-  placeholder = "Filter...",
-  emptyMessage = "No matching options",
-}: FilterSelectProps) {
-  const { value: filters, setFieldValue } = useFilterContext()
-  const filterItem = useFilterItem()
-  const onClose = useFilterItemClose()
-  const menuState = useContext(RootMenuTriggerStateContext)
-
-  const field = fieldProp ?? filterItem?.field
-  const options = optionsProp ?? filterItem?.options ?? []
-
-  if (!field) {
-    throw new Error(
-      "FilterSelect requires a field prop or must be used within a FilterItemProvider"
-    )
-  }
-
-  const [search, setSearch] = useState("")
-
-  const raw = filters[field]
-
-  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 filteredOptions = useMemo(() => {
-    if (!search) return options
-    const lowerSearch = search.toLowerCase()
-    return options.filter((opt) =>
-      opt.label.toLowerCase().includes(lowerSearch)
-    )
-  }, [options, search])
-
-  const optionsWithId = useMemo(
-    () => filteredOptions.map((opt) => ({ ...opt, id: String(opt.value) })),
-    [filteredOptions]
-  )
-
-  const handleSelectionChange = useCallback(
-    (keys: Set<React.Key>) => {
-      const selectedIds = Array.from(keys).map(String)
-      const selectedOptions = options
-        .filter((opt) => selectedIds.includes(String(opt.value)))
-        .map(({ icon, ...rest }) => rest)
-
-      setFieldValue(
-        field,
-        selectedOptions.length > 0 ? selectedOptions : undefined
-      )
-
-      if (!multi && selectedOptions.length > 0) {
-        menuState?.close()
-        onClose?.()
-      }
-    },
-    [field, options, setFieldValue, multi, onClose]
-  )
-
-  const handleSelectAll = useCallback(() => {
-    const isAllSelected = selectedValues.length === optionsWithId.length
-
-    if (isAllSelected) {
-      setFieldValue(field, undefined)
-    } else {
-      const allOptions = optionsWithId.map(({ icon, id, ...rest }) => rest)
-      setFieldValue(field, allOptions)
-    }
-  }, [field, optionsWithId, selectedValues.length, setFieldValue])
-
-  const isAllSelected =
-    selectedValues.length === optionsWithId.length && optionsWithId.length > 0
-  const isIndeterminate =
-    selectedValues.length > 0 && selectedValues.length < optionsWithId.length
-
-  return (
-    <div className="flex max-h-[300px] min-w-[200px] flex-col">
-      <div className="border-gray-6 border-b px-3 py-2">
-        <SearchInput
-          placeholder={placeholder}
-          className="placeholder:text-gray-11 h-7 rounded border-0 bg-transparent pl-0 text-xs ring-0!"
-          onChange={setSearch}
-          value={search}
-        />
-      </div>
-
-      <Virtualizer
-        layout={ListLayout}
-        layoutOptions={{ estimatedRowHeight: 32 }}
-      >
-        <AriaMenu
-          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>
-          )}
-        >
-          {multi && optionsWithId.length > 0 && (
-            <SelectAllItem
-              isAllSelected={isAllSelected}
-              isIndeterminate={isIndeterminate}
-              onSelectAll={handleSelectAll}
-            />
-          )}
-
-          <Collection items={optionsWithId}>
-            {(option) => (
-              <MenuOptionItem
-                option={option}
-                multi={multi}
-                renderIcon={renderIcon}
-              />
-            )}
-          </Collection>
-        </AriaMenu>
-      </Virtualizer>
-    </div>
-  )
-}
-
-function SelectAllItem({
-  isAllSelected,
-  isIndeterminate,
-  onSelectAll,
-}: {
-  isAllSelected: boolean
-  isIndeterminate: boolean
-  onSelectAll: () => void
-}) {
-  return (
-    <AriaMenuItem
-      id="__select_all__"
-      textValue="Select All"
-      onAction={onSelectAll}
-      className={cn(
-        "flex w-full cursor-pointer items-center gap-2.5 px-3 py-1.5 text-left text-sm outline-none",
-        "hover:bg-gray-3 data-focused:bg-gray-3 transition-colors",
-        "text-gray-11 font-medium"
-      )}
-    >
-      <span
-        className={cn(
-          "flex size-4 shrink-0 items-center justify-center rounded border",
-          isAllSelected || isIndeterminate
-            ? "bg-accent-9 border-accent-9 text-white"
-            : "border-gray-7 bg-transparent"
-        )}
-      >
-        {isAllSelected && <Check className="size-3" strokeWidth={2.5} />}
-        {isIndeterminate && <Minus className="size-3" strokeWidth={2.5} />}
-      </span>
-      <span className="flex-1">Select All</span>
-    </AriaMenuItem>
-  )
-}

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

@@ -1,277 +0,0 @@
-"use client"
-
-import { useContext, useState } from "react"
-import { Button } from "@eggspot/ui/components/Button"
-import {
-  Calendar,
-  CalendarCell,
-  CalendarGrid,
-  CalendarGridBody,
-  CalendarGridHeader,
-  CalendarHeaderCell,
-  CalendarHeading,
-} from "@eggspot/ui/components/Calendar"
-import { parse } from "@eggspot/ui/components/DatePicker.utils"
-import { cn } from "@eggspot/ui/lib/utils"
-import type { CalendarDate, CalendarDateTime } from "@internationalized/date"
-import { getLocalTimeZone, today } from "@internationalized/date"
-import dayjs from "dayjs"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { RootMenuTriggerStateContext } from "react-aria-components"
-
-import {
-  useFilterContext,
-  useFilterItem,
-  useFilterItemClose,
-} from "../Filter.store"
-
-interface FilterSingleDateProps {
-  field?: string
-  granularity?: "day" | "month"
-  onSelect?: (date: Date | undefined) => void
-}
-
-export function FilterSingleDate({
-  field: fieldProp,
-  granularity = "day",
-  onSelect,
-}: FilterSingleDateProps) {
-  const { value, setFieldValue } = useFilterContext()
-  const filterItem = useFilterItem()
-
-  const field = fieldProp ?? filterItem?.field
-
-  if (!field) {
-    throw new Error(
-      "FilterSingleDate requires a field prop or must be used within a FilterItemProvider"
-    )
-  }
-
-  const dateValue = value[field] as Date | null | undefined
-
-  const handleChange = (date: Date) => {
-    if (onSelect) {
-      onSelect(date)
-    } else {
-      setFieldValue(field, date)
-    }
-  }
-
-  const handleClear = () => {
-    if (onSelect) {
-      onSelect(undefined)
-    } else {
-      setFieldValue(field, undefined)
-    }
-  }
-
-  if (granularity === "month") {
-    return (
-      <MonthPicker
-        value={dateValue ?? undefined}
-        onChange={handleChange}
-        onClear={handleClear}
-      />
-    )
-  }
-
-  return (
-    <DayPicker
-      value={dateValue ?? undefined}
-      onChange={handleChange}
-      onClear={handleClear}
-    />
-  )
-}
-
-interface DayPickerProps {
-  value?: Date
-  onChange: (date: Date) => void
-  onClear: () => void
-}
-
-function DayPicker({ value, onChange, onClear }: DayPickerProps) {
-  const calendarValue = parse(value, "day")
-  const todayDate = today(getLocalTimeZone())
-  const menuState = useContext(RootMenuTriggerStateContext)
-  const onClose = useFilterItemClose()
-
-  const handleDateChange = (date: CalendarDate | CalendarDateTime) => {
-    onChange(date.toDate(getLocalTimeZone()))
-    // Close popover after selection
-    menuState?.close()
-    onClose?.()
-  }
-
-  const handleToday = () => {
-    onChange(dayjs().startOf("day").toDate())
-  }
-
-  return (
-    <div className="flex h-[352px] min-w-[280px] flex-col p-2">
-      <Calendar
-        aria-label="Select date"
-        className="w-full flex-1"
-        value={calendarValue}
-        onChange={handleDateChange}
-        defaultFocusedValue={calendarValue ?? todayDate}
-      >
-        <CalendarHeading />
-        <CalendarGrid className="w-full">
-          <CalendarGridHeader>
-            {(day) => (
-              <CalendarHeaderCell className="flex-1">{day}</CalendarHeaderCell>
-            )}
-          </CalendarGridHeader>
-          <CalendarGridBody>
-            {(date) => <CalendarCell date={date} />}
-          </CalendarGridBody>
-        </CalendarGrid>
-      </Calendar>
-
-      <div className="border-gray-6 flex justify-center gap-2 border-t pt-2">
-        <Button
-          size="sm"
-          variant="ghost"
-          intent="primary"
-          onClick={handleToday}
-        >
-          Today
-        </Button>
-        <Button
-          size="sm"
-          variant="ghost"
-          intent="secondary"
-          onClick={onClear}
-          isDisabled={!value}
-        >
-          Clear
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-interface MonthPickerProps {
-  value?: Date
-  onChange: (date: Date) => void
-  onClear: () => void
-}
-
-const MONTHS = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "Apr",
-  "May",
-  "Jun",
-  "Jul",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec",
-]
-
-function MonthPicker({ value, onChange, onClear }: MonthPickerProps) {
-  const currentYear = dayjs().year()
-  const [viewYear, setViewYear] = useState(
-    value ? dayjs(value).year() : currentYear
-  )
-  const onClose = useFilterItemClose()
-  const menuState = useContext(RootMenuTriggerStateContext)
-
-  const selectedMonth = value ? dayjs(value).month() : null
-  const selectedYear = value ? dayjs(value).year() : null
-
-  const handleMonthSelect = (monthIndex: number) => {
-    const date = dayjs()
-      .year(viewYear)
-      .month(monthIndex)
-      .startOf("month")
-      .toDate()
-    onChange(date)
-    onClose?.()
-    menuState?.close()
-  }
-
-  const handleThisMonth = () => {
-    onChange(dayjs().startOf("month").toDate())
-  }
-
-  return (
-    <div className="flex min-w-[280px] flex-col p-2">
-      <div className="mb-2 flex items-center justify-between">
-        <Button
-          mode="icon"
-          size="sm"
-          variant="ghost"
-          intent="secondary"
-          onClick={() => setViewYear((y) => y - 1)}
-          aria-label="Previous year"
-        >
-          <ChevronLeft className="size-4" />
-        </Button>
-        <span className="text-gray-12 text-sm font-medium">{viewYear}</span>
-        <Button
-          mode="icon"
-          size="sm"
-          variant="ghost"
-          intent="secondary"
-          onClick={() => setViewYear((y) => y + 1)}
-          aria-label="Next year"
-        >
-          <ChevronRight className="size-4" />
-        </Button>
-      </div>
-
-      <div className="grid grid-cols-3 gap-1">
-        {MONTHS.map((month, index) => {
-          const isSelected =
-            selectedMonth === index && selectedYear === viewYear
-          const isCurrentMonth =
-            dayjs().month() === index && dayjs().year() === viewYear
-
-          return (
-            <button
-              key={month}
-              type="button"
-              onClick={() => handleMonthSelect(index)}
-              className={cn(
-                "rounded-md px-3 py-2 text-sm transition-colors",
-                "hover:bg-gray-4 focus-visible:ring-accent-9 focus-visible:ring-2 focus-visible:outline-none",
-                isSelected
-                  ? "bg-accent-9 hover:bg-accent-10 text-white"
-                  : isCurrentMonth
-                    ? "text-accent-11"
-                    : "text-gray-11 hover:text-gray-12"
-              )}
-            >
-              {month}
-            </button>
-          )
-        })}
-      </div>
-
-      <div className="border-gray-6 mt-2 flex justify-center gap-2 border-t pt-2">
-        <Button
-          size="sm"
-          variant="ghost"
-          intent="primary"
-          onClick={handleThisMonth}
-        >
-          This month
-        </Button>
-        <Button
-          size="sm"
-          variant="ghost"
-          intent="secondary"
-          onClick={onClear}
-          isDisabled={!value}
-        >
-          Clear
-        </Button>
-      </div>
-    </div>
-  )
-}

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

@@ -1,112 +0,0 @@
-"use client"
-
-import { cn } from "@eggspot/ui/lib/utils"
-import { Check } from "lucide-react"
-import { MenuItem as AriaMenuItem, ListBoxItem } from "react-aria-components"
-
-import type { SelectOption } from "../Filter.types"
-
-interface OptionItemProps {
-  option: SelectOption
-  multi?: boolean
-  renderIcon?: (option: SelectOption, isSelected: boolean) => React.ReactNode
-}
-
-/* Shared option item for Menu-based selects (FilterSelect) */
-export function MenuOptionItem({
-  option,
-  multi = true,
-  renderIcon,
-}: OptionItemProps) {
-  return (
-    <AriaMenuItem
-      id={String(option.value)}
-      textValue={option.label}
-      className={cn(
-        "flex w-full cursor-pointer items-center gap-2.5 px-3 py-1.5 text-left text-sm outline-none",
-        "hover:bg-gray-3 data-focused:bg-gray-3 transition-colors",
-        "data-selected:text-gray-12 text-gray-11"
-      )}
-    >
-      {({ isSelected }) => (
-        <OptionItemContent
-          option={option}
-          isSelected={isSelected}
-          multi={multi}
-          renderIcon={renderIcon}
-        />
-      )}
-    </AriaMenuItem>
-  )
-}
-
-/* Shared option item for ListBox-based selects (FilterAsyncSelect) */
-export function ListBoxOptionItem({
-  option,
-  multi = true,
-  renderIcon,
-}: OptionItemProps) {
-  return (
-    <ListBoxItem
-      id={String(option.value)}
-      textValue={option.label}
-      className={cn(
-        "flex w-full cursor-pointer items-center gap-2.5 px-3 py-1.5 text-left text-sm outline-none",
-        "hover:bg-gray-3 data-focused:bg-gray-3 transition-colors",
-        "data-selected:text-gray-12 text-gray-11"
-      )}
-    >
-      {({ isSelected }) => (
-        <OptionItemContent
-          option={option}
-          isSelected={isSelected}
-          multi={multi}
-          renderIcon={renderIcon}
-        />
-      )}
-    </ListBoxItem>
-  )
-}
-
-/* Shared content for option items */
-function OptionItemContent({
-  option,
-  isSelected,
-  multi,
-  renderIcon,
-}: {
-  option: SelectOption
-  isSelected: boolean
-  multi?: boolean
-  renderIcon?: (option: SelectOption, isSelected: boolean) => React.ReactNode
-}) {
-  return (
-    <>
-      <span
-        className={cn(
-          "flex size-4 shrink-0 items-center justify-center rounded border",
-          multi ? "rounded" : "rounded-full",
-          isSelected
-            ? "bg-accent-9 border-accent-9 text-white"
-            : "border-gray-7 bg-transparent"
-        )}
-      >
-        {isSelected && <Check className="size-3" strokeWidth={2.5} />}
-      </span>
-
-      {renderIcon ? (
-        <span className="shrink-0">{renderIcon(option, isSelected)}</span>
-      ) : option.avatar ? (
-        <img
-          src={option.avatar}
-          alt={option.label}
-          className="size-5 shrink-0 rounded-full object-cover"
-        />
-      ) : option.icon ? (
-        <span className="text-gray-11 shrink-0">{option.icon}</span>
-      ) : null}
-
-      <span className="flex-1 truncate">{option.label}</span>
-    </>
-  )
-}

package/src/components/Filter/FilterField/index.ts

@@ -1,6 +0,0 @@
-export * from "./DateModeRowValue"
-export * from "./FilterAsyncSelect"
-export * from "./FilterDateMode"
-export * from "./FilterDateRange"
-export * from "./FilterSelect"
-export * from "./FilterSingleDate"