@xcelsior/ui-spreadsheets 1.0.1

package/src/components/SpreadsheetCell.tsx

@@ -0,0 +1,341 @@
+import type React from 'react';
+import { useState, useRef, useEffect } from 'react';
+import {
+    HiOutlineClipboardCopy,
+    HiOutlineClipboardCheck,
+    HiOutlineAnnotation,
+    HiOutlineChatAlt,
+    HiOutlinePencil,
+} from 'react-icons/hi';
+import { cn } from '../utils';
+import type { SpreadsheetCellProps } from '../types';
+
+const cellPaddingCompact = 'px-1.5 py-0.5';
+const cellPaddingNormal = 'px-2 py-1';
+
+/**
+ * SpreadsheetCell component - A single cell in the spreadsheet table.
+ * Supports static display, inline editing, and various cell interactions.
+ *
+ * @example
+ * ```tsx
+ * <SpreadsheetCell
+ *   value="John Doe"
+ *   column={{ id: 'name', label: 'Name', editable: true }}
+ *   row={rowData}
+ *   rowIndex={0}
+ *   rowId="1"
+ *   isEditable={true}
+ *   onClick={handleClick}
+ *   onChange={handleChange}
+ * />
+ * ```
+ */
+export const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
+    value,
+    column,
+    row,
+    rowIndex,
+    rowId: _rowId,
+    isEditable = false,
+    isEditing = false,
+    isFocused = false,
+    isRowSelected = false,
+    isRowHovered = false,
+    highlightColor,
+    hasComments = false,
+    unresolvedCommentCount = 0,
+    isCopied = false,
+    compactMode = false,
+    isPinned = false,
+    pinSide,
+    leftOffset = 0,
+    rightOffset = 0,
+    onClick,
+    onChange,
+    onConfirm,
+    onCancel,
+    onCopyDown,
+    onCopyToSelected,
+    onHighlight,
+    onAddComment,
+    onViewComments,
+    hasSelectedRows = false,
+    className,
+}) => {
+    const [localValue, setLocalValue] = useState(value);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const selectRef = useRef<HTMLSelectElement>(null);
+
+    // Sync local value when prop value changes
+    useEffect(() => {
+        setLocalValue(value);
+    }, [value]);
+
+    // Focus input when editing starts
+    useEffect(() => {
+        if (isEditing) {
+            if (column.type === 'select') {
+                selectRef.current?.focus();
+            } else {
+                inputRef.current?.focus();
+                inputRef.current?.select();
+            }
+        }
+    }, [isEditing, column.type]);
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            onConfirm?.();
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            setLocalValue(value);
+            onChange?.(value);
+            onCancel?.();
+        }
+    };
+
+    // Determine background color
+    const getBackgroundColor = () => {
+        if (highlightColor) return highlightColor;
+        if (isRowSelected) return 'rgb(219 234 254)'; // blue-100
+        if (isRowHovered) return 'rgb(243 244 246)'; // gray-100
+        return 'white';
+    };
+
+    // Render cell content based on column type
+    const renderContent = () => {
+        if (column.render) {
+            return column.render(value, row, rowIndex);
+        }
+
+        if (value === null || value === undefined || value === '') {
+            return <span className="text-gray-400">-</span>;
+        }
+
+        if (column.type === 'boolean') {
+            return value ? 'Yes' : 'No';
+        }
+
+        if (column.type === 'number') {
+            return typeof value === 'number' ? value.toLocaleString() : value;
+        }
+
+        return String(value);
+    };
+
+    // Render editing input
+    const renderEditInput = () => {
+        if (column.type === 'select' && column.options) {
+            return (
+                <select
+                    ref={selectRef}
+                    value={localValue ?? ''}
+                    onChange={(e) => {
+                        setLocalValue(e.target.value);
+                        onChange?.(e.target.value);
+                        onConfirm?.();
+                    }}
+                    onKeyDown={handleKeyDown}
+                    onBlur={() => onConfirm?.()}
+                    className={cn(
+                        'w-full border border-gray-300 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500',
+                        compactMode ? 'px-1 py-0.5' : 'px-2 py-1'
+                    )}
+                >
+                    {column.options.map((option) => (
+                        <option key={option} value={option}>
+                            {option}
+                        </option>
+                    ))}
+                </select>
+            );
+        }
+
+        return (
+            <input
+                ref={inputRef}
+                type={column.type === 'number' ? 'number' : 'text'}
+                step={column.type === 'number' ? '0.01' : undefined}
+                value={localValue ?? ''}
+                onChange={(e) => {
+                    const newValue =
+                        column.type === 'number'
+                            ? e.target.value === ''
+                                ? ''
+                                : parseFloat(e.target.value)
+                            : e.target.value;
+                    setLocalValue(newValue);
+                    onChange?.(newValue);
+                }}
+                onKeyDown={handleKeyDown}
+                onBlur={() => onConfirm?.()}
+                className={cn(
+                    'w-full border border-gray-300 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 bg-yellow-50',
+                    compactMode ? 'px-1 py-0.5' : 'px-2 py-1'
+                )}
+            />
+        );
+    };
+
+    const cellPadding = compactMode ? cellPaddingCompact : cellPaddingNormal;
+
+    const handleCellKeyDown = (e: React.KeyboardEvent<HTMLTableCellElement>) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick?.(e as unknown as React.MouseEvent);
+        }
+    };
+
+    // Build sticky positioning styles for pinned columns
+    const positionStyles: React.CSSProperties = {};
+    if (isPinned) {
+        if (pinSide === 'left') {
+            positionStyles.left = `${leftOffset}px`;
+            positionStyles.position = 'sticky';
+        } else if (pinSide === 'right') {
+            positionStyles.right = `${rightOffset}px`;
+            positionStyles.position = 'sticky';
+        }
+    }
+
+    return (
+        <td
+            onClick={onClick}
+            onKeyDown={handleCellKeyDown}
+            className={cn(
+                'border border-gray-200 text-xs group cursor-pointer transition-colors',
+                cellPadding,
+                column.align === 'right' && 'text-right',
+                column.align === 'center' && 'text-center',
+                isCopied && 'animate-pulse',
+                isFocused && 'ring-2 ring-blue-500 ring-inset',
+                isPinned ? 'z-20' : 'z-0',
+                className
+            )}
+            style={{
+                backgroundColor: getBackgroundColor(),
+                minWidth: column.minWidth || column.width,
+                ...positionStyles,
+            }}
+        >
+            {isEditing ? (
+                renderEditInput()
+            ) : (
+                <div className="flex items-center gap-1">
+                    {/* Main content */}
+                    <div
+                        className={cn(
+                            'flex-1 truncate',
+                            isEditable &&
+                                'cursor-text hover:bg-gray-50 px-0.5 rounded min-h-[18px] flex items-center bg-yellow-50/50'
+                        )}
+                        title={String(value ?? '')}
+                    >
+                        {renderContent()}
+                    </div>
+
+                    {/* Comment indicator */}
+                    {hasComments && (
+                        <button
+                            type="button"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onViewComments?.();
+                            }}
+                            className="p-0.5 hover:bg-gray-100 rounded relative shrink-0"
+                            title={`${unresolvedCommentCount} unresolved comment(s)`}
+                        >
+                            <HiOutlineChatAlt
+                                className={cn(
+                                    'h-3 w-3',
+                                    unresolvedCommentCount > 0 ? 'text-amber-500' : 'text-gray-400'
+                                )}
+                            />
+                            {unresolvedCommentCount > 0 && (
+                                <span className="absolute -top-1 -right-1 bg-amber-500 text-white text-[8px] rounded-full w-3 h-3 flex items-center justify-center">
+                                    {unresolvedCommentCount}
+                                </span>
+                            )}
+                        </button>
+                    )}
+
+                    {/* Action buttons - show on hover */}
+                    <div className="opacity-0 group-hover:opacity-100 flex items-center gap-0.5 transition-opacity shrink-0">
+                        {/* Copy down button */}
+                        {value !== null && value !== undefined && value !== '' && onCopyDown && (
+                            <button
+                                type="button"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    onCopyDown();
+                                }}
+                                className="p-0.5 bg-gray-100 hover:bg-gray-200 rounded"
+                                title="Copy value down to rows below"
+                            >
+                                <HiOutlineClipboardCopy className="h-2.5 w-2.5 text-gray-500" />
+                            </button>
+                        )}
+
+                        {/* Copy to selected button */}
+                        {hasSelectedRows &&
+                            value !== null &&
+                            value !== undefined &&
+                            value !== '' &&
+                            onCopyToSelected && (
+                                <button
+                                    type="button"
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        onCopyToSelected();
+                                    }}
+                                    className="p-0.5 bg-green-100 hover:bg-green-200 rounded"
+                                    title="Copy to selected rows"
+                                >
+                                    <HiOutlineClipboardCheck className="h-2.5 w-2.5 text-green-600" />
+                                </button>
+                            )}
+
+                        {/* Highlight button */}
+                        {onHighlight && (
+                            <button
+                                type="button"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    onHighlight();
+                                }}
+                                className="p-0.5 hover:bg-gray-100 rounded"
+                                title="Highlight cell"
+                            >
+                                <HiOutlinePencil
+                                    className={cn(
+                                        'h-2.5 w-2.5',
+                                        highlightColor ? 'text-amber-500' : 'text-gray-400'
+                                    )}
+                                />
+                            </button>
+                        )}
+
+                        {/* Add comment button */}
+                        {onAddComment && (
+                            <button
+                                type="button"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    onAddComment();
+                                }}
+                                className="p-0.5 hover:bg-gray-100 rounded"
+                                title="Add comment"
+                            >
+                                <HiOutlineAnnotation className="h-2.5 w-2.5 text-gray-400" />
+                            </button>
+                        )}
+                    </div>
+                </div>
+            )}
+        </td>
+    );
+};
+
+SpreadsheetCell.displayName = 'SpreadsheetCell';

package/src/components/SpreadsheetFilterDropdown.tsx

@@ -0,0 +1,341 @@
+import type React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { HiCheck, HiX } from 'react-icons/hi';
+import { cn } from '../utils';
+import type {
+    SpreadsheetFilterDropdownProps,
+    TextFilterOperator,
+    NumberFilterOperator,
+    DateFilterOperator,
+    SpreadsheetColumnFilter,
+} from '../types';
+
+/** Text filter operator labels */
+const TEXT_OPERATORS: { value: TextFilterOperator; label: string }[] = [
+    { value: 'contains', label: 'Contains' },
+    { value: 'notContains', label: 'Does not contain' },
+    { value: 'equals', label: 'Equals' },
+    { value: 'notEquals', label: 'Does not equal' },
+    { value: 'startsWith', label: 'Starts with' },
+    { value: 'endsWith', label: 'Ends with' },
+    { value: 'isEmpty', label: 'Is empty' },
+    { value: 'isNotEmpty', label: 'Is not empty' },
+];
+
+/** Number filter operator labels */
+const NUMBER_OPERATORS: { value: NumberFilterOperator; label: string }[] = [
+    { value: 'equals', label: 'Equals' },
+    { value: 'notEquals', label: 'Does not equal' },
+    { value: 'greaterThan', label: 'Greater than' },
+    { value: 'greaterThanOrEqual', label: 'Greater than or equal' },
+    { value: 'lessThan', label: 'Less than' },
+    { value: 'lessThanOrEqual', label: 'Less than or equal' },
+    { value: 'between', label: 'Between' },
+    { value: 'isEmpty', label: 'Is empty' },
+    { value: 'isNotEmpty', label: 'Is not empty' },
+];
+
+/** Date filter operator labels */
+const DATE_OPERATORS: { value: DateFilterOperator; label: string }[] = [
+    { value: 'equals', label: 'Equals' },
+    { value: 'notEquals', label: 'Does not equal' },
+    { value: 'before', label: 'Before' },
+    { value: 'after', label: 'After' },
+    { value: 'between', label: 'Between' },
+    { value: 'today', label: 'Today' },
+    { value: 'yesterday', label: 'Yesterday' },
+    { value: 'thisWeek', label: 'This week' },
+    { value: 'lastWeek', label: 'Last week' },
+    { value: 'thisMonth', label: 'This month' },
+    { value: 'lastMonth', label: 'Last month' },
+    { value: 'thisYear', label: 'This year' },
+    { value: 'isEmpty', label: 'Is empty' },
+    { value: 'isNotEmpty', label: 'Is not empty' },
+];
+
+/**
+ * SpreadsheetFilterDropdown component - Condition-based filter dropdown for columns.
+ * Supports text conditions, number conditions, and date conditions.
+ */
+export const SpreadsheetFilterDropdown: React.FC<SpreadsheetFilterDropdownProps> = ({
+    column,
+    filter,
+    onFilterChange,
+    onClose,
+    className,
+}) => {
+    const [textOperator, setTextOperator] = useState<TextFilterOperator>(
+        filter?.textCondition?.operator || 'contains'
+    );
+    const [textValue, setTextValue] = useState(filter?.textCondition?.value || '');
+
+    const [numberOperator, setNumberOperator] = useState<NumberFilterOperator>(
+        filter?.numberCondition?.operator || 'equals'
+    );
+    const [numberValue, setNumberValue] = useState(
+        filter?.numberCondition?.value?.toString() || ''
+    );
+    const [numberValueTo, setNumberValueTo] = useState(
+        filter?.numberCondition?.valueTo?.toString() || ''
+    );
+
+    const [dateOperator, setDateOperator] = useState<DateFilterOperator>(
+        filter?.dateCondition?.operator || 'equals'
+    );
+    const [dateValue, setDateValue] = useState(filter?.dateCondition?.value || '');
+    const [dateValueTo, setDateValueTo] = useState(filter?.dateCondition?.valueTo || '');
+
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    const isNumeric = column.type === 'number';
+    const isDate = column.type === 'date';
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                onClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [onClose]);
+
+    const handleApplyFilter = () => {
+        let newFilter: SpreadsheetColumnFilter | undefined;
+
+        if (isNumeric) {
+            const needsValue = !['isEmpty', 'isNotEmpty'].includes(numberOperator);
+            if (needsValue && !numberValue) {
+                onFilterChange(undefined);
+                onClose();
+                return;
+            }
+            newFilter = {
+                numberCondition: {
+                    operator: numberOperator,
+                    value: numberValue ? parseFloat(numberValue) : undefined,
+                    valueTo: numberValueTo ? parseFloat(numberValueTo) : undefined,
+                },
+            };
+        } else if (isDate) {
+            const needsValue = ![
+                'isEmpty',
+                'isNotEmpty',
+                'today',
+                'yesterday',
+                'thisWeek',
+                'lastWeek',
+                'thisMonth',
+                'lastMonth',
+                'thisYear',
+            ].includes(dateOperator);
+            if (needsValue && !dateValue) {
+                onFilterChange(undefined);
+                onClose();
+                return;
+            }
+            newFilter = {
+                dateCondition: {
+                    operator: dateOperator,
+                    value: dateValue || undefined,
+                    valueTo: dateValueTo || undefined,
+                },
+            };
+        } else {
+            const needsValue = !['isEmpty', 'isNotEmpty'].includes(textOperator);
+            if (needsValue && !textValue) {
+                onFilterChange(undefined);
+                onClose();
+                return;
+            }
+            newFilter = {
+                textCondition: {
+                    operator: textOperator,
+                    value: textValue || undefined,
+                },
+            };
+        }
+
+        onFilterChange(newFilter);
+        onClose();
+    };
+
+    const handleClearFilter = () => {
+        setTextValue('');
+        setNumberValue('');
+        setNumberValueTo('');
+        setDateValue('');
+        setDateValueTo('');
+        onFilterChange(undefined);
+        onClose();
+    };
+
+    const textNeedsValue = !['isEmpty', 'isNotEmpty'].includes(textOperator);
+    const numberNeedsValue = !['isEmpty', 'isNotEmpty'].includes(numberOperator);
+    const dateNeedsValue = ![
+        'isEmpty',
+        'isNotEmpty',
+        'today',
+        'yesterday',
+        'thisWeek',
+        'lastWeek',
+        'thisMonth',
+        'lastMonth',
+        'thisYear',
+    ].includes(dateOperator);
+
+    return (
+        <div
+            ref={dropdownRef}
+            className={cn(
+                'absolute top-full left-0 mt-1 bg-white border border-gray-200 shadow-lg rounded-lg w-64 overflow-hidden flex flex-col z-[100]',
+                className
+            )}
+            onClick={(e) => e.stopPropagation()}
+        >
+            <div className="px-3 py-2 border-b border-gray-200 bg-gray-50">
+                <span className="text-xs font-medium text-gray-700">Filter: {column.label}</span>
+            </div>
+
+            <div className="p-3 space-y-3">
+                {isNumeric ? (
+                    <>
+                        <div>
+                            <label className="text-xs text-gray-500 mb-1 block">Condition</label>
+                            <select
+                                value={numberOperator}
+                                onChange={(e) =>
+                                    setNumberOperator(e.target.value as NumberFilterOperator)
+                                }
+                                className="w-full px-2 py-1.5 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                            >
+                                {NUMBER_OPERATORS.map((op) => (
+                                    <option key={op.value} value={op.value}>
+                                        {op.label}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                        {numberNeedsValue && (
+                            <div>
+                                <label className="text-xs text-gray-500 mb-1 block">Value</label>
+                                <input
+                                    type="number"
+                                    placeholder="Enter value"
+                                    value={numberValue}
+                                    onChange={(e) => setNumberValue(e.target.value)}
+                                    className="w-full px-2 py-1.5 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                />
+                            </div>
+                        )}
+                        {numberOperator === 'between' && (
+                            <div>
+                                <label className="text-xs text-gray-500 mb-1 block">And</label>
+                                <input
+                                    type="number"
+                                    placeholder="Enter end value"
+                                    value={numberValueTo}
+                                    onChange={(e) => setNumberValueTo(e.target.value)}
+                                    className="w-full px-2 py-1.5 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                />
+                            </div>
+                        )}
+                    </>
+                ) : isDate ? (
+                    <>
+                        <div>
+                            <label className="text-xs text-gray-500 mb-1 block">Condition</label>
+                            <select
+                                value={dateOperator}
+                                onChange={(e) =>
+                                    setDateOperator(e.target.value as DateFilterOperator)
+                                }
+                                className="w-full px-2 py-1.5 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                            >
+                                {DATE_OPERATORS.map((op) => (
+                                    <option key={op.value} value={op.value}>
+                                        {op.label}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                        {dateNeedsValue && (
+                            <div>
+                                <label className="text-xs text-gray-500 mb-1 block">Date</label>
+                                <input
+                                    type="date"
+                                    value={dateValue}
+                                    onChange={(e) => setDateValue(e.target.value)}
+                                    className="w-full px-2 py-1.5 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                />
+                            </div>
+                        )}
+                        {dateOperator === 'between' && (
+                            <div>
+                                <label className="text-xs text-gray-500 mb-1 block">And</label>
+                                <input
+                                    type="date"
+                                    value={dateValueTo}
+                                    onChange={(e) => setDateValueTo(e.target.value)}
+                                    className="w-full px-2 py-1.5 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                />
+                            </div>
+                        )}
+                    </>
+                ) : (
+                    <>
+                        <div>
+                            <label className="text-xs text-gray-500 mb-1 block">Condition</label>
+                            <select
+                                value={textOperator}
+                                onChange={(e) =>
+                                    setTextOperator(e.target.value as TextFilterOperator)
+                                }
+                                className="w-full px-2 py-1.5 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                            >
+                                {TEXT_OPERATORS.map((op) => (
+                                    <option key={op.value} value={op.value}>
+                                        {op.label}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                        {textNeedsValue && (
+                            <div>
+                                <label className="text-xs text-gray-500 mb-1 block">Value</label>
+                                <input
+                                    type="text"
+                                    placeholder="Enter text"
+                                    value={textValue}
+                                    onChange={(e) => setTextValue(e.target.value)}
+                                    className="w-full px-2 py-1.5 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                />
+                            </div>
+                        )}
+                    </>
+                )}
+            </div>
+
+            <div className="p-2 border-t border-gray-200 flex gap-2">
+                <button
+                    type="button"
+                    onClick={handleClearFilter}
+                    className="flex-1 px-3 py-1.5 text-xs text-red-600 hover:bg-red-50 border border-red-200 rounded transition-colors flex items-center justify-center gap-1"
+                >
+                    <HiX className="h-3 w-3" />
+                    Clear
+                </button>
+                <button
+                    type="button"
+                    onClick={handleApplyFilter}
+                    className="flex-1 px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors flex items-center justify-center gap-1"
+                >
+                    <HiCheck className="h-3 w-3" />
+                    Apply
+                </button>
+            </div>
+        </div>
+    );
+};
+
+SpreadsheetFilterDropdown.displayName = 'SpreadsheetFilterDropdown';