@licklist/design 0.78.5-dev.106 → 0.78.5-dev.107

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

@@ -1,68 +0,0 @@
-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

@@ -1,221 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

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

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

@@ -1,79 +0,0 @@
-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;
-  };
-}