@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/filters/FilterPanel.tsx

@@ -1,227 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Div } from "../../ui";
-import { FilterFacetSection } from "./FilterFacetSection";
-import type { FacetOption } from "./FilterFacetSection";
-import { RangeFilter } from "./RangeFilter";
-import { SwitchFilter } from "./SwitchFilter";
-
-// ─── UrlTable interface ───────────────────────────────────────────────────────
-
-export interface UrlTable {
-  get(key: string): string;
-  set(key: string, value: string): void;
-  setMany(updates: Record<string, string>): void;
-}
-
-// ─── FilterConfig discriminated union ────────────────────────────────────────
-
-export interface FacetSingleConfig {
-  type: "facet-single";
-  key: string;
-  title: string;
-  options: FacetOption[];
-  defaultCollapsed?: boolean;
-  searchable?: boolean;
-}
-
-export interface FacetMultiConfig {
-  type: "facet-multi";
-  key: string;
-  title: string;
-  options: FacetOption[];
-  defaultCollapsed?: boolean;
-  searchable?: boolean;
-}
-
-export interface SwitchConfig {
-  type: "switch";
-  key: string;
-  title: string;
-  label: string;
-  defaultCollapsed?: boolean;
-}
-
-export interface RangeNumberConfig {
-  type: "range-number";
-  minKey: string;
-  maxKey: string;
-  title: string;
-  prefix?: string;
-  minLabel?: string;
-  maxLabel?: string;
-  minPlaceholder?: string;
-  maxPlaceholder?: string;
-  showSlider?: boolean;
-  minBound?: number;
-  maxBound?: number;
-  step?: number;
-  defaultCollapsed?: boolean;
-}
-
-export interface RangeDateConfig {
-  type: "range-date";
-  fromKey: string;
-  toKey: string;
-  title: string;
-  minPlaceholder?: string;
-  maxPlaceholder?: string;
-  defaultCollapsed?: boolean;
-}
-
-export type FilterConfig =
-  | FacetSingleConfig
-  | FacetMultiConfig
-  | SwitchConfig
-  | RangeNumberConfig
-  | RangeDateConfig;
-
-// ─── FilterPanel ─────────────────────────────────────────────────────────────
-
-export interface FilterPanelProps {
-  config: FilterConfig[];
-  table: UrlTable;
-  className?: string;
-}
-
-export function FilterPanel({
-  config,
-  table,
-  className = "",
-}: FilterPanelProps) {
-  const [expandedIndex, setExpandedIndex] = useState<number | null>(() =>
-    config.findIndex(
-      (c) => !(c as { defaultCollapsed?: boolean }).defaultCollapsed,
-    ),
-  );
-
-  const handleToggle = (idx: number) =>
-    setExpandedIndex((prev) => (prev === idx ? null : idx));
-
-  return (
-    <Div className={className}>
-      {config.map((item, idx) => {
-        const isOpen = expandedIndex === idx;
-
-        switch (item.type) {
-          case "facet-single": {
-            const value = table.get(item.key);
-            const selected = value ? [value] : [];
-            return (
-              <FilterFacetSection
-                key={`${item.type}-${item.key}`}
-                title={item.title}
-                options={item.options}
-                selectionMode="single"
-                selected={selected}
-                defaultCollapsed={item.defaultCollapsed}
-                searchable={item.searchable}
-                isOpen={isOpen}
-                onToggle={() => handleToggle(idx)}
-                onClear={() => table.set(item.key, "")}
-                onChange={(vals: string[]) =>
-                  table.set(item.key, vals[0] ?? "")
-                }
-              />
-            );
-          }
-
-          case "facet-multi": {
-            const raw = table.get(item.key);
-            const selected = raw ? raw.split(",").filter(Boolean) : [];
-            return (
-              <FilterFacetSection
-                key={`${item.type}-${item.key}`}
-                title={item.title}
-                options={item.options}
-                selectionMode="multi"
-                selected={selected}
-                defaultCollapsed={item.defaultCollapsed}
-                searchable={item.searchable}
-                isOpen={isOpen}
-                onToggle={() => handleToggle(idx)}
-                onClear={() => table.set(item.key, "")}
-                onChange={(vals: string[]) =>
-                  table.set(item.key, vals.join(","))
-                }
-              />
-            );
-          }
-
-          case "switch": {
-            const checked = table.get(item.key) === "true";
-            return (
-              <SwitchFilter
-                key={`${item.type}-${item.key}`}
-                title={item.title}
-                label={item.label}
-                checked={checked}
-                onChange={(v) => table.set(item.key, v ? "true" : "")}
-                defaultCollapsed={item.defaultCollapsed}
-                isOpen={isOpen}
-                onToggle={() => handleToggle(idx)}
-                onClear={() => table.set(item.key, "")}
-              />
-            );
-          }
-
-          case "range-number": {
-            const min = table.get(item.minKey);
-            const max = table.get(item.maxKey);
-            return (
-              <RangeFilter
-                key={`${item.type}-${item.minKey}-${item.maxKey}`}
-                title={item.title}
-                type="number"
-                minValue={min}
-                maxValue={max}
-                onMinChange={(v) => table.set(item.minKey, v)}
-                onMaxChange={(v) => table.set(item.maxKey, v)}
-                prefix={item.prefix}
-                minLabel={item.minLabel}
-                maxLabel={item.maxLabel}
-                minPlaceholder={item.minPlaceholder}
-                maxPlaceholder={item.maxPlaceholder}
-                showSlider={item.showSlider}
-                minBound={item.minBound}
-                maxBound={item.maxBound}
-                step={item.step}
-                defaultCollapsed={item.defaultCollapsed}
-                isOpen={isOpen}
-                onToggle={() => handleToggle(idx)}
-                onClear={() =>
-                  table.setMany({ [item.minKey]: "", [item.maxKey]: "" })
-                }
-              />
-            );
-          }
-
-          case "range-date": {
-            const from = table.get(item.fromKey);
-            const to = table.get(item.toKey);
-            return (
-              <RangeFilter
-                key={`${item.type}-${item.fromKey}-${item.toKey}`}
-                title={item.title}
-                type="date"
-                minValue={from}
-                maxValue={to}
-                onMinChange={(v) => table.set(item.fromKey, v)}
-                onMaxChange={(v) => table.set(item.toKey, v)}
-                minPlaceholder={item.minPlaceholder}
-                maxPlaceholder={item.maxPlaceholder}
-                defaultCollapsed={item.defaultCollapsed}
-                isOpen={isOpen}
-                onToggle={() => handleToggle(idx)}
-                onClear={() =>
-                  table.setMany({ [item.fromKey]: "", [item.toKey]: "" })
-                }
-              />
-            );
-          }
-        }
-      })}
-    </Div>
-  );
-}

package/src/features/filters/RangeFilter.tsx

@@ -1,291 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button, Div, Input, Slider, Span, Text } from "../../ui";
-import { cn } from "./filterUtils";
-
-interface DualSliderProps {
-  minValue: string;
-  maxValue: string;
-  onMinChange: (v: string) => void;
-  onMaxChange: (v: string) => void;
-  minBound: number;
-  maxBound: number;
-  step?: number;
-  prefix?: string;
-}
-
-function DualSlider({
-  minValue,
-  maxValue,
-  onMinChange,
-  onMaxChange,
-  minBound,
-  maxBound,
-  step = 1,
-  prefix = "",
-}: DualSliderProps) {
-  const minNum = Math.max(
-    minBound,
-    Math.min(parseFloat(minValue) || minBound, maxBound),
-  );
-  const maxNum = Math.min(
-    maxBound,
-    Math.max(parseFloat(maxValue) || maxBound, minBound),
-  );
-
-  return (
-    <Div className="w-full space-y-2">
-      <Div className="flex items-center justify-between">
-        <Span className="text-sm font-semibold tabular-nums text-primary-600 dark:text-secondary-400">
-          {prefix}
-          {minNum}
-        </Span>
-        <Span className="text-xs text-zinc-500 dark:text-zinc-400">-</Span>
-        <Span className="text-sm font-semibold tabular-nums text-primary-600 dark:text-secondary-400">
-          {prefix}
-          {maxNum}
-        </Span>
-      </Div>
-
-      <Div className="space-y-1" aria-hidden="true">
-        <Slider
-          value={minNum}
-          min={minBound}
-          max={Math.max(minBound, maxNum - step)}
-          step={step}
-          onChange={(v) => onMinChange(String(v))}
-        />
-        <Slider
-          value={maxNum}
-          min={Math.min(maxBound, minNum + step)}
-          max={maxBound}
-          step={step}
-          onChange={(v) => onMaxChange(String(v))}
-        />
-      </Div>
-
-      <Div className="flex items-center justify-between">
-        <Span className="text-xs text-zinc-500 dark:text-zinc-400">
-          {prefix}
-          {minBound}
-        </Span>
-        <Span className="text-xs text-zinc-500 dark:text-zinc-400">
-          {prefix}
-          {maxBound}
-        </Span>
-      </Div>
-    </Div>
-  );
-}
-
-export interface RangeFilterProps {
-  title: string;
-  minLabel?: string;
-  maxLabel?: string;
-  minValue: string;
-  maxValue: string;
-  onMinChange: (v: string) => void;
-  onMaxChange: (v: string) => void;
-  type?: "number" | "date";
-  prefix?: string;
-  minPlaceholder?: string;
-  maxPlaceholder?: string;
-  defaultCollapsed?: boolean;
-  showSlider?: boolean;
-  minBound?: number;
-  maxBound?: number;
-  step?: number;
-  className?: string;
-  isOpen?: boolean;
-  onToggle?: () => void;
-  onClear?: () => void;
-}
-
-export function RangeFilter({
-  title,
-  minLabel,
-  maxLabel,
-  minValue,
-  maxValue,
-  onMinChange,
-  onMaxChange,
-  type = "number",
-  prefix,
-  minPlaceholder,
-  maxPlaceholder,
-  defaultCollapsed = true,
-  showSlider = false,
-  minBound,
-  maxBound,
-  step = 1,
-  className = "",
-  isOpen: controlledOpen,
-  onToggle,
-  onClear,
-}: RangeFilterProps) {
-  const isControlled = controlledOpen !== undefined;
-  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
-  const isCollapsed = isControlled ? !controlledOpen : internalCollapsed;
-
-  const handleToggle = () => {
-    if (onToggle) onToggle();
-    else setInternalCollapsed((c) => !c);
-  };
-
-  const canShowSlider =
-    showSlider &&
-    type === "number" &&
-    minBound !== undefined &&
-    maxBound !== undefined;
-  const hasValue = !!(minValue || maxValue);
-
-  const inputClass =
-    "w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-xs text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20";
-
-  return (
-    <Div
-      role="group"
-      aria-labelledby={`rf-${title}`}
-      className={cn(
-        "p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0",
-        className,
-      )}
-    >
-      <Div className="flex items-center gap-2">
-        <Button
-          type="button"
-          id={`rf-${title}`}
-          onClick={handleToggle}
-          variant="ghost"
-          size="sm"
-          className="flex flex-1 items-center justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity"
-          aria-expanded={!isCollapsed}
-        >
-          <Span className="flex items-center gap-2">
-            {title}
-            {hasValue && (
-              <Span className="inline-flex items-center justify-center w-5 h-5 text-xs rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 ring-1 ring-emerald-600/20">
-                1
-              </Span>
-            )}
-          </Span>
-          <svg
-            className={cn(
-              "w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200",
-              isCollapsed ? "" : "rotate-180",
-            )}
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-            aria-hidden="true"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M19 9l-7 7-7-7"
-            />
-          </svg>
-        </Button>
-
-        {onClear && hasValue && (
-          <Button
-            type="button"
-            onClick={onClear}
-            variant="ghost"
-            size="sm"
-            className="inline-flex items-center justify-center w-5 h-5 text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400 rounded-full transition-colors"
-            aria-label="Clear"
-          >
-            <svg
-              className="w-3 h-3"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2.5}
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </Button>
-        )}
-      </Div>
-
-      {!isCollapsed && (
-        <Div className="mt-3 space-y-3">
-          {canShowSlider && (
-            <DualSlider
-              minValue={minValue}
-              maxValue={maxValue}
-              onMinChange={onMinChange}
-              onMaxChange={onMaxChange}
-              minBound={minBound}
-              maxBound={maxBound}
-              step={step}
-              prefix={prefix}
-            />
-          )}
-
-          <Div className="flex items-end gap-2">
-            <Div className="flex-1 min-w-0">
-              {minLabel && (
-                <Text className="text-xs text-zinc-500 dark:text-zinc-400 mb-1">
-                  {minLabel}
-                </Text>
-              )}
-              <Div className="relative">
-                {prefix && (
-                  <Span className="absolute left-2 top-1/2 -translate-y-1/2 text-xs text-zinc-400 dark:text-zinc-500 pointer-events-none">
-                    {prefix}
-                  </Span>
-                )}
-                <Input
-                  type={type}
-                  value={minValue}
-                  onChange={(e) => onMinChange(e.target.value)}
-                  placeholder={
-                    minPlaceholder ?? (type === "date" ? "From" : "Min")
-                  }
-                  className={cn(inputClass, prefix ? "pl-5" : "")}
-                />
-              </Div>
-            </Div>
-
-            <Span className="flex-shrink-0 pb-1.5 text-zinc-400 dark:text-zinc-500 text-xs">
-              -
-            </Span>
-
-            <Div className="flex-1 min-w-0">
-              {maxLabel && (
-                <Text className="text-xs text-zinc-500 dark:text-zinc-400 mb-1">
-                  {maxLabel}
-                </Text>
-              )}
-              <Div className="relative">
-                {prefix && (
-                  <Span className="absolute left-2 top-1/2 -translate-y-1/2 text-xs text-zinc-400 dark:text-zinc-500 pointer-events-none">
-                    {prefix}
-                  </Span>
-                )}
-                <Input
-                  type={type}
-                  value={maxValue}
-                  onChange={(e) => onMaxChange(e.target.value)}
-                  placeholder={
-                    maxPlaceholder ?? (type === "date" ? "To" : "Max")
-                  }
-                  className={cn(inputClass, prefix ? "pl-5" : "")}
-                />
-              </Div>
-            </Div>
-          </Div>
-        </Div>
-      )}
-    </Div>
-  );
-}

package/src/features/filters/SwitchFilter.tsx

@@ -1,143 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button, Div, Span, Text } from "../../ui";
-import { cn } from "./filterUtils";
-
-export interface SwitchFilterProps {
-  title: string;
-  label: string;
-  checked: boolean;
-  onChange: (v: boolean) => void;
-  defaultCollapsed?: boolean;
-  className?: string;
-  isOpen?: boolean;
-  onToggle?: () => void;
-  onClear?: () => void;
-}
-
-export function SwitchFilter({
-  title,
-  label,
-  checked,
-  onChange,
-  defaultCollapsed = true,
-  className = "",
-  isOpen: controlledOpen,
-  onToggle,
-  onClear,
-}: SwitchFilterProps) {
-  const isControlled = controlledOpen !== undefined;
-  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
-  const isCollapsed = isControlled ? !controlledOpen : internalCollapsed;
-
-  const handleToggle = () => {
-    if (onToggle) onToggle();
-    else setInternalCollapsed((c) => !c);
-  };
-
-  return (
-    <Div
-      role="group"
-      aria-labelledby={`sf-${title}`}
-      className={cn(
-        "p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0",
-        className,
-      )}
-    >
-      <Div className="flex items-center gap-2">
-        <Button
-          type="button"
-          id={`sf-${title}`}
-          onClick={handleToggle}
-          variant="ghost"
-          size="sm"
-          className="flex flex-1 items-center justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity"
-          aria-expanded={!isCollapsed}
-        >
-          <Text className="text-sm font-semibold text-zinc-900 dark:text-zinc-50">
-            {title}
-          </Text>
-          <svg
-            className={cn(
-              "w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200",
-              isCollapsed ? "" : "rotate-180",
-            )}
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-            aria-hidden="true"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M19 9l-7 7-7-7"
-            />
-          </svg>
-        </Button>
-        {checked && onClear && (
-          <Button
-            type="button"
-            onClick={onClear}
-            variant="ghost"
-            size="sm"
-            className="inline-flex items-center justify-center w-5 h-5 text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400 rounded-full transition-colors"
-            aria-label="Clear"
-          >
-            <svg
-              className="w-3 h-3"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2.5}
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </Button>
-        )}
-      </Div>
-
-      {!isCollapsed && (
-        <Div className="mt-3">
-          <Button
-            type="button"
-            role="switch"
-            variant="ghost"
-            size="sm"
-            aria-checked={checked}
-            onClick={() => onChange(!checked)}
-            className="flex items-center justify-between w-full group"
-          >
-            <Span className="text-sm text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors">
-              {label}
-            </Span>
-
-            {/* Toggle pill */}
-            <Span
-              aria-hidden="true"
-              className={cn(
-                "relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200",
-                checked
-                  ? "bg-primary-600 dark:bg-secondary-500"
-                  : "bg-zinc-200 dark:bg-slate-700",
-              )}
-            >
-              <Span
-                className={cn(
-                  "pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200",
-                  checked ? "translate-x-4" : "translate-x-0",
-                )}
-              />
-            </Span>
-          </Button>
-        </Div>
-      )}
-    </Div>
-  );
-}

package/src/features/filters/filterUtils.ts

@@ -1,24 +0,0 @@
-/**
- * Utility helpers for filter option arrays.
- */
-
-export type FilterOption = { value: string; label: string };
-
-export function getFilterLabel(
-  options: ReadonlyArray<FilterOption>,
-  value: string,
-): string | undefined {
-  return options.find((o) => o.value === value)?.label;
-}
-
-export function getFilterValue(
-  options: ReadonlyArray<FilterOption>,
-  label: string,
-): string | undefined {
-  return options.find((o) => o.label === label)?.value;
-}
-
-/** Simple class-name concatenation. */
-export function cn(...classes: (string | undefined | null | false)[]): string {
-  return classes.filter(Boolean).join(" ");
-}