@syuttechnologies/layout 1.0.2 → 1.0.21

package/src/components/ui/ModuleHeader/index.ts

@@ -0,0 +1,9 @@
+export { default as ModuleHeader } from './ModuleHeader';
+export type {
+  ModuleHeaderProps,
+  ActionButton,
+  ViewModeOption,
+  SearchConfig,
+  ViewModeConfig,
+  FilterConfig
+} from './ModuleHeader';

package/src/components/ui/SyutGrid/SyutGrid.tsx

@@ -0,0 +1,483 @@
+import React, { useMemo, useState, useCallback, ReactNode, useEffect } from 'react';
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  flexRender,
+  SortingState,
+  ColumnFiltersState,
+  PaginationState,
+  RowSelectionState,
+  VisibilityState,
+  ColumnDef,
+  Row,
+  Updater,
+  Column,
+} from '@tanstack/react-table';
+import IconSystem from '../../../icon-collection/icon-systems';
+import { ActionMenu, ActionMenuItem, ProcessedActionMenuItem } from '../ActionMenu';
+
+if (typeof document !== 'undefined') {
+  const styleId = 'syut-grid-styles';
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .syut-grid-component { display: flex; flex-direction: column; height: 100%; font-family: inherit; }
+      .syut-grid-wrapper { flex: 1; overflow: auto; min-height: 0; border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px 8px 0 0; }
+      .syut-grid { width: 100%; border-collapse: collapse; font-size: 0.875rem; background: var(--bg-primary, #ffffff); }
+      .syut-grid thead { position: sticky; top: 0; z-index: 3; }
+      .syut-grid th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--text-primary, #1e293b); background: var(--bg-secondary, #f8fafc); border-bottom: 2px solid var(--border-color, #e2e8f0); white-space: nowrap; user-select: none; }
+      .syut-grid th.frozen-column { background: var(--bg-secondary, #f8fafc); box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1); z-index: 4; }
+      .syut-grid td { padding: 0.625rem 1rem; color: var(--text-primary, #1e293b); border-bottom: 1px solid var(--border-color, #e2e8f0); background: var(--bg-primary, #ffffff); }
+      .syut-grid td.frozen-column { background: var(--bg-primary, #ffffff); box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1); z-index: 1; }
+      .syut-grid tbody tr:hover td { background: var(--bg-secondary, #f8fafc); }
+      .syut-grid tbody tr:hover td.frozen-column { background: var(--bg-secondary, #f8fafc); }
+      .syut-grid th.action-column, .syut-grid td.action-column { text-align: center; width: 80px; }
+      .syut-grid .row-select, .syut-grid .row-select-all { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary, #3b82f6); }
+      .syut-grid-component .pagination-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--bg-secondary, #f8fafc); border: 1px solid var(--border-color, #e2e8f0); border-top: none; border-radius: 0 0 8px 8px; flex-shrink: 0; gap: 0.5rem; flex-wrap: wrap; }
+      .syut-grid-component .pagination-info { font-size: 0.85rem; color: var(--text-muted, #64748b); white-space: nowrap; }
+      .syut-grid-component .pagination-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+      .syut-grid-component .pagination-controls select { padding: 0.375rem 0.5rem; border-radius: 0.375rem; border: 1px solid var(--border-color, #e2e8f0); font-size: 0.85rem; background: var(--bg-primary, #ffffff); color: var(--text-primary, #1e293b); cursor: pointer; }
+      .syut-grid-component .page-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-primary, #ffffff); color: var(--text-primary, #1e293b); cursor: pointer; transition: all 0.15s ease; }
+      .syut-grid-component .page-btn:hover:not(:disabled) { background: var(--bg-secondary, #f8fafc); border-color: var(--primary, #3b82f6); color: var(--primary, #3b82f6); }
+      .syut-grid-component .page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+      .syut-grid-component .page-info { padding: 0 0.75rem; font-size: 0.85rem; white-space: nowrap; }
+      .syut-grid-component .page-nav-buttons { display: flex; align-items: center; gap: 0.25rem; }
+
+      /* Mobile responsive styles for pagination footer */
+      @media (max-width: 768px) {
+        .syut-grid-component .pagination-footer {
+          flex-direction: column;
+          align-items: stretch;
+          padding: 0.625rem 0.75rem;
+          gap: 0.625rem;
+        }
+        .syut-grid-component .pagination-info {
+          text-align: center;
+          font-size: 0.8rem;
+        }
+        .syut-grid-component .pagination-controls {
+          justify-content: center;
+          gap: 0.375rem;
+        }
+        .syut-grid-component .pagination-controls select {
+          padding: 0.3rem 0.4rem;
+          font-size: 0.8rem;
+          margin-right: 0.5rem;
+        }
+        .syut-grid-component .page-btn {
+          padding: 0.3rem 0.4rem;
+        }
+        .syut-grid-component .page-info {
+          font-size: 0.8rem;
+          padding: 0 0.5rem;
+        }
+      }
+
+      @media (max-width: 480px) {
+        .syut-grid-component .pagination-footer {
+          padding: 0.5rem;
+          gap: 0.5rem;
+        }
+        .syut-grid-component .pagination-info {
+          font-size: 0.75rem;
+        }
+        .syut-grid-component .pagination-controls {
+          flex-wrap: wrap;
+          justify-content: center;
+        }
+        .syut-grid-component .pagination-controls select {
+          font-size: 0.75rem;
+          margin-right: 0;
+          margin-bottom: 0.25rem;
+        }
+        .syut-grid-component .page-info {
+          font-size: 0.75rem;
+          padding: 0 0.25rem;
+          order: -1;
+          width: 100%;
+          text-align: center;
+          margin-bottom: 0.25rem;
+        }
+        .syut-grid-component .page-nav-buttons {
+          width: 100%;
+          justify-content: center;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
+export interface SyutGridColumn<T> {
+  id?: string;
+  header?: string | ((column: any) => ReactNode);
+  accessorKey?: keyof T;
+  cell?: (info: { row: Row<T>; getValue: () => any }) => ReactNode;
+  size?: number;
+  enableSorting?: boolean;
+  enableFiltering?: boolean;
+  frozen?: 'left' | 'right';
+  // Legacy props for backward compatibility
+  key?: string;
+  width?: number;
+  sortable?: boolean;
+  visible?: boolean;
+  render?: (value: any, row: T) => ReactNode;
+  title?: string;           // Legacy alias for header
+  dataIndex?: string;       // Legacy alias for accessorKey
+}
+
+interface PaginationConfig {
+  enabled?: boolean;
+  pageSize?: number;
+  showPageSizeOptions?: boolean;
+  pageSizeOptions?: number[];
+  // Legacy pagination props
+  current?: number;
+  total?: number;
+  onChange?: (page: number, size: number) => void;
+  showSizeChanger?: boolean;
+  // More legacy pagination props
+  currentPage?: number;
+  totalPages?: number;
+  totalItems?: number;
+  onPageChange?: () => void;
+}
+
+export interface SyutGridProps<T extends { id: string }> {
+  data?: T[];
+  columns: SyutGridColumn<T>[];
+  enableRowSelection?: boolean;
+  enablePagination?: boolean;
+  pageSizeOptions?: number[];
+  defaultPageSize?: number;
+  enableSorting?: boolean;
+  enableColumnFilters?: boolean;
+  rowActions?: ((row: T) => ActionMenuItem<T>[]) | ActionMenuItem<T>[];
+  emptyMessage?: string;
+  /** Callback when row selection changes. When using legacy selectedRows prop, receives string[]. Otherwise receives T[]. */
+  onSelectionChange?: (selectedRows: string[]) => void;
+  isLoading?: boolean;
+  className?: string;
+  frozenLeftColumns?: string[];
+  frozenRightColumns?: string[];
+  visibleColumns?: string[];
+  rowKey?: string;
+  selectable?: boolean;
+  selectedRows?: string[];
+  pagination?: PaginationConfig;
+  // Legacy props
+  dataSource?: T[];          // Legacy alias for data
+  rowSelection?: {           // Legacy row selection config
+    selectedRowKeys?: string[];
+    onChange?: (selectedRowKeys: string[]) => void;
+  };
+  loading?: boolean;         // Legacy alias for isLoading
+  emptyText?: string;        // Legacy alias for emptyMessage
+}
+
+interface FrozenColumnInfo {
+  frozen: 'left' | 'right' | null;
+  leftOffset: number;
+  rightOffset: number;
+}
+
+function ColumnFilter<T>({ column, placeholder }: { column: Column<T, unknown>; placeholder?: string }) {
+  const columnFilterValue = column.getFilterValue() as string;
+  return (
+    <input
+      type="text"
+      value={columnFilterValue ?? ''}
+      onChange={(e) => column.setFilterValue(e.target.value)}
+      placeholder={placeholder || 'Filter...'}
+      onClick={(e) => e.stopPropagation()}
+      style={{ width: '100%', padding: '0.25rem 0.5rem', fontSize: '0.75rem', border: '1px solid var(--border-color)', borderRadius: '0.25rem', marginTop: '0.375rem', background: 'var(--bg-primary)' }}
+    />
+  );
+}
+
+export function SyutGrid<T extends { id: string }>({
+  data: dataProp,
+  columns,
+  enableRowSelection: enableRowSelectionProp = false,
+  enablePagination: enablePaginationProp,
+  pageSizeOptions: pageSizeOptionsProp = [10, 25, 50, 100],
+  defaultPageSize: defaultPageSizeProp = 10,
+  enableSorting = true,
+  enableColumnFilters = false,
+  rowActions,
+  emptyMessage: emptyMessageProp = 'No data found',
+  onSelectionChange,
+  isLoading: isLoadingProp = false,
+  className = '',
+  frozenLeftColumns = [],
+  frozenRightColumns = [],
+  visibleColumns,
+  selectable,
+  selectedRows: selectedRowsProp,
+  pagination: paginationConfig,
+  // Legacy props
+  dataSource,
+  rowSelection: rowSelectionConfig,
+  loading,
+  emptyText,
+}: SyutGridProps<T>) {
+  // Handle legacy props
+  const data = dataProp || dataSource || [];
+  const isLoading = loading ?? isLoadingProp;
+  const emptyMessage = emptyText || emptyMessageProp;
+  const enableRowSelection = selectable ?? (rowSelectionConfig !== undefined ? true : enableRowSelectionProp);
+  const enablePagination = paginationConfig?.enabled ?? enablePaginationProp ?? true;
+  const pageSizeOptions = paginationConfig?.pageSizeOptions ?? pageSizeOptionsProp;
+  const defaultPageSize = paginationConfig?.pageSize ?? defaultPageSizeProp;
+
+  // Get initial selected rows from either new or legacy prop
+  const initialSelectedRows = selectedRowsProp || rowSelectionConfig?.selectedRowKeys || [];
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>(() => {
+    if (initialSelectedRows.length > 0) {
+      const selection: RowSelectionState = {};
+      initialSelectedRows.forEach(id => { selection[id] = true; });
+      return selection;
+    }
+    return {};
+  });
+  const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: defaultPageSize });
+
+  useEffect(() => {
+    const selectedRows = selectedRowsProp || rowSelectionConfig?.selectedRowKeys;
+    if (selectedRows) {
+      const selection: RowSelectionState = {};
+      selectedRows.forEach(id => { selection[id] = true; });
+      setRowSelection(selection);
+    }
+  }, [selectedRowsProp, rowSelectionConfig?.selectedRowKeys]);
+
+  const normalizedColumns = useMemo(() => {
+    return columns.map(col => ({
+      ...col,
+      id: col.id || col.key || '',
+      header: col.header || col.title || '',
+      // Use accessorKey, or dataIndex, or key as the accessor for getting cell values
+      accessorKey: col.accessorKey || (col.dataIndex as keyof T) || (col.key as keyof T),
+      size: col.size || col.width,
+      enableSorting: col.enableSorting ?? col.sortable ?? true,
+    }));
+  }, [columns]);
+
+  const columnVisibility = useMemo<VisibilityState>(() => {
+    const legacyVisibility: VisibilityState = {};
+    normalizedColumns.forEach(col => {
+      if (col.visible !== undefined) legacyVisibility[col.id] = col.visible;
+    });
+    if (Object.keys(legacyVisibility).length > 0) return legacyVisibility;
+    if (!visibleColumns) return {};
+    const visibility: VisibilityState = {};
+    const allColumnIds = [...(enableRowSelection ? ['select'] : []), ...normalizedColumns.map(col => col.id), ...(rowActions ? ['actions'] : [])];
+    allColumnIds.forEach(colId => { visibility[colId] = visibleColumns.includes(colId); });
+    return visibility;
+  }, [visibleColumns, normalizedColumns, enableRowSelection, rowActions]);
+
+  const frozenColumnMap = useMemo(() => {
+    const map: Record<string, FrozenColumnInfo> = {};
+    const getColumnWidth = (colId: string): number => {
+      if (colId === 'select') return 50;
+      if (colId === 'actions') return 80;
+      const col = normalizedColumns.find(c => c.id === colId);
+      return col?.size || 150;
+    };
+    let leftOffset = 0;
+    frozenLeftColumns.forEach((colId) => { map[colId] = { frozen: 'left', leftOffset, rightOffset: 0 }; leftOffset += getColumnWidth(colId); });
+    let rightOffset = 0;
+    [...frozenRightColumns].reverse().forEach((colId) => { map[colId] = { frozen: 'right', leftOffset: 0, rightOffset }; rightOffset += getColumnWidth(colId); });
+    return map;
+  }, [normalizedColumns, frozenLeftColumns, frozenRightColumns]);
+
+  const getStickyStyles = useCallback((columnId: string): React.CSSProperties => {
+    const frozenInfo = frozenColumnMap[columnId];
+    if (!frozenInfo || !frozenInfo.frozen) return {};
+    return { position: 'sticky', [frozenInfo.frozen]: frozenInfo.frozen === 'left' ? frozenInfo.leftOffset : frozenInfo.rightOffset, zIndex: 1 };
+  }, [frozenColumnMap]);
+
+  const tableColumns = useMemo(() => {
+    const cols: ColumnDef<T, any>[] = [];
+    if (enableRowSelection) {
+      cols.push({
+        id: 'select',
+        header: ({ table }) => (<input type="checkbox" className="row-select-all" checked={table.getIsAllRowsSelected()} onChange={table.getToggleAllRowsSelectedHandler()} />),
+        cell: ({ row }) => (<input type="checkbox" className="row-select" checked={row.getIsSelected()} onChange={row.getToggleSelectedHandler()} />),
+        size: 50,
+        enableColumnFilter: false,
+      });
+    }
+    normalizedColumns.forEach((col) => {
+      const canFilter = enableColumnFilters && col.enableFiltering !== false;
+      let cellRenderer: ColumnDef<T, any>['cell'];
+      if (col.cell) { cellRenderer = (info) => col.cell!({ row: info.row, getValue: info.getValue }); }
+      else if (col.render) {
+        // Support both render signatures:
+        // 1. render(value, row) - value first, row second (when column has accessor)
+        // 2. render(row) - just the row object (when column has no accessor)
+        // We detect based on whether there's an accessor key defined
+        const hasAccessor = col.accessorKey || col.dataIndex || col.key;
+        cellRenderer = (info) => {
+          if (hasAccessor) {
+            // Column has accessor - pass value and row (legacy pattern)
+            return col.render!(info.getValue(), info.row.original);
+          } else {
+            // No accessor - pass just the row object
+            return (col.render as (row: T) => React.ReactNode)(info.row.original);
+          }
+        };
+      }
+      else { cellRenderer = (info) => info.getValue(); }
+      cols.push({
+        id: col.id,
+        accessorKey: col.accessorKey,
+        header: typeof col.header === 'string' ? ({ column }) => {
+          const headerText = col.header as string;
+          const isSortable = enableSorting && col.enableSorting !== false;
+          return (<div><div style={{ cursor: isSortable ? 'pointer' : 'default', display: 'flex', alignItems: 'center', gap: '4px' }} onClick={() => isSortable && column.toggleSorting()}><span>{headerText}</span>{isSortable && (<span>{column.getIsSorted() === 'asc' ? (<IconSystem.chevronUp size={14} />) : column.getIsSorted() === 'desc' ? (<IconSystem.chevronDown size={14} />) : (<IconSystem.chevronUp size={14} style={{ opacity: 0.3 }} />)}</span>)}</div>{canFilter && (<ColumnFilter column={column} placeholder={`Filter ${headerText}...`} />)}</div>);
+        } : col.header,
+        cell: cellRenderer,
+        size: col.size,
+        enableSorting: enableSorting && col.enableSorting !== false,
+        enableColumnFilter: canFilter,
+      });
+    });
+    if (rowActions) {
+      cols.push({
+        id: 'actions',
+        header: 'Actions',
+        cell: ({ row }) => {
+          // Handle both patterns: function that returns items, or array of items with row-accepting onClick
+          let items: ProcessedActionMenuItem[];
+          if (typeof rowActions === 'function') {
+            // Function pattern - items are already processed
+            items = rowActions(row.original) as ProcessedActionMenuItem[];
+          } else {
+            // Array pattern - need to filter by isVisible and wrap onClick with row
+            items = rowActions
+              .filter(item => !item.isVisible || item.isVisible(row.original))
+              .map(item => ({
+                id: item.id,
+                label: item.label,
+                icon: item.icon,
+                variant: item.variant,
+                disabled: item.disabled,
+                onClick: () => (item.onClick as (row: T) => void)(row.original)
+              }));
+          }
+          return <ActionMenu items={items} />;
+        },
+        size: 80,
+        enableColumnFilter: false
+      });
+    }
+    return cols;
+  }, [normalizedColumns, enableRowSelection, enableSorting, enableColumnFilters, rowActions]);
+
+  const handleRowSelectionChange = useCallback((updaterOrValue: Updater<RowSelectionState>) => {
+    setRowSelection((prev) => {
+      const newSelection = typeof updaterOrValue === 'function' ? updaterOrValue(prev) : updaterOrValue;
+      const selectedIds = Object.keys(newSelection).filter((key) => newSelection[key]);
+      // Call new API callback
+      if (onSelectionChange) {
+        onSelectionChange(selectedIds);
+      }
+      // Call legacy API callback
+      if (rowSelectionConfig?.onChange) {
+        rowSelectionConfig.onChange(selectedIds);
+      }
+      return newSelection;
+    });
+  }, [onSelectionChange, rowSelectionConfig]);
+
+  const table = useReactTable({
+    data,
+    columns: tableColumns,
+    state: { sorting, columnFilters, rowSelection, pagination, columnVisibility },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onRowSelectionChange: handleRowSelectionChange,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,
+    enableRowSelection,
+    getRowId: (row) => row.id,
+  });
+
+  return (
+    <div className={`syut-grid-component ${className}`} style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <div className="syut-grid-wrapper" style={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
+        <table className="syut-grid">
+          <thead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  const stickyStyles = getStickyStyles(header.id);
+                  const isFrozen = !!frozenColumnMap[header.id];
+                  return (<th key={header.id} style={{ width: header.getSize() !== 150 ? header.getSize() : undefined, ...stickyStyles, ...(isFrozen && { zIndex: 4 }) }} className={`${header.id === 'actions' ? 'action-column' : ''} ${isFrozen ? 'frozen-column' : ''}`}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</th>);
+                })}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {isLoading ? (<tr><td colSpan={table.getAllColumns().length} style={{ textAlign: 'center', padding: '2rem', color: 'var(--text-muted)' }}>Loading...</td></tr>) : table.getRowModel().rows.length === 0 ? (<tr><td colSpan={table.getAllColumns().length} style={{ textAlign: 'center', padding: '2rem', color: 'var(--text-muted)' }}>{emptyMessage}</td></tr>) : (
+              table.getRowModel().rows.map((row) => (
+                <tr key={row.id}>
+                  {row.getVisibleCells().map((cell) => {
+                    const stickyStyles = getStickyStyles(cell.column.id);
+                    const isFrozen = !!frozenColumnMap[cell.column.id];
+                    const isActionsColumn = cell.column.id === 'actions';
+                    return (<td key={cell.id} className={`${isActionsColumn ? 'action-column' : ''} ${isFrozen ? 'frozen-column' : ''}`} style={{ ...stickyStyles, ...(isActionsColumn && { overflow: 'visible' }) }}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>);
+                  })}
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+      {enablePagination && (
+        <div className="pagination-footer">
+          <div className="pagination-info">
+            Showing {table.getRowModel().rows.length} of {table.getFilteredRowModel().rows.length} items
+            {Object.keys(rowSelection).length > 0 && (
+              <span style={{ marginLeft: '0.5rem', color: 'var(--primary)' }}>({Object.keys(rowSelection).length} selected)</span>
+            )}
+          </div>
+          <div className="pagination-controls">
+            <select value={pagination.pageSize} onChange={(e) => table.setPageSize(Number(e.target.value))}>
+              {pageSizeOptions.map((size) => (<option key={size} value={size}>{size} / page</option>))}
+            </select>
+            <div className="page-nav-buttons">
+              <button className="page-btn" onClick={() => table.firstPage()} disabled={!table.getCanPreviousPage()} title="First page">
+                <IconSystem.chevronLeft size={16} /><IconSystem.chevronLeft size={16} style={{ marginLeft: '-8px' }} />
+              </button>
+              <button className="page-btn" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()} title="Previous page">
+                <IconSystem.chevronLeft size={16} />
+              </button>
+              <span className="page-info">Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}</span>
+              <button className="page-btn" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()} title="Next page">
+                <IconSystem.chevronRight size={16} />
+              </button>
+              <button className="page-btn" onClick={() => table.lastPage()} disabled={!table.getCanNextPage()} title="Last page">
+                <IconSystem.chevronRight size={16} /><IconSystem.chevronRight size={16} style={{ marginLeft: '-8px' }} />
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SyutGrid;

package/src/components/ui/SyutGrid/index.ts

@@ -0,0 +1,2 @@
+export { SyutGrid, type SyutGridProps, type SyutGridColumn } from './SyutGrid';
+export { default } from './SyutGrid';