@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/ui/table/types.ts

@@ -1,335 +0,0 @@
-import type { ElementType, ReactNode } from 'react';
-import type { NoDataProps } from '../no-data';
-
-/** @deprecated Use types from `data-table` instead. */
-export type TailwindBreakpoint = 'md' | 'lg' | 'xl' | '2xl';
-
-/**
- * Default row shape for the legacy table generics — an object with unknown
- * columns. Every real call site passes its own row type; this only keeps the
- * bare `TableColumn` / `TableProps` spellings usable.
- */
-export type TableRowData = Record<string, unknown>;
-
-/** @deprecated Use types from `data-table` instead. */
-export interface TableColumn<T = TableRowData> {
-  key: string;
-  label: string;
-  width?: string; // e.g., 'w-40', 'flex-1', 'w-32'
-  align?: 'left' | 'center' | 'right';
-  sortable?: boolean;
-  filterable?: boolean;
-  hideAt?: TailwindBreakpoint | TailwindBreakpoint[];
-  renderCell?: (item: T, column: TableColumn<T>) => ReactNode;
-  renderHeader?: () => ReactNode;
-  /**
-   * A definition shown in an `InfoHint` beside the header label. The header
-   * owns the icon, spacing and accessible name, so a column never needs a
-   * hand-rolled `renderHeader` just to explain itself. Ignored when
-   * `renderHeader` is set — a custom header owns its whole contents.
-   */
-  hint?: ReactNode;
-  className?: string;
-  // Sorting
-  sortKey?: string;
-  sortFunction?: (a: T, b: T) => number;
-  // Filtering
-  filterOptions?: FilterOption[];
-  filterKey?: string;
-  filterFunction?: (item: T, filterValue: FilterOption['value']) => boolean;
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface FilterOption {
-  id: string;
-  label: string;
-  value: string | number | boolean;
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface FilterSection {
-  id: string;
-  title: string;
-  type: 'checkbox' | 'radio' | 'select';
-  options: FilterOption[];
-  allowSelectAll?: boolean;
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface TableFilters {
-  /** Selected option ids for a column — what `FiltersDropdown` emits. */
-  [columnKey: string]: string[];
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface CursorPagination {
-  hasNextPage: boolean;
-  hasPreviousPage?: boolean;
-  isFirstPage?: boolean;
-  startCursor?: string | null;
-  endCursor?: string | null;
-  currentCount?: number;
-  totalCount?: number | null;
-  onNext?: (cursor: string) => void;
-  onPrevious?: (cursor: string) => void;
-  onReset?: () => void;
-  itemName?: string;
-  showInfo?: boolean;
-  compact?: boolean;
-  resetButtonLabel?: string;
-  resetButtonIcon?: 'home' | 'rotate';
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface PagePagination {
-  currentPage: number;
-  totalPages: number;
-  pageSize?: number;
-  totalItems?: number;
-  onPageChange: (page: number) => void;
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface InfiniteScrollConfig {
-  hasNextPage: boolean;
-  isFetchingNextPage: boolean;
-  onLoadMore: () => void;
-  skeletonRows?: number;
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface TableProps<T = TableRowData> {
-  // Data
-  data: T[];
-  columns: TableColumn<T>[];
-  rowKey: keyof T | ((item: T) => string);
-
-  // States
-  loading?: boolean;
-  emptyMessage?: string;
-
-  // Skeleton configuration
-  /** Skeleton rows while loading: one full page. Default `pagePagination.pageSize`, else `TABLE_SKELETON_ROWS`. */
-  skeletonRows?: number;
-  /**
-   * Keep the table height stable by padding with invisible rows when the page
-   * is short, AND by reserving the same slots (empty state centred over them)
-   * when it is empty. Typically the page size. Same name and semantics as
-   * `DataTableBodyProps.minRows` — ONE vocabulary across both tables.
-   *
-   * Unset keeps the legacy behaviour: pad to `skeletonRows`, collapse when empty.
-   */
-  minRows?: number;
-  /** Props for the empty state (`NoData`). Overrides `emptyMessage`. Same shape
-   *  as `DataTableBodyProps.emptyState`.
-   *
-   *  ONE rule, so tables do not each invent their own: pass `emptyMessage` when
-   *  a title is all you need, `emptyState` when you also want a description,
-   *  icon or action — never both. */
-  emptyState?: NoDataProps;
-  /**
-   * @deprecated Pass `minRows` (the page size) instead — one vocabulary with
-   * `DataTable`.
-   *
-   * Kept working, not removed: it shipped in 0.0.597 and hosts pin an exact
-   * version, so deleting it would make every consumer on that release silently
-   * lose its reserved height with nothing failing loudly. Treated as
-   * `minRows = skeletonRows`, which is what every call site meant by it.
-   */
-  keepHeightWhenEmpty?: boolean;
-  /**
-   * @deprecated Pass `emptyState={{ title, description }}` instead.
-   *
-   * Kept working for the same reason as `keepHeightWhenEmpty`. Merged UNDER an
-   * explicit `emptyState`, so a caller passing both gets the newer one.
-   */
-  emptyDescription?: string;
-
-  // Styling
-  className?: string;
-  containerClassName?: string;
-  headerClassName?: string;
-  rowClassName?: string | ((item: T, index: number) => string);
-  /** Compact mode: smaller row height for dense data lists */
-  compact?: boolean;
-
-  // Interactions
-  onRowClick?: (item: T) => void;
-
-  // Row Actions
-  rowActions?: RowAction<T>[];
-  // Custom renderer for the actions area (e.g., kebab/dots menu)
-  renderRowActions?: (item: T) => ReactNode;
-  /**
-   * Width class(es) for the synthetic actions column. The default is
-   * content-sized (`w-auto`), which mis-aligns every OTHER column between
-   * the header and the rows whenever the row actions are wider than the
-   * header's "Showing N results" counter (each side sizes to its own
-   * content). Pass a FIXED width (e.g. `w-60`) when the actions are wide
-   * text buttons so the header and rows share one grid.
-   */
-  actionsColumnWidth?: string;
-
-  /**
-   * When provided, renders a right-pointing chevron link at the end of every row
-   * pointing at rowHref(item). Uses the shared Button component with href support,
-   * so middle-click / Cmd+click / right-click "open in new tab" work natively.
-   */
-  rowHref?: (item: T) => string | null | undefined;
-
-  // Sorting
-  sortBy?: string;
-  sortDirection?: 'asc' | 'desc';
-  onSort?: (column: string, direction: 'asc' | 'desc') => void;
-  defaultSort?: { column: string; direction: 'asc' | 'desc' };
-
-  // Filtering
-  filters?: TableFilters;
-  onFilterChange?: (filters: TableFilters) => void;
-  showFilters?: boolean;
-
-  // Selection
-  selectable?: boolean;
-  selectedRows?: T[];
-  onSelectionChange?: (selected: T[]) => void;
-  selectAllLabel?: string;
-
-  // Bulk Actions
-  bulkActions?: BulkAction<T>[];
-  showToolbar?: boolean;
-
-  // Pagination - supports both cursor and page-based
-  cursorPagination?: CursorPagination;
-  pagePagination?: PagePagination;
-  paginationClassName?: string;
-
-  // Infinite scroll - auto-loads next page when scrolling near bottom
-  infiniteScroll?: InfiniteScrollConfig;
-
-  // Sticky header - keeps column headers visible while scrolling
-  stickyHeader?: boolean;
-  /** Tailwind top class for sticky header offset, e.g. "top-[72px]" */
-  stickyHeaderOffset?: string;
-
-  /**
-   * Opt-in: render body rows as `motion.div` with `layout="position"` so a data
-   * reorder (same `rowKey`, new order) animates via FLIP. Off by default — all
-   * existing usages are unaffected. Honor `prefers-reduced-motion` at the call
-   * site (pass `false` when reduced motion is requested) so the lib prop stays
-   * purely mechanical and adds zero motion runtime when off.
-   */
-  animateRowReorder?: boolean;
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface BulkAction<T = TableRowData> {
-  label: string;
-  icon?: ReactNode;
-  onClick: (selectedItems: T[]) => void;
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
-  requiresSelection?: boolean;
-  className?: string;
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface RowAction<T = TableRowData> {
-  label: string;
-  icon?: ReactNode;
-  onClick: (item: T) => void;
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
-  className?: string;
-  hideOnMobile?: boolean;
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface TableHeaderProps<T = TableRowData> {
-  columns: TableColumn<T>[];
-  className?: string;
-  // Sorting
-  sortBy?: string;
-  sortDirection?: 'asc' | 'desc';
-  onSort?: (column: string, direction: 'asc' | 'desc') => void;
-  // Filtering
-  filters?: TableFilters;
-  onFilterChange?: (filters: TableFilters) => void;
-  // Selection
-  selectable?: boolean;
-  allSelected?: boolean;
-  someSelected?: boolean;
-  onSelectAll?: () => void;
-  totalItemsCount: number;
-  // Sticky
-  stickyHeader?: boolean;
-  stickyHeaderOffset?: string;
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface TableRowProps<T = TableRowData> {
-  item: T;
-  columns: TableColumn<T>[];
-  onClick?: (item: T) => void;
-  href?: string;
-  className?: string | ((item: T, index: number) => string);
-  index: number;
-  isMobile?: boolean;
-  compact?: boolean;
-  // Selection
-  selectable?: boolean;
-  selected?: boolean;
-  onSelect?: (item: T) => void;
-  /** Opt-in FLIP reorder — see `TableProps.animateRowReorder`. Forwarded by `Table`. */
-  animateRowReorder?: boolean;
-  /**
-   * Internal: the lazily-resolved framer-motion `motion.div`, injected by `Table`
-   * so framer-motion stays out of the default bundle. Typed as a bare
-   * `ElementType` so this module never statically references framer-motion.
-   * Plain `<div>` is used until it's set.
-   */
-  motionDiv?: ElementType;
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface TableCellProps {
-  children: ReactNode;
-  align?: 'left' | 'center' | 'right';
-  className?: string;
-  width?: string;
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface TableCardSkeletonProps {
-  /**
-   * The table's columns as its rows draw them, the synthetic actions and chevron columns included (`Table` passes
-   * its own). Only `key`, `width` and `hideAt` are read, so any `TableColumn<T>[]` fits.
-   */
-  columns: ReadonlyArray<Pick<TableColumn, 'key' | 'width' | 'hideAt'>>;
-  rows?: number; // Number of skeleton rows to display (default: 10)
-  /** Match a `compact` table's row height, so the first paint does not jump. */
-  compact?: boolean;
-  /**
-   * The row actions in the actions column, one button each (`iconOnly`: an icon button). Absent: the column's
-   * actions are the host's own (`renderRowActions`), drawn as one icon button.
-   */
-  actions?: ReadonlyArray<{ iconOnly: boolean }>;
-  /** The table's selection checkbox column. */
-  selectable?: boolean;
-  className?: string;
-  rowClassName?: string; // Additional classes for each skeleton row
-}
-
-/** @deprecated Use types from `data-table` instead. */
-export interface TableEmptyStateProps {
-  message?: string;
-  /** Second line under the title. Defaults to the generic search/filter hint
-   *  only when `message` is also absent. */
-  description?: string;
-  /** Full `NoData` props — overrides `message` AND `description`. Same shape as
-   *  `DataTableEmpty`. */
-  emptyState?: NoDataProps;
-  icon?: ReactNode;
-  action?: {
-    label: string;
-    onClick: () => void;
-  };
-  className?: string;
-}

package/src/components/ui/table/use-table-motion.ts

@@ -1,48 +0,0 @@
-'use client';
-
-import { useEffect, useState, type ComponentType, type ElementType, type ReactNode } from 'react';
-
-/**
- * Framer Motion runtime resolved lazily for the opt-in row-reorder animation.
- * `motionDiv` is `motion.div`; `LayoutGroup` coordinates the FLIP.
- */
-export interface TableMotionRuntime {
-  // Structural component types only — the base table must never statically
-  // reference framer-motion's own types (that would pull the module into the
-  // default bundle's type graph and, with it, the import).
-  motionDiv: ElementType;
-  LayoutGroup: ComponentType<{ id?: string; children?: ReactNode }>;
-}
-
-/**
- * Lazily loads `framer-motion` — via a dynamic `import()` so it lands in its own
- * chunk — ONLY when row-reorder animation is enabled. Consumers that never set
- * `animateRowReorder` never pull framer-motion into their bundle (the default
- * `Table`/`TableRow` path stays motion-free).
- *
- * Returns `null` until the module resolves (and always when `enabled` is false);
- * callers render plain DOM in the meantime, so the first paint is non-animated
- * and the FLIP kicks in once the chunk has loaded.
- */
-export function useTableMotion(enabled: boolean): TableMotionRuntime | null {
-  const [runtime, setRuntime] = useState<TableMotionRuntime | null>(null);
-
-  useEffect(() => {
-    if (!enabled || runtime) return undefined;
-    let active = true;
-    import('framer-motion')
-      .then(m => {
-        if (active) setRuntime({ motionDiv: m.motion.div, LayoutGroup: m.LayoutGroup });
-      })
-      .catch(() => {
-        // Chunk-load failure → keep `runtime` null so the table degrades to
-        // plain (non-animated) rows, instead of surfacing an unhandled
-        // promise rejection / global chunk-load error.
-      });
-    return () => {
-      active = false;
-    };
-  }, [enabled, runtime]);
-
-  return enabled ? runtime : null;
-}

package/src/components/ui/table/utils.ts

@@ -1,55 +0,0 @@
-import type { TableColumn, TailwindBreakpoint } from './types';
-
-/** The synthetic column `Table` adds for its row actions (`rowActions` / `renderRowActions`). */
-export const TABLE_ACTIONS_COLUMN_KEY = '__actions__';
-/** The synthetic column `Table` adds for its row link (`rowHref`): one chevron icon button. */
-export const TABLE_CHEVRON_COLUMN_KEY = '__chevron__';
-
-/** @deprecated Use `data-table` instead. */
-export function getHideClasses(hideAt?: TailwindBreakpoint | TailwindBreakpoint[]): string {
-  if (!hideAt) {
-    return '';
-  }
-
-  // Convert single breakpoint to array for uniform handling
-  const breakpoints = Array.isArray(hideAt) ? hideAt : [hideAt];
-
-  // Breakpoint order for Tailwind (smallest to largest)
-  const breakpointOrder: TailwindBreakpoint[] = ['md', 'lg', 'xl', '2xl'];
-
-  // Find the largest breakpoint in the hideAt array
-  const maxBreakpointIndex = Math.max(...breakpoints.map(bp => breakpointOrder.indexOf(bp)));
-
-  // For single breakpoint: hide below, show at and above
-  // e.g., hideAt: 'md' -> 'hidden content-md:flex'
-  if (breakpoints.length === 1) {
-    return `hidden content-${breakpoints[0]}:flex`;
-  }
-
-  // For multiple breakpoints: hide at specified breakpoints, show after the largest one
-  // e.g., hideAt: ['md', 'lg'] -> 'content-md:hidden content-lg:hidden content-xl:flex'
-  const hideClasses = breakpoints.map(bp => `content-${bp}:hidden`).join(' ');
-
-  // Find next breakpoint after the max to show the column
-  const nextBreakpointIndex = maxBreakpointIndex + 1;
-  const showBreakpoint = breakpointOrder[nextBreakpointIndex];
-
-  if (showBreakpoint) {
-    return `${hideClasses} content-${showBreakpoint}:flex`;
-  }
-
-  // If no next breakpoint (e.g., hideAt: '2xl'), just hide
-  return hideClasses;
-}
-
-/** @deprecated Use `data-table` instead. */
-export function isHiddenOnMobile<T>(column: TableColumn<T>): boolean {
-  if (!column.hideAt) {
-    return false;
-  }
-
-  const breakpoints = Array.isArray(column.hideAt) ? column.hideAt : [column.hideAt];
-
-  // Check if 'md' is in the list (mobile breakpoints)
-  return breakpoints.some(bp => bp === 'md');
-}