@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

package/src/components/library/data/usePageFilters.tsx

@@ -1,139 +0,0 @@
-import { useState, useMemo, useCallback } from "react";
-import { applyFilters, sortByKey, FilterDefinition } from "./filterUtils";
-
-export type SortDirection = "asc" | "desc";
-
-export interface SortState {
-  key: string;
-  direction: SortDirection;
-}
-
-export interface DateRange {
-  start?: Date | string;
-  end?: Date | string;
-}
-
-export type FilterValue = string | boolean | DateRange | null;
-
-export interface FilterValues {
-  [key: string]: FilterValue;
-}
-
-export interface UsePageFiltersOptions<T> {
-  data?: T[];
-  filters?: FilterDefinition[];
-  defaultSort?: SortState | null;
-}
-
-export interface UsePageFiltersReturn<T> {
-  values: FilterValues;
-  setFilter: (id: string, value: FilterValue) => void;
-  resetFilters: () => void;
-  sort: SortState | null;
-  setSort: (key: string | null, direction?: SortDirection) => void;
-  toggleSort: (key: string) => void;
-  filteredData: T[];
-  sortedData: T[];
-  activeFilterCount: number;
-}
-
-/**
- * Hook for managing page-level filter and sort state.
- *
- * @param {Object} options
- * @param {Array}  options.data — raw data array
- * @param {Array}  options.filters — filter definitions [{ id, type, key?, keys?, defaultValue? }]
- * @param {Object} options.defaultSort — { key, direction } or null
- * @returns {Object} { values, setFilter, resetFilters, sort, setSort, filteredData, sortedData, activeFilterCount }
- *
- * @example
- * const { values, setFilter, resetFilters, sortedData } = usePageFilters({
- *   data: incidents,
- *   filters: [
- *     { id: "search", type: "search", keys: ["title", "description"] },
- *     { id: "severity", type: "select", key: "severity", defaultValue: "all" },
- *     { id: "active", type: "toggle", key: "resolved", matchValue: false },
- *   ],
- *   defaultSort: { key: "timestamp", direction: "desc" },
- * });
- */
-export default function usePageFilters<T = any>({
-  data = [],
-  filters = [],
-  defaultSort = null,
-}: UsePageFiltersOptions<T> = {}): UsePageFiltersReturn<T> {
-  const initialValues = useMemo(() => {
-    const v: FilterValues = {};
-    for (const f of filters) {
-      if (f.defaultValue !== undefined) {
-        v[f.id] = f.defaultValue;
-      } else if (f.type === "search") {
-        v[f.id] = "";
-      } else if (f.type === "select") {
-        v[f.id] = "all";
-      } else if (f.type === "toggle") {
-        v[f.id] = false;
-      } else if (f.type === "dateRange") {
-        v[f.id] = null;
-      }
-    }
-    return v;
-  }, [filters]);
-
-  const [values, setValues] = useState<FilterValues>(initialValues);
-  const [sort, setSortState] = useState<SortState | null>(defaultSort);
-
-  const setFilter = useCallback((id: string, value: FilterValue) => {
-    setValues((prev) => ({ ...prev, [id]: value }));
-  }, []);
-
-  const resetFilters = useCallback(() => {
-    setValues(initialValues);
-  }, [initialValues]);
-
-  const setSort = useCallback((key: string | null, direction?: SortDirection) => {
-    setSortState(key ? { key, direction: direction ?? "asc" } : null);
-  }, []);
-
-  const toggleSort = useCallback((key: string) => {
-    setSortState((prev) => {
-      if (prev?.key !== key) return { key, direction: "asc" };
-      if (prev.direction === "asc") return { key, direction: "desc" };
-      return null;
-    });
-  }, []);
-
-  const filteredData = useMemo(
-    () => applyFilters(data, filters, values),
-    [data, filters, values]
-  );
-
-  const sortedData = useMemo(
-    () => (sort ? sortByKey(filteredData, sort.key, sort.direction) : filteredData),
-    [filteredData, sort]
-  );
-
-  const activeFilterCount = useMemo(() => {
-    let count = 0;
-    for (const f of filters) {
-      const v = values[f.id];
-      if (f.type === "search" && v && typeof v === "string" && v.trim()) count++;
-      else if (f.type === "select" && v && v !== "all") count++;
-      else if (f.type === "toggle" && v) count++;
-      else if (f.type === "dateRange" && v) count++;
-    }
-    return count;
-  }, [filters, values]);
-
-  return {
-    values,
-    setFilter,
-    resetFilters,
-    sort,
-    setSort,
-    toggleSort,
-    filteredData,
-    sortedData,
-    activeFilterCount,
-  };
-}

package/src/components/library/filters/FilterBar.tsx

@@ -1,105 +0,0 @@
-import SearchFilter from "./SearchFilter";
-import SelectFilter, { SelectOption } from "./SelectFilter";
-import ToggleFilter from "./ToggleFilter";
-import { XMarkIcon } from "@heroicons/react/24/outline";
-
-export interface FilterDefinition {
-  id: string;
-  type: "search" | "select" | "toggle";
-  label?: string;
-  placeholder?: string;
-  options?: (string | SelectOption)[];
-  className?: string;
-}
-
-export interface FilterBarProps {
-  filters?: FilterDefinition[];
-  values?: Record<string, any>;
-  onChange?: (filterId: string, value: any) => void;
-  onReset?: () => void;
-  activeCount?: number;
-  layout?: "inline" | "stacked";
-}
-
-/**
- * Renders a row of filter controls from a definitions array.
- * Pairs with usePageFilters hook for state management.
- */
-export default function FilterBar({
-  filters = [],
-  values = {},
-  onChange,
-  onReset,
-  activeCount = 0,
-  layout = "inline",
-}: FilterBarProps) {
-  if (!filters.length) return null;
-
-  const isStacked = layout === "stacked";
-
-  return (
-    <div
-      className={[
-        "flex gap-3",
-        isStacked
-          ? "flex-col"
-          : "flex-col sm:flex-row sm:flex-wrap sm:items-center",
-      ].join(" ")}
-    >
-      {filters.map((filter) => {
-        const val = values[filter.id];
-
-        switch (filter.type) {
-          case "search":
-            return (
-              <SearchFilter
-                key={filter.id}
-                value={val ?? ""}
-                onChange={(v) => onChange?.(filter.id, v)}
-                placeholder={filter.placeholder ?? "Search…"}
-                className={filter.className ?? (isStacked ? "w-full" : "w-full sm:w-64")}
-              />
-            );
-
-          case "select":
-            return (
-              <SelectFilter
-                key={filter.id}
-                value={val ?? "all"}
-                onChange={(v) => onChange?.(filter.id, v)}
-                options={filter.options ?? []}
-                label={filter.label}
-                placeholder={filter.placeholder ?? "All"}
-                className={filter.className}
-              />
-            );
-
-          case "toggle":
-            return (
-              <ToggleFilter
-                key={filter.id}
-                value={val ?? false}
-                onChange={(v) => onChange?.(filter.id, v)}
-                label={filter.label}
-                className={filter.className}
-              />
-            );
-
-          default:
-            return null;
-        }
-      })}
-
-      {activeCount > 0 && onReset ? (
-        <button
-          type="button"
-          onClick={onReset}
-          className="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
-        >
-          <XMarkIcon className="h-3.5 w-3.5" aria-hidden="true" />
-          Clear {activeCount} {activeCount === 1 ? "filter" : "filters"}
-        </button>
-      ) : null}
-    </div>
-  );
-}

package/src/components/library/filters/SearchFilter.tsx

@@ -1,42 +0,0 @@
-import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
-
-export interface SearchFilterProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  className?: string;
-}
-
-export default function SearchFilter({
-  value = "",
-  onChange,
-  placeholder = "Search…",
-  className = "",
-}: SearchFilterProps) {
-  return (
-    <div className={["relative", className].filter(Boolean).join(" ")}>
-      <MagnifyingGlassIcon
-        className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 dark:text-slate-500"
-        aria-hidden="true"
-      />
-      <input
-        type="text"
-        value={value}
-        onChange={(e) => onChange?.(e.target.value)}
-        placeholder={placeholder}
-        className="h-9 w-full rounded-lg border border-slate-200 bg-white pl-9 pr-8 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500 dark:focus:ring-offset-slate-950"
-        aria-label={placeholder}
-      />
-      {value ? (
-        <button
-          type="button"
-          onClick={() => onChange?.("")}
-          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300"
-          aria-label="Clear search"
-        >
-          <XMarkIcon className="h-4 w-4" />
-        </button>
-      ) : null}
-    </div>
-  );
-}

package/src/components/library/filters/SelectFilter.tsx

@@ -1,62 +0,0 @@
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-
-export interface SelectOption {
-  value: string;
-  label: string;
-}
-
-export interface SelectFilterProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  options?: (string | SelectOption)[];
-  label?: string;
-  placeholder?: string;
-  className?: string;
-}
-
-/**
- * Dropdown select filter.
- */
-export default function SelectFilter({
-  value = "all",
-  onChange,
-  options = [],
-  label,
-  placeholder,
-  className = "",
-}: SelectFilterProps) {
-  const normalizedOptions = options.map((opt) =>
-    typeof opt === "string" ? { value: opt, label: opt } : opt
-  );
-
-  return (
-    <div className={["relative inline-flex items-center gap-2", className].filter(Boolean).join(" ")}>
-      {label ? (
-        <span className="shrink-0 text-xs font-medium text-slate-500 dark:text-slate-400">
-          {label}
-        </span>
-      ) : null}
-      <div className="relative">
-        <select
-          value={value}
-          onChange={(e) => onChange?.(e.target.value)}
-          className="h-9 appearance-none rounded-lg border border-slate-200 bg-white py-0 pl-3 pr-8 text-sm font-medium text-slate-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200 dark:focus:ring-offset-slate-950"
-          aria-label={label ?? placeholder ?? "Filter"}
-        >
-          {placeholder ? (
-            <option value="all">{placeholder}</option>
-          ) : null}
-          {normalizedOptions.map((opt) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
-        <ChevronDownIcon
-          className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 dark:text-slate-500"
-          aria-hidden="true"
-        />
-      </div>
-    </div>
-  );
-}

package/src/components/library/filters/ToggleFilter.tsx

@@ -1,53 +0,0 @@
-export interface ToggleFilterProps {
-  value?: boolean;
-  onChange?: (value: boolean) => void;
-  label?: string;
-  className?: string;
-}
-
-/**
- * Toggle switch filter.
- */
-export default function ToggleFilter({
-  value = false,
-  onChange,
-  label,
-  className = "",
-}: ToggleFilterProps) {
-  return (
-    <label
-      className={[
-        "inline-flex cursor-pointer items-center gap-2",
-        className,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-    >
-      <button
-        type="button"
-        role="switch"
-        aria-checked={value}
-        onClick={() => onChange?.(!value)}
-        className={[
-          "relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950",
-          value
-            ? "bg-brand-500"
-            : "bg-slate-200 dark:bg-slate-700",
-        ].join(" ")}
-      >
-        <span
-          aria-hidden="true"
-          className={[
-            "pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow ring-0 transition-transform",
-            value ? "translate-x-4" : "translate-x-0",
-          ].join(" ")}
-        />
-      </button>
-      {label ? (
-        <span className="text-sm font-medium text-slate-700 dark:text-slate-200">
-          {label}
-        </span>
-      ) : null}
-    </label>
-  );
-}

package/src/components/library/filters/index.ts

@@ -1,4 +0,0 @@
-export { default as FilterBar } from "./FilterBar";
-export { default as SearchFilter } from "./SearchFilter";
-export { default as SelectFilter } from "./SelectFilter";
-export { default as ToggleFilter } from "./ToggleFilter";