@goplusvn/core 0.1.0 → 0.1.2

package/src/ui/data-display/compact-stat-bar.tsx

@@ -0,0 +1,149 @@
+import React, { memo } from "react";
+import { cn } from "../../utils";
+
+export type StatColorTheme =
+  | "dark"
+  | "green"
+  | "blue"
+  | "purple"
+  | "orange"
+  | "emerald"
+  | "rose"
+  | "primary"
+  | "destructive"
+  | "muted";
+
+export interface CompactStatItem {
+  id: string;
+  label: string;
+  value: string | number;
+  icon: React.ElementType;
+  colorTheme?: StatColorTheme;
+  isHighlighted?: boolean;
+}
+
+export interface CompactStatBarProps {
+  items: CompactStatItem[];
+  className?: string;
+}
+
+const THEME_STYLES: Record<
+  StatColorTheme,
+  { wrapper: string; box: string; icon: string; label: string }
+> = {
+  dark: {
+    wrapper: "hover:bg-[#181d26]/5 dark:hover:bg-slate-100/5",
+    box: "bg-[#181d26] group-hover:bg-[#0a2e0e] dark:bg-slate-800 dark:group-hover:bg-slate-700",
+    icon: "text-white",
+    label: "text-[#181d26] dark:text-slate-300",
+  },
+  green: {
+    wrapper: "hover:bg-[#006400]/10",
+    box: "bg-[#006400] group-hover:bg-[#39bf45]",
+    icon: "text-white",
+    label: "text-[#006400] dark:text-[#39bf45]",
+  },
+  blue: {
+    wrapper: "hover:bg-[#254fad]/10",
+    box: "bg-[#254fad] group-hover:bg-[#1d3d8f]",
+    icon: "text-white",
+    label: "text-[#254fad] dark:text-[#60a5fa]",
+  },
+  purple: {
+    wrapper: "hover:bg-[#7C3AED]/10",
+    box: "bg-[#7C3AED] group-hover:bg-[#6D28D9]",
+    icon: "text-white",
+    label: "text-[#7C3AED] dark:text-[#a78bfa]",
+  },
+  orange: {
+    wrapper: "hover:bg-[#EA580C]/10",
+    box: "bg-[#EA580C] group-hover:bg-[#C2410C]",
+    icon: "text-white",
+    label: "text-[#EA580C] dark:text-[#fb923c]",
+  },
+  emerald: {
+    wrapper: "hover:bg-[#059669]/10",
+    box: "bg-[#059669] group-hover:bg-[#047857]",
+    icon: "text-white",
+    label: "text-[#059669] dark:text-[#34d399]",
+  },
+  primary: {
+    wrapper: "hover:bg-primary/10",
+    box: "bg-primary group-hover:bg-primary/90",
+    icon: "text-primary-foreground",
+    label: "text-primary",
+  },
+  destructive: {
+    wrapper: "hover:bg-destructive/10",
+    box: "bg-destructive group-hover:bg-destructive/90",
+    icon: "text-destructive-foreground",
+    label: "text-destructive",
+  },
+  muted: {
+    wrapper: "hover:bg-muted/50",
+    box: "bg-muted group-hover:bg-muted-foreground/20",
+    icon: "text-muted-foreground",
+    label: "text-muted-foreground",
+  },
+  rose: {
+    wrapper: "hover:bg-[#E11D48]/10",
+    box: "bg-[#E11D48] group-hover:bg-[#BE123C]",
+    icon: "text-white",
+    label: "text-[#E11D48] dark:text-[#fb7185]",
+  },
+};
+
+export const CompactStatBar = memo(function CompactStatBar({
+  items,
+  className,
+}: CompactStatBarProps) {
+  if (!items || items.length === 0) return null;
+
+  return (
+    <div className={cn("flex flex-col md:flex-row md:items-stretch gap-2 pb-1", className)}>
+      <div className="flex items-stretch overflow-x-auto no-scrollbar flex-1 bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-800 shadow-sm rounded-[10px] divide-x divide-slate-100 dark:divide-slate-800">
+        {items.map((item) => {
+          const theme = THEME_STYLES[item.colorTheme || "dark"];
+          const Icon = item.icon;
+
+          return (
+            <div
+              key={item.id}
+              className={cn(
+                "flex items-center gap-3 min-w-fit px-5 py-2 flex-1 transition-colors group cursor-default",
+                theme.wrapper
+              )}
+            >
+              <div
+                className={cn(
+                  "p-1.5 rounded-md transition-colors shadow-sm shrink-0",
+                  theme.box
+                )}
+              >
+                <Icon className={cn("w-3.5 h-3.5", theme.icon)} strokeWidth={2.5} />
+              </div>
+              <div className="flex flex-col">
+                <span
+                  className={cn(
+                    "text-[9px] font-bold uppercase tracking-wider mb-0.5",
+                    item.isHighlighted ? "text-emerald-600 dark:text-emerald-400" : theme.label
+                  )}
+                >
+                  {item.label}
+                </span>
+                <span className={cn(
+                  "font-black leading-none",
+                  item.isHighlighted 
+                    ? "text-[22px] text-emerald-700 dark:text-emerald-400" 
+                    : "text-[17px] text-slate-900 dark:text-white"
+                )}>
+                  {item.value}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});

package/src/ui/data-display/data-table/data-table-context.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import { createContext, useCallback, useContext, useState } from "react";
+import type { ReactNode } from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface SortingState {
+  field: string;
+  direction: "asc" | "desc";
+}
+
+export interface ActiveFilter {
+  name: string;
+  value: unknown;
+  operator: string;
+}
+
+export interface PaginationState {
+  page: number;
+  pageSize: number;
+}
+
+// ============================================================================
+// DataTable Context - For standalone table usage
+// ============================================================================
+
+export interface DataTableContextValue {
+  // Pagination
+  pagination: PaginationState;
+  setPagination: (pagination: PaginationState) => void;
+  setPage: (page: number) => void;
+  setPageSize: (pageSize: number) => void;
+
+  // Sorting
+  sorting: SortingState | null;
+  setSorting: (sorting: SortingState | null) => void;
+
+  // Search
+  search: string;
+  setSearch: (search: string) => void;
+
+  // Filters
+  filters: ActiveFilter[];
+  setFilters: (filters: ActiveFilter[]) => void;
+  addFilter: (filter: ActiveFilter) => void;
+  removeFilter: (filterName: string) => void;
+  updateFilter: (filterName: string, value: unknown) => void;
+  clearFilters: () => void;
+
+  // Selection
+  selectedRows: Set<string>;
+  setSelectedRows: (rows: Set<string>) => void;
+  toggleRowSelection: (rowId: string) => void;
+  selectAllRows: (rowIds: string[]) => void;
+  clearSelection: () => void;
+  isAllSelected: boolean;
+  isPartiallySelected: boolean;
+}
+
+const DataTableContext = createContext<DataTableContextValue | undefined>(
+  undefined,
+);
+
+// ============================================================================
+// Provider Props
+// ============================================================================
+
+export interface DataTableProviderProps {
+  children: ReactNode;
+  defaultPagination?: PaginationState;
+  defaultSorting?: SortingState | null;
+  defaultSearch?: string;
+  defaultFilters?: ActiveFilter[];
+}
+
+// ============================================================================
+// DataTable Provider
+// ============================================================================
+
+export function DataTableProvider({
+  children,
+  defaultPagination = { page: 1, pageSize: 10 },
+  defaultSorting = null,
+  defaultSearch = "",
+  defaultFilters = [],
+}: DataTableProviderProps) {
+  // Pagination state
+  const [pagination, setPaginationState] =
+    useState<PaginationState>(defaultPagination);
+
+  const setPagination = useCallback((newPagination: PaginationState) => {
+    setPaginationState(newPagination);
+  }, []);
+
+  const setPage = useCallback((page: number) => {
+    setPaginationState((prev) => ({ ...prev, page }));
+  }, []);
+
+  const setPageSize = useCallback((pageSize: number) => {
+    setPaginationState((prev) => ({ ...prev, pageSize, page: 1 }));
+  }, []);
+
+  // Sorting state
+  const [sorting, setSorting] = useState<SortingState | null>(defaultSorting);
+
+  // Search state
+  const [search, setSearch] = useState<string>(defaultSearch);
+
+  // Filters state
+  const [filters, setFiltersState] = useState<ActiveFilter[]>(defaultFilters);
+
+  const setFilters = useCallback(
+    (newFilters: ActiveFilter[]) => {
+      setFiltersState(newFilters);
+      setPage(1);
+    },
+    [setPage],
+  );
+
+  const addFilter = useCallback(
+    (filter: ActiveFilter) => {
+      setFiltersState((prev) => {
+        const existing = prev.findIndex((f) => f.name === filter.name);
+        if (existing >= 0) {
+          const updated = [...prev];
+          updated[existing] = filter;
+          return updated;
+        }
+        return [...prev, filter];
+      });
+      setPage(1);
+    },
+    [setPage],
+  );
+
+  const removeFilter = useCallback(
+    (filterName: string) => {
+      setFiltersState((prev) => prev.filter((f) => f.name !== filterName));
+      setPage(1);
+    },
+    [setPage],
+  );
+
+  const updateFilter = useCallback(
+    (filterName: string, value: unknown) => {
+      setFiltersState((prev) =>
+        prev.map((f) => (f.name === filterName ? { ...f, value } : f)),
+      );
+      setPage(1);
+    },
+    [setPage],
+  );
+
+  const clearFilters = useCallback(() => {
+    setFiltersState([]);
+    setPage(1);
+  }, [setPage]);
+
+  // Selection state
+  const [selectedRows, setSelectedRowsState] = useState<Set<string>>(new Set());
+  const [allRowIds, setAllRowIds] = useState<string[]>([]);
+
+  const setSelectedRows = useCallback((rows: Set<string>) => {
+    setSelectedRowsState(rows);
+  }, []);
+
+  const toggleRowSelection = useCallback((rowId: string) => {
+    setSelectedRowsState((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowId)) {
+        next.delete(rowId);
+      } else {
+        next.add(rowId);
+      }
+      return next;
+    });
+  }, []);
+
+  const selectAllRows = useCallback((rowIds: string[]) => {
+    setAllRowIds(rowIds);
+    setSelectedRowsState((prev) => {
+      if (prev.size === rowIds.length) {
+        return new Set();
+      }
+      return new Set(rowIds);
+    });
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedRowsState(new Set());
+  }, []);
+
+  const isAllSelected =
+    allRowIds.length > 0 && selectedRows.size === allRowIds.length;
+  const isPartiallySelected =
+    selectedRows.size > 0 && selectedRows.size < allRowIds.length;
+
+  const value: DataTableContextValue = {
+    // Pagination
+    pagination,
+    setPagination,
+    setPage,
+    setPageSize,
+    // Sorting
+    sorting,
+    setSorting,
+    // Search
+    search,
+    setSearch,
+    // Filters
+    filters,
+    setFilters,
+    addFilter,
+    removeFilter,
+    updateFilter,
+    clearFilters,
+    // Selection
+    selectedRows,
+    setSelectedRows,
+    toggleRowSelection,
+    selectAllRows,
+    clearSelection,
+    isAllSelected,
+    isPartiallySelected,
+  };
+
+  return (
+    <DataTableContext.Provider value={value}>
+      {children}
+    </DataTableContext.Provider>
+  );
+}
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+export function useDataTable() {
+  const context = useContext(DataTableContext);
+  if (context === undefined) {
+    throw new Error("useDataTable must be used within DataTableProvider");
+  }
+  return context;
+}
+
+/**
+ * Optional hook that returns undefined if not in provider
+ * Useful for components that can work both with and without context
+ */
+export function useDataTableOptional() {
+  return useContext(DataTableContext);
+}

package/src/ui/data-display/data-table/data-table-empty-state.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { Database, FileSearch, SearchX } from "lucide-react";
+import type { ReactNode } from "react";
+import { Button } from "../../primitives";
+
+export interface DataTableEmptyStateProps {
+  /**
+   * Icon to display
+   */
+  icon?: ReactNode;
+  /**
+   * Title text
+   */
+  title?: string;
+  /**
+   * Description text
+   */
+  description?: string;
+  /**
+   * Whether search is active
+   */
+  hasSearch?: boolean;
+  /**
+   * Whether filters are active
+   */
+  hasFilters?: boolean;
+  /**
+   * Clear search callback
+   */
+  onClearSearch?: () => void;
+  /**
+   * Clear filters callback
+   */
+  onClearFilters?: () => void;
+  /**
+   * Primary action button
+   */
+  primaryAction?: {
+    label: string;
+    onClick: () => void;
+    icon?: ReactNode;
+  };
+  /**
+   * Custom content to render
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Empty state component for DataTable
+ * Shows different content based on whether search/filters are active
+ */
+export function DataTableEmptyState({
+  icon,
+  title,
+  description,
+  hasSearch = false,
+  hasFilters = false,
+  onClearSearch,
+  onClearFilters,
+  primaryAction,
+  children,
+}: DataTableEmptyStateProps) {
+  // Determine the appropriate empty state based on context
+  const hasActiveFiltersOrSearch = hasSearch || hasFilters;
+
+  // Default icon based on state
+  const defaultIcon = hasSearch ? (
+    <SearchX className="h-12 w-12 text-muted-foreground/50" />
+  ) : hasFilters ? (
+    <FileSearch className="h-12 w-12 text-muted-foreground/50" />
+  ) : (
+    <Database className="h-12 w-12 text-muted-foreground/50" />
+  );
+
+  // Default title based on state
+  const defaultTitle = hasSearch
+    ? "Không tìm thấy kết quả"
+    : hasFilters
+      ? "Không có dữ liệu phù hợp"
+      : "Chưa có dữ liệu";
+
+  // Default description based on state
+  const defaultDescription = hasSearch
+    ? "Không có kết quả nào khớp với từ khóa tìm kiếm. Hãy thử với từ khóa khác."
+    : hasFilters
+      ? "Không có dữ liệu nào phù hợp với bộ lọc hiện tại."
+      : "Bắt đầu bằng cách thêm mục đầu tiên.";
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full min-h-[300px] p-8 text-center">
+      {/* Icon */}
+      <div className="mb-4">{icon || defaultIcon}</div>
+
+      {/* Title */}
+      <h3 className="text-lg font-semibold text-foreground mb-2">
+        {title || defaultTitle}
+      </h3>
+
+      {/* Description */}
+      <p className="text-sm text-muted-foreground max-w-md mb-6">
+        {description || defaultDescription}
+      </p>
+
+      {/* Action buttons */}
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        {hasSearch && onClearSearch && (
+          <Button variant="outline" size="sm" onClick={onClearSearch}>
+            <SearchX className="h-4 w-4 mr-2" />
+            Xóa tìm kiếm
+          </Button>
+        )}
+
+        {hasFilters && onClearFilters && (
+          <Button variant="outline" size="sm" onClick={onClearFilters}>
+            Xóa bộ lọc
+          </Button>
+        )}
+
+        {primaryAction && (
+          <Button onClick={primaryAction.onClick}>
+            {primaryAction.icon}
+            {primaryAction.label}
+          </Button>
+        )}
+      </div>
+
+      {/* Custom content */}
+      {children}
+    </div>
+  );
+}

package/src/ui/data-display/data-table/data-table-skeleton.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { Skeleton } from "../../primitives";
+import { TableCell, TableRow } from "../../primitives";
+
+export interface DataTableSkeletonProps {
+  /**
+   * Number of columns to render
+   */
+  columns: number;
+  /**
+   * Number of rows to render
+   * @default 5
+   */
+  rows?: number;
+  /**
+   * Height of each skeleton cell
+   * @default "h-5"
+   */
+  cellHeight?: string;
+  /**
+   * Show checkbox column skeleton
+   * @default false
+   */
+  showCheckbox?: boolean;
+  /**
+   * Show row number column skeleton
+   * @default false
+   */
+  showRowNumber?: boolean;
+}
+
+/**
+ * Skeleton loading state for DataTable
+ * Renders loading placeholder rows while data is being fetched
+ */
+export function DataTableSkeleton({
+  columns,
+  rows = 5,
+  cellHeight = "h-5",
+  showCheckbox = false,
+  showRowNumber = false,
+}: DataTableSkeletonProps) {
+  const _totalColumns =
+    columns + (showCheckbox ? 1 : 0) + (showRowNumber ? 1 : 0);
+
+  return (
+    <>
+      {Array.from({ length: rows }).map((_, rowIndex) => (
+        <TableRow
+          key={`skeleton-row-${rowIndex}`}
+          className="animate-pulse"
+          aria-hidden="true"
+        >
+          {/* Checkbox skeleton */}
+          {showCheckbox && (
+            <TableCell key={`skeleton-checkbox-${rowIndex}`} className="w-12">
+              <Skeleton className="h-4 w-4 rounded" />
+            </TableCell>
+          )}
+
+          {/* Row number skeleton */}
+          {showRowNumber && (
+            <TableCell
+              key={`skeleton-stt-${rowIndex}`}
+              className="w-16 text-center"
+            >
+              <Skeleton className="h-4 w-8 mx-auto" />
+            </TableCell>
+          )}
+
+          {/* Data columns skeleton */}
+          {Array.from({ length: columns }).map((_, cellIndex) => (
+            <TableCell key={`skeleton-cell-${rowIndex}-${cellIndex}`}>
+              <Skeleton className={`${cellHeight} w-full`} />
+            </TableCell>
+          ))}
+        </TableRow>
+      ))}
+    </>
+  );
+}
+
+/**
+ * Full table skeleton including header
+ */
+export function DataTableFullSkeleton({
+  columns,
+  rows = 5,
+  showCheckbox = false,
+  showRowNumber = false,
+}: DataTableSkeletonProps) {
+  const _totalColumns =
+    columns + (showCheckbox ? 1 : 0) + (showRowNumber ? 1 : 0);
+
+  return (
+    <div className="w-full border rounded-md overflow-hidden animate-pulse">
+      {/* Header skeleton */}
+      <div className="flex bg-muted/50 border-b">
+        {showCheckbox && (
+          <div className="w-12 p-3">
+            <Skeleton className="h-4 w-4 rounded" />
+          </div>
+        )}
+        {showRowNumber && (
+          <div className="w-16 p-3 text-center">
+            <Skeleton className="h-4 w-10 mx-auto" />
+          </div>
+        )}
+        {Array.from({ length: columns }).map((_, i) => (
+          <div key={`header-${i}`} className="flex-1 p-3">
+            <Skeleton className="h-4 w-24" />
+          </div>
+        ))}
+      </div>
+
+      {/* Body skeleton */}
+      {Array.from({ length: rows }).map((_, rowIndex) => (
+        <div
+          key={`body-row-${rowIndex}`}
+          className="flex border-b last:border-b-0"
+        >
+          {showCheckbox && (
+            <div className="w-12 p-3">
+              <Skeleton className="h-4 w-4 rounded" />
+            </div>
+          )}
+          {showRowNumber && (
+            <div className="w-16 p-3 text-center">
+              <Skeleton className="h-4 w-8 mx-auto" />
+            </div>
+          )}
+          {Array.from({ length: columns }).map((_, cellIndex) => (
+            <div
+              key={`body-cell-${rowIndex}-${cellIndex}`}
+              className="flex-1 p-3"
+            >
+              <Skeleton className="h-5 w-full" />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}