@jmruthers/pace-core 0.6.1 → 0.6.3

package/src/components/DataTable/components/EditFields.tsx

@@ -0,0 +1,307 @@
+import React from 'react';
+import { type Column } from '@tanstack/react-table';
+import { Input } from '../../Input/Input';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from '../../Select/Select';
+import { createLogger } from '../../../utils/core/logger';
+import type { CellValue, DataRecord, EditableColumnDef } from '../types';
+
+/**
+ * Component for select fields with searchable and creatable support
+ */
+export function SelectEditField<TData extends DataRecord>({
+  columnDef,
+  accessorKey,
+  currentValue,
+  placeholder,
+  onChange,
+}: {
+  columnDef: EditableColumnDef<TData>;
+  accessorKey: string;
+  currentValue: CellValue;
+  placeholder?: string;
+  onChange: (value: CellValue) => void;
+}) {
+  const logger = createLogger('SelectEditField');
+  const isSearchable = columnDef.selectSearchable !== false;
+  const isCreatable = columnDef.creatable === true;
+  const selectRef = React.useRef<HTMLFormElement>(null);
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [showCreateOption, setShowCreateOption] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!isOpen || !isSearchable || !isCreatable || !columnDef.onCreateNew) {
+      if (!isOpen || !isCreatable || !columnDef.onCreateNew) {
+        setShowCreateOption(false);
+      }
+      return;
+    }
+
+    const findAndAttachSearchInput = (): (() => void) | null => {
+      let searchInput: HTMLInputElement | null = null;
+
+      if (selectRef.current) {
+        searchInput = selectRef.current.querySelector<HTMLInputElement>('[data-testid="select-search-input"]');
+      }
+
+      if (!searchInput) {
+        const allSearchInputs = document.querySelectorAll<HTMLInputElement>('[data-testid="select-search-input"]');
+        for (const input of Array.from(allSearchInputs)) {
+          const content = input.closest('[data-testid="select-content"]');
+          if (content && content.getAttribute('aria-hidden') !== 'true') {
+            searchInput = input;
+            break;
+          }
+        }
+      }
+
+      if (!searchInput) return null;
+
+      const handleInput = (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        const currentSearch = target.value;
+        setSearchTerm(currentSearch);
+
+        if (currentSearch.trim()) {
+          const searchLower = currentSearch.toLowerCase().trim();
+
+          type FieldOption =
+            | { value: string | number; label: string }
+            | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }
+            | { type: 'separator' };
+
+          const checkMatch = (opt: FieldOption): boolean => {
+            if ('value' in opt && !('type' in opt)) {
+              return opt.label.toLowerCase().includes(searchLower);
+            }
+            if ('type' in opt && opt.type === 'group') {
+              return (
+                (opt as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }).items.some(
+                  (item: { value: string | number; label: string }) => item.label.toLowerCase().includes(searchLower)
+                )
+              );
+            }
+            return false;
+          };
+
+          const shouldShow = isCreatable && !!columnDef.onCreateNew;
+
+          setShowCreateOption(shouldShow);
+        } else {
+          setShowCreateOption(false);
+        }
+      };
+
+      const initialValue = searchInput.value;
+      if (initialValue) {
+        const currentSearch = initialValue;
+        setSearchTerm(currentSearch);
+
+        if (currentSearch.trim()) {
+          const searchLower = currentSearch.toLowerCase().trim();
+
+          type FieldOption =
+            | { value: string | number; label: string }
+            | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }
+            | { type: 'separator' };
+
+          const checkMatch = (opt: FieldOption): boolean => {
+            if ('value' in opt && !('type' in opt)) {
+              return opt.label.toLowerCase().includes(searchLower);
+            }
+            if ('type' in opt && opt.type === 'group') {
+              return (
+                (opt as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }).items.some(
+                  (item: { value: string | number; label: string }) => item.label.toLowerCase().includes(searchLower)
+                )
+              );
+            }
+            return false;
+          };
+
+          const shouldShow = isCreatable && !!columnDef.onCreateNew;
+          setShowCreateOption(shouldShow);
+        } else {
+          setShowCreateOption(false);
+        }
+      }
+
+      searchInput.addEventListener('input', handleInput);
+
+      return () => {
+        searchInput?.removeEventListener('input', handleInput);
+      };
+    };
+
+    let cleanup: (() => void) | null = findAndAttachSearchInput();
+
+    if (!cleanup) {
+      let timeoutCleanup: (() => void) | null = null;
+      const timeoutId = setTimeout(() => {
+        timeoutCleanup = findAndAttachSearchInput();
+      }, 50);
+
+      return () => {
+        clearTimeout(timeoutId);
+        timeoutCleanup?.();
+      };
+    }
+
+    return cleanup;
+  }, [isOpen, isSearchable, isCreatable, columnDef.fieldOptions, columnDef.onCreateNew]);
+
+  const handleCreateNew = React.useCallback(async () => {
+    if (!isCreatable || !columnDef.onCreateNew || !searchTerm.trim()) return;
+
+    try {
+      const newValue = await columnDef.onCreateNew(searchTerm.trim());
+      onChange(newValue);
+      setSearchTerm('');
+      setShowCreateOption(false);
+    } catch (error) {
+      logger.error('Error creating new item:', error);
+    }
+  }, [isCreatable, columnDef.onCreateNew, searchTerm, onChange, logger]);
+
+  return (
+    <Select
+      ref={selectRef}
+      value={String(currentValue)}
+      onValueChange={(newValue) => {
+        if (newValue.startsWith('__create_new__')) {
+          handleCreateNew();
+        } else {
+          onChange(newValue as CellValue);
+        }
+      }}
+      onOpenChange={(open) => {
+        setIsOpen(open);
+        if (!open) {
+          setSearchTerm('');
+          setShowCreateOption(false);
+        }
+      }}
+    >
+      <SelectTrigger className="h-8">
+        <SelectValue placeholder={placeholder || `Select ${columnDef.header || 'option'}...`} />
+      </SelectTrigger>
+      <SelectContent
+        searchable={Boolean(isSearchable)}
+        searchPlaceholder={`Search ${columnDef.header || 'options'}...`}
+        maxHeight={columnDef.selectMaxHeight}
+        className={columnDef.selectContentClassName}
+        style={columnDef.selectContentStyle}
+      >
+        {columnDef.fieldOptions?.map((option, index) => {
+          if ('value' in option && !('type' in option)) {
+            return (
+              <SelectItem key={`${option.value}-${index}`} value={String(option.value)}>
+                {option.label}
+              </SelectItem>
+            );
+          }
+
+          if ('type' in option && option.type === 'separator') {
+            return <SelectSeparator key={`separator-${index}`} />;
+          }
+
+          if ('type' in option && option.type === 'group') {
+            const groupOption = option as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> };
+            return (
+              <SelectGroup key={`group-${groupOption.label}-${index}`}>
+                <SelectLabel>{groupOption.label}</SelectLabel>
+                {groupOption.items.map((item: { value: string | number; label: string }) => (
+                  <SelectItem key={`${item.value}-${index}`} value={String(item.value)}>
+                    {item.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            );
+          }
+
+          return null;
+        })}
+        {showCreateOption && isCreatable && searchTerm.trim() && columnDef.onCreateNew && (
+          <SelectItem key="__create_new__" value={`__create_new__${searchTerm}`} className="bg-main-100 font-medium border-t border-main-200">
+            Create "{searchTerm}"
+          </SelectItem>
+        )}
+      </SelectContent>
+    </Select>
+  );
+}
+
+/**
+ * Helper function to render the appropriate input type based on column configuration
+ */
+export const renderEditField = <TData extends DataRecord>(
+  column: Column<TData, unknown>,
+  value: CellValue,
+  onChange: (value: CellValue | Record<string, CellValue>) => void,
+  editingData: Record<string, CellValue> = {},
+  placeholder?: string
+): React.ReactElement => {
+  const columnDef = column.columnDef as EditableColumnDef<TData>;
+
+  if (columnDef.editable === false) {
+    return <span className="text-sm text-sec-600">{String(value ?? '')}</span>;
+  }
+
+  if (columnDef.fieldType === 'select' && columnDef.fieldOptions) {
+    const accessorKey = columnDef.editAccessorKey || column.id;
+    const currentValue = editingData[accessorKey] ?? value ?? '';
+
+    return (
+      <SelectEditField
+        columnDef={columnDef}
+        accessorKey={accessorKey}
+        currentValue={currentValue}
+        placeholder={placeholder}
+        onChange={(newValue) => onChange({ [accessorKey]: newValue })}
+      />
+    );
+  }
+
+  if (columnDef.fieldType === 'number') {
+    const hideSpinners = columnDef.hideNumberSpinners !== false;
+    return (
+      <Input
+        type="number"
+        value={String(value ?? '')}
+        onChange={(e) => onChange(e.target.value as unknown as CellValue)}
+        placeholder={placeholder || `Enter ${columnDef.header || column.id}...`}
+        className={`h-8 ${hideSpinners ? 'datatable-number-no-spinners' : ''}`}
+      />
+    );
+  }
+
+  if (columnDef.fieldType === 'date') {
+    return (
+      <Input
+        type="date"
+        value={String(value ?? '')}
+        onChange={(e) => onChange(e.target.value as unknown as CellValue)}
+        className="h-8"
+      />
+    );
+  }
+
+  return (
+    <Input
+      type="text"
+      value={String(value ?? '')}
+      onChange={(e) => onChange(e.target.value as unknown as CellValue)}
+      placeholder={placeholder || `Enter ${columnDef.header || column.id}...`}
+      className="h-8"
+    />
+  );
+};

package/src/components/DataTable/components/EditableRow.tsx

@@ -337,6 +337,14 @@ const renderEditField = <TData extends DataRecord>(
   );
 };
 
+/**
+ * Editable row component for DataTable.
+ * Renders a row in edit mode with input fields for each editable column.
+ * 
+ * @template TData - The type of data records in the table
+ * @param props - Editable row configuration
+ * @returns The rendered editable row
+ */
 export function EditableRow<TData extends DataRecord>({
   row,
   editingData,

package/src/components/DataTable/components/EmptyState.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { Database, Search, Plus, User } from 'lucide-react';
 import { Button } from '../../Button/Button';
 
+/**
+ * Props for the EmptyState component.
+ */
 interface EmptyStateProps {
   title?: string;
   description?: string;
@@ -14,6 +17,13 @@ interface EmptyStateProps {
   onClearFilters?: () => void;
 }
 
+/**
+ * Empty state component for DataTable.
+ * Displays a message when the table has no data or no filtered results.
+ * 
+ * @param props - Empty state configuration
+ * @returns The rendered empty state UI
+ */
 export function EmptyState({ 
   title,
   description,

package/src/components/DataTable/components/FilterRow.tsx

@@ -5,11 +5,23 @@ import { getColumnHeaderText } from '../utils/columnUtils';
 import type { Column } from '@tanstack/react-table';
 import type { DataRecord } from '../types';
 
+/**
+ * Props for the FilterRow component.
+ * @template TData - The type of data records in the table
+ */
 interface FilterRowProps<TData> {
   table: Table<TData>;
   visibleColumns: Header<TData, unknown>[];
 }
 
+/**
+ * Filter row component for DataTable.
+ * Renders filter inputs for each visible column.
+ * 
+ * @template TData - The type of data records in the table
+ * @param props - Filter row configuration
+ * @returns The rendered filter row
+ */
 export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData>) {
   const { getState } = table;
   const { columnFilters } = getState();

package/src/components/DataTable/components/GroupHeader.tsx

@@ -3,6 +3,10 @@ import { Row } from '@tanstack/react-table';
 import { Button } from '../../Button/Button';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 
+/**
+ * Props for the GroupHeader component.
+ * @template TData - The type of data records in the table
+ */
 interface GroupHeaderProps<TData> {
   row: Row<TData>;
   groupByColumn: string;
@@ -11,6 +15,14 @@ interface GroupHeaderProps<TData> {
   subRowsCount: number;
 }
 
+/**
+ * Group header component for DataTable.
+ * Displays the group label and toggle button for expanding/collapsing grouped rows.
+ * 
+ * @template TData - The type of data records in the table
+ * @param props - Group header configuration
+ * @returns The rendered group header
+ */
 export function GroupHeader<TData>({ 
   row, 
   groupByColumn, 

package/src/components/DataTable/components/GroupingDropdown.tsx

@@ -10,6 +10,10 @@ import {
 import { Group } from 'lucide-react';
 import type { DataTableColumn, DataRecord, SimpleColumn } from '../types';
 
+/**
+ * Props for the GroupingDropdown component.
+ * @template TData - The type of data records in the table
+ */
 interface GroupingDropdownProps<TData extends DataRecord = DataRecord> {
   columns: (DataTableColumn<TData> | SimpleColumn<TData>)[];
   currentGroupBy: string | null;
@@ -17,6 +21,14 @@ interface GroupingDropdownProps<TData extends DataRecord = DataRecord> {
   className?: string;
 }
 
+/**
+ * Dropdown component for selecting grouping column in DataTable.
+ * Allows users to group table rows by a specific column.
+ * 
+ * @template TData - The type of data records in the table
+ * @param props - Grouping dropdown configuration
+ * @returns The rendered grouping dropdown
+ */
 export function GroupingDropdown<TData extends DataRecord>({ 
   columns, 
   currentGroupBy, 

package/src/components/DataTable/components/ImportModal.tsx

@@ -108,6 +108,13 @@ interface ImportModalProps {
  * />
  * ```
  */
+/**
+ * Import modal component for DataTable.
+ * Provides CSV file upload, preview, and import functionality.
+ * 
+ * @param props - Import modal configuration
+ * @returns The rendered import modal dialog
+ */
 export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportModalProps) {
   const logger = createLogger('ImportModal');
   const [file, setFile] = useState<File | null>(null);

package/src/components/DataTable/components/LoadingState.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
 
+/**
+ * Loading state component for DataTable.
+ * Displays a loading spinner and message while data is being fetched.
+ * 
+ * @returns The rendered loading state UI
+ */
 export function LoadingState() {
   return (
     <div className="p-8 text-center">

package/src/components/DataTable/components/PaginationControls.tsx

@@ -16,6 +16,10 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.
 import { getPaginationBinding, getPageSizeOptions } from '../utils/paginationUtils';
 import type { PaginationMode, ServerSideResponse, DataRecord } from '../types';
 
+/**
+ * Props for the PaginationControls component.
+ * @template TData - The type of data records in the table
+ */
 interface PaginationControlsProps<TData extends DataRecord> {
   table: Table<TData>;
   pageSizeOptions?: number[];
@@ -28,6 +32,14 @@ interface PaginationControlsProps<TData extends DataRecord> {
   totalCount?: number;
 }
 
+/**
+ * Pagination controls component for DataTable.
+ * Provides page navigation, page size selection, and performance information.
+ * 
+ * @template TData - The type of data records in the table
+ * @param props - Pagination configuration
+ * @returns The rendered pagination controls
+ */
 export function PaginationControls<TData extends DataRecord>({
   table,
   pageSizeOptions = [10, 20, 30, 40, 50],
@@ -253,8 +265,10 @@ export function EnhancedPaginationControls<TData extends DataRecord>({
         <>
           {/* Jump to Page */}
           <form onSubmit={handleJumpToPage} className="flex items-center space-x-2">
-            <span>Jump to page:</span>
+            <label htmlFor="jump-to-page-input" className="sr-only">Jump to page</label>
+            <span aria-hidden="true">Jump to page:</span>
             <input
+              id="jump-to-page-input"
               type="number"
               min="1"
               max={pageCount}
@@ -262,6 +276,7 @@ export function EnhancedPaginationControls<TData extends DataRecord>({
               onChange={(e) => setJumpToPage(e.target.value)}
               className="w-16 h-6 px-2 border rounded text-xs datatable-number-no-spinners"
               placeholder="1"
+              aria-label="Page number"
             />
             <Button type="submit" size="sm" variant="outline" className="h-6 px-2 text-xs">
               Go