@eggspot/ui 0.0.2 → 0.0.3

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

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

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

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

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

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

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