@goplusvn/core 0.1.0 → 0.1.1

package/src/crud/components/crud-provider.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+
+import type {
+  ActiveFilter,
+  CrudPermissions,
+  CrudQueryParams,
+  EntityConfig,
+  SortingState,
+} from "../../types";
+import type { ReactNode } from "react";
+import {
+  CrudConfigContext,
+  CrudSelectionContext,
+  CrudStateContext,
+  useCrudConfig,
+  useCrudSelection,
+  useCrudState,
+} from "./crud-context";
+import type {
+  CrudConfigContextValue,
+  CrudSelectionContextValue,
+  CrudStateContextValue,
+  CrudTranslations,
+} from "./crud-context";
+
+// Combined interface for backward compatibility
+interface CrudContextValue
+  extends CrudConfigContextValue,
+    CrudStateContextValue,
+    CrudSelectionContextValue {}
+
+interface CrudProviderProps {
+  children: ReactNode;
+  initialConfig?: EntityConfig;
+  initialPermissions?: CrudPermissions;
+  initialTranslations?: CrudTranslations;
+}
+
+export function CrudProvider({
+  children,
+  initialConfig,
+  initialPermissions,
+  initialTranslations,
+}: CrudProviderProps) {
+  // --- Config State ---
+  const [config, setConfig] = useState<EntityConfig | null>(
+    initialConfig || null,
+  );
+  const [permissions, setPermissions] = useState<CrudPermissions>({
+    create: false,
+    read: false,
+    update: false,
+    delete: false,
+    export: false,
+    import: false,
+    approve: false,
+    reject: false,
+    ...initialPermissions,
+  });
+  const [translations, setTranslations] = useState<CrudTranslations>(
+    initialTranslations || {},
+  );
+
+  // --- State (Search, Filters, Pagination, Sorting) ---
+  const [search, setSearch] = useState<string>("");
+  const [filters, setFilters] = useState<ActiveFilter[]>([]);
+  const [pagination, setPagination] = useState({ page: 1, pageSize: 10 });
+
+  // Validate defaultSort field exists in visible table fields
+  const getValidDefaultSort = (): SortingState | null => {
+    if (!initialConfig?.defaultSort) return null;
+
+    const defaultSortField = initialConfig.defaultSort.field;
+    const fieldExists = initialConfig.fields.some(
+      (field) => field.name === defaultSortField && !field.hideInTable,
+    );
+
+    if (!fieldExists) {
+      console.warn(
+        `Default sort field "${defaultSortField}" is not visible in table. Using first visible sortable field instead.`,
+      );
+      // Find first visible sortable field
+      const firstSortableField = initialConfig.fields.find(
+        (field) => !field.hideInTable && field.sortable !== false,
+      );
+      if (firstSortableField) {
+        return {
+          field: firstSortableField.name,
+          direction: initialConfig.defaultSort.direction,
+        };
+      }
+      return null;
+    }
+
+    return initialConfig.defaultSort;
+  };
+
+  const [sorting, setSorting] = useState<SortingState | null>(
+    getValidDefaultSort(),
+  );
+
+  // --- Selection State ---
+  const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
+
+  // Filter helpers
+  const addFilter = useCallback((filter: ActiveFilter) => {
+    setFilters((prev) => {
+      const existing = prev.findIndex((f) => f.name === filter.name);
+      if (existing >= 0) {
+        const updated = [...prev];
+        updated[existing] = filter;
+        return updated;
+      }
+      return [...prev, filter];
+    });
+  }, []);
+
+  const removeFilter = useCallback((filterName: string) => {
+    setFilters((prev) => prev.filter((f) => f.name !== filterName));
+  }, []);
+
+  const updateFilter = useCallback((filterName: string, value: unknown) => {
+    setFilters((prev) =>
+      prev.map((f) => (f.name === filterName ? { ...f, value } : f)),
+    );
+  }, []);
+
+  const clearFilters = useCallback(() => {
+    setFilters([]);
+  }, []);
+
+  // Pagination helpers
+  const setPage = useCallback((page: number) => {
+    setPagination((prev) => ({ ...prev, page }));
+  }, []);
+
+  const setPageSize = useCallback((pageSize: number) => {
+    setPagination((prev) => ({ ...prev, pageSize, page: 1 }));
+  }, []);
+
+  // Selection helpers
+  const toggleRowSelection = useCallback((rowId: string) => {
+    setSelectedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowId)) {
+        next.delete(rowId);
+      } else {
+        next.add(rowId);
+      }
+      return next;
+    });
+  }, []);
+
+  const selectAllRows = useCallback((rowIds: string[]) => {
+    setSelectedRows((prev) => {
+      const allSelected = rowIds.every((id) => prev.has(id));
+      if (allSelected) {
+        return new Set();
+      }
+      return new Set(rowIds);
+    });
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedRows(new Set());
+  }, []);
+
+  // Query params builder
+  const getQueryParams = useCallback((): CrudQueryParams => {
+    const params: CrudQueryParams = {
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+    };
+
+    // Add search if it exists and is not empty
+    if (search && search.trim().length > 0) {
+      params.search = search.trim();
+    }
+
+    // Add sorting if exists
+    if (sorting) {
+      params.sort = sorting;
+    }
+
+    // Add filters if exists
+    if (filters.length > 0) {
+      params.filters = filters;
+    }
+
+    console.log("getQueryParams:", params); // Debug log
+
+    return params;
+  }, [pagination, search, sorting, filters]);
+
+  // --- Context Values ---
+
+  const configValue = useMemo<CrudConfigContextValue>(
+    () => ({
+      config,
+      setConfig,
+      permissions,
+      setPermissions,
+      translations,
+      setTranslations,
+    }),
+    [config, permissions, translations],
+  );
+
+  const stateValue = useMemo<CrudStateContextValue>(
+    () => ({
+      search,
+      setSearch,
+      filters,
+      setFilters,
+      addFilter,
+      removeFilter,
+      updateFilter,
+      clearFilters,
+      pagination,
+      setPagination,
+      setPage,
+      setPageSize,
+      sorting,
+      setSorting,
+      getQueryParams,
+    }),
+    [
+      search,
+      filters,
+      pagination,
+      sorting,
+      addFilter,
+      removeFilter,
+      updateFilter,
+      clearFilters,
+      setPage,
+      setPageSize,
+      getQueryParams,
+    ],
+  );
+
+  const selectionValue = useMemo<CrudSelectionContextValue>(
+    () => ({
+      selectedRows,
+      setSelectedRows,
+      toggleRowSelection,
+      selectAllRows,
+      clearSelection,
+    }),
+    [selectedRows, toggleRowSelection, selectAllRows, clearSelection],
+  );
+
+  return (
+    <CrudConfigContext.Provider value={configValue}>
+      <CrudStateContext.Provider value={stateValue}>
+        <CrudSelectionContext.Provider value={selectionValue}>
+          {children}
+        </CrudSelectionContext.Provider>
+      </CrudStateContext.Provider>
+    </CrudConfigContext.Provider>
+  );
+}
+
+// Backward compatibility hook
+export function useCrudContext(): CrudContextValue {
+  const configContext = useCrudConfig();
+  const stateContext = useCrudState();
+  const selectionContext = useCrudSelection();
+
+  return {
+    ...configContext,
+    ...stateContext,
+    ...selectionContext,
+  };
+}

package/src/crud/components/crud-row-actions.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import {
+  Archive,
+  Copy,
+  Eye,
+  MoreHorizontal,
+  Pencil,
+  Trash2,
+  CheckCircle2,
+  XCircle,
+} from "lucide-react";
+
+import type { CrudPermissions, EntityConfig } from "../../types";
+
+import { Button } from "../../ui";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../ui/primitives/client";
+import { DynamicIcon } from "../../ui";
+
+interface CrudRowActionsProps {
+  rowId: string;
+  rowData: Record<string, unknown>;
+  config: EntityConfig;
+  permissions: CrudPermissions;
+  onEdit?: (rowId: string, rowData?: Record<string, unknown>) => void;
+  onDelete?: (rowId: string) => void;
+  onCustomAction?: (
+    action: string,
+    rowId: string,
+    rowData: Record<string, unknown>,
+  ) => void | Promise<void>;
+  translations?: {
+    edit?: string;
+    delete?: string;
+    actions?: string;
+  };
+}
+
+export function CrudRowActions({
+  rowId,
+  rowData,
+  config,
+  permissions,
+  onEdit,
+  onDelete,
+  onCustomAction,
+  translations,
+}: CrudRowActionsProps) {
+  const t = {
+    edit: translations?.edit || "Edit",
+    delete: translations?.delete || "Delete",
+    actions: translations?.actions || "Actions",
+  };
+
+  const getActionIcon = (action: string, icon?: string) => {
+    if (icon) {
+      return (
+        <DynamicIcon
+          name={icon as any}
+          className="mr-2 h-4 w-4"
+          aria-hidden="true"
+        />
+      );
+    }
+
+    switch (action) {
+      case "copy":
+      case "duplicate":
+        return <Copy className="mr-2 h-4 w-4" aria-hidden="true" />;
+      case "view":
+        return <Eye className="mr-2 h-4 w-4" aria-hidden="true" />;
+      case "archive":
+        return <Archive className="mr-2 h-4 w-4" aria-hidden="true" />;
+      case "approve":
+        return <CheckCircle2 className="mr-2 h-4 w-4" aria-hidden="true" />;
+      case "reject":
+        return <XCircle className="mr-2 h-4 w-4" aria-hidden="true" />;
+      default:
+        return null;
+    }
+  };
+
+  const hasCustomActions = config.rowActions && config.rowActions.length > 0;
+  // Note: visibleWhen is removed during serialization, so all actions are visible
+  // For conditional visibility, handle it in the handler or use a different approach
+  const visibleCustomActions = config.rowActions || [];
+
+  const hasEditOrDelete =
+    (permissions.update && onEdit) || (permissions.delete && onDelete);
+  const hasApproveOrReject = permissions.approve || permissions.reject;
+  const hasAnyActions =
+    hasEditOrDelete || hasApproveOrReject || visibleCustomActions.length > 0;
+
+  if (!hasAnyActions) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className="h-8 w-8 p-0"
+          aria-label={`${t.actions} for row ${rowId}`}
+          aria-haspopup="true"
+        >
+          <span className="sr-only">Open menu</span>
+          <MoreHorizontal className="h-4 w-4" aria-hidden="true" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" aria-label="Row actions">
+        {/* Edit Action */}
+        {permissions.update && onEdit && (
+          <DropdownMenuItem
+            onClick={() => onEdit(rowId, rowData)}
+            aria-label={`${t.edit} row ${rowId}`}
+          >
+            <Pencil className="mr-2 h-4 w-4" aria-hidden="true" />
+            {t.edit}
+          </DropdownMenuItem>
+        )}
+
+        {/* Custom Actions */}
+        {visibleCustomActions.length > 0 && (
+          <>
+            {hasEditOrDelete && <DropdownMenuSeparator />}
+            {visibleCustomActions.map((action, idx) => {
+              const handleClick = async () => {
+                if (action.handler) {
+                  await action.handler(rowId, rowData);
+                } else if (onCustomAction) {
+                  await onCustomAction(action.action, rowId, rowData);
+                }
+              };
+
+              // Check if user has permission for this custom action
+              const hasActionPermission =
+                action.action === "approve"
+                  ? permissions.approve
+                  : action.action === "reject"
+                    ? permissions.reject
+                    : true;
+
+              if (!hasActionPermission) return null;
+
+              const variant = action.variant || "default";
+              const isDestructive = variant === "destructive";
+
+              return (
+                <DropdownMenuItem
+                  key={idx}
+                  onClick={handleClick}
+                  className={isDestructive ? "text-destructive" : ""}
+                  aria-label={`${action.label} row ${rowId}`}
+                >
+                  {getActionIcon(action.action, action.icon)}
+                  {action.label}
+                </DropdownMenuItem>
+              );
+            })}
+          </>
+        )}
+
+        {/* Delete Action */}
+        {permissions.delete && onDelete && (
+          <>
+            {(hasEditOrDelete || visibleCustomActions.length > 0) && (
+              <DropdownMenuSeparator />
+            )}
+            <DropdownMenuItem
+              onClick={() => onDelete(rowId)}
+              className="text-destructive"
+              aria-label={`${t.delete} row ${rowId}`}
+            >
+              <Trash2 className="mr-2 h-4 w-4" aria-hidden="true" />
+              {t.delete}
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/crud/components/crud-search.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Search } from "lucide-react";
+
+import { Input } from "../../ui";
+import { useCrudState } from "./crud-context";
+
+interface CrudSearchProps {
+  placeholder?: string;
+  debounceMs?: number;
+}
+
+export function CrudSearch({
+  placeholder = "Search...",
+  debounceMs = 300,
+}: CrudSearchProps) {
+  const { search, setSearch } = useCrudState();
+  const [localSearch, setLocalSearch] = useState(search);
+  const lastSetValueRef = useRef<string>(search); // Track last value we set to context
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Debounce search - only update context after user stops typing
+  useEffect(() => {
+    // Clear any pending timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      // Only update context if value changed
+      if (localSearch !== lastSetValueRef.current) {
+        lastSetValueRef.current = localSearch;
+        setSearch(localSearch);
+      }
+      timeoutRef.current = null;
+    }, debounceMs);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [localSearch, debounceMs, setSearch]);
+
+  // Sync with context when search changes externally (e.g., reset button)
+  // Only sync if the change didn't come from our own debounced update
+  useEffect(() => {
+    if (search !== lastSetValueRef.current) {
+      // External update - sync local state and update ref
+      lastSetValueRef.current = search;
+      setLocalSearch(search);
+      // Clear any pending debounce
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    }
+  }, [search]);
+
+  return (
+    <div className="relative">
+      <Search
+        className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none"
+        aria-hidden="true"
+      />
+      <Input
+        type="text"
+        placeholder={placeholder}
+        value={localSearch}
+        onChange={(e) => setLocalSearch(e.target.value)}
+        className="pl-9"
+        aria-label="Search table"
+        aria-describedby="search-description"
+      />
+      <span id="search-description" className="sr-only">
+        Search and filter table data
+      </span>
+    </div>
+  );
+}