@jmruthers/pace-core 0.6.6 → 0.6.8

package/src/components/DataTable/components/ExpandButton.tsx

@@ -1,113 +0,0 @@
-/**
- * @file Expand/Collapse Button Component for Hierarchical DataTable
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/ExpandButton
- * @since 0.4.35
- */
-
-import React from 'react';
-import { ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
-import type { ExpandButtonProps } from '../types';
-
-/**
- * Default expand/collapse button component for hierarchical rows
- * 
- * Provides a clean, accessible expand/collapse button with proper ARIA attributes
- * and keyboard navigation support.
- */
-export function ExpandButton({
-  rowId,
-  isExpanded,
-  hasChildren,
-  onClick,
-  className = '',
-}: ExpandButtonProps) {
-  if (!hasChildren) {
-    return null;
-  }
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onClick();
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      e.stopPropagation();
-      onClick();
-    }
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      className={`
-        inline-flex items-center justify-center w-6 h-6 rounded-sm
-        hover:bg-main-100 focus:bg-main-100 focus:outline-none focus:ring-2
-        focus:ring-main-500 focus:ring-offset-1 transition-colors duration-150
-        ${className}
-      `}
-      aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
-      aria-expanded={isExpanded}
-      data-testid={`expand-button-${rowId}`}
-    >
-      {isExpanded ? (
-        <ChevronDownIcon className="w-4 h-4 text-main-600" />
-      ) : (
-        <ChevronRightIcon className="w-4 h-4 text-main-600" />
-      )}
-    </button>
-  );
-}
-
-/**
- * Alternative expand button with different styling
- */
-export function ExpandButtonMinimal({
-  rowId,
-  isExpanded,
-  hasChildren,
-  onClick,
-  className = '',
-}: ExpandButtonProps) {
-  if (!hasChildren) {
-    return null;
-  }
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onClick();
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      e.stopPropagation();
-      onClick();
-    }
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      className={`
-        inline-flex items-center justify-center w-5 h-5 rounded
-        hover:bg-main-50 focus:bg-main-50 focus:outline-none
-        transition-colors duration-150 text-main-500
-        ${className}
-      `}
-      aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
-      aria-expanded={isExpanded}
-      data-testid={`expand-button-minimal-${rowId}`}
-    >
-      <span className="text-sm font-medium">
-        {isExpanded ? '−' : '+'}
-      </span>
-    </button>
-  );
-}

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

@@ -1,54 +0,0 @@
-import React from 'react';
-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;
-  isExpanded: boolean;
-  onToggle: () => void;
-  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, 
-  isExpanded, 
-  onToggle, 
-  subRowsCount 
-}: GroupHeaderProps<TData>) {
-  const groupValue = row.getValue(groupByColumn);
-  
-  return (
-    <div className="flex items-center py-2 px-4 bg-muted/50 border-b font-medium">
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={onToggle}
-        className="p-0 h-auto mr-2"
-      >
-        {isExpanded ? (
-          <ChevronDown className="size-4" />
-        ) : (
-          <ChevronRight className="size-4" />
-        )}
-      </Button>
-      <span className="text-sm">
-        {String(groupValue)} ({subRowsCount} items)
-      </span>
-    </div>
-  );
-}

package/src/components/DataTable/components/ViewRowModal.tsx

@@ -1,68 +0,0 @@
-/**
- * @file View Row Modal Component
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Components
- * @since 0.2.0
- */
-
-import React from 'react';
-import { Dialog, DialogContent, DialogHeader } from '../../Dialog/Dialog';
-import { Button } from '../../Button/Button';
-import { X } from 'lucide-react';
-
-interface ViewRowModalProps<TData extends Record<string, any>> {
-  isOpen: boolean;
-  onClose: () => void;
-  data: TData | null;
-  title?: string;
-}
-
-export function ViewRowModal<TData extends Record<string, any>>({
-  isOpen,
-  onClose,
-  data,
-  title = "Row Details"
-}: ViewRowModalProps<TData>) {
-  if (!data) return null;
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto" title={title}>
-        <DialogHeader>
-          <h2 className="flex items-center justify-between">
-            {title}
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={onClose}
-              className="size-6 p-0"
-            >
-              <X className="size-4" />
-            </Button>
-          </h2>
-        </DialogHeader>
-        
-        <div className="mt-4">
-          <div className="grid gap-4">
-            {Object.entries(data).map(([key, value]) => (
-              <div key={key} className="grid grid-cols-1 md:grid-cols-3 gap-2">
-                <div className="font-medium text-sm text-app-sec-600 capitalize">
-                  {key.replace(/([A-Z])/g, ' $1').trim()}:
-                </div>
-                <div className="md:col-span-2 text-sm">
-                  {value instanceof Date ? value.toLocaleDateString() : 
-                   typeof value === 'object' && value !== null ? JSON.stringify(value, null, 2) :
-                   String(value ?? '')}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-        
-        <div className="flex justify-end mt-6">
-          <Button onClick={onClose}>Close</Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}