@scripso-homepad/ui 0.4.2 → 0.4.4

package/src/web/components/TableIconText.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '../utils/cn';
+
+export type TableIconTextProps = {
+  icon: ReactNode;
+  children: ReactNode;
+  className?: string;
+};
+
+export function TableIconText({ icon, children, className }: TableIconTextProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-2 font-sans text-sm font-medium leading-none tracking-normal text-storm-gray-900',
+        className,
+      )}
+    >
+      <span className="text-storm-gray-500">{icon}</span>
+      {children}
+    </span>
+  );
+}

package/src/web/components/TableRowStatusActions.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+import { TableActionsCell, TableCell } from './table/TablePrimitives';
+import { TableActionsMenu, type TableActionsMenuItem } from './TableActionsMenu';
+
+export type TableRowActionsConfig = {
+  status: ReactNode;
+  menuItems?: TableActionsMenuItem[];
+  inlineActions?: ReactNode;
+  menuAriaLabel?: string;
+};
+
+export type TableRowStatusActionsProps = TableRowActionsConfig;
+
+export function TableRowStatusActions({
+  status,
+  menuItems,
+  inlineActions,
+  menuAriaLabel = 'Actions',
+}: TableRowStatusActionsProps) {
+  const actions =
+    inlineActions ??
+    (menuItems && menuItems.length > 0 ? (
+      <TableActionsMenu items={menuItems} triggerAriaLabel={menuAriaLabel} />
+    ) : null);
+
+  return (
+    <>
+      <TableCell>{status}</TableCell>
+      <TableActionsCell>{actions}</TableActionsCell>
+    </>
+  );
+}

package/src/web/components/TableStatusActionsCell.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode, TdHTMLAttributes } from 'react';
+
+import { cn } from '../utils/cn';
+import { tableBodyClassName, tableCellPaddingClassName } from './table/constants';
+
+export type TableStatusActionsCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
+  status: ReactNode;
+  actions?: ReactNode;
+};
+
+/** @deprecated Prefer `TableCell` + `TableActionsCell` via `TableRowStatusActions`. */
+export function TableStatusActionsCell({
+  status,
+  actions,
+  className,
+  ...props
+}: TableStatusActionsCellProps) {
+  return (
+    <td
+      className={cn(tableCellPaddingClassName, tableBodyClassName, className)}
+      {...props}
+    >
+      <div className="flex items-center justify-between gap-3">
+        <div className="min-w-0">{status}</div>
+        {actions ? <div className="flex shrink-0 items-center gap-2.5">{actions}</div> : null}
+      </div>
+    </td>
+  );
+}

package/src/web/components/pagination-utils.ts

@@ -0,0 +1,39 @@
+export function getTotalPages(total: number, pageSize: number): number {
+  if (pageSize <= 0) {
+    return 1;
+  }
+
+  return Math.max(1, Math.ceil(total / pageSize));
+}
+
+export function getPaginationRange(page: number, pageSize: number, total: number) {
+  if (total <= 0) {
+    return { start: 0, end: 0 };
+  }
+
+  const start = (page - 1) * pageSize + 1;
+  const end = Math.min(page * pageSize, total);
+
+  return { start, end };
+}
+
+export function getVisiblePageNumbers(
+  currentPage: number,
+  totalPages: number,
+  maxButtons = 3,
+): number[] {
+  if (totalPages <= maxButtons) {
+    return Array.from({ length: totalPages }, (_, index) => index + 1);
+  }
+
+  const half = Math.floor(maxButtons / 2);
+  let start = Math.max(1, currentPage - half);
+  let end = start + maxButtons - 1;
+
+  if (end > totalPages) {
+    end = totalPages;
+    start = Math.max(1, end - maxButtons + 1);
+  }
+
+  return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+}

package/src/web/components/table/DataTable.tsx

@@ -0,0 +1,123 @@
+import { useMemo, type ReactNode } from 'react';
+
+import { cn } from '../../utils/cn';
+import {
+  tableBorderClassName,
+  tableFooterShellClassName,
+  tableShellClassName,
+  DEFAULT_TABLE_BODY_MIN_HEIGHT,
+} from './constants';
+import {
+  DataTableClassNamesContext,
+  type DataTableClassNames,
+} from './data-table-class-names';
+import { TableScrollArea } from './TableScrollArea';
+
+export type { DataTableClassNames };
+
+export type DataTableProps = {
+  children: ReactNode;
+  footer?: ReactNode;
+  minWidth?: number | string;
+  /** Outer flex container — override layout spacing if needed. */
+  className?: string;
+  /** Table shell — default `rounded-xl` alone, or `rounded-t-xl` when a footer is present. */
+  tableClassName?: string;
+  /** Footer shell — default `rounded-b-xl` when a footer is present. */
+  footerClassName?: string;
+  scrollClassName?: string;
+  /** Class names for individual table parts. Merged with the matching `*ClassName` props above. */
+  classNames?: DataTableClassNames;
+  /** Minimum height of the scrollable table body. Default: 320px. */
+  minBodyHeight?: number | string;
+  /** Fixed height of the scrollable table body (scrolls when content overflows). */
+  bodyHeight?: number | string;
+  /** Grow the table region to fill a flex parent (`flex-1 min-h-0`). */
+  fillHeight?: boolean;
+};
+
+function mergeDataTableClassNames({
+  className,
+  tableClassName,
+  footerClassName,
+  scrollClassName,
+  classNames,
+}: Pick<
+  DataTableProps,
+  'className' | 'tableClassName' | 'footerClassName' | 'scrollClassName' | 'classNames'
+>): DataTableClassNames {
+  return {
+    root: cn(classNames?.root, className),
+    shell: cn(classNames?.shell, tableClassName),
+    scroll: cn(classNames?.scroll, scrollClassName),
+    footer: cn(classNames?.footer, footerClassName),
+    table: classNames?.table,
+    header: classNames?.header,
+    body: classNames?.body,
+    pagination: classNames?.pagination,
+  };
+}
+
+export function DataTable({
+  children,
+  footer,
+  minWidth,
+  className,
+  tableClassName,
+  footerClassName,
+  scrollClassName,
+  classNames,
+  minBodyHeight = DEFAULT_TABLE_BODY_MIN_HEIGHT,
+  bodyHeight,
+  fillHeight = false,
+}: DataTableProps) {
+  const hasFooter = footer != null;
+  const mergedClassNames = useMemo(
+    () =>
+      mergeDataTableClassNames({
+        className,
+        tableClassName,
+        footerClassName,
+        scrollClassName,
+        classNames,
+      }),
+    [className, classNames, footerClassName, scrollClassName, tableClassName],
+  );
+
+  return (
+    <DataTableClassNamesContext.Provider value={mergedClassNames}>
+      <div className={cn('flex flex-col', fillHeight && 'min-h-0 flex-1', mergedClassNames.root)}>
+        <div
+          className={cn(
+            tableShellClassName,
+            tableBorderClassName,
+            fillHeight && 'min-h-0 flex-1',
+            hasFooter ? 'rounded-t-xl border-b-0' : 'rounded-xl',
+            mergedClassNames.shell,
+          )}
+        >
+          <TableScrollArea
+            minWidth={minWidth}
+            minHeight={bodyHeight === undefined ? minBodyHeight : undefined}
+            height={bodyHeight}
+            fillHeight={fillHeight}
+            className={mergedClassNames.scroll}
+          >
+            {children}
+          </TableScrollArea>
+        </div>
+        {hasFooter ? (
+          <div
+            className={cn(
+              tableFooterShellClassName,
+              tableBorderClassName,
+              mergedClassNames.footer,
+            )}
+          >
+            {footer}
+          </div>
+        ) : null}
+      </div>
+    </DataTableClassNamesContext.Provider>
+  );
+}

package/src/web/components/table/TablePrimitives.tsx

@@ -0,0 +1,214 @@
+import type { HTMLAttributes, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+
+import { TableSortIcon, type TableSortDirection } from '../../icons/TableSortIcon';
+import { cn } from '../../utils/cn';
+import { useDataTableClassNames } from './data-table-class-names';
+import {
+  tableAlignClasses,
+  tableBodyClassName,
+  tableBorderClassName,
+  tableCellPaddingClassName,
+  tableCellVariantClasses,
+  tableHeadPaddingClassName,
+  tableHeadSortButtonAlignClasses,
+  tableHeaderClassName,
+  tableRowDisabledCellClassName,
+  tableStickyRightHeadClassName,
+  tableStickyRightShadowClassName,
+  type TableCellVariant,
+} from './constants';
+import { TableRowDisabledProvider, useTableRowDisabled } from './table-row-context';
+
+export type TableProps = HTMLAttributes<HTMLTableElement>;
+
+export function Table({ className, ...props }: TableProps) {
+  const dataTableClassNames = useDataTableClassNames();
+
+  return (
+    <table
+      className={cn('w-full border-collapse text-left', dataTableClassNames.table, className)}
+      {...props}
+    />
+  );
+}
+
+export type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+
+export function TableHeader({ className, ...props }: TableHeaderProps) {
+  const dataTableClassNames = useDataTableClassNames();
+
+  return (
+    <thead
+      className={cn(
+        'border-b bg-storm-gray-0',
+        tableBorderClassName,
+        dataTableClassNames.header,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+
+export function TableBody({ className, ...props }: TableBodyProps) {
+  const dataTableClassNames = useDataTableClassNames();
+
+  return (
+    <tbody
+      className={cn(tableBodyClassName, dataTableClassNames.body, className)}
+      {...props}
+    />
+  );
+}
+
+export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+  /** Muted row state — Storm Gray/50 background at 30% with 70% content opacity. */
+  disabled?: boolean;
+};
+
+export function TableRow({ className, disabled = false, ...props }: TableRowProps) {
+  return (
+    <TableRowDisabledProvider disabled={disabled}>
+      <tr
+        className={cn('border-b last:border-b-0', tableBorderClassName, className)}
+        aria-disabled={disabled || undefined}
+        {...props}
+      />
+    </TableRowDisabledProvider>
+  );
+}
+
+export type TableHeadProps = ThHTMLAttributes<HTMLTableCellElement> & {
+  align?: keyof typeof tableAlignClasses;
+  /** Pins the column to the right edge during horizontal scroll (e.g. actions menu). */
+  stickyRight?: boolean;
+  /** Enables sort UI and click handler for this column header. */
+  sortable?: boolean;
+  /** Active sort direction for this column. Omit or `null` when unsorted. */
+  sortDirection?: TableSortDirection | null;
+  /** Called when the sortable header is clicked. */
+  onSort?: () => void;
+  children?: ReactNode;
+};
+
+function resolveAriaSort(
+  sortDirection: TableSortDirection | null,
+  isSortable: boolean,
+): 'ascending' | 'descending' | 'none' | undefined {
+  if (sortDirection === 'asc') {
+    return 'ascending';
+  }
+
+  if (sortDirection === 'desc') {
+    return 'descending';
+  }
+
+  return isSortable ? 'none' : undefined;
+}
+
+export function TableHead({
+  className,
+  align = 'left',
+  stickyRight = false,
+  sortable = false,
+  sortDirection = null,
+  onSort,
+  children,
+  ...props
+}: TableHeadProps) {
+  const isSortable = sortable && onSort != null;
+
+  const content = isSortable ? (
+    <button
+      type="button"
+      onClick={onSort}
+      className={cn(
+        'inline-flex w-full cursor-pointer items-center gap-2.5 border-0 bg-transparent p-0 font-[inherit] text-[length:inherit] leading-[inherit] tracking-[inherit] text-inherit transition-colors hover:text-storm-gray-500',
+        tableHeadSortButtonAlignClasses[align],
+      )}
+    >
+      <span>{children}</span>
+      <TableSortIcon direction={sortDirection} />
+    </button>
+  ) : (
+    children
+  );
+
+  return (
+    <th
+      className={cn(
+        'sticky top-0 z-10',
+        tableHeadPaddingClassName,
+        tableHeaderClassName,
+        stickyRight && [
+          'sticky right-0 z-20',
+          tableStickyRightHeadClassName,
+          tableStickyRightShadowClassName,
+        ],
+        !isSortable && tableAlignClasses[align],
+        className,
+      )}
+      aria-sort={resolveAriaSort(sortDirection, isSortable)}
+      {...props}
+    >
+      {content}
+    </th>
+  );
+}
+
+export type { TableCellVariant };
+
+export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
+  variant?: TableCellVariant;
+  align?: keyof typeof tableAlignClasses;
+  children?: ReactNode;
+};
+
+export function TableCell({
+  className,
+  variant = 'default',
+  align = 'left',
+  children,
+  ...props
+}: TableCellProps) {
+  const disabled = useTableRowDisabled();
+
+  return (
+    <td
+      className={cn(
+        tableCellPaddingClassName,
+        tableBodyClassName,
+        tableCellVariantClasses[variant],
+        disabled && tableRowDisabledCellClassName,
+        tableAlignClasses[align],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </td>
+  );
+}
+
+export type TableActionsCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
+  children?: ReactNode;
+};
+
+export function TableActionsCell({ className, children, ...props }: TableActionsCellProps) {
+  return (
+    <td
+      className={cn(
+        'sticky right-0 z-10 whitespace-nowrap bg-white',
+        tableCellPaddingClassName,
+        tableBodyClassName,
+        tableStickyRightShadowClassName,
+        className,
+      )}
+      {...props}
+    >
+      <div className="relative z-[1] flex items-center justify-end gap-2">{children}</div>
+    </td>
+  );
+}

package/src/web/components/table/TableScrollArea.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '../../utils/cn';
+import {
+  resolveTableMinWidth,
+  resolveTableSize,
+  tableScrollAtEndClassName,
+  tableScrollHasOverflowClassName,
+} from './constants';
+import { useHorizontalScrollState } from './use-horizontal-scroll-state';
+
+export type TableScrollAreaProps = {
+  children: ReactNode;
+  minWidth?: number | string;
+  className?: string;
+  minHeight?: number | string;
+  height?: number | string;
+  fillHeight?: boolean;
+};
+
+export function TableScrollArea({
+  children,
+  minWidth = 980,
+  className,
+  minHeight,
+  height,
+  fillHeight = false,
+}: TableScrollAreaProps) {
+  const { scrollRef, scrollState } = useHorizontalScrollState();
+
+  return (
+    <div
+      ref={scrollRef}
+      className={cn(
+        'table-scroll-area w-full overflow-auto',
+        scrollState.hasOverflow && tableScrollHasOverflowClassName,
+        scrollState.atEnd && tableScrollAtEndClassName,
+        fillHeight && 'min-h-0 flex-1',
+        className,
+      )}
+      style={{
+        ...(minHeight !== undefined ? { minHeight: resolveTableSize(minHeight) } : {}),
+        ...(height !== undefined ? { height: resolveTableSize(height) } : {}),
+      }}
+    >
+      <div className="w-full" style={{ minWidth: resolveTableMinWidth(minWidth) }}>
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/web/components/table/constants.ts

@@ -0,0 +1,59 @@
+export const tableBorderClassName = 'border-storm-gray-50';
+
+export const tableStickyRightShadowClassName = 'table-sticky-right-shadow';
+
+export const tableStickyRightHeadClassName = 'table-sticky-right-head';
+
+export const tableScrollAtEndClassName = 'table-scroll-at-end';
+
+export const tableScrollHasOverflowClassName = 'table-scroll-has-overflow';
+
+export const tableRowDisabledCellClassName = 'bg-[#ECEEF0]/30 [&>*]:opacity-70';
+
+export const DEFAULT_TABLE_BODY_MIN_HEIGHT = 320;
+
+export const tableCellPaddingClassName = 'px-3 py-3';
+
+export const tableHeadPaddingClassName = 'px-3 py-4';
+
+export const tableShellClassName = 'flex flex-col overflow-hidden border bg-storm-gray-0';
+
+export const tableFooterShellClassName = 'overflow-hidden rounded-b-xl border bg-storm-gray-0';
+
+export const tableHeaderClassName =
+  'bg-storm-gray-0 font-sans text-xs font-normal leading-none tracking-normal text-storm-gray-400';
+
+export const tableBodyClassName =
+  'bg-white font-sans text-sm font-medium leading-none tracking-normal text-storm-gray-900';
+
+export const tableAlignClasses = {
+  left: '',
+  right: 'text-right',
+  center: 'text-center',
+} as const;
+
+export const tableHeadSortButtonAlignClasses = {
+  left: 'text-left',
+  right: 'justify-end text-right',
+  center: 'justify-center text-center',
+} as const;
+
+export type TableCellVariant = 'default' | 'emphasis' | 'muted' | 'strong';
+
+const tableCellEmphasisClassName = 'font-bold';
+
+/** Typography presets applied on top of `tableBodyClassName`. */
+export const tableCellVariantClasses: Record<TableCellVariant, string> = {
+  default: '',
+  emphasis: tableCellEmphasisClassName,
+  muted: 'text-storm-gray-400',
+  strong: tableCellEmphasisClassName,
+};
+
+export function resolveTableSize(value: number | string): string {
+  return typeof value === 'number' ? `${value}px` : value;
+}
+
+export function resolveTableMinWidth(minWidth: number | string): string {
+  return resolveTableSize(minWidth);
+}

package/src/web/components/table/data-table-class-names.ts

@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react';
+
+export type DataTableClassNames = {
+  /** Outer flex wrapper around the whole table block. */
+  root?: string;
+  /** Bordered shell around the scroll area (border, radius, background). */
+  shell?: string;
+  /** Scrollable table region. */
+  scroll?: string;
+  /** Footer wrapper around pagination. */
+  footer?: string;
+  /** The `<table>` element. */
+  table?: string;
+  /** The `<thead>` section. */
+  header?: string;
+  /** The `<tbody>` section. */
+  body?: string;
+  /** Pagination component when used as a table footer. */
+  pagination?: string;
+};
+
+export const DataTableClassNamesContext = createContext<DataTableClassNames>({});
+
+export function useDataTableClassNames() {
+  return useContext(DataTableClassNamesContext);
+}

package/src/web/components/table/index.ts

@@ -0,0 +1,44 @@
+export type { DataTableClassNames } from './data-table-class-names';
+export type { TableSortDirection } from '../../icons/TableSortIcon';
+
+export {
+  DEFAULT_TABLE_BODY_MIN_HEIGHT,
+  tableAlignClasses,
+  tableBodyClassName,
+  tableBorderClassName,
+  tableCellPaddingClassName,
+  tableCellVariantClasses,
+  tableFooterShellClassName,
+  tableHeadPaddingClassName,
+  tableRowDisabledCellClassName,
+  tableScrollAtEndClassName,
+  tableScrollHasOverflowClassName,
+  tableShellClassName,
+  tableStickyRightShadowClassName,
+} from './constants';
+export type { TableCellVariant } from './constants';
+
+export { DataTable } from './DataTable';
+export type { DataTableProps } from './DataTable';
+
+export { TableScrollArea } from './TableScrollArea';
+export type { TableScrollAreaProps } from './TableScrollArea';
+
+export {
+  Table,
+  TableActionsCell,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './TablePrimitives';
+export type {
+  TableActionsCellProps,
+  TableBodyProps,
+  TableCellProps,
+  TableHeadProps,
+  TableHeaderProps,
+  TableProps,
+  TableRowProps,
+} from './TablePrimitives';

package/src/web/components/table/table-row-context.tsx

@@ -0,0 +1,19 @@
+import { createContext, useContext, type ReactNode } from 'react';
+
+const TableRowDisabledContext = createContext(false);
+
+export function TableRowDisabledProvider({
+  disabled,
+  children,
+}: {
+  disabled: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <TableRowDisabledContext.Provider value={disabled}>{children}</TableRowDisabledContext.Provider>
+  );
+}
+
+export function useTableRowDisabled() {
+  return useContext(TableRowDisabledContext);
+}