@carefully-built/cli 0.1.1 → 0.1.2

package/registry/ui/smart-table/smart-table/DesktopView.tsx

@@ -0,0 +1,343 @@
+'use client';
+
+import { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react';
+
+import { SmartTableActions } from '@/components/ui/smart-table/SmartTableActions';
+import { getColumnSortKey, getNextSortState } from '@/components/ui/smart-table/sorting';
+import { TruncatedContent } from '@/components/ui/smart-table/TruncatedContent';
+import { getColumnTooltipText, renderColumnValue } from '@/components/ui/smart-table/utils';
+
+import type {
+  ActionHandlers,
+  ActionType,
+  Column,
+  PaginationConfig,
+  SortDirection,
+  SortState,
+} from '@/components/ui/smart-table/types';
+import type { ReactNode } from 'react';
+
+import { Pagination } from '@/components/ui/pagination';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { cn } from '@/lib/utils';
+
+interface DesktopViewProps<T> {
+  data: T[];
+  columns: Column<T>[];
+  isLoading: boolean;
+  skeletonRows: number;
+  actions?: ActionType[];
+  actionHandlers?: ActionHandlers<T>;
+  renderActions?: (item: T) => ReactNode;
+  noDataMessage: string;
+  noDataContent?: ReactNode;
+  getRowKey: (item: T) => string | number;
+  onRowClick?: (item: T) => void;
+  pagination?: PaginationConfig;
+  stickyHeader?: boolean;
+  maxHeight?: string;
+  fullHeight?: boolean;
+  sortState?: SortState;
+  onSortChange?: (state: SortState) => void;
+}
+
+const ACTION_COLUMN_WIDTH_PX = 112;
+const ACTION_CELL_CLASS_NAME = 'w-28 min-w-28 overflow-visible whitespace-nowrap text-right';
+
+function SortIcon({
+  activeDirection,
+}: {
+  readonly activeDirection?: SortDirection;
+}): React.ReactElement {
+  if (activeDirection === 'asc') {
+    return <ArrowUp className="size-3.5" aria-hidden="true" />;
+  }
+
+  if (activeDirection === 'desc') {
+    return <ArrowDown className="size-3.5" aria-hidden="true" />;
+  }
+
+  return <ChevronsUpDown className="size-3.5 opacity-45" aria-hidden="true" />;
+}
+
+function SortableHeaderContent<T>({
+  column,
+  sortState,
+  onSortChange,
+}: {
+  readonly column: Column<T>;
+  readonly sortState?: SortState;
+  readonly onSortChange?: (state: SortState) => void;
+}): React.ReactElement {
+  const sortKey = getColumnSortKey(column);
+  const activeDirection = sortState?.key === sortKey ? sortState.direction : undefined;
+
+  if (!sortKey || !onSortChange) {
+    return <>{column.header}</>;
+  }
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'hover:text-foreground focus-visible:ring-ring inline-flex max-w-full items-center gap-1.5 rounded-sm text-left font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+        column.align === 'right' && 'ml-auto',
+        column.align === 'center' && 'mx-auto',
+      )}
+      aria-label={`Sort by ${column.header}`}
+      onClick={() => {
+        onSortChange(getNextSortState(sortState ?? null, sortKey));
+      }}
+    >
+      <span className="truncate">{column.header}</span>
+      <SortIcon activeDirection={activeDirection} />
+    </button>
+  );
+}
+
+export function DesktopView<T>({
+  data,
+  columns,
+  isLoading,
+  skeletonRows,
+  actions,
+  actionHandlers,
+  renderActions,
+  noDataMessage,
+  noDataContent,
+  getRowKey,
+  onRowClick,
+  pagination,
+  stickyHeader = false,
+  maxHeight = 'calc(100vh - 300px)',
+  fullHeight = false,
+  sortState,
+  onSortChange,
+}: DesktopViewProps<T>): React.ReactElement {
+  const resolvedNoDataContent = noDataContent ?? noDataMessage;
+  const hasActions = (actions?.length ?? 0) > 0 || renderActions !== undefined;
+  const actionColumnWidth = hasActions ? `${String(ACTION_COLUMN_WIDTH_PX)}px` : undefined;
+  const specifiedPercentageWidth = columns.reduce((total, column) => {
+    if (typeof column.width === 'string' && column.width.endsWith('%')) {
+      const parsedWidth = Number.parseFloat(column.width);
+      return Number.isNaN(parsedWidth) ? total : total + parsedWidth;
+    }
+
+    return total;
+  }, 0);
+  const actionWidthPercentage = 0;
+  const remainingPercentageForDataColumns = Math.max(
+    0,
+    100 - specifiedPercentageWidth - actionWidthPercentage,
+  );
+  const columnsWithoutWidth = columns.filter((column) => column.width === undefined).length;
+  const defaultPercentageWidth =
+    columnsWithoutWidth > 0 && remainingPercentageForDataColumns > 0
+      ? `${String(remainingPercentageForDataColumns / columnsWithoutWidth)}%`
+      : undefined;
+
+  const columnGroup = (
+    <colgroup>
+      {columns.map((column) => (
+        <col key={column.header} style={{ width: column.width ?? defaultPercentageWidth }} />
+      ))}
+      {hasActions && actionColumnWidth ? (
+        <col style={{ width: actionColumnWidth, minWidth: actionColumnWidth }} />
+      ) : null}
+    </colgroup>
+  );
+
+  const tableHeader = (
+    <TableHeader className={cn(stickyHeader && 'bg-muted/50 sticky top-0 z-10 backdrop-blur-sm')}>
+      <TableRow>
+        {columns.map((col) => (
+          <TableHead
+            key={col.header}
+            style={{ width: col.width }}
+            aria-sort={
+              sortState?.key === getColumnSortKey(col)
+                ? sortState.direction === 'asc'
+                  ? 'ascending'
+                  : 'descending'
+                : undefined
+            }
+            className={
+              col.align === 'right' ? 'text-right' : col.align === 'center' ? 'text-center' : ''
+            }
+          >
+            <SortableHeaderContent column={col} sortState={sortState} onSortChange={onSortChange} />
+          </TableHead>
+        ))}
+        {hasActions ? (
+          <TableHead
+            style={
+              actionColumnWidth
+                ? { width: actionColumnWidth, minWidth: actionColumnWidth }
+                : undefined
+            }
+            className="w-28 min-w-28 overflow-visible text-right whitespace-nowrap"
+          >
+            Actions
+          </TableHead>
+        ) : null}
+      </TableRow>
+    </TableHeader>
+  );
+
+  // Determine scrollable container styles
+  const scrollContainerClass = cn(
+    'min-w-0 rounded-lg border overflow-x-auto',
+    fullHeight && 'flex-1 min-h-0 overflow-y-auto',
+    !fullHeight && stickyHeader && 'overflow-y-auto',
+  );
+  const scrollContainerStyle = !fullHeight && stickyHeader ? { maxHeight } : undefined;
+
+  if (isLoading) {
+    return (
+      <div className={cn('flex flex-col', fullHeight && 'min-h-0 flex-1')}>
+        <div className={scrollContainerClass} style={scrollContainerStyle}>
+          <Table className="table-fixed">
+            {columnGroup}
+            {tableHeader}
+            <TableBody>
+              {Array.from({ length: skeletonRows }).map((_, i) => (
+                <TableRow key={i}>
+                  {columns.map((col) => (
+                    <TableCell key={col.header}>
+                      <Skeleton className="h-5 w-full" />
+                    </TableCell>
+                  ))}
+                  {hasActions ? (
+                    <TableCell className={ACTION_CELL_CLASS_NAME}>
+                      <div className="flex w-full justify-end">
+                        <Skeleton className="h-8 w-20" />
+                      </div>
+                    </TableCell>
+                  ) : null}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+        {pagination && (
+          <Pagination
+            currentPage={pagination.currentPage}
+            totalPages={pagination.totalPages}
+            totalItems={pagination.totalItems}
+            pageSize={pagination.pageSize}
+            startIndex={pagination.startIndex}
+            endIndex={pagination.endIndex}
+            onPageChange={pagination.onPageChange}
+          />
+        )}
+      </div>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <div className={cn('flex flex-col', fullHeight && 'min-h-0 flex-1')}>
+        <div className="w-full py-0">
+          {typeof resolvedNoDataContent === 'string' ? (
+            <div className="text-muted-foreground">{resolvedNoDataContent}</div>
+          ) : (
+            resolvedNoDataContent
+          )}
+        </div>
+        {pagination && pagination.totalItems > 0 && (
+          <Pagination
+            currentPage={pagination.currentPage}
+            totalPages={pagination.totalPages}
+            totalItems={pagination.totalItems}
+            pageSize={pagination.pageSize}
+            startIndex={pagination.startIndex}
+            endIndex={pagination.endIndex}
+            onPageChange={pagination.onPageChange}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('flex flex-col', fullHeight && 'min-h-0 flex-1')}>
+      <div className={scrollContainerClass} style={scrollContainerStyle}>
+        <Table className="table-fixed">
+          {columnGroup}
+          {tableHeader}
+          <TableBody>
+            {data.map((item) => (
+              <TableRow
+                key={getRowKey(item)}
+                className={onRowClick ? 'hover:bg-muted/50 cursor-pointer' : ''}
+                onClick={() => onRowClick?.(item)}
+              >
+                {columns.map((col) => (
+                  <TableCell
+                    key={col.header}
+                    className={cn(
+                      'max-w-0',
+                      col.align === 'right'
+                        ? 'text-right'
+                        : col.align === 'center'
+                          ? 'text-center'
+                          : '',
+                    )}
+                  >
+                    {col.truncate === false ? (
+                      <div
+                        className={cn(
+                          'block w-full min-w-0',
+                          col.align === 'right'
+                            ? 'text-right'
+                            : col.align === 'center'
+                              ? 'text-center'
+                              : 'text-left',
+                        )}
+                      >
+                        {renderColumnValue(col, item)}
+                      </div>
+                    ) : (
+                      <TruncatedContent align={col.align} tooltip={getColumnTooltipText(col, item)}>
+                        {renderColumnValue(col, item)}
+                      </TruncatedContent>
+                    )}
+                  </TableCell>
+                ))}
+                {hasActions ? (
+                  <TableCell className={ACTION_CELL_CLASS_NAME}>
+                    <SmartTableActions
+                      item={item}
+                      actions={actions}
+                      actionHandlers={actionHandlers}
+                      renderActions={renderActions}
+                    />
+                  </TableCell>
+                ) : null}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      {pagination && (
+        <Pagination
+          currentPage={pagination.currentPage}
+          totalPages={pagination.totalPages}
+          totalItems={pagination.totalItems}
+          pageSize={pagination.pageSize}
+          startIndex={pagination.startIndex}
+          endIndex={pagination.endIndex}
+          onPageChange={pagination.onPageChange}
+        />
+      )}
+    </div>
+  );
+}

package/registry/ui/smart-table/smart-table/MobileView.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { SmartTableActions } from '@/components/ui/smart-table/SmartTableActions';
+import { TruncatedContent } from '@/components/ui/smart-table/TruncatedContent';
+import { getColumnTooltipText, renderColumnValue } from '@/components/ui/smart-table/utils';
+
+import type { ActionHandlers, ActionType, Column, PaginationConfig } from '@/components/ui/smart-table/types';
+import type { ReactNode } from 'react';
+
+import { Pagination } from '@/components/ui/pagination';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { cn } from '@/lib/utils';
+
+interface MobileViewProps<T> {
+  data: T[];
+  columns: Column<T>[];
+  isLoading: boolean;
+  skeletonRows: number;
+  actions?: ActionType[];
+  actionHandlers?: ActionHandlers<T>;
+  renderActions?: (item: T) => ReactNode;
+  noDataMessage: string;
+  noDataContent?: ReactNode;
+  getRowKey: (item: T) => string | number;
+  onRowClick?: (item: T) => void;
+  renderMobileCard?: (item: T) => ReactNode;
+  pagination?: PaginationConfig;
+  fullHeight?: boolean;
+}
+
+export function MobileView<T>({
+  data,
+  columns,
+  isLoading,
+  skeletonRows,
+  actions,
+  actionHandlers,
+  renderActions,
+  noDataMessage,
+  noDataContent,
+  getRowKey,
+  onRowClick,
+  renderMobileCard,
+  pagination,
+  fullHeight = false,
+}: MobileViewProps<T>): React.ReactElement {
+  const resolvedNoDataContent = noDataContent ?? noDataMessage;
+  const visibleColumns = columns.filter((col) => !col.hideOnMobile);
+  const hasActions = (actions?.length ?? 0) > 0 || renderActions !== undefined;
+
+  const paginationComponent = pagination && (
+    <Pagination
+      currentPage={pagination.currentPage}
+      totalPages={pagination.totalPages}
+      totalItems={pagination.totalItems}
+      pageSize={pagination.pageSize}
+      startIndex={pagination.startIndex}
+      endIndex={pagination.endIndex}
+      onPageChange={pagination.onPageChange}
+    />
+  );
+
+  if (isLoading) {
+    return (
+      <div className={cn('flex flex-col', fullHeight && 'flex-1 min-h-0')}>
+        <div className={cn('space-y-2', fullHeight && 'flex-1 min-h-0 overflow-auto px-px')}>
+          {Array.from({ length: skeletonRows }).map((_, i) => (
+            <Card key={i} size="sm" className="border border-border/80 shadow-none ring-0">
+              <CardContent className="px-3">
+                <div className="space-y-2">
+                  {visibleColumns.map((column) => (
+                    <div key={column.header} className="flex items-center gap-3">
+                      <Skeleton className="h-3.5 w-20 shrink-0" />
+                      <Skeleton className="h-4 w-full" />
+                    </div>
+                  ))}
+                  {hasActions ? (
+                    <div className="flex justify-end border-t pt-3">
+                      <Skeleton className="h-8 w-24" />
+                    </div>
+                  ) : null}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+        {paginationComponent}
+      </div>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <div className={cn('flex flex-col', fullHeight && 'flex-1 min-h-0')}>
+        <div className="w-full py-0">
+          {typeof resolvedNoDataContent === 'string' ? (
+            <div className="text-muted-foreground">{resolvedNoDataContent}</div>
+          ) : (
+            resolvedNoDataContent
+          )}
+        </div>
+        {pagination && pagination.totalItems > 0 && paginationComponent}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('flex flex-col', fullHeight && 'flex-1 min-h-0')}>
+      <div className={cn('space-y-2', fullHeight && 'flex-1 min-h-0 overflow-auto px-px')}>
+        {data.map((item) => (
+          <Card
+            key={getRowKey(item)}
+            size="sm"
+            className={cn(
+              'border border-border/80 shadow-none ring-0',
+              onRowClick ? 'cursor-pointer hover:bg-muted/50' : ''
+            )}
+            onClick={() => onRowClick?.(item)}
+          >
+            <CardContent className="px-3">
+              {renderMobileCard ? (
+                renderMobileCard(item)
+              ) : (
+                <div className="space-y-2.5">
+                  {visibleColumns.map((col) => (
+                    <div
+                      key={col.header}
+                      className="flex items-center gap-3 overflow-hidden"
+                    >
+                      <span className="w-20 shrink-0 truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                        {col.mobileLabel ?? col.header}
+                      </span>
+                      <div className="min-w-0 flex-1 text-sm">
+                        {col.truncate === false ? (
+                          <div className="block min-w-0 w-full text-right text-sm">
+                            {renderColumnValue(col, item)}
+                          </div>
+                        ) : (
+                          <TruncatedContent
+                            align="right"
+                            tooltip={getColumnTooltipText(col, item)}
+                            className="text-sm"
+                          >
+                            {renderColumnValue(col, item)}
+                          </TruncatedContent>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                  {hasActions ? (
+                    <div className="mt-3 flex justify-end border-t pt-2.5">
+                      <SmartTableActions
+                        item={item}
+                        actions={actions}
+                        actionHandlers={actionHandlers}
+                        renderActions={renderActions}
+                      />
+                    </div>
+                  ) : null}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+      {paginationComponent}
+    </div>
+  );
+}

package/registry/ui/smart-table/smart-table/SmartTable.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { DesktopView } from '@/components/ui/smart-table/DesktopView';
+import { MobileView } from '@/components/ui/smart-table/MobileView';
+
+import type { SmartTableProps } from '@/components/ui/smart-table/types';
+
+import { cn } from '@/lib/utils';
+import { useIsMobile } from '@/components/ui/use-media-query';
+
+export function SmartTable<T>({
+  data,
+  columns,
+  isLoading,
+  skeletonRows = 5,
+  actions,
+  actionHandlers,
+  renderActions,
+  noDataMessage = 'No data available',
+  noDataContent,
+  getRowKey = (item) => {
+    // Default: try _id, id, or index
+    const record = item as Record<string, unknown>;
+    if ('_id' in record) return String(record._id);
+    if ('id' in record) return String(record.id);
+    return data.indexOf(item);
+  },
+  onRowClick,
+  renderMobileCard,
+  pagination,
+  stickyHeader,
+  maxHeight,
+  fullHeight,
+  sortState,
+  onSortChange,
+}: SmartTableProps<T>): React.ReactElement {
+  const isMobile = useIsMobile();
+
+  if (isMobile) {
+    return (
+      <div className={cn('min-w-0', fullHeight && 'flex min-h-0 flex-1 flex-col')}>
+        <MobileView
+          data={data}
+          columns={columns}
+          isLoading={isLoading}
+          skeletonRows={skeletonRows}
+          actions={actions}
+          actionHandlers={actionHandlers}
+          renderActions={renderActions}
+          noDataMessage={noDataMessage}
+          noDataContent={noDataContent}
+          getRowKey={getRowKey}
+          onRowClick={onRowClick}
+          renderMobileCard={renderMobileCard}
+          pagination={pagination}
+          fullHeight={fullHeight}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('min-w-0', fullHeight && 'flex min-h-0 flex-1 flex-col')}>
+      <DesktopView
+        data={data}
+        columns={columns}
+        isLoading={isLoading}
+        skeletonRows={skeletonRows}
+        actions={actions}
+        actionHandlers={actionHandlers}
+        renderActions={renderActions}
+        noDataMessage={noDataMessage}
+        noDataContent={noDataContent}
+        getRowKey={getRowKey}
+        onRowClick={onRowClick}
+        pagination={pagination}
+        stickyHeader={stickyHeader}
+        maxHeight={maxHeight}
+        fullHeight={fullHeight}
+        sortState={sortState}
+        onSortChange={onSortChange}
+      />
+    </div>
+  );
+}

package/registry/ui/smart-table/smart-table/SmartTableActions.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { Eye, Pencil, Trash2 } from 'lucide-react';
+
+import type { ActionHandlers, ActionType } from '@/components/ui/smart-table/types';
+import type { ReactNode } from 'react';
+
+import { Button } from '@/components/ui/button';
+
+const SMART_TABLE_ACTIONS_CONTAINER_CLASS = 'flex w-full items-center justify-end gap-1';
+
+interface SmartTableActionsProps<T> {
+  item: T;
+  actions?: ActionType[];
+  actionHandlers?: ActionHandlers<T>;
+  renderActions?: (item: T) => ReactNode;
+}
+
+const actionIcons: Record<ActionType, typeof Eye> = {
+  view: Eye,
+  edit: Pencil,
+  delete: Trash2,
+};
+
+const actionLabels: Record<ActionType, string> = {
+  view: 'Visualizza',
+  edit: 'Edit',
+  delete: 'Delete',
+};
+
+export function SmartTableActions<T>({
+  item,
+  actions,
+  actionHandlers,
+  renderActions,
+}: SmartTableActionsProps<T>): React.ReactElement | null {
+  if (renderActions) {
+    return <div className={SMART_TABLE_ACTIONS_CONTAINER_CLASS}>{renderActions(item)}</div>;
+  }
+
+  if (!actions || !actionHandlers) {
+    return null;
+  }
+
+  return (
+    <div className={SMART_TABLE_ACTIONS_CONTAINER_CLASS}>
+      {actions.map((action) => {
+        const Icon = actionIcons[action];
+        const handler = actionHandlers[
+          `on${action.charAt(0).toUpperCase()}${action.slice(1)}` as keyof ActionHandlers<T>
+        ];
+
+        return (
+          <Button
+            key={action}
+            variant="ghost"
+            size="icon"
+            className="size-8"
+            aria-label={actionLabels[action]}
+            onClick={(event) => {
+              event.stopPropagation();
+              (handler as ((value: T) => void) | undefined)?.(item);
+            }}
+          >
+            <Icon className="size-4" />
+          </Button>
+        );
+      })}
+    </div>
+  );
+}