@eggspot/ui 0.0.0

package/src/components/Filter/Filter.store.tsx

@@ -0,0 +1,122 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  type PropsWithChildren,
+} from "react"
+
+import type {
+  FilterBuilderItem,
+  FilterContextValue,
+  FilterFieldValue,
+  FilterProps,
+  FilterRenderMode,
+  FilterValue,
+} from "./Filter.types"
+
+const FilterContext = createContext<FilterContextValue | undefined>(undefined)
+
+export function useFilterContext() {
+  const ctx = useContext(FilterContext)
+  if (!ctx) {
+    throw new Error("Filter components must be used within <Filter>")
+  }
+  return ctx
+}
+
+export function FilterProvider({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  children,
+}: PropsWithChildren<FilterProps>) {
+  const isControlled = controlledValue !== undefined
+
+  const [uncontrolledValue, setUncontrolledValue] = useState<FilterValue>(
+    defaultValue ?? {}
+  )
+
+  const value = isControlled ? controlledValue! : uncontrolledValue
+
+  const setValue = (next: FilterValue) => {
+    if (!isControlled) setUncontrolledValue(next)
+    onChange?.(next)
+  }
+
+  const setFieldValue = (field: string, fieldValue: FilterFieldValue) => {
+    setValue({
+      ...value,
+      [field]: fieldValue,
+    })
+  }
+
+  const clearField = (field: string) => {
+    if (!(field in value)) return
+    const { [field]: _removed, ...rest } = value
+    setValue(rest)
+  }
+
+  const reset = () => {
+    setValue({})
+  }
+
+  const ctxValue = useMemo<FilterContextValue>(
+    () => ({
+      value,
+      onChange: setValue,
+      setFieldValue,
+      clearField,
+      reset,
+    }),
+    [value]
+  )
+
+  return (
+    <FilterContext.Provider value={ctxValue}>{children}</FilterContext.Provider>
+  )
+}
+
+/** Context for the current filter item being rendered. */
+interface FilterItemContextValue {
+  item: FilterBuilderItem
+  mode: FilterRenderMode
+  onClose?: () => void
+}
+
+const FilterItemContext = createContext<FilterItemContextValue | undefined>(
+  undefined
+)
+
+export function FilterItemProvider({
+  item,
+  mode,
+  onClose,
+  children,
+}: PropsWithChildren<{
+  item: FilterBuilderItem
+  mode: FilterRenderMode
+  onClose?: () => void
+}>) {
+  const value = useMemo(() => ({ item, mode, onClose }), [item, mode, onClose])
+  return (
+    <FilterItemContext.Provider value={value}>
+      {children}
+    </FilterItemContext.Provider>
+  )
+}
+
+export function useFilterItem() {
+  const ctx = useContext(FilterItemContext)
+  return ctx?.item
+}
+
+export function useFilterItemMode() {
+  const ctx = useContext(FilterItemContext)
+  return ctx?.mode
+}
+
+export function useFilterItemClose() {
+  const ctx = useContext(FilterItemContext)
+  return ctx?.onClose
+}

package/src/components/Filter/Filter.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import type { PropsWithChildren } from "react"
+
+import { FilterProvider } from "./Filter.store"
+import type { FilterProps } from "./Filter.types"
+
+export function Filter(props: PropsWithChildren<FilterProps>) {
+  const { children, ...providerProps } = props
+  return <FilterProvider {...providerProps}>{children}</FilterProvider>
+}

package/src/components/Filter/Filter.types.ts

@@ -0,0 +1,107 @@
+import type { ReactNode } from "react"
+
+export type FilterPrimitive =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | Date
+  | [Date, Date]
+  | (string | number)[]
+
+export type SelectOption = {
+  label: string
+  value: string
+  avatar?: string
+  icon?: React.ReactNode
+}
+
+export type SerializableSelectOption = Omit<SelectOption, "icon">
+
+export type DateFilterMode = "from" | "to" | "range"
+export type DateFilterPreset = "lastWeek" | "thisWeek" | "thisMonth"
+
+export interface DateModeFilterValue {
+  mode: DateFilterMode
+  from?: Date
+  to?: Date
+  preset?: DateFilterPreset
+}
+
+export type FilterFieldValue =
+  | FilterPrimitive
+  | FilterPrimitive[]
+  | SerializableSelectOption[]
+  | DateModeFilterValue
+
+export type FilterValue = Record<string, FilterFieldValue>
+
+export interface FilterContextValue {
+  value: FilterValue
+  onChange: (value: FilterValue) => void
+  setFieldValue: (field: string, v: FilterFieldValue) => void
+  clearField: (field: string) => void
+  reset: () => void
+}
+
+export interface FilterProps {
+  value?: FilterValue
+  defaultValue?: FilterValue
+  onChange?: (value: FilterValue) => void
+  children: ReactNode
+}
+
+export interface OptionsLoader {
+  hasNextPage: boolean
+  onFetchNextPage: () => void
+  isFetching?: boolean
+  onSearch?: (search: string) => void
+}
+
+export type FilterRenderMode = "builder" | "row"
+
+export interface FilterBuilderItem {
+  type?: "filter"
+  field: string
+  label: ReactNode
+  icon?: ReactNode
+  description?: ReactNode
+  render: (mode: FilterRenderMode) => ReactNode
+  options?: SelectOption[]
+  renderIcon?: (option: SelectOption, isSelected: boolean) => ReactNode
+  multi?: boolean
+  formatValue?: (value: unknown) => string
+  isDisabled?: boolean
+  renderRowValue?: (args: { value: unknown; field: string }) => React.ReactNode
+}
+
+export interface FilterBuilderSeparator {
+  type: "separator"
+}
+
+export type FilterBuilderEntry = FilterBuilderItem | FilterBuilderSeparator
+
+export interface FilterBuilderProps {
+  items: FilterBuilderEntry[]
+}
+
+export function isFilterItem(
+  entry: FilterBuilderEntry
+): entry is FilterBuilderItem {
+  return entry.type !== "separator"
+}
+
+export function isSelectOptionArray(
+  value: unknown
+): value is SerializableSelectOption[] {
+  if (!Array.isArray(value)) return false
+  if (value.length === 0) return false
+  const first = value[0]
+  return (
+    typeof first === "object" &&
+    first !== null &&
+    "value" in first &&
+    "label" in first
+  )
+}

package/src/components/Filter/FilterBar.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { useEffect } from "react"
+
+import { useFilterContext } from "./Filter.store"
+import type { FilterBuilderEntry } from "./Filter.types"
+import { isFilterItem } from "./Filter.types"
+import { FilterBuilder } from "./FilterBuilder"
+import { FilterRow } from "./FilterRow"
+
+interface FilterBarProps {
+  items: FilterBuilderEntry[]
+}
+
+export function FilterBar({ items }: FilterBarProps) {
+  const { value, clearField } = useFilterContext()
+
+  // Auto-clear values for disabled filters
+  useEffect(() => {
+    for (const entry of items) {
+      if (!isFilterItem(entry)) continue
+      if (entry.isDisabled && value[entry.field] != null) {
+        clearField(entry.field)
+      }
+    }
+  }, [items, value, clearField])
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {items.map((entry) => {
+        if (!isFilterItem(entry)) return null
+        if (value[entry.field] == null) return null
+        return <FilterRow key={entry.field} item={entry} />
+      })}
+      <FilterBuilder items={items} />
+    </div>
+  )
+}

package/src/components/Filter/FilterBuilder.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import { useLayoutEffect, useMemo, useRef, useState } from "react"
+import { Button } from "@eggspot/ui/components/Button"
+import { SearchInput } from "@eggspot/ui/components/Input"
+import {
+  Menu,
+  MenuHeader,
+  MenuItem,
+  MenuPopover,
+  MenuSeparator,
+  MenuSubTrigger,
+  MenuTrigger,
+} from "@eggspot/ui/components/Menu"
+import { ListFilter as FilterIcon } from "lucide-react"
+
+import { FilterItemProvider, useFilterContext } from "./Filter.store"
+import type { FilterBuilderItem, FilterBuilderProps } from "./Filter.types"
+import { isFilterItem } from "./Filter.types"
+
+export function FilterBuilder({ items }: FilterBuilderProps) {
+  const { value: filters } = useFilterContext()
+  const [search, setSearch] = useState("")
+
+  const activeFilterCount = Object.keys(filters).filter(
+    (key) => filters[key] != null
+  ).length
+  const prevCountRef = useRef(activeFilterCount)
+
+  useLayoutEffect(() => {
+    if (prevCountRef.current !== activeFilterCount) {
+      prevCountRef.current = activeFilterCount
+      window.dispatchEvent(new Event("resize"))
+    }
+  }, [activeFilterCount])
+
+  const visibleItems = useMemo(
+    () =>
+      items.filter((entry) => {
+        if (!isFilterItem(entry)) return !search
+        if (!search) return true
+        const text =
+          typeof entry.label === "string"
+            ? entry.label.toLowerCase()
+            : entry.field.toLowerCase()
+        return text.includes(search.toLowerCase())
+      }),
+    [items, search]
+  )
+
+  const disabledKeys = useMemo(
+    () =>
+      visibleItems
+        .filter(
+          (entry): entry is FilterBuilderItem =>
+            isFilterItem(entry) && entry.isDisabled === true
+        )
+        .map((entry) => entry.field),
+    [visibleItems]
+  )
+
+  return (
+    <MenuTrigger
+      onOpenChange={(isOpen) => {
+        if (isOpen) setSearch("")
+      }}
+    >
+      <Button
+        size="sm"
+        variant="ghost"
+        intent="secondary"
+        aria-label="Filter"
+        tooltip="Filter"
+      >
+        <FilterIcon aria-hidden />
+        {!activeFilterCount && "Filter"}
+      </Button>
+
+      <MenuPopover placement="bottom start" className="p-0">
+        <div className="flex max-h-[400px] min-w-[200px] flex-col">
+          <div className="border-gray-6 border-b p-2">
+            <SearchInput
+              autoFocus
+              placeholder="Filter..."
+              className="placeholder:text-gray-11 h-7 rounded border-0 bg-transparent px-2 text-xs ring-0!"
+              onChange={(value) => setSearch(value)}
+            />
+          </div>
+
+          {visibleItems.length === 0 ? (
+            <div className="text-gray-11 px-3 py-4 text-center text-xs">
+              No matching filters
+            </div>
+          ) : (
+            <Menu className="flex-1 overflow-auto" disabledKeys={disabledKeys}>
+              <MenuHeader inset={false} separator={false}>
+                <span className="text-gray-11 text-[11px] tracking-wide uppercase">
+                  Filter by
+                </span>
+              </MenuHeader>
+
+              {visibleItems.map((entry, index) => {
+                if (!isFilterItem(entry)) {
+                  return <MenuSeparator key={`separator-${index}`} />
+                }
+
+                const hasValue = filters[entry.field] != null
+                const isDisabled = entry.isDisabled ?? false
+
+                return (
+                  <MenuSubTrigger key={entry.field}>
+                    <MenuItem id={entry.field} className="data-open:bg-gray-3">
+                      <div className="flex items-center gap-2">
+                        {entry.icon && (
+                          <span
+                            className={
+                              isDisabled
+                                ? "text-gray-11 opacity-50"
+                                : "text-gray-12"
+                            }
+                          >
+                            {entry.icon}
+                          </span>
+                        )}
+                        <span
+                          className={
+                            isDisabled
+                              ? "text-gray-11 opacity-50"
+                              : hasValue
+                                ? "text-gray-12"
+                                : "text-gray-11"
+                          }
+                        >
+                          {entry.label}
+                        </span>
+                      </div>
+                    </MenuItem>
+                    <MenuPopover className="p-0">
+                      <FilterSubmenu item={entry} />
+                    </MenuPopover>
+                  </MenuSubTrigger>
+                )
+              })}
+            </Menu>
+          )}
+        </div>
+      </MenuPopover>
+    </MenuTrigger>
+  )
+}
+
+function FilterSubmenu({ item }: { item: FilterBuilderItem }) {
+  return (
+    <FilterItemProvider item={item} mode="builder">
+      {item.render("builder")}
+    </FilterItemProvider>
+  )
+}

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

@@ -0,0 +1,250 @@
+"use client"
+
+import { useRef, useState } from "react"
+import { Popover, PopoverDialog } from "@eggspot/ui/components/Popover"
+import { Separator } from "@eggspot/ui/components/Separator"
+import { cn } from "@eggspot/ui/lib/utils"
+import dayjs from "dayjs"
+import { ChevronDown } from "lucide-react"
+
+import { useFilterContext } from "../Filter.store"
+import type { DateFilterMode, DateModeFilterValue } from "../Filter.types"
+
+const MODE_LABEL: Record<DateFilterMode, string> = {
+  to: "To",
+  from: "From",
+  range: "Range",
+}
+
+function normalizeDateValue(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
+    const from = fromRaw ? new Date(fromRaw as any) : undefined
+    const to = toRaw ? new Date(toRaw as any) : undefined
+
+    return {
+      mode: "range",
+      from,
+      to,
+    }
+  }
+
+  if (value instanceof Date || typeof value === "string") {
+    const d = new Date(value as any)
+    return {
+      mode: "to",
+      to: d,
+    }
+  }
+
+  return null
+}
+
+export function DateModeRowValue({
+  value,
+  field,
+}: {
+  value: unknown
+  field: string
+}) {
+  const { setFieldValue } = useFilterContext()
+  const [isOpen, setIsOpen] = useState(false)
+  const triggerRef = useRef<HTMLSpanElement>(null)
+
+  const v = normalizeDateValue(value)
+  const mode: DateFilterMode = v?.mode ?? "to"
+
+  const applyMode = (next: DateFilterMode) => {
+    const base: DateModeFilterValue =
+      v ??
+      ({
+        mode: next,
+      } as DateModeFilterValue)
+
+    let nextValue: DateModeFilterValue
+    const today = dayjs().endOf("day").toDate()
+
+    if (next === "from") {
+      const existingDate = base.from ?? base.to
+      nextValue = {
+        mode: "from",
+        from: existingDate,
+        to: undefined,
+      }
+    } else if (next === "to") {
+      const existingDate = base.to ?? base.from
+      nextValue = {
+        mode: "to",
+        from: undefined,
+        to: existingDate,
+      }
+    } else {
+      const existingDate = base.from ?? base.to
+      if (existingDate) {
+        nextValue = {
+          mode: "range",
+          from: dayjs(existingDate).startOf("day").toDate(),
+          to: today,
+          preset: base.preset,
+        }
+      } else {
+        nextValue = {
+          mode: "range",
+          from: base.from,
+          to: base.to ?? today,
+          preset: base.preset,
+        }
+      }
+    }
+
+    setFieldValue(field, nextValue)
+    setIsOpen(false)
+  }
+
+  const label = MODE_LABEL[mode]
+  const text = formatDateFilterValue(value)
+  const hasPreset = !!v?.preset
+
+  return (
+    <>
+      <>
+        <span
+          ref={triggerRef}
+          role="button"
+          tabIndex={0}
+          onClick={(e) => {
+            e.stopPropagation()
+            setIsOpen(true)
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault()
+              e.stopPropagation()
+              setIsOpen(true)
+            }
+          }}
+          className={cn(
+            "inline-flex items-center gap-0.5 rounded-sm py-0.5 pr-1.5 pl-2",
+            "text-gray-12 cursor-pointer bg-transparent",
+            "hover:bg-gray-5 focus-visible:ring-accent-9 focus-visible:ring-1 focus-visible:outline-none"
+          )}
+        >
+          <span className="capitalize">{label}</span>
+          <ChevronDown className="size-3" aria-hidden />
+        </span>
+        <Separator
+          orientation="vertical"
+          className="bg-gray-6 mx-2.5 h-4 w-px"
+        />
+      </>
+
+      <span className="text-gray-12">{text}</span>
+
+      <Popover
+        triggerRef={triggerRef}
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        placement="bottom start"
+        className="overflow-hidden rounded-lg"
+      >
+        <PopoverDialog className="bg-gray-2 min-w-[140px] p-1">
+          <ModeItem
+            active={mode === "from"}
+            onClick={(e) => {
+              e.stopPropagation()
+              applyMode("from")
+            }}
+          >
+            <span>From</span>
+          </ModeItem>
+          <ModeItem
+            active={mode === "to"}
+            onClick={(e) => {
+              e.stopPropagation()
+              applyMode("to")
+            }}
+          >
+            <span>To</span>
+          </ModeItem>
+          <ModeItem
+            active={mode === "range"}
+            onClick={(e) => {
+              e.stopPropagation()
+              applyMode("range")
+            }}
+          >
+            <span>Range</span>
+          </ModeItem>
+        </PopoverDialog>
+      </Popover>
+    </>
+  )
+}
+
+function ModeItem({
+  active,
+  children,
+  onClick,
+}: {
+  active: boolean
+  children: React.ReactNode
+  onClick: React.MouseEventHandler<HTMLButtonElement>
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "text-gray-12 flex w-full items-center rounded-md px-2 py-1 text-xs",
+        "hover:bg-gray-3 transition-colors",
+        active && "bg-gray-4"
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+function formatDateFilterValue(raw: unknown): string {
+  const v = normalizeDateValue(raw)
+  if (!v) return "Any time"
+
+  const fmt = (d?: Date) => (d ? dayjs(d).format("MMM D, YYYY") : "—")
+
+  const fmtRange = (from?: Date, to?: Date) => {
+    if (!from || !to) return `${fmt(from)} - ${fmt(to)}`
+
+    const fromYear = dayjs(from).year()
+    const toYear = dayjs(to).year()
+
+    if (fromYear === toYear) {
+      return `${dayjs(from).format("MMM D")} - ${dayjs(to).format("MMM D, YYYY")}`
+    }
+    return `${fmt(from)} - ${fmt(to)}`
+  }
+
+  if (v.preset && v.from && v.to) {
+    return fmtRange(v.from, v.to)
+  }
+
+  switch (v.mode) {
+    case "from":
+      return fmt(v.from)
+    case "to":
+      return fmt(v.to)
+    case "range":
+    default:
+      return fmtRange(v.from, v.to)
+  }
+}