@carefully-built/cli 0.1.0 → 0.1.2

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

@@ -0,0 +1,147 @@
+'use client';
+
+import {
+  getTruncatedContentAlignmentClass,
+  shouldRenderTooltipTrigger,
+} from '@/components/ui/smart-table/truncated-content.utils';
+
+import { useEffect, useRef, useState } from 'react';
+
+import type { ReactNode } from 'react';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface TruncatedContentProps {
+  children: ReactNode;
+  tooltip?: string | null;
+  align?: 'left' | 'right' | 'center';
+  className?: string;
+}
+
+export function TruncatedContent({
+  children,
+  tooltip,
+  align = 'left',
+  className = '',
+}: TruncatedContentProps): React.ReactElement {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const updateOverflowState = (): boolean => {
+    const element = contentRef.current;
+    if (!element) {
+      setIsOverflowing(false);
+      return false;
+    }
+
+    const overflowing = element.scrollWidth > element.clientWidth + 1;
+    setIsOverflowing(overflowing);
+    return overflowing;
+  };
+
+  useEffect(() => {
+    const element = contentRef.current;
+    if (!element) {
+      return;
+    }
+
+    updateOverflowState();
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateOverflowState();
+    });
+
+    resizeObserver.observe(element);
+    window.addEventListener('resize', updateOverflowState);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', updateOverflowState);
+    };
+  }, [children, className, align, tooltip]);
+
+  useEffect(() => {
+    if (!isOverflowing && isOpen) {
+      setIsOpen(false);
+    }
+  }, [isOpen, isOverflowing]);
+
+  const alignmentClass = getTruncatedContentAlignmentClass(align);
+  const showTooltipTrigger = shouldRenderTooltipTrigger({
+    tooltip,
+    isOverflowing,
+  });
+
+  const content = (
+    <div
+      ref={contentRef}
+      className={[
+        'block min-w-0 w-full truncate',
+        alignmentClass,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </div>
+  );
+
+  if (!showTooltipTrigger) {
+    return content;
+  }
+
+  return (
+    <Tooltip
+      delayDuration={100}
+      open={isOverflowing ? isOpen : false}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          setIsOpen(false);
+          return;
+        }
+
+        setIsOpen(updateOverflowState());
+      }}
+    >
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          className={[
+            'block min-w-0 w-full overflow-hidden bg-transparent p-0 text-inherit outline-none',
+            alignmentClass,
+            isOverflowing ? 'cursor-help' : 'cursor-default',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          onMouseEnter={() => {
+            updateOverflowState();
+          }}
+          onFocus={() => {
+            updateOverflowState();
+          }}
+          onClick={(event) => {
+            event.stopPropagation();
+            const overflowing = updateOverflowState();
+            if (overflowing) {
+              setIsOpen((previous) => !previous);
+            }
+          }}
+        >
+          {content}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent
+        side="top"
+        align={align === 'right' ? 'end' : align === 'center' ? 'center' : 'start'}
+        sideOffset={6}
+        collisionPadding={12}
+        avoidCollisions
+        className="w-[min(20rem,calc(100vw-1.5rem))] max-w-[calc(100vw-1.5rem)] whitespace-normal break-words text-left"
+      >
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/registry/ui/smart-table/smart-table/index.ts

@@ -0,0 +1,15 @@
+export { SmartTable } from "@/components/ui/smart-table/SmartTable";
+export { SmartTableActions } from "@/components/ui/smart-table/SmartTableActions";
+export { TruncatedContent } from "@/components/ui/smart-table/TruncatedContent";
+export type {
+  Column,
+  ColumnAlign,
+  SortDirection,
+  SortState,
+  SortValue,
+  ActionType,
+  ActionHandlers,
+  SmartTableProps,
+  PaginationConfig,
+} from "@/components/ui/smart-table/types";
+export { useTableSorting } from "@/components/ui/smart-table/sorting";

package/registry/ui/smart-table/smart-table/sorting.ts

@@ -0,0 +1,148 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { getColumnValue } from '@/components/ui/smart-table/utils';
+
+import type { Column, SortDirection, SortState, SortValue } from '@/components/ui/smart-table/types';
+
+interface UseTableSortingOptions<T> {
+  readonly data: readonly T[];
+  readonly columns: readonly Column<T>[];
+  readonly initialSortState?: SortState;
+}
+
+interface UseTableSortingResult<T> {
+  readonly sortedData: T[];
+  readonly sortState: SortState;
+  readonly setSortState: (state: SortState) => void;
+}
+
+export function getColumnSortKey<T>(column: Column<T>): string | null {
+  if (column.sortable === false) {
+    return null;
+  }
+
+  if (column.sortKey) {
+    return column.sortKey;
+  }
+
+  return typeof column.accessor === 'string' ? column.accessor : null;
+}
+
+export function getNextSortState(currentState: SortState, key: string): SortState {
+  if (currentState?.key !== key) {
+    return { key, direction: 'asc' };
+  }
+
+  if (currentState.direction === 'asc') {
+    return { key, direction: 'desc' };
+  }
+
+  return null;
+}
+
+function normalizeSortValue(value: SortValue): string | number | boolean | null {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+
+  if (value instanceof Date) {
+    return value.getTime();
+  }
+
+  return value;
+}
+
+function compareSortValues(left: SortValue, right: SortValue): number {
+  const leftValue = normalizeSortValue(left);
+  const rightValue = normalizeSortValue(right);
+
+  if (leftValue === null && rightValue === null) {
+    return 0;
+  }
+
+  if (leftValue === null) {
+    return 1;
+  }
+
+  if (rightValue === null) {
+    return -1;
+  }
+
+  if (typeof leftValue === 'number' && typeof rightValue === 'number') {
+    return leftValue - rightValue;
+  }
+
+  if (typeof leftValue === 'boolean' && typeof rightValue === 'boolean') {
+    return Number(leftValue) - Number(rightValue);
+  }
+
+  return String(leftValue).localeCompare(String(rightValue), 'it', {
+    numeric: true,
+    sensitivity: 'base',
+  });
+}
+
+function getSortValue<T>(column: Column<T>, row: T): SortValue {
+  if (column.sortAccessor) {
+    return column.sortAccessor(row);
+  }
+
+  return getColumnValue(column, row) as SortValue;
+}
+
+function getSortColumn<T>(
+  columns: readonly Column<T>[],
+  sortState: SortState,
+): Column<T> | null {
+  if (!sortState) {
+    return null;
+  }
+
+  return columns.find((column) => getColumnSortKey(column) === sortState.key) ?? null;
+}
+
+function applyDirection(value: number, direction: SortDirection): number {
+  return direction === 'asc' ? value : -value;
+}
+
+function sortTableData<T>(
+  data: readonly T[],
+  columns: readonly Column<T>[],
+  sortState: SortState,
+): T[] {
+  const sortColumn = getSortColumn(columns, sortState);
+
+  if (!sortColumn || !sortState) {
+    return [...data];
+  }
+
+  return data
+    .map((row, index) => ({ row, index }))
+    .sort((left, right) => {
+      const compared = compareSortValues(
+        getSortValue(sortColumn, left.row),
+        getSortValue(sortColumn, right.row),
+      );
+
+      return compared === 0
+        ? left.index - right.index
+        : applyDirection(compared, sortState.direction);
+    })
+    .map(({ row }) => row);
+}
+
+export function useTableSorting<T>({
+  data,
+  columns,
+  initialSortState = null,
+}: UseTableSortingOptions<T>): UseTableSortingResult<T> {
+  const [sortState, setSortState] = useState(initialSortState);
+  const sortedData = useMemo(
+    () => sortTableData(data, columns, sortState),
+    [columns, data, sortState],
+  );
+
+  return { sortedData, sortState, setSortState };
+}

package/registry/ui/smart-table/smart-table/truncated-content.utils.ts

@@ -0,0 +1,22 @@
+import type { ColumnAlign } from '@/components/ui/smart-table/types';
+
+export function getTruncatedContentAlignmentClass(
+  align?: ColumnAlign
+): string {
+  if (align === 'right') {
+    return 'text-right';
+  }
+
+  if (align === 'center') {
+    return 'text-center';
+  }
+
+  return 'text-left';
+}
+
+export function shouldRenderTooltipTrigger(options: {
+  tooltip?: string | null;
+  isOverflowing: boolean;
+}): boolean {
+  return Boolean(options.tooltip) && options.isOverflowing;
+}

package/registry/ui/smart-table/smart-table/types.ts

@@ -0,0 +1,95 @@
+import type { ReactNode } from 'react';
+
+export type ColumnAlign = 'left' | 'center' | 'right';
+export type SortDirection = 'asc' | 'desc';
+export type SortValue = string | number | Date | boolean | null | undefined;
+export type SortState = { key: string; direction: SortDirection } | null;
+
+export interface Column<T> {
+  /** Column header text */
+  header: string;
+  /** Optional label override for mobile cards */
+  mobileLabel?: string;
+  /** Key to access data (supports nested paths like 'user.name') */
+  accessor?: keyof T | string;
+  /** Column width */
+  width?: string | number;
+  /** Text alignment */
+  align?: ColumnAlign;
+  /** Custom render function */
+  render?: (value: unknown, row: T) => ReactNode;
+  /** Enable header sorting for this column (defaults to true when an accessor or sortKey exists) */
+  sortable?: boolean;
+  /** Stable sort key when the accessor is not a string */
+  sortKey?: string;
+  /** Custom value used for sorting */
+  sortAccessor?: (row: T) => SortValue;
+  /** Enable text truncation wrapper in table cells (default: true) */
+  truncate?: boolean;
+  /** Hide this column on mobile cards */
+  hideOnMobile?: boolean;
+}
+
+export type ActionType = 'view' | 'edit' | 'delete';
+
+export interface ActionHandlers<T> {
+  onView?: (item: T) => void;
+  onEdit?: (item: T) => void;
+  onDelete?: (item: T) => void;
+}
+
+export interface PaginationConfig {
+  /** Current page (1-indexed) */
+  currentPage: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Total number of items */
+  totalItems: number;
+  /** Items per page */
+  pageSize: number;
+  /** Start index (0-indexed) */
+  startIndex: number;
+  /** End index (exclusive) */
+  endIndex: number;
+  /** Go to specific page */
+  onPageChange: (page: number) => void;
+}
+
+export interface SmartTableProps<T> {
+  /** Data array to display */
+  data: T[];
+  /** Column definitions */
+  columns: Column<T>[];
+  /** Loading state - shows skeletons */
+  isLoading: boolean;
+  /** Number of skeleton rows to show when loading */
+  skeletonRows?: number;
+  /** Actions to show (will render action buttons) */
+  actions?: ActionType[];
+  /** Action handlers */
+  actionHandlers?: ActionHandlers<T>;
+  /** Custom actions renderer (overrides actions prop) */
+  renderActions?: (item: T) => ReactNode;
+  /** Message when no data */
+  noDataMessage?: string;
+  /** Custom content when no data */
+  noDataContent?: ReactNode;
+  /** Function to get unique key for each row */
+  getRowKey?: (item: T) => string | number;
+  /** Make rows clickable */
+  onRowClick?: (item: T) => void;
+  /** Custom mobile card renderer */
+  renderMobileCard?: (item: T) => ReactNode;
+  /** Enable pagination */
+  pagination?: PaginationConfig;
+  /** Enable sticky header with scrollable body */
+  stickyHeader?: boolean;
+  /** Max height for scrollable table (default: 'calc(100vh - 300px)') */
+  maxHeight?: string;
+  /** Fill remaining height of parent container (requires parent with flex and height set) */
+  fullHeight?: boolean;
+  /** Active sort state for sortable columns */
+  sortState?: SortState;
+  /** Called when a sortable column header is selected */
+  onSortChange?: (state: SortState) => void;
+}

package/registry/ui/smart-table/smart-table/utils.ts

@@ -0,0 +1,150 @@
+import { createElement } from 'react';
+
+import type { Column } from '@/components/ui/smart-table/types';
+import type { ReactNode } from 'react';
+
+
+import { DisplayDate } from '@/components/ui/display-date';
+import { formatDisplayDate } from '@/components/ui/date-display';
+
+function formatListEntry(value: unknown): string {
+  const formatted = formatValue(value);
+
+  if (typeof formatted === 'string' || typeof formatted === 'number') {
+    return String(formatted);
+  }
+
+  return '—';
+}
+
+/**
+ * Get nested value from object using dot notation
+ * e.g., getNestedValue(obj, 'user.profile.name')
+ */
+function getNestedValue(obj: unknown, path: string): unknown {
+  return path.split('.').reduce((acc, key) => {
+    if (acc && typeof acc === 'object' && key in acc) {
+      return (acc as Record<string, unknown>)[key];
+    }
+    return undefined;
+  }, obj);
+}
+
+/**
+ * Format a value for display
+ */
+function formatValue(value: unknown): ReactNode {
+  if (value === null || value === undefined) {
+    return '—';
+  }
+
+  if (typeof value === 'boolean') {
+    return value ? 'Si' : 'No';
+  }
+
+  if (value instanceof Date) {
+    return createElement(DisplayDate, { value });
+  }
+
+  if (typeof value === 'number') {
+    return value.toLocaleString();
+  }
+
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return '—';
+    }
+
+    return value.map((entry) => formatListEntry(entry)).join(', ');
+  }
+
+  if (typeof value === 'object') {
+    const record = value as Record<string, unknown>;
+
+    for (const key of ['label', 'name', 'title']) {
+      const nestedValue = record[key];
+      if (typeof nestedValue === 'string' || typeof nestedValue === 'number') {
+        return String(nestedValue);
+      }
+    }
+  }
+
+  return '[Object]';
+}
+
+function formatValueAsText(value: unknown): string | null {
+  if (value === null || value === undefined) {
+    return '—';
+  }
+
+  if (typeof value === 'boolean') {
+    return value ? 'Si' : 'No';
+  }
+
+  if (value instanceof Date) {
+    return formatDisplayDate(value);
+  }
+
+  if (typeof value === 'number') {
+    return value.toLocaleString();
+  }
+
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return '—';
+    }
+
+    return value.map((entry) => formatValueAsText(entry) ?? '—').join(', ');
+  }
+
+  if (typeof value === 'object') {
+    const record = value as Record<string, unknown>;
+
+    for (const key of ['label', 'name', 'title']) {
+      const nestedValue = record[key];
+      if (typeof nestedValue === 'string' || typeof nestedValue === 'number') {
+        return String(nestedValue);
+      }
+    }
+  }
+
+  return null;
+}
+
+export function getColumnValue<T>(column: Column<T>, item: T): unknown {
+  if (!column.accessor) {
+    return null;
+  }
+
+  if (typeof column.accessor === 'string' && column.accessor.includes('.')) {
+    return getNestedValue(item, column.accessor);
+  }
+
+  return (item as Record<string, unknown>)[column.accessor as string];
+}
+
+export function renderColumnValue<T>(column: Column<T>, item: T): ReactNode {
+  const value = getColumnValue(column, item);
+
+  if (column.render) {
+    return column.render(value, item);
+  }
+
+  return formatValue(value);
+}
+
+export function getColumnTooltipText<T>(column: Column<T>, item: T): string | null {
+  if (column.render) {
+    return null;
+  }
+
+  return formatValueAsText(getColumnValue(column, item));
+}

package/registry/ui/smart-table/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/registry/ui/smart-table/utils/date-display.ts

@@ -0,0 +1,61 @@
+export type DateDisplayValue = Date | number | string;
+
+function getDate(value: DateDisplayValue): Date {
+  return value instanceof Date ? value : new Date(value);
+}
+
+function startOfDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+function getDayDifference(from: Date, to: Date): number {
+  const millisecondsPerDay = 24 * 60 * 60 * 1000;
+  return Math.round((startOfDay(to).getTime() - startOfDay(from).getTime()) / millisecondsPerDay);
+}
+
+function capitalizeMonthLabel(value: string): string {
+  return value
+    .split(' ')
+    .map((part, index) => {
+      if (index !== 1 || part.length === 0) {
+        return part;
+      }
+
+      const [firstCharacter = '', ...restCharacters] = part;
+      return `${firstCharacter.toUpperCase()}${restCharacters.join('')}`;
+    })
+    .join(' ');
+}
+
+export function formatAbsoluteDate(value: DateDisplayValue): string {
+  const date = getDate(value);
+  const currentYear = new Date().getFullYear();
+  const includesYear = date.getFullYear() !== currentYear;
+
+  return capitalizeMonthLabel(
+    new Intl.DateTimeFormat('it-IT', {
+      day: 'numeric',
+      month: 'short',
+      ...(includesYear ? { year: 'numeric' } : {}),
+    }).format(date)
+  );
+}
+
+export function formatDisplayDate(value: DateDisplayValue): string {
+  const date = getDate(value);
+  const dayDifference = getDayDifference(date, new Date());
+
+  if (dayDifference === 0) {
+    return 'Oggi';
+  }
+
+  if (dayDifference === 1) {
+    return 'Ieri';
+  }
+
+  if (dayDifference >= 2 && dayDifference <= 10) {
+    return `${String(dayDifference)} giorni fa`;
+  }
+
+  return formatAbsoluteDate(date);
+}

package/registry/ui/smart-table/utils/use-media-query.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useMediaQuery(query: string, defaultValue = false): boolean {
+  const [matches, setMatches] = useState(defaultValue);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+
+    const handleChange = (): void => {
+      setMatches(mediaQuery.matches);
+    };
+
+    handleChange();
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [query]);
+
+  return matches;
+}
+
+export function useIsMobile(maxWidth = 767): boolean {
+  return useMediaQuery(`(max-width: ${String(maxWidth)}px)`);
+}

package/registry/ui/switch/manifest.json

@@ -0,0 +1,31 @@
+{
+  "name": "switch",
+  "description": "Editable source registry entry for switch.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "Switch"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "primitives/switch.tsx",
+      "target": "components/ui/switch.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}