@licklist/design 0.78.5-dev.92 → 0.78.5-dev.93

package/src/v2/shadcn/_reference/tables/BulkActionsBar.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Button } from '../ui/button';
+import * as Icons from '../../../icons';
+
+type IconName = 'arrow-left' | 'arrow-right' | 'update' | 'delete' | 'mail' | 'tick' | string;
+
+const iconMap: Record<string, React.FC<{ className?: string }>> = {
+  'delete': Icons.IconDelete,
+  'mail': Icons.IconMail,
+  'tick': Icons.IconTick,
+  'update': Icons.IconUpdate,
+};
+
+interface BulkAction {
+  label: string;
+  icon?: IconName;
+  onClick: () => void;
+  variant?: 'default' | 'ghost' | 'destructive';
+  dangerSoft?: boolean;
+}
+
+interface BulkActionsBarProps {
+  selectedCount: number;
+  actions: BulkAction[];
+  onClearSelection: () => void;
+}
+
+export const BulkActionsBar: React.FC<BulkActionsBarProps> = ({
+  selectedCount,
+  actions,
+  onClearSelection,
+}) => {
+  return (
+    <div className="flex items-center justify-between gap-4 w-full px-4 py-3 bg-surface-primary border-b border-border-primary">
+      <div className="flex items-center gap-3">
+        <span className="text-[13px] font-medium text-label-secondary">
+          {selectedCount} {selectedCount === 1 ? 'item' : 'items'} selected
+        </span>
+        <button
+          onClick={onClearSelection}
+          className="text-[13px] font-medium text-label-primary hover:text-label-secondary transition-colors"
+        >
+          Clear
+        </button>
+      </div>
+      
+      <div className="flex items-center gap-2">
+        {actions.map((action, index) => {
+          const IconComp = action.icon ? iconMap[action.icon] : null;
+          const isDangerSoft = action.icon === 'delete' || action.dangerSoft;
+          return (
+            <Button
+              key={index}
+              variant={action.variant || 'ghost'}
+              size="sm"
+              onClick={action.onClick}
+              withIcon={!!IconComp}
+              className={isDangerSoft ? 'bg-surface-danger-soft border-transparent [&_path]:fill-fill-danger text-label-danger hover:!bg-surface-danger-soft-hover' : ''}
+            >
+              {IconComp && <IconComp className="w-4 h-4 fill-current" />}
+              {action.label}
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/v2/shadcn/_reference/tables/DataTable.tsx

@@ -0,0 +1,221 @@
+import React, { useState, useMemo } from 'react';
+import { DataTableProps } from './types';
+import TableActionMenu, { MenuItem } from '../TableActionMenu';
+import { cn } from '../../lib/utils';
+import { Checkbox } from '../ui/checkbox';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { TablePagination } from '../ui/table-pagination';
+
+/**
+ * DataTable - Generic, type-safe table component
+ * Supports optional row clicks, actions, icons, checkboxes, and custom rendering
+ */
+export function DataTable<T>({
+  data,
+  columns,
+  keyExtractor,
+  onRowClick,
+  rowActions,
+  rowQuickActions,
+  rowIcon,
+  emptyState,
+  className,
+  selectable = false,
+  selectedItems = [],
+  onSelectionChange,
+  sortKey,
+  sortDirection,
+  onSort,
+  pagination,
+}: DataTableProps<T>) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 24;
+
+  // Calculate pagination
+  const paginatedData = useMemo(() => {
+    if (!pagination) return data;
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    return data.slice(startIndex, endIndex);
+  }, [data, currentPage, pagination]);
+
+  const totalPages = Math.ceil(data.length / itemsPerPage);
+  
+  const displayData = pagination ? paginatedData : data;
+  const allItemIds = displayData.map(keyExtractor);
+  const isAllSelected = displayData.length > 0 && selectedItems.length === displayData.length;
+  const isSomeSelected = selectedItems.length > 0 && selectedItems.length < displayData.length;
+
+  const handleSelectAll = () => {
+    if (isAllSelected) {
+      onSelectionChange?.([]);
+    } else {
+      onSelectionChange?.(allItemIds);
+    }
+  };
+
+  const handleSelectItem = (itemId: string) => {
+    if (selectedItems.includes(itemId)) {
+      onSelectionChange?.(selectedItems.filter(id => id !== itemId));
+    } else {
+      onSelectionChange?.([...selectedItems, itemId]);
+    }
+  };
+
+  return (
+    <div className={cn("flex flex-col w-full overflow-hidden", className)}>
+      {/* Table Header */}
+      <div className="flex h-12 items-center self-stretch bg-surface-secondary px-4 border-b border-border-primary gap-4 min-w-0 overflow-hidden">
+        {selectable && (
+          <div className="flex-shrink-0 w-4">
+            <Checkbox
+              checked={isAllSelected}
+              onCheckedChange={handleSelectAll}
+              aria-label="Select all"
+              className={cn(isSomeSelected && "data-[state=checked]:bg-primary")}
+            />
+          </div>
+        )}
+        {!selectable && rowIcon && <div className="flex-shrink-0 w-[20px]"></div>}
+        {columns.map((column, index) => {
+          const isSorted = column.sortKey && sortKey === column.sortKey;
+          const canSort = column.sortable && column.sortKey && onSort;
+          
+          return (
+            <div
+              key={index}
+              className={cn(
+                "text-label-secondary text-[13px] font-medium leading-4 flex items-center gap-1",
+                column.width || (index === 0 ? "flex-1" : ""),
+                column.labelClassName,
+                column.className,
+                canSort && "cursor-pointer hover:text-label-primary transition-colors select-none"
+              )}
+              onClick={() => canSort && onSort(column.sortKey!)}
+            >
+              {column.label}
+              {canSort && (
+                <span className="flex-shrink-0">
+                  {isSorted ? (
+                    sortDirection === 'asc' ? (
+                      <ChevronUp className="w-3.5 h-3.5" />
+                    ) : (
+                      <ChevronDown className="w-3.5 h-3.5" />
+                    )
+                  ) : (
+                    <ChevronDown className="w-3.5 h-3.5 opacity-0 group-hover:opacity-40" />
+                  )}
+                </span>
+              )}
+            </div>
+          );
+        })}
+        {(rowQuickActions || rowActions) && <div className={cn("flex-shrink-0", rowQuickActions ? "w-[80px]" : "w-[40px]")}></div>}
+      </div>
+
+      {/* Table Body */}
+      <div className="flex flex-col relative">
+        {displayData.length === 0 ? (
+          <div className="flex items-center justify-center">
+            {emptyState || (
+              <div className="py-12 text-label-secondary">No data found</div>
+            )}
+          </div>
+        ) : (
+          displayData.map((item) => {
+            const key = keyExtractor(item);
+            const actions = rowActions?.(item);
+
+            return (
+              <div
+                key={key}
+                className={cn(
+                  "group flex items-center self-stretch px-4 py-4 border-b border-border-primary last:border-b-0 hover:bg-surface-primary-hover transition-colors gap-4 min-w-0 overflow-hidden",
+                  onRowClick && "cursor-pointer"
+                )}
+                onClick={() => onRowClick?.(item)}
+              >
+                {/* Checkbox or Icon */}
+                {selectable ? (
+                  <div 
+                    className="flex-shrink-0 w-4"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <Checkbox
+                      checked={selectedItems.includes(key)}
+                      onCheckedChange={() => handleSelectItem(key)}
+                      aria-label={`Select item ${key}`}
+                    />
+                  </div>
+                ) : rowIcon ? (
+                  <div className="flex-shrink-0 w-[20px]">
+                    {rowIcon(item)}
+                  </div>
+                ) : null}
+
+                {/* Column Values */}
+                {columns.map((column, colIndex) => {
+                  let content: React.ReactNode;
+
+                  if (column.render) {
+                    content = column.render(item);
+                  } else if (column.accessor) {
+                    if (typeof column.accessor === 'function') {
+                      content = column.accessor(item);
+                    } else {
+                      content = String(item[column.accessor] ?? '');
+                    }
+                  }
+
+                  return (
+                    <div
+                      key={colIndex}
+                      className={cn(
+                        "text-label-primary text-[13px] font-normal leading-4",
+                        column.width || (colIndex === 0 ? "flex-1" : ""),
+                        column.className
+                      )}
+                    >
+                      {content}
+                    </div>
+                  );
+                })}
+
+                {/* Quick Actions & Action Menu */}
+                {(rowQuickActions || (actions && actions.length > 0)) && (
+                  <div 
+                    className={cn("flex items-center justify-end gap-1 flex-shrink-0", rowQuickActions ? "w-[80px]" : "w-[40px]")}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {rowQuickActions?.(item)}
+                    {actions && actions.length > 0 && (
+                      <TableActionMenu 
+                        items={actions.map(action => ({
+                          label: action.label,
+                          onClick: () => action.onClick(item),
+                          variant: action.variant
+                        }) as MenuItem)}
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* Pagination */}
+      {pagination && data.length > itemsPerPage && (
+        <TablePagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          totalItems={data.length}
+          itemsPerPage={itemsPerPage}
+          onPageChange={setCurrentPage}
+          entityName={pagination.entityName}
+        />
+      )}
+    </div>
+  );
+}

package/src/v2/shadcn/_reference/tables/TableControls.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Input } from '../ui/input';
+import { Button } from '../ui/button';
+import { TableControlsProps } from './types';
+
+/**
+ * TableControls - Reusable search, filter, and action controls for tables
+ * Can be used independently or with DataTable component
+ */
+export const TableControls: React.FC<TableControlsProps> = ({
+  searchConfig,
+  filters,
+  actions,
+  filterLabel = 'Quick Filters:'
+}) => {
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Search and Actions Row */}
+      {(searchConfig || actions) && (
+        <div className="flex justify-between items-start gap-4 flex-wrap">
+          {/* Search Input */}
+          {searchConfig && (
+            <div className="flex flex-col gap-2 flex-1 min-w-0 max-sm:w-full sm:min-w-[280px] sm:max-w-[480px]">
+              {searchConfig.label && (
+                <label className="text-label-primary text-[13px] font-medium">
+                  {searchConfig.label}
+                </label>
+              )}
+              <Input
+                placeholder={searchConfig.placeholder || 'Search...'}
+                value={searchConfig.value}
+                onChange={(e) => searchConfig.onChange(e.target.value)}
+                className="w-full"
+              />
+            </div>
+          )}
+
+          {/* Header Actions */}
+          {actions && actions.length > 0 && (
+            <div className="flex gap-2 flex-shrink-0" style={{ marginTop: searchConfig?.label ? '22px' : '0' }}>
+              {actions.map((action, index) => (
+                <Button
+                  key={index}
+                  variant={action.variant || 'default'}
+                  size={action.size || 'default'}
+                  withIcon={action.withIcon ?? !!action.icon}
+                  onClick={action.onClick}
+                  className="max-sm:h-9 max-sm:px-3 max-sm:text-sm"
+                >
+                  {action.icon}
+                  {/* Show mobile label on small screens, full label on larger */}
+                  {action.mobileLabel ? (
+                    <>
+                      <span className="hidden sm:inline">{action.label}</span>
+                      <span className="sm:hidden">{action.mobileLabel}</span>
+                    </>
+                  ) : (
+                    action.label
+                  )}
+                </Button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Quick Filters */}
+      {filters && filters.length > 0 && (
+        <div className="flex items-center gap-2 max-sm:overflow-x-auto max-sm:overflow-y-hidden max-sm:-mx-4 max-sm:px-4 max-sm:scrollbar-hide">
+          <span className="text-label-secondary text-[13px] font-medium whitespace-nowrap flex-shrink-0">
+            {filterLabel}
+          </span>
+          <div className="flex gap-2 flex-shrink-0">
+            {filters.map((filter, index) => (
+              <Button
+                key={index}
+                variant={filter.isActive ? 'default' : 'outline'}
+                size="sm"
+                onClick={filter.onClick}
+                className={`text-[11px] font-mono rounded-full px-3 whitespace-nowrap flex-shrink-0 h-8 min-w-0 border ${
+                  filter.isActive 
+                    ? 'bg-fill-primary hover:bg-fill-primary/90 active:bg-fill-primary/80 border-transparent border-0' 
+                    : 'border-border-primary'
+                }`}
+              >
+                {filter.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/v2/shadcn/_reference/tables/index.ts

@@ -0,0 +1,3 @@
+export { DataTable } from './DataTable';
+export { TableControls } from './TableControls';
+export * from './types';

package/src/v2/shadcn/_reference/tables/types.ts

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react';
+
+// Core column configuration
+export interface ColumnConfig<T> {
+  label: string;
+  accessor?: keyof T | ((item: T) => any);
+  render?: (item: T) => ReactNode;
+  width?: string;
+  className?: string;
+  labelClassName?: string;
+  sortKey?: string;
+  sortable?: boolean;
+}
+
+// Search configuration
+export interface SearchConfig {
+  placeholder?: string;
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+}
+
+// Filter configuration
+export interface FilterConfig {
+  label: string;
+  value: string;
+  onClick: () => void;
+  isActive: boolean;
+}
+
+// Header action button
+export interface HeaderAction {
+  label: string;
+  mobileLabel?: string; // Shorter label for mobile (e.g., "Add" instead of "Add Customer")
+  icon?: ReactNode;
+  onClick: () => void;
+  variant?: 'default' | 'outline' | 'ghost';
+  withIcon?: boolean;
+  size?: 'default' | 'sm' | 'lg';
+}
+
+// Row action menu item
+export interface RowAction<T> {
+  label: string;
+  onClick: (item: T) => void;
+  variant?: 'default' | 'danger';
+}
+
+// Table controls props
+export interface TableControlsProps {
+  searchConfig?: SearchConfig;
+  filters?: FilterConfig[];
+  actions?: HeaderAction[];
+  filterLabel?: string;
+}
+
+// Data table props
+export interface DataTableProps<T> {
+  data: T[];
+  columns: ColumnConfig<T>[];
+  keyExtractor: (item: T) => string;
+  
+  // Optional features
+  onRowClick?: (item: T) => void;
+  rowActions?: (item: T) => RowAction<T>[];
+  rowQuickActions?: (item: T) => ReactNode;
+  rowIcon?: (item: T) => ReactNode;
+  emptyState?: ReactNode;
+  className?: string;
+  selectable?: boolean;
+  selectedItems?: string[];
+  onSelectionChange?: (selectedIds: string[]) => void;
+  sortKey?: string;
+  sortDirection?: 'asc' | 'desc';
+  onSort?: (key: string) => void;
+  pagination?: {
+    entityName: string;
+  };
+}