@goplusvn/core 0.1.0 → 0.1.1

package/src/crud/components/crud-filter-chips.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { X } from "lucide-react";
+
+import type { EntityConfig } from "../../types";
+
+import { Badge } from "../../ui";
+import { useCrudState } from "./crud-context";
+
+interface CrudFilterChipsProps {
+  config: EntityConfig;
+}
+
+export function CrudFilterChips({ config }: CrudFilterChipsProps) {
+  const { filters, removeFilter, search, setSearch } = useCrudState();
+
+  if (!filters.length && !search?.trim()) {
+    return null;
+  }
+
+  const getFilterLabel = (filterName: string, value: unknown): string => {
+    const filterConfig = config.filters?.find((f) => f.name === filterName);
+    if (!filterConfig) return filterName;
+
+    // Handle different filter types
+    if (filterConfig.type === "select" || filterConfig.type === "radio") {
+      const option = filterConfig.options?.find(
+        (opt) => opt.value === value || String(opt.value) === String(value),
+      );
+      return option
+        ? `${filterConfig.label}: ${option.label}`
+        : `${filterConfig.label}: ${String(value)}`;
+    }
+
+    if (filterConfig.type === "checkbox" && Array.isArray(value)) {
+      const labels = value
+        .map((v) => {
+          const option = filterConfig.options?.find(
+            (opt) => opt.value === v || String(opt.value) === String(v),
+          );
+          return option ? option.label : String(v);
+        })
+        .filter(Boolean);
+      return `${filterConfig.label}: ${labels.join(", ")}`;
+    }
+
+    if (
+      filterConfig.type === "datetime" &&
+      Array.isArray(value) &&
+      value.length === 2
+    ) {
+      return `${filterConfig.label}: ${new Date(value[0] as string).toLocaleDateString()} - ${new Date(value[1] as string).toLocaleDateString()}`;
+    }
+
+    return `${filterConfig.label}: ${String(value)}`;
+  };
+
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      {/* Search chip */}
+      {search && search.trim() && (
+        <Badge
+          variant="secondary"
+          className="gap-1.5 px-2.5 py-1 text-xs font-medium hover:bg-secondary/80 transition-colors"
+        >
+          <span className="text-muted-foreground">Search:</span>
+          <span className="font-semibold">&quot;{search}&quot;</span>
+          <button
+            onClick={() => setSearch("")}
+            className="ml-0.5 rounded-full hover:bg-secondary-foreground/20 p-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
+            aria-label="Clear search"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </Badge>
+      )}
+
+      {/* Filter chips */}
+      {filters.map((filter) => (
+        <Badge
+          key={filter.name}
+          variant="secondary"
+          className="gap-1.5 px-2.5 py-1 text-xs font-medium hover:bg-secondary/80 transition-colors"
+        >
+          <span className="text-muted-foreground">
+            {getFilterLabel(filter.name, filter.value).split(":")[0]}:
+          </span>
+          <span className="font-semibold">
+            {getFilterLabel(filter.name, filter.value).split(":")[1]?.trim()}
+          </span>
+          <button
+            onClick={() => removeFilter(filter.name)}
+            className="ml-0.5 rounded-full hover:bg-secondary-foreground/20 p-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
+            aria-label={`Remove ${filter.name} filter`}
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </Badge>
+      ))}
+    </div>
+  );
+}

package/src/crud/components/crud-filters/checkbox-filter.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import type { FilterConfig } from "../../../types";
+
+import { dataLoader } from "../../lib/data-loader";
+
+import { Checkbox } from "../../../ui/primitives/client";
+import { Label } from "../../../ui/primitives/client";
+import { useCrudContext } from "../crud-provider";
+
+interface CheckboxFilterProps {
+  filter: FilterConfig;
+}
+
+export function CheckboxFilter({ filter }: CheckboxFilterProps) {
+  const { filters, updateFilter, addFilter } = useCrudContext();
+  const currentFilter = filters.find((f) => f.name === filter.name);
+  const [value, setValue] = useState<string[]>(
+    currentFilter?.value
+      ? (currentFilter.value as string[])
+      : (filter.defaultValue as string[]) || [],
+  );
+  const [options, setOptions] = useState<
+    Array<{ label: string; value: string | number | boolean }>
+  >(filter.options || []);
+
+  // Load options from API if dataSource is provided
+  useEffect(() => {
+    if (filter.dataSource) {
+      dataLoader
+        .loadOptions(filter.dataSource)
+        .then(setOptions)
+        .catch((error) => {
+          console.error("Error loading filter options:", error);
+        });
+    }
+  }, [filter.dataSource]);
+
+  useEffect(() => {
+    const externalFilter = filters.find((f) => f.name === filter.name);
+    if (externalFilter && externalFilter.value !== value) {
+      setValue((externalFilter.value as string[]) || []);
+    }
+  }, [filters, filter.name, value]);
+
+  const handleChange = (
+    optionValue: string | number | boolean,
+    checked: boolean,
+  ) => {
+    const stringValue = String(optionValue);
+    const updatedValues = checked
+      ? [...value, stringValue]
+      : value.filter((v) => v !== stringValue);
+
+    setValue(updatedValues);
+
+    if (updatedValues.length === 0) {
+      return;
+    }
+
+    addFilter({
+      name: filter.name,
+      value: updatedValues,
+      operator: filter.operator || "in",
+    });
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label>{filter.label}</Label>
+      <div className="space-y-2">
+        {options.map((option) => (
+          <div
+            key={String(option.value)}
+            className="flex items-center space-x-2"
+          >
+            <Checkbox
+              id={`${filter.name}-${String(option.value)}`}
+              checked={value.includes(String(option.value))}
+              onCheckedChange={(checked) =>
+                handleChange(option.value, checked === true)
+              }
+            />
+            <Label
+              htmlFor={`${filter.name}-${String(option.value)}`}
+              className="font-normal cursor-pointer"
+            >
+              {option.label}
+            </Label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/crud/components/crud-filters/datetime-filter.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import type { FilterConfig } from "../../../types";
+
+import { DatePicker } from "../../../ui";
+import { DateRangePicker } from "../../../ui";
+import { Label } from "../../../ui/primitives/client";
+import { useCrudContext } from "../crud-provider";
+
+interface DateTimeFilterProps {
+  filter: FilterConfig;
+  mode?: "single" | "range";
+}
+
+export function DateTimeFilter({
+  filter,
+  mode = "single",
+}: DateTimeFilterProps) {
+  const { filters, updateFilter, addFilter } = useCrudContext();
+  const currentFilter = filters.find((f) => f.name === filter.name);
+  const [value, setValue] = useState<Date | [Date, Date] | null>(
+    currentFilter?.value
+      ? mode === "range"
+        ? (currentFilter.value as [Date, Date])
+        : (currentFilter.value as Date)
+      : null,
+  );
+
+  useEffect(() => {
+    const externalFilter = filters.find((f) => f.name === filter.name);
+    if (externalFilter && externalFilter.value !== value) {
+      setValue(
+        mode === "range"
+          ? (externalFilter.value as [Date, Date])
+          : (externalFilter.value as Date),
+      );
+    }
+  }, [filters, filter.name, mode, value]);
+
+  const handleChange = (newValue: Date | [Date, Date] | null) => {
+    setValue(newValue);
+
+    if (!newValue) {
+      return;
+    }
+
+    const operator =
+      mode === "range" ? filter.operator || "between" : filter.operator || "eq";
+
+    addFilter({
+      name: filter.name,
+      value: newValue,
+      operator,
+    });
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={filter.name}>{filter.label}</Label>
+      {mode === "range" ? (
+        <DateRangePicker
+          value={
+            value && Array.isArray(value)
+              ? { from: value[0], to: value[1] }
+              : undefined
+          }
+          onValueChange={(range) => {
+            handleChange(
+              range?.from && range?.to ? [range.from, range.to] : null,
+            );
+          }}
+        />
+      ) : (
+        <DatePicker
+          value={(value as Date) || undefined}
+          onValueChange={(date) => handleChange(date || null)}
+        />
+      )}
+    </div>
+  );
+}

package/src/crud/components/crud-filters/filter-builder.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import type { FilterConfig } from "../../../types";
+
+import { CheckboxFilter } from "./checkbox-filter";
+import { DateTimeFilter } from "./datetime-filter";
+import { RadioFilter } from "./radio-filter";
+import { SelectFilter } from "./select-filter";
+import { TextFilter } from "./text-filter";
+
+interface FilterBuilderProps {
+  filters: FilterConfig[];
+}
+
+export function FilterBuilder({ filters }: FilterBuilderProps) {
+  if (!filters || filters.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      {filters.map((filter) => {
+        switch (filter.type) {
+          case "text":
+            return <TextFilter key={filter.name} filter={filter} />;
+          case "datetime":
+            // Check if filter should be range based on operator
+            const isRange =
+              filter.operator === "between" ||
+              filter.name.toLowerCase().includes("range");
+            return (
+              <DateTimeFilter
+                key={filter.name}
+                filter={filter}
+                mode={isRange ? "range" : "single"}
+              />
+            );
+          case "select":
+            return <SelectFilter key={filter.name} filter={filter} />;
+          case "checkbox":
+            return <CheckboxFilter key={filter.name} filter={filter} />;
+          case "radio":
+            return <RadioFilter key={filter.name} filter={filter} />;
+          case "custom":
+            // Custom filter renderer
+            if (filter.renderFilter) {
+              return (
+                <div key={filter.name}>
+                  {
+                    filter.renderFilter({
+                      filter,
+                      name: filter.name,
+                      label: filter.label,
+                    }) as any
+                  }
+                </div>
+              );
+            }
+            return null;
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}

package/src/crud/components/crud-filters/index.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, Filter } from "lucide-react";
+
+import type { FilterConfig } from "../../../types";
+
+import { Button } from "../../../ui";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../../../ui";
+import { useCrudContext } from "../crud-provider";
+import { FilterBuilder } from "./filter-builder";
+
+interface CrudFiltersProps {
+  filters?: FilterConfig[];
+}
+
+export function CrudFilters({ filters }: CrudFiltersProps) {
+  const { filters: activeFilters, clearFilters } = useCrudContext();
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (!filters || filters.length === 0) {
+    return null;
+  }
+
+  const hasActiveFilters = activeFilters.length > 0;
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-full">
+      <div className="flex items-center justify-between mb-2">
+        <CollapsibleTrigger asChild>
+          <Button variant="outline" size="sm" className="gap-2">
+            <Filter className="h-4 w-4" />
+            Filters
+            {hasActiveFilters && (
+              <span className="ml-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">
+                {activeFilters.length}
+              </span>
+            )}
+            <ChevronDown
+              className={`h-4 w-4 transition-transform ${
+                isOpen ? "transform rotate-180" : ""
+              }`}
+            />
+          </Button>
+        </CollapsibleTrigger>
+        {hasActiveFilters && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={clearFilters}
+            className="h-8"
+          >
+            Clear all
+          </Button>
+        )}
+      </div>
+      <CollapsibleContent className="space-y-4">
+        <div className="rounded-lg border p-4">
+          <FilterBuilder filters={filters} />
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// Export all filter components
+export { TextFilter } from "./text-filter";
+export { DateTimeFilter } from "./datetime-filter";
+export { SelectFilter } from "./select-filter";
+export { CheckboxFilter } from "./checkbox-filter";
+export { RadioFilter } from "./radio-filter";
+export { FilterBuilder } from "./filter-builder";

package/src/crud/components/crud-filters/radio-filter.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import type { FilterConfig } from "../../../types";
+
+import { dataLoader } from "../../lib/data-loader";
+
+import { Label } from "../../../ui/primitives/client";
+import { RadioGroup, RadioGroupItem } from "../../../ui";
+import { useCrudContext } from "../crud-provider";
+
+interface RadioFilterProps {
+  filter: FilterConfig;
+}
+
+export function RadioFilter({ filter }: RadioFilterProps) {
+  const { filters, updateFilter, addFilter } = useCrudContext();
+  const currentFilter = filters.find((f) => f.name === filter.name);
+  const [value, setValue] = useState<string>(
+    currentFilter?.value
+      ? (currentFilter.value as string)
+      : (filter.defaultValue as string) || "",
+  );
+  const [options, setOptions] = useState<
+    Array<{ label: string; value: string | number | boolean }>
+  >(filter.options || []);
+
+  // Load options from API if dataSource is provided
+  useEffect(() => {
+    if (filter.dataSource) {
+      dataLoader
+        .loadOptions(filter.dataSource)
+        .then(setOptions)
+        .catch((error) => {
+          console.error("Error loading filter options:", error);
+        });
+    }
+  }, [filter.dataSource]);
+
+  useEffect(() => {
+    const externalFilter = filters.find((f) => f.name === filter.name);
+    if (externalFilter && externalFilter.value !== value) {
+      setValue((externalFilter.value as string) || "");
+    }
+  }, [filters, filter.name, value]);
+
+  const handleChange = (newValue: string) => {
+    setValue(newValue);
+
+    if (!newValue) {
+      return;
+    }
+
+    addFilter({
+      name: filter.name,
+      value: newValue,
+      operator: filter.operator || "eq",
+    });
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label>{filter.label}</Label>
+      <RadioGroup value={value} onValueChange={handleChange}>
+        {options.map((option) => (
+          <div
+            key={String(option.value)}
+            className="flex items-center space-x-2"
+          >
+            <RadioGroupItem
+              value={String(option.value)}
+              id={`${filter.name}-${String(option.value)}`}
+            />
+            <Label
+              htmlFor={`${filter.name}-${String(option.value)}`}
+              className="font-normal cursor-pointer"
+            >
+              {option.label}
+            </Label>
+          </div>
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}

package/src/crud/components/crud-filters/select-filter.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import type { FilterConfig } from "../../../types";
+
+import { dataLoader } from "../../lib/data-loader";
+
+import { Combobox } from "../../../ui/primitives/client";
+import { Label } from "../../../ui/primitives/client";
+import { useCrudContext } from "../crud-provider";
+
+interface SelectFilterProps {
+  filter: FilterConfig;
+  multiple?: boolean;
+}
+
+export function SelectFilter({ filter, multiple = false }: SelectFilterProps) {
+  const { filters, updateFilter, addFilter, removeFilter } = useCrudContext();
+  const currentFilter = filters.find((f) => f.name === filter.name);
+  const [value, setValue] = useState<string | string[]>(
+    currentFilter?.value
+      ? multiple
+        ? (currentFilter.value as string[])
+        : (currentFilter.value as string)
+      : multiple
+        ? []
+        : "",
+  );
+  const [options, setOptions] = useState<
+    Array<{ label: string; value: string | number | boolean }>
+  >(filter.options || []);
+
+  // Load options from API if dataSource is provided
+  useEffect(() => {
+    if (filter.dataSource) {
+      dataLoader
+        .loadOptions(filter.dataSource)
+        .then(setOptions)
+        .catch((error) => {
+          console.error("Error loading filter options:", error);
+        });
+    }
+  }, [filter.dataSource]);
+
+  useEffect(() => {
+    const externalFilter = filters.find((f) => f.name === filter.name);
+    if (externalFilter && externalFilter.value !== value) {
+      setValue(
+        multiple
+          ? (externalFilter.value as string[])
+          : (externalFilter.value as string),
+      );
+    }
+  }, [filters, filter.name, multiple, value]);
+
+  const handleChange = (newValue: string | number | boolean | undefined) => {
+    if (newValue === undefined) {
+      // Remove filter if value is cleared
+      removeFilter(filter.name);
+      return;
+    }
+
+    const stringValue = String(newValue);
+
+    if (multiple) {
+      const currentValues = Array.isArray(value) ? value : [];
+      const updatedValues = currentValues.includes(stringValue)
+        ? currentValues.filter((v) => v !== stringValue)
+        : [...currentValues, stringValue];
+
+      setValue(updatedValues);
+
+      if (updatedValues.length === 0) {
+        // Remove filter if no values selected
+        removeFilter(filter.name);
+        return;
+      }
+
+      addFilter({
+        name: filter.name,
+        value: updatedValues,
+        operator: filter.operator || "in",
+      });
+    } else {
+      setValue(stringValue);
+
+      if (!stringValue || stringValue === "") {
+        // Remove filter if value is cleared
+        removeFilter(filter.name);
+        return;
+      }
+
+      addFilter({
+        name: filter.name,
+        value: stringValue,
+        operator: filter.operator || "eq",
+      });
+    }
+  };
+
+  if (multiple) {
+    const selectedValues = Array.isArray(value) ? value : [];
+    return (
+      <div className="space-y-2">
+        <Label>{filter.label}</Label>
+        <div className="space-y-2">
+          {options.map((option) => (
+            <label
+              key={String(option.value)}
+              className="flex items-center space-x-2 cursor-pointer"
+            >
+              <input
+                type="checkbox"
+                checked={selectedValues.includes(String(option.value))}
+                onChange={() => handleChange(String(option.value))}
+                className="rounded border-gray-300"
+              />
+              <span>{option.label}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={filter.name}>{filter.label}</Label>
+      <Combobox
+        id={filter.name}
+        options={options}
+        value={value as string}
+        onValueChange={handleChange}
+        placeholder={`Select ${filter.label}`}
+        searchPlaceholder={`Search ${filter.label.toLowerCase()}...`}
+        emptyText={`No ${filter.label.toLowerCase()} found.`}
+      />
+    </div>
+  );
+}