@tidecloak/ui-framework 0.0.1

package/src/components/common/StatusBadge.tsx

@@ -0,0 +1,177 @@
+import React from "react";
+import {
+  Clock,
+  CheckCircle2,
+  XCircle,
+  Check,
+  Ban,
+  AlertCircle,
+  Info,
+  AlertTriangle,
+} from "lucide-react";
+import type { StatusType, StatusConfig } from "../../types";
+
+/**
+ * Status color configurations as inline styles
+ */
+export const STATUS_STYLES: Record<StatusType, React.CSSProperties> = {
+  pending: { backgroundColor: "#fefce8", color: "#a16207", borderColor: "#fef08a" },
+  approved: { backgroundColor: "#f0fdf4", color: "#15803d", borderColor: "#bbf7d0" },
+  rejected: { backgroundColor: "#fef2f2", color: "#b91c1c", borderColor: "#fecaca" },
+  committed: { backgroundColor: "#eff6ff", color: "#1d4ed8", borderColor: "#bfdbfe" },
+  cancelled: { backgroundColor: "#f9fafb", color: "#374151", borderColor: "#e5e7eb" },
+  mixed: { backgroundColor: "#faf5ff", color: "#7e22ce", borderColor: "#e9d5ff" },
+  ready: { backgroundColor: "#f0fdf4", color: "#15803d", borderColor: "#bbf7d0" },
+  error: { backgroundColor: "#fef2f2", color: "#b91c1c", borderColor: "#fecaca" },
+  warning: { backgroundColor: "#fff7ed", color: "#c2410c", borderColor: "#fed7aa" },
+  info: { backgroundColor: "#eff6ff", color: "#1d4ed8", borderColor: "#bfdbfe" },
+  success: { backgroundColor: "#f0fdf4", color: "#15803d", borderColor: "#bbf7d0" },
+};
+
+// Keep class names for backwards compatibility with custom Badge components
+export const STATUS_COLORS: Record<StatusType, string> = {
+  pending: "bg-yellow-50 text-yellow-700 border-yellow-200",
+  approved: "bg-green-50 text-green-700 border-green-200",
+  rejected: "bg-red-50 text-red-700 border-red-200",
+  committed: "bg-blue-50 text-blue-700 border-blue-200",
+  cancelled: "bg-gray-50 text-gray-700 border-gray-200",
+  mixed: "bg-purple-50 text-purple-700 border-purple-200",
+  ready: "bg-green-50 text-green-700 border-green-200",
+  error: "bg-red-50 text-red-700 border-red-200",
+  warning: "bg-orange-50 text-orange-700 border-orange-200",
+  info: "bg-blue-50 text-blue-700 border-blue-200",
+  success: "bg-green-50 text-green-700 border-green-200",
+};
+
+/**
+ * Default status icons
+ */
+export const STATUS_ICONS: Record<StatusType, React.ComponentType<{ style?: React.CSSProperties }>> = {
+  pending: Clock,
+  approved: CheckCircle2,
+  rejected: XCircle,
+  committed: Check,
+  cancelled: Ban,
+  mixed: AlertCircle,
+  ready: CheckCircle2,
+  error: XCircle,
+  warning: AlertTriangle,
+  info: Info,
+  success: CheckCircle2,
+};
+
+export interface StatusBadgeProps {
+  /** Status type */
+  status: StatusType | string;
+  /** Custom label (defaults to capitalized status) */
+  label?: string;
+  /** Show icon */
+  showIcon?: boolean;
+  /** Custom icon override */
+  icon?: React.ReactNode;
+  /** Additional class name */
+  className?: string;
+  /** Custom status configurations for non-standard statuses */
+  customStatuses?: Record<string, { colorClass?: string; style?: React.CSSProperties; icon?: React.ComponentType<{ style?: React.CSSProperties }> }>;
+  /** Custom badge component */
+  BadgeComponent?: React.ComponentType<{
+    variant?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+  }>;
+}
+
+/**
+ * StatusBadge - Displays a colored badge based on status
+ *
+ * @example
+ * ```tsx
+ * <StatusBadge status="pending" />
+ * <StatusBadge status="approved" showIcon />
+ * <StatusBadge status="custom" customStatuses={{ custom: { style: { backgroundColor: "#fdf4ff", color: "#a21caf" } } }} />
+ * ```
+ */
+export function StatusBadge({
+  status,
+  label,
+  showIcon = true,
+  icon,
+  className,
+  customStatuses = {},
+  BadgeComponent,
+}: StatusBadgeProps) {
+  const normalizedStatus = status.toLowerCase() as StatusType;
+
+  // Get style from built-in statuses or custom statuses
+  const statusStyle =
+    STATUS_STYLES[normalizedStatus] ||
+    customStatuses[normalizedStatus]?.style ||
+    STATUS_STYLES.info;
+
+  // Get color class for custom Badge components
+  const colorClass =
+    STATUS_COLORS[normalizedStatus] ||
+    customStatuses[normalizedStatus]?.colorClass ||
+    STATUS_COLORS.info;
+
+  // Get icon
+  const IconComponent =
+    STATUS_ICONS[normalizedStatus] ||
+    customStatuses[normalizedStatus]?.icon ||
+    Info;
+
+  const displayLabel = label || status.charAt(0).toUpperCase() + status.slice(1);
+
+  const iconStyle: React.CSSProperties = { height: "0.75rem", width: "0.75rem", marginRight: "0.25rem" };
+
+  const badgeContent = (
+    <>
+      {showIcon && (
+        icon || <IconComponent style={iconStyle} />
+      )}
+      {displayLabel}
+    </>
+  );
+
+  // If custom badge component provided, use it
+  if (BadgeComponent) {
+    return (
+      <BadgeComponent variant="outline" className={className} style={statusStyle}>
+        {badgeContent}
+      </BadgeComponent>
+    );
+  }
+
+  // Default badge implementation with inline styles
+  const badgeStyle: React.CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    borderRadius: "9999px",
+    border: "1px solid",
+    padding: "0.125rem 0.625rem",
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    ...statusStyle,
+  };
+
+  return (
+    <span style={badgeStyle} className={className}>
+      {badgeContent}
+    </span>
+  );
+}
+
+/**
+ * Helper to get status badge configuration
+ */
+export function getStatusConfig(status: string): StatusConfig {
+  const normalizedStatus = status.toLowerCase() as StatusType;
+  const Icon = STATUS_ICONS[normalizedStatus] || Info;
+
+  return {
+    label: status.charAt(0).toUpperCase() + status.slice(1),
+    variant: STATUS_COLORS[normalizedStatus] ? normalizedStatus : "info",
+    icon: <Icon style={{ height: "0.75rem", width: "0.75rem", marginRight: "0.25rem" }} />,
+  };
+}

package/src/components/common/index.ts

@@ -0,0 +1,31 @@
+export { RefreshButton, type RefreshButtonProps } from "./RefreshButton";
+export {
+  StatusBadge,
+  STATUS_COLORS,
+  STATUS_ICONS,
+  getStatusConfig,
+  type StatusBadgeProps,
+} from "./StatusBadge";
+export {
+  ActionButton,
+  ActionButtonGroup,
+  ACTION_COLORS,
+  ACTION_ICONS,
+  type ActionButtonProps,
+  type ActionButtonGroupProps,
+  type ActionType,
+} from "./ActionButton";
+export {
+  EmptyState,
+  EmptyStateNoData,
+  EmptyStateNoResults,
+  EmptyStateNoFiles,
+  type EmptyStateProps,
+} from "./EmptyState";
+export {
+  Skeleton,
+  LoadingSkeleton,
+  TableRowSkeleton,
+  type SkeletonProps,
+  type LoadingSkeletonProps,
+} from "./LoadingSkeleton";

package/src/components/data-table/DataTable.tsx

@@ -0,0 +1,201 @@
+import React from "react";
+import { LoadingSkeleton } from "../common/LoadingSkeleton";
+import { EmptyState } from "../common/EmptyState";
+import type { BaseDataItem, ColumnDef, EmptyStateConfig } from "../../types";
+
+export interface DataTableProps<T extends BaseDataItem> {
+  /** Data items to display */
+  data: T[];
+  /** Column definitions */
+  columns: ColumnDef<T>[];
+  /** Loading state */
+  isLoading?: boolean;
+  /** Row key getter (defaults to item.id) */
+  getRowKey?: (item: T) => string;
+  /** Row click handler */
+  onRowClick?: (item: T) => void;
+  /** Selected row IDs for highlighting */
+  selectedIds?: string[];
+  /** Empty state configuration */
+  emptyState?: EmptyStateConfig;
+  /** Additional class name */
+  className?: string;
+  /** Custom table components */
+  components?: {
+    Table?: React.ComponentType<{ children: React.ReactNode; className?: string; style?: React.CSSProperties }>;
+    TableHeader?: React.ComponentType<{ children: React.ReactNode }>;
+    TableBody?: React.ComponentType<{ children: React.ReactNode }>;
+    TableRow?: React.ComponentType<{ children: React.ReactNode; className?: string; style?: React.CSSProperties; onClick?: () => void }>;
+    TableHead?: React.ComponentType<{ children: React.ReactNode; className?: string; style?: React.CSSProperties }>;
+    TableCell?: React.ComponentType<{ children: React.ReactNode; className?: string; style?: React.CSSProperties }>;
+    Skeleton?: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
+  };
+}
+
+/**
+ * Alignment style mapping
+ */
+const ALIGN_STYLES: Record<string, React.CSSProperties> = {
+  left: { textAlign: "left" },
+  center: { textAlign: "center" },
+  right: { textAlign: "right" },
+};
+
+/**
+ * DataTable - Generic data table component
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   data={items}
+ *   columns={[
+ *     { key: 'name', header: 'Name', cell: (item) => item.name },
+ *     { key: 'status', header: 'Status', cell: (item) => <StatusBadge status={item.status} /> },
+ *     { key: 'actions', header: 'Actions', cell: (item) => <ActionButton action="view" onClick={() => view(item)} /> },
+ *   ]}
+ *   isLoading={isLoading}
+ *   emptyState={{ title: 'No items', description: 'Create an item to get started.' }}
+ * />
+ * ```
+ */
+export function DataTable<T extends BaseDataItem>({
+  data,
+  columns,
+  isLoading = false,
+  getRowKey = (item) => item.id,
+  onRowClick,
+  selectedIds = [],
+  emptyState = { title: "No data found" },
+  className,
+  components = {},
+}: DataTableProps<T>) {
+  // Default components (can be overridden with shadcn/ui components)
+  const Table = components.Table || DefaultTable;
+  const TableHeader = components.TableHeader || DefaultTableHeader;
+  const TableBody = components.TableBody || DefaultTableBody;
+  const TableRow = components.TableRow || DefaultTableRow;
+  const TableHead = components.TableHead || DefaultTableHead;
+  const TableCell = components.TableCell || DefaultTableCell;
+  const Skeleton = components.Skeleton;
+
+  // Show loading skeleton
+  if (isLoading && data.length === 0) {
+    return <LoadingSkeleton rows={5} type="table" SkeletonComponent={Skeleton} />;
+  }
+
+  // Show empty state
+  if (!data || data.length === 0) {
+    return <EmptyState {...emptyState} />;
+  }
+
+  return (
+    <div style={{ overflowX: "auto" }} className={className}>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((column) => (
+              <TableHead
+                key={column.key}
+                style={column.align ? ALIGN_STYLES[column.align] : undefined}
+              >
+                {column.header}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map((item, index) => {
+            const rowKey = getRowKey(item);
+            const isSelected = selectedIds.includes(rowKey);
+
+            return (
+              <TableRow
+                key={rowKey}
+                onClick={onRowClick ? () => onRowClick(item) : undefined}
+                style={{
+                  cursor: onRowClick ? "pointer" : undefined,
+                  backgroundColor: isSelected ? "rgba(59, 130, 246, 0.05)" : undefined,
+                }}
+              >
+                {columns.map((column) => (
+                  <TableCell
+                    key={column.key}
+                    style={column.align ? ALIGN_STYLES[column.align] : undefined}
+                  >
+                    {column.cell(item, index)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+// Default table component implementations with inline styles
+function DefaultTable({ children, className, style }: { children: React.ReactNode; className?: string; style?: React.CSSProperties }) {
+  return (
+    <table style={{ width: "100%", fontSize: "0.875rem", borderCollapse: "collapse", ...style }} className={className}>
+      {children}
+    </table>
+  );
+}
+
+function DefaultTableHeader({ children }: { children: React.ReactNode }) {
+  return <thead>{children}</thead>;
+}
+
+function DefaultTableBody({ children }: { children: React.ReactNode }) {
+  return <tbody>{children}</tbody>;
+}
+
+function DefaultTableRow({
+  children,
+  className,
+  style,
+  onClick,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+}) {
+  return (
+    <tr
+      style={{ borderBottom: "1px solid #e5e7eb", ...style }}
+      className={className}
+      onClick={onClick}
+    >
+      {children}
+    </tr>
+  );
+}
+
+function DefaultTableHead({ children, className, style }: { children: React.ReactNode; className?: string; style?: React.CSSProperties }) {
+  return (
+    <th
+      style={{
+        height: "3rem",
+        padding: "0 1rem",
+        textAlign: "left",
+        verticalAlign: "middle",
+        fontWeight: 500,
+        color: "#6b7280",
+        ...style,
+      }}
+      className={className}
+    >
+      {children}
+    </th>
+  );
+}
+
+function DefaultTableCell({ children, className, style }: { children: React.ReactNode; className?: string; style?: React.CSSProperties }) {
+  return (
+    <td style={{ padding: "1rem", verticalAlign: "middle", ...style }} className={className}>
+      {children}
+    </td>
+  );
+}

package/src/components/data-table/PaginatedTable.tsx

@@ -0,0 +1,247 @@
+import React, { useRef } from "react";
+import { cn } from "../../utils";
+import { DataTable, type DataTableProps } from "./DataTable";
+import { usePagination, type UsePaginationOptions } from "../../hooks/usePagination";
+import type { BaseDataItem } from "../../types";
+
+export interface PaginatedTableProps<T extends BaseDataItem> extends Omit<DataTableProps<T>, 'data'> {
+  /** Data items (all or paginated from server) */
+  data: T[];
+  /** Total items count (for server-side pagination) */
+  totalItems?: number;
+  /** Whether pagination is server-side */
+  serverSide?: boolean;
+  /** Current page (controlled) */
+  page?: number;
+  /** Page size (controlled) */
+  pageSize?: number;
+  /** Page change callback */
+  onPageChange?: (page: number) => void;
+  /** Page size change callback */
+  onPageSizeChange?: (pageSize: number) => void;
+  /** Whether to show pagination controls */
+  showPagination?: boolean;
+  /** Available page sizes */
+  pageSizes?: number[];
+  /** Whether to enable auto page size */
+  autoPageSize?: boolean;
+  /** Header content (rendered above table) */
+  headerContent?: React.ReactNode;
+  /** Custom components */
+  components?: DataTableProps<T>['components'] & {
+    Select?: React.ComponentType<{
+      value: string;
+      onValueChange: (value: string) => void;
+      children: React.ReactNode;
+    }>;
+    SelectTrigger?: React.ComponentType<{ className?: string; children: React.ReactNode }>;
+    SelectValue?: React.ComponentType<Record<string, unknown>>;
+    SelectContent?: React.ComponentType<{ children: React.ReactNode }>;
+    SelectItem?: React.ComponentType<{ value: string; children: React.ReactNode }>;
+    Button?: React.ComponentType<{
+      size?: string;
+      variant?: string;
+      onClick?: () => void;
+      disabled?: boolean;
+      className?: string;
+      children: React.ReactNode;
+    }>;
+  };
+}
+
+/**
+ * PaginatedTable - DataTable with built-in pagination
+ *
+ * @example
+ * ```tsx
+ * // Client-side pagination
+ * <PaginatedTable
+ *   data={items}
+ *   columns={columns}
+ *   showPagination
+ * />
+ *
+ * // Server-side pagination
+ * <PaginatedTable
+ *   data={pageData}
+ *   columns={columns}
+ *   serverSide
+ *   totalItems={totalCount}
+ *   page={page}
+ *   pageSize={pageSize}
+ *   onPageChange={setPage}
+ *   onPageSizeChange={setPageSize}
+ * />
+ * ```
+ */
+export function PaginatedTable<T extends BaseDataItem>({
+  data,
+  totalItems,
+  serverSide = false,
+  page: controlledPage,
+  pageSize: controlledPageSize,
+  onPageChange,
+  onPageSizeChange,
+  showPagination = true,
+  pageSizes = [25, 50, 100, 200],
+  autoPageSize = false,
+  headerContent,
+  components = {},
+  className,
+  ...tableProps
+}: PaginatedTableProps<T>) {
+  const viewportRef = useRef<HTMLDivElement>(null);
+
+  // Use internal pagination hook for client-side pagination
+  const pagination = usePagination({
+    initialPage: controlledPage ?? 0,
+    initialPageSize: controlledPageSize ?? 25,
+    totalItems: serverSide ? totalItems : data.length,
+    autoPageSize,
+    viewportRef: autoPageSize ? viewportRef : undefined,
+    onPageChange,
+    onPageSizeChange,
+  });
+
+  // Use controlled values if provided
+  const page = controlledPage ?? pagination.page;
+  const pageSize = controlledPageSize ?? pagination.pageSize;
+
+  // Compute visible data for client-side pagination
+  const visibleData = serverSide
+    ? data
+    : data.slice(page * pageSize, (page + 1) * pageSize);
+
+  const hasNextPage = serverSide
+    ? data.length === pageSize
+    : (page + 1) * pageSize < data.length;
+
+  const canPrevPage = page > 0;
+
+  // Components
+  const Button = components.Button || DefaultButton;
+  const Select = components.Select;
+  const SelectTrigger = components.SelectTrigger;
+  const SelectValue = components.SelectValue;
+  const SelectContent = components.SelectContent;
+  const SelectItem = components.SelectItem;
+
+  const hasSelectComponents = Select && SelectTrigger && SelectValue && SelectContent && SelectItem;
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      {/* Pagination Header */}
+      {showPagination && (
+        <div className="flex items-center justify-between gap-2 px-3 sm:px-4 py-2 sm:py-3 border-b border-border">
+          <div className="text-xs sm:text-sm text-muted-foreground">
+            Page <span className="font-medium text-foreground">{page + 1}</span>
+          </div>
+          <div className="flex items-center gap-2 sm:gap-3">
+            {/* Page Size Selector */}
+            {hasSelectComponents && (
+              <div className="hidden sm:flex items-center gap-2 text-sm text-muted-foreground">
+                Page size
+                <Select
+                  value={pagination.pageSizeSelectValue}
+                  onValueChange={pagination.onPageSizeSelect}
+                >
+                  <SelectTrigger className="h-8 w-[92px]">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {autoPageSize && <SelectItem value="auto">Auto</SelectItem>}
+                    {pageSizes.map((size) => (
+                      <SelectItem key={size} value={String(size)}>
+                        {size}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            {/* Page Navigation */}
+            <div className="flex items-center gap-1 sm:gap-2">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  const newPage = Math.max(0, page - 1);
+                  if (onPageChange) onPageChange(newPage);
+                  else pagination.setPage(newPage);
+                }}
+                disabled={!canPrevPage}
+                className="px-2 sm:px-3"
+              >
+                <span className="hidden sm:inline">Previous</span>
+                <span className="sm:hidden">Prev</span>
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  const newPage = page + 1;
+                  if (onPageChange) onPageChange(newPage);
+                  else pagination.setPage(newPage);
+                }}
+                disabled={!hasNextPage}
+                className="px-2 sm:px-3"
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Header Content */}
+      {headerContent}
+
+      {/* Table */}
+      <div
+        ref={viewportRef}
+        className={cn(
+          autoPageSize && "h-[max(200px,calc(100vh-480px))] sm:h-[max(240px,calc(100vh-420px))] md:h-[max(320px,calc(100vh-360px))] overflow-auto"
+        )}
+      >
+        <DataTable
+          {...tableProps}
+          data={visibleData}
+          components={components}
+        />
+      </div>
+    </div>
+  );
+}
+
+// Default button
+function DefaultButton({
+  children,
+  className,
+  disabled,
+  onClick,
+}: {
+  size?: string;
+  variant?: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        "inline-flex items-center justify-center rounded-md text-sm font-medium",
+        "h-8 px-3",
+        "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/data-table/index.ts

@@ -0,0 +1,2 @@
+export { DataTable, type DataTableProps } from "./DataTable";
+export { PaginatedTable, type PaginatedTableProps } from "./PaginatedTable";