@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/filter/Filter.tsx

@@ -0,0 +1,233 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+import { AdvancedFilters } from "./AdvancedFilters";
+import { FilterButton } from "./FilterButton";
+import { NormalFilters } from "./NormalFilters";
+import { FilterMetadata, FilterProps, FilterValue } from "./types";
+
+export interface UseFilterOptions<TKey extends string = string> {
+    metadata?: FilterMetadata<TKey>;
+    activeFilters: FilterValue<TKey>[];
+    onChange: (filters: FilterValue<TKey>[]) => void;
+    mode?: "both" | "normal" | "advanced";
+    isAr?: boolean;
+}
+
+export function useFilter<TKey extends string = string>({
+    metadata,
+    activeFilters,
+    onChange,
+    mode = "both",
+    isAr = false,
+}: UseFilterOptions<TKey>) {
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [showDrawer, setShowDrawer] = useState(false);
+    const [localFilters, setLocalFilters] =
+        useState<FilterValue<TKey>[]>(activeFilters);
+
+    // Sync local filters when activeFilters changes externally
+    useEffect(() => {
+        setLocalFilters(activeFilters);
+    }, [activeFilters]);
+
+    const handleToggleDropdown = () => {
+        if (!showDropdown) {
+            setLocalFilters(activeFilters);
+        }
+        setShowDropdown(!showDropdown);
+    };
+
+    const handleOpenDrawer = () => {
+        setLocalFilters(activeFilters);
+        setShowDrawer(true);
+    };
+
+    const handleCloseDrawer = () => {
+        setShowDrawer(false);
+        setLocalFilters(activeFilters);
+    };
+
+    const handleApply = (filtersToApply: FilterValue<TKey>[]) => {
+        const validFilters = filtersToApply.filter((f) => {
+            if (f.operator === "between") {
+                return (
+                    Array.isArray(f.value) &&
+                    f.value[0] !== "" &&
+                    f.value[1] !== ""
+                );
+            }
+            return f.value !== undefined && f.value !== null && f.value !== "";
+        });
+        onChange(validFilters);
+        setShowDropdown(false);
+        setShowDrawer(false);
+    };
+
+    const handleReset = () => {
+        setLocalFilters([]);
+        onChange([]);
+        setShowDropdown(false);
+        setShowDrawer(false);
+    };
+
+    const handleCancel = () => {
+        setShowDropdown(false);
+        setLocalFilters(activeFilters);
+    };
+
+    const getFilterLabel = () => {
+        if (activeFilters.length === 0) {
+            return isAr ? "الكل" : "all";
+        }
+        if (activeFilters.length === 1) {
+            const firstFilter = activeFilters[0];
+            const field = metadata?.filters.find(
+                (f) => f.column === firstFilter.column,
+            );
+            if (field) {
+                const firstThreeCols =
+                    metadata?.filters.slice(0, 3).map((x) => x.column) || [];
+                if (firstThreeCols.includes(firstFilter.column)) {
+                    return field.label;
+                }
+                const options = field.options || [];
+                const option = options.find(
+                    (opt) => String(opt.value) === String(firstFilter.value),
+                );
+                if (option) return option.label;
+                return firstFilter.value || field.label;
+            }
+            return firstFilter.column;
+        }
+        return isAr
+            ? `${activeFilters.length} نشط`
+            : `${activeFilters.length} active`;
+    };
+
+    const buttonProps = {
+        isOpen: showDropdown || showDrawer,
+        activeCount: activeFilters.length,
+        label: getFilterLabel(),
+        onClick: mode === "advanced" ? handleOpenDrawer : handleToggleDropdown,
+        isAr,
+    };
+
+    const dropdownProps = {
+        isOpen: showDropdown,
+        metadata: metadata!,
+        localFilters,
+        setLocalFilters,
+        onApply: (filtersToApply: FilterValue<TKey>[]) =>
+            handleApply(filtersToApply),
+        onQuickSelect: (filters: FilterValue<TKey>[]) => {
+            onChange(filters);
+            setShowDropdown(false);
+        },
+        onReset: handleReset,
+        onOpenAdvanced: () => {
+            setShowDropdown(false);
+            setShowDrawer(true);
+        },
+        showAdvancedButton: mode === "both",
+        isAr,
+    };
+
+    const drawerProps = {
+        isOpen: showDrawer,
+        onClose: handleCloseDrawer,
+        metadata: metadata!,
+        localFilters,
+        setLocalFilters,
+        onApply: () => handleApply(localFilters),
+        onReset: handleReset,
+        isAr,
+    };
+
+    return {
+        showDropdown,
+        showDrawer,
+        setShowDropdown,
+        setShowDrawer,
+        buttonProps,
+        dropdownProps,
+        drawerProps,
+    };
+}
+
+/**
+ * Standard unified Filter component that wraps all functionality in a single block layout.
+ * Use this for simple layouts, or use the `useFilter` hook + individual components for customized placements.
+ */
+export function Filter<TKey extends string = string>({
+    metadata,
+    activeFilters,
+    onChange,
+    mode = "both",
+    isAr = false,
+}: FilterProps<TKey>) {
+    const {
+        buttonProps,
+        dropdownProps,
+        drawerProps,
+        showDropdown,
+        showDrawer,
+        setShowDropdown,
+    } = useFilter({
+        metadata,
+        activeFilters,
+        onChange,
+        mode,
+        isAr,
+    });
+
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // Close dropdown on outside click
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                containerRef.current &&
+                !containerRef.current.contains(event.target as Node)
+            ) {
+                setShowDropdown(false);
+            }
+        };
+
+        if (showDropdown) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [showDropdown, setShowDropdown]);
+
+    if (!metadata) return null;
+
+    return (
+        <div className="relative inline-block text-left" ref={containerRef}>
+            <FilterButton {...buttonProps} />
+
+            {mode !== "advanced" && (
+                <AnimatePresence>
+                    {showDropdown && (
+                        <motion.div
+                            initial={{ opacity: 0, scale: 0.95, y: -10 }}
+                            animate={{ opacity: 1, scale: 1, y: 0 }}
+                            exit={{ opacity: 0, scale: 0.95, y: -10 }}
+                            transition={{ duration: 0.15 }}
+                            className="absolute z-50 mt-2 w-64 bg-dashboard-card p-3 rounded-xl border border-dashboard-border shadow-[0_4px_24px_rgba(0,0,0,0.3)] ltr:left-0 rtl:right-0"
+                        >
+                            <NormalFilters {...dropdownProps} />
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            )}
+
+            {mode !== "normal" && (
+                <AnimatePresence>
+                    {showDrawer && <AdvancedFilters {...drawerProps} />}
+                </AnimatePresence>
+            )}
+        </div>
+    );
+}

package/src/components/filter/FilterButton.tsx

@@ -0,0 +1,38 @@
+import { Filter as FilterIcon } from "lucide-react";
+import React from "react";
+import { Button } from "../button";
+
+interface FilterButtonProps {
+    isOpen: boolean;
+    activeCount: number;
+    label: string;
+    onClick: () => void;
+    isAr?: boolean;
+}
+
+export const FilterButton: React.FC<FilterButtonProps> = ({
+    isOpen,
+    activeCount,
+    label,
+    onClick,
+    isAr = false,
+}) => {
+    return (
+        <Button
+            onClick={onClick}
+            className={`flex items-center gap-2 px-4 h-10 rounded-full border text-xs font-semibold transition cursor-pointer shrink-0 ${
+                isOpen || activeCount > 0
+                    ? "bg-dashboard-primary/10 border-dashboard-primary/30 text-dashboard-primary hover:bg-dashboard-primary/15 font-semibold text-md py-2 px-4 shadow-sm"
+                    : "bg-dashboard-card border-dashboard-border text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground font-semibold text-md py-2 px-4 shadow-sm"
+            }`}
+        >
+            <FilterIcon size={14} />
+            <span>
+                {isAr ? "الفلترة: " : "Filter: "}
+                <span className="font-bold text-dashboard-foreground">
+                    {label}
+                </span>
+            </span>
+        </Button>
+    );
+};

package/src/components/filter/NormalFilters.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { FilterMetadata, FilterValue } from "./types";
+
+export interface NormalFiltersProps<TKey extends string = string> {
+    metadata: FilterMetadata<TKey>;
+    localFilters: FilterValue<TKey>[];
+    setLocalFilters: React.Dispatch<React.SetStateAction<FilterValue<TKey>[]>>;
+    onApply: (filters: FilterValue<TKey>[]) => void;
+    onQuickSelect?: (filters: FilterValue<TKey>[]) => void;
+    onReset: () => void;
+    onOpenAdvanced?: () => void;
+    showAdvancedButton?: boolean;
+    isAr?: boolean;
+}
+
+export function NormalFilters<TKey extends string = string>({
+    metadata,
+    localFilters,
+    setLocalFilters,
+    onApply,
+    onQuickSelect,
+    onOpenAdvanced,
+    showAdvancedButton = false,
+    isAr = false,
+}: NormalFiltersProps<TKey>) {
+    if (!metadata) return null;
+
+    // Get the first three filters from metadata
+    const firstThreeFields = metadata.filters.slice(0, 3);
+    const firstThreeCols = firstThreeFields.map((f) => f.column);
+
+    const getActiveColumn = () => {
+        if (localFilters.length === 1) {
+            if (firstThreeCols.includes(localFilters[0].column as any)) {
+                return localFilters[0].column;
+            }
+        }
+        return "";
+    };
+
+    const activeCol = getActiveColumn();
+
+    const handleSelectColumn = (colName: string) => {
+        const apply = onQuickSelect || onApply;
+        if (colName === "") {
+            setLocalFilters([]);
+            apply([]);
+        } else {
+            const nextFilters = [
+                { column: colName as TKey, operator: "=", value: "" },
+            ];
+            setLocalFilters(nextFilters);
+            apply(nextFilters);
+        }
+    };
+
+    return (
+        <div className="flex flex-col">
+            <div className="mb-3 px-1">
+                <span className="block text-[13px] font-medium text-dashboard-muted-foreground mb-2">
+                    {isAr ? "تصفية حسب" : "Filter By"}
+                </span>
+
+                <div className="flex flex-wrap gap-2">
+                    {/* "All" Option */}
+                    <button
+                        onClick={() => handleSelectColumn("")}
+                        className={`px-3 py-1 text-xs font-medium rounded-full border transition-colors cursor-pointer ${
+                            activeCol === ""
+                                ? "border-dashboard-primary/50 bg-dashboard-primary/10 text-dashboard-primary font-semibold"
+                                : "border-dashboard-border bg-dashboard-card/50 text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground"
+                        }`}
+                    >
+                        {isAr ? "الكل" : "All"}
+                    </button>
+
+                    {/* First Three Fields */}
+                    {firstThreeFields.map((field) => {
+                        const isSelected = activeCol === field.column;
+                        return (
+                            <button
+                                key={field.column}
+                                onClick={() => handleSelectColumn(field.column)}
+                                className={`px-3 py-1 text-xs font-medium rounded-full border transition-colors cursor-pointer ${
+                                    isSelected
+                                        ? "border-dashboard-primary/50 bg-dashboard-primary/10 text-dashboard-primary font-semibold"
+                                        : "border-dashboard-border bg-dashboard-card/50 text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground"
+                                }`}
+                            >
+                                {field.label}
+                            </button>
+                        );
+                    })}
+                </div>
+            </div>
+
+            {showAdvancedButton && (
+                <div className="border-t border-dashboard-border mt-2 pt-2 px-1">
+                    <button
+                        onClick={onOpenAdvanced}
+                        className="w-full text-left text-xs font-medium text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary py-1.5 px-2 rounded-md transition-colors cursor-pointer outline-none"
+                    >
+                        {isAr ? "الفلاتر المتقدمة" : "Advanced Filters"}
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}

package/src/components/filter/index.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./FilterButton";
+export * from "./NormalFilters";
+export * from "./AdvancedFilters";
+export * from "./Filter";

package/src/components/filter/types.ts

@@ -0,0 +1,36 @@
+export interface FilterValue<TKey extends string = string> {
+    column: TKey;
+    operator: string;
+    value: any;
+}
+
+export interface FilterField<TKey extends string = string> {
+    column: TKey;
+    label: string;
+    type: string; // e.g. "text", "number", "date", "select"
+    operators: string[];
+    searchable?: boolean;
+    options?: Array<{ label: string; value: any }>;
+}
+
+export interface FilterMetadata<TKey extends string = string> {
+    filters: FilterField<TKey>[];
+    operators: Record<string, string>;
+    fieldTypes?: Record<
+        string,
+        {
+            label: string;
+            component: string;
+            validation: string;
+        }
+    >;
+}
+
+export interface FilterProps<TKey extends string = string> {
+    metadata?: FilterMetadata<TKey>;
+    activeFilters: FilterValue<TKey>[];
+    onChange: (filters: FilterValue<TKey>[]) => void;
+    mode?: "both" | "normal" | "advanced"; // Default is "both"
+    isAr?: boolean; // Controls language translation
+}
+

package/src/components/form-error.tsx

@@ -0,0 +1,172 @@
+import { ThemedText } from "../index";
+import { cn } from "../support/utils";
+import { AlertCircle } from "lucide-react";
+import * as React from "react";
+
+export interface FieldValidationProps {
+    /** Direct error message, array of error messages, or custom node */
+    error?: string | string[] | React.ReactNode;
+    /** Full validation errors dictionary or API response object { errors: { field: ["msg"] } } */
+    errors?:
+        | Record<string, any>
+        | { errors?: Record<string, any> }
+        | { validationErrors?: Record<string, any> }
+        | { details?: { errors?: Record<string, any> } }
+        | null;
+    /** Specific key in the errors dictionary matching this field's payload key */
+    payloadKey?: string;
+    /** Alias for payloadKey */
+    errorKey?: string;
+    /** Classes for the outer container wrapping the control and error */
+    containerClassName?: string;
+    /** Classes for the error message container */
+    errorClassName?: string;
+}
+
+/**
+ * Searches a key in an errors container, trying exact match, snake_case, and camelCase.
+ */
+export function findErrorInContainer(
+    container: Record<string, any>,
+    key: string,
+): any {
+    if (!container || !key || typeof container !== "object") return undefined;
+    if (container[key] !== undefined) return container[key];
+
+    // Try snake_case if key is camelCase
+    const snakeKey = key.replace(
+        /[A-Z]/g,
+        (letter) => `_${letter.toLowerCase()}`,
+    );
+    if (container[snakeKey] !== undefined) return container[snakeKey];
+
+    // Try camelCase if key is snake_case
+    const camelKey = key.replace(/_([a-z])/g, (_, letter) =>
+        letter.toUpperCase(),
+    );
+    if (container[camelKey] !== undefined) return container[camelKey];
+
+    // Case-insensitive & normalized match (ignoring dashes and underscores)
+    // E.g. "slaid" matches "slaId", "sla_id", "sla-id", etc.
+    const normalizedKey = key.toLowerCase().replace(/[-_]/g, "");
+    for (const [k, v] of Object.entries(container)) {
+        if (k.toLowerCase().replace(/[-_]/g, "") === normalizedKey) {
+            return v;
+        }
+    }
+
+    return undefined;
+}
+
+/**
+ * Normalizes error values (string, array of strings, object with message) into a clean string array.
+ */
+export function normalizeErrorMessages(errorValue: any): string[] {
+    if (!errorValue) return [];
+
+    if (Array.isArray(errorValue)) {
+        return errorValue
+            .flatMap((item) => {
+                if (typeof item === "string") return item.trim();
+                if (
+                    item &&
+                    typeof item === "object" &&
+                    "message" in item &&
+                    typeof item.message === "string"
+                ) {
+                    return item.message.trim();
+                }
+                return String(item);
+            })
+            .filter(Boolean);
+    }
+
+    if (typeof errorValue === "string") {
+        return [errorValue.trim()].filter(Boolean);
+    }
+
+    if (typeof errorValue === "object" && errorValue !== null) {
+        if ("message" in errorValue && typeof errorValue.message === "string") {
+            return [errorValue.message.trim()].filter(Boolean);
+        }
+    }
+
+    return [String(errorValue)].filter(Boolean);
+}
+
+/**
+ * Resolves error messages for a field given an optional direct error or an errors dictionary and a key.
+ */
+export function resolveFieldErrors(
+    error?: string | string[] | React.ReactNode,
+    errors?: FieldValidationProps["errors"],
+    key?: string,
+): string[] {
+    if (error) {
+        return normalizeErrorMessages(error);
+    }
+
+    if (!errors || !key) return [];
+
+    let errorContainer: Record<string, any> = errors as any;
+    if (typeof errors === "object" && errors !== null) {
+        if ("response" in errors && (errors as any).response?.data?.errors) {
+            errorContainer = (errors as any).response.data.errors;
+        } else if ("response" in errors && (errors as any).response?.data && typeof (errors as any).response.data === "object") {
+            errorContainer = (errors as any).response.data;
+        } else if ("errors" in errors && errors.errors && typeof errors.errors === "object") {
+            errorContainer = errors.errors;
+        } else if (
+            "validationErrors" in errors &&
+            errors.validationErrors &&
+            typeof errors.validationErrors === "object"
+        ) {
+            errorContainer = errors.validationErrors;
+        } else if (
+            "details" in errors &&
+            errors.details &&
+            typeof errors.details === "object" &&
+            (errors.details as any).errors
+        ) {
+            errorContainer = (errors.details as any).errors;
+        }
+    }
+
+    const fieldError = findErrorInContainer(errorContainer, key);
+    return normalizeErrorMessages(fieldError);
+}
+
+export const ERROR_OUTLINE_CLASSES =
+    "!border-dashboard-destructive focus-visible:!border-dashboard-destructive ring-1 ring-dashboard-destructive/30 focus-visible:ring-dashboard-destructive/40";
+
+export interface FieldErrorProps {
+    id?: string;
+    errors?: string[];
+    className?: string;
+}
+
+export function FieldError({ id, errors, className }: FieldErrorProps) {
+    if (!errors || errors.length === 0) return null;
+
+    return (
+        <div
+            id={id}
+            className={cn("mt-1 space-y-0.5", className)}
+            role="alert"
+            aria-live="polite"
+        >
+            {errors.map((msg, idx) => (
+                <ThemedText
+                    key={idx}
+                    as="p"
+                    variant="caption"
+                    color="error"
+                    className="font-medium text-dashboard-destructive leading-tight flex items-center gap-1.5 animate-in fade-in-50 duration-200"
+                >
+                    <AlertCircle className="w-3.5 h-3.5 shrink-0 text-dashboard-destructive" />
+                    <span>{msg}</span>
+                </ThemedText>
+            ))}
+        </div>
+    );
+}