@povio/ui 0.0.2 → 0.0.4

package/src/components/table/Table.tsx

@@ -0,0 +1,456 @@
+import {
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  type UniqueIdentifier,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  type CellContext,
+  type ColumnDef,
+  type ColumnOrderState,
+  type OnChangeFn,
+  type Table as ReactTable,
+  type Renderable,
+  type Row,
+  type RowSelectionState,
+  type SortingState,
+  type VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { clsx } from "clsx";
+import i18next, { type TFunction } from "i18next";
+import {
+  type CSSProperties,
+  type ComponentType,
+  type Dispatch,
+  type SetStateAction,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
+
+import { ChevronDownIcon } from "#ui/assets/icons/ChevronDown";
+import { ChevronUpIcon } from "#ui/assets/icons/ChevronUp";
+import { DragIcon } from "#ui/assets/icons/Drag";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import { CellText } from "#ui/components/table/CellText";
+import { HeaderText } from "#ui/components/table/HeaderText";
+import { UIStyle } from "#ui/config/uiStyle.context";
+import { useTableNav } from "#ui/hooks/useTableNav";
+
+import {
+  type TableDataVariantProps,
+  type TableHeadRowVariantProps,
+  type TableRowVariantProps,
+  tableData,
+  tableHeadRow,
+  tableRow,
+} from "./table.cva";
+
+export type BulkSelectionActionsComponent<T> = ComponentType<{
+  table: ReactTable<T>;
+}>;
+
+export interface TableWrapperProps<T> extends Omit<TableProps<T>, "columns"> {}
+
+export interface TableProps<T> extends TableRowVariantProps {
+  items: T[];
+  columns: ((t: TFunction) => ColumnDef<T>[]) | ColumnDef<T>[];
+  showCellBorder?: boolean;
+  onRowClick?: (row: T) => void;
+  onDoubleClick?: (row: T) => void;
+  className?: string;
+  sorting?: SortingState;
+  setSorting?: Dispatch<SetStateAction<SortingState>>;
+  columnOrder?: ColumnOrderState;
+  setColumnOrder?: Dispatch<SetStateAction<ColumnOrderState>>;
+  columnVisibility?: VisibilityState;
+  setColumnVisibility?: Dispatch<SetStateAction<VisibilityState>>;
+  bulkSelectionActions?: BulkSelectionActionsComponent<T>;
+  enableDragDrop?: boolean;
+  onDragEnd?: (event: DragEndEvent) => void;
+  onReorder?: (reorderedItems: T[]) => void;
+  getRowId?: (row: T) => UniqueIdentifier;
+  enableRowSelection?: boolean | ((row: Row<T>) => boolean);
+  enableMultiRowSelection?: boolean | ((row: Row<T>) => boolean);
+  defaultSelectedRows?: RowSelectionState;
+  onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+}
+
+const CustomCellContext = <TData, TValue>(context: CellContext<TData, TValue>) => {
+  return { ...context, original: context.row.original, data: context.row.original, value: context.getValue() };
+};
+
+const CellRender = <TProps extends object>(Comp: Renderable<TProps>, props: TProps) => {
+  // @ts-expect-error Hacking my way through life
+  const rendered = typeof Comp === "function" ? Comp(props) : Comp; // oxlint-disable-line @typescript-eslint/no-unsafe-assignment
+  // oxlint-disable-next-line @typescript-eslint/no-unsafe-return
+  return typeof rendered === "string" ? <CellText>{rendered}</CellText> : rendered;
+};
+
+export const RowDragHandleCell = ({ rowId }: { rowId: string }) => {
+  const { attributes, listeners } = useSortable({
+    id: rowId,
+  });
+  return (
+    <InlineIconButton
+      {...attributes}
+      {...listeners}
+      className="cursor-move p-1"
+      label="Drag handle"
+      icon={DragIcon}
+    />
+  );
+};
+
+const AutoDragHandleCell = <T,>({ row }: { row: Row<T> }) => <RowDragHandleCell rowId={row.id} />;
+
+const DraggableRow = <T,>({
+  row,
+  showCellBorder,
+  onRowClick,
+  onDoubleClick,
+  tableRowCva,
+  tableDataCva,
+  hasOnClick,
+  ...props
+}: {
+  row: Row<T>;
+  showCellBorder?: boolean;
+  onRowClick?: (row: T) => void;
+  onDoubleClick?: (row: T) => void;
+  tableRowCva: UIStyle.Cva<TableRowVariantProps>;
+  tableDataCva: UIStyle.Cva<TableDataVariantProps>;
+  hasOnClick: boolean;
+} & TableRowVariantProps) => {
+  const { transform, transition, setNodeRef, isDragging } = useSortable({
+    id: row.id,
+  });
+
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.8 : 1,
+    zIndex: isDragging ? 1 : 0,
+    position: "relative",
+  };
+
+  return (
+    // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
+    <tr
+      ref={setNodeRef}
+      style={style}
+      data-clickable={hasOnClick}
+      data-selected={row.getIsSelected() || undefined}
+      className={clsx(tableRowCva(props))}
+      onClick={() => onRowClick?.(row.original)}
+      onDoubleClick={() => onDoubleClick?.(row.original)}
+    >
+      {row.getVisibleCells().map((cell, cellIndex, array) => {
+        const columnMeta = cell.column.columnDef.meta ?? {};
+        return (
+          <td
+            key={cell.id}
+            tabIndex={-1}
+            className={clsx(
+              tableDataCva({ isLast: cellIndex === array.length - 1, hasBorder: cellIndex > 0 && showCellBorder }),
+              columnMeta.cellClass,
+              columnMeta.width,
+            )}
+          >
+            {CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))}
+          </td>
+        );
+      })}
+    </tr>
+  );
+};
+
+export const Table = <T,>({
+  items,
+  showCellBorder,
+  columns,
+  onRowClick,
+  onDoubleClick,
+  className,
+  sorting,
+  setSorting,
+  columnOrder,
+  setColumnOrder,
+  columnVisibility,
+  setColumnVisibility,
+  bulkSelectionActions: ActionHeader,
+  enableDragDrop = false,
+  onDragEnd,
+  onReorder,
+  getRowId,
+  enableRowSelection,
+  enableMultiRowSelection,
+  defaultSelectedRows,
+  onRowSelectionChange,
+  ...props
+}: TableProps<T>) => {
+  const uiStyle = UIStyle.useConfig();
+  const tableRowCva = (uiStyle?.table?.rowCva ?? tableRow) as unknown as UIStyle.Cva<TableRowVariantProps>;
+  const tableHeadRowCva = (uiStyle?.table?.headRowCva ??
+    tableHeadRow) as unknown as UIStyle.Cva<TableHeadRowVariantProps>;
+  const tableDataCva = (uiStyle?.table?.dataCva ?? tableData) as unknown as UIStyle.Cva<TableDataVariantProps>;
+
+  const ref = useRef(null);
+  const { listeners } = useTableNav();
+  const getCoreRowModelCallback = useCallback(getCoreRowModel, []);
+  const getSortedRowModelCallback = useCallback(getSortedRowModel, []);
+  const getPaginationRowModelCallback = useCallback(getPaginationRowModel, []);
+  const data = useMemo(() => items ?? [], [items]);
+
+  const baseColumns = useMemo(() => (typeof columns === "function" ? columns(i18next.t) : columns), [columns]);
+
+  const tableColumns = useMemo(() => {
+    if (enableDragDrop && getRowId) {
+      const dragHandleColumn: ColumnDef<T> = {
+        id: "drag-handle",
+        header: "",
+        meta: {
+          width: "w-12",
+        },
+        cell: AutoDragHandleCell,
+        enableSorting: false,
+      };
+
+      return [dragHandleColumn, ...baseColumns];
+    }
+
+    return baseColumns;
+  }, [baseColumns, enableDragDrop, getRowId]);
+
+  const table = useReactTable({
+    data,
+    columns: tableColumns,
+    state: {
+      sorting,
+      columnOrder,
+      columnVisibility,
+      rowSelection: defaultSelectedRows ?? {},
+    },
+    rowCount: items.length,
+    getCoreRowModel: getCoreRowModelCallback(),
+    getSortedRowModel: getSortedRowModelCallback(),
+    getPaginationRowModel: getPaginationRowModelCallback(),
+    manualPagination: true,
+    onColumnOrderChange: setColumnOrder,
+    onColumnVisibilityChange: setColumnVisibility,
+    onSortingChange: setSorting,
+    onRowSelectionChange,
+    manualSorting: true,
+    autoResetPageIndex: false,
+    autoResetExpanded: false,
+    enableRowSelection,
+    enableMultiRowSelection,
+    getRowId: getRowId ? (row) => String(getRowId(row)) : undefined,
+  });
+
+  const dataIds = useMemo<UniqueIdentifier[]>(() => {
+    if (!enableDragDrop || !getRowId) {
+      return [];
+    }
+    return data.map((item) => getRowId(item));
+  }, [data, enableDragDrop, getRowId]);
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (!active || !over || active.id === over.id) {
+        return;
+      }
+      if (getRowId && (onReorder || onDragEnd)) {
+        if (onReorder) {
+          const oldIndex = items.findIndex((item) => getRowId(item) === active.id);
+          const newIndex = items.findIndex((item) => getRowId(item) === over.id);
+
+          if (oldIndex !== -1 && newIndex !== -1) {
+            const reorderedItems = arrayMove(items, oldIndex, newIndex);
+            onReorder(reorderedItems);
+          }
+        }
+        onDragEnd?.(event);
+      }
+    },
+    [onDragEnd, onReorder, items, getRowId],
+  );
+
+  const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+
+  const selectedRows = table.getSelectedRowModel().rows;
+  const columnCount = table.getHeaderGroups()[0].headers.length;
+  const isAnyRowSelected = selectedRows.length > 0 && !!ActionHeader;
+  const hasOnClick = !!onRowClick || !!onDoubleClick;
+
+  const tableElement = (
+    <table
+      className={clsx("w-full", className)}
+      {...listeners}
+    >
+      <thead className="sticky top-0 border-b border-b-elevation-outline-default-1">
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr
+            key={headerGroup.id}
+            className={clsx(tableHeadRowCva({}))}
+          >
+            {headerGroup.headers
+              .filter((header) => {
+                if (isAnyRowSelected && header.index > 0) {
+                  return false;
+                }
+
+                return header.column.getIsVisible();
+              })
+              .map((header, index, array) => {
+                const columnMeta = header.column.columnDef.meta ?? {};
+
+                return (
+                  <th
+                    key={header.id}
+                    colSpan={isAnyRowSelected ? columnCount : header.colSpan}
+                    tabIndex={-1}
+                    className={clsx(
+                      "px-2 text-left",
+                      index > 0 && showCellBorder && "border-l border-l-elevation-outline-default-1 border-solid",
+                      index === array.length - 1 && "pr-4",
+                      columnMeta.headerClass,
+                      columnMeta.width,
+                    )}
+                  >
+                    {isAnyRowSelected ? (
+                      <ActionHeader table={table} />
+                    ) : (
+                      <button
+                        type="button"
+                        aria-label="Sort column"
+                        {...{
+                          className: clsx(
+                            "flex select-none items-center gap-1 text-text-default-1",
+                            header.column.getCanSort()
+                              ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2"
+                              : "cursor-default",
+                            columnMeta.sortClass,
+                          ),
+                          onClick: header.column.getToggleSortingHandler(),
+                        }}
+                      >
+                        {typeof header.column.columnDef.header === "function" ? (
+                          flexRender(header.column.columnDef.header, header.getContext())
+                        ) : (
+                          <HeaderText>{header.column.columnDef.header}</HeaderText>
+                        )}
+                        {{
+                          asc: (
+                            <ChevronUpIcon
+                              width={18}
+                              height={18}
+                            />
+                          ),
+                          desc: (
+                            <ChevronDownIcon
+                              width={18}
+                              height={18}
+                            />
+                          ),
+                        }[header.column.getIsSorted() as string] ?? null}
+                      </button>
+                    )}
+                  </th>
+                );
+              })}
+          </tr>
+        ))}
+      </thead>
+      <tbody
+        ref={ref}
+        className="relative"
+      >
+        {enableDragDrop ? (
+          <SortableContext
+            items={dataIds}
+            strategy={verticalListSortingStrategy}
+          >
+            {table.getRowModel().rows.map((row) => (
+              <DraggableRow
+                key={row.id}
+                row={row}
+                showCellBorder={showCellBorder}
+                onRowClick={onRowClick}
+                onDoubleClick={onDoubleClick}
+                tableRowCva={tableRowCva}
+                tableDataCva={tableDataCva}
+                hasOnClick={hasOnClick}
+                {...props}
+              />
+            ))}
+          </SortableContext>
+        ) : (
+          table.getRowModel().rows.map((row) => {
+            return (
+              // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
+              <tr
+                key={row.id}
+                className={clsx(tableRowCva({ ...props }))}
+                onClick={() => onRowClick?.(row.original)}
+                onDoubleClick={() => onDoubleClick?.(row.original)}
+                data-clickable={hasOnClick}
+                data-selected={row.getIsSelected() || undefined}
+              >
+                {row.getVisibleCells().map((cell, cellIndex, array) => {
+                  const columnMeta = cell.column.columnDef.meta ?? {};
+                  return (
+                    <td
+                      key={cell.id}
+                      tabIndex={-1}
+                      className={clsx(
+                        tableDataCva({
+                          isLast: cellIndex === array.length - 1,
+                          hasBorder: cellIndex > 0 && showCellBorder,
+                        }),
+
+                        columnMeta.cellClass,
+                        columnMeta.width,
+                      )}
+                    >
+                      {CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })
+        )}
+      </tbody>
+    </table>
+  );
+
+  if (enableDragDrop) {
+    return (
+      <DndContext
+        collisionDetection={closestCenter}
+        modifiers={[restrictToVerticalAxis]}
+        onDragEnd={handleDragEnd}
+        sensors={sensors}
+      >
+        {tableElement}
+      </DndContext>
+    );
+  }
+
+  return tableElement;
+};

package/src/components/table/table.cva.ts

@@ -0,0 +1,47 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export const tableRow = cva(
+  [
+    "h-9 max-h-12 border-b border-b-elevation-outline-default-1 border-solid",
+    "hover:bg-elevation-fill-default-2",
+    "disabled:opacity-50",
+    "selected:bg-elevation-fill-default-2",
+    "hover:selected:bg-interactive-subtle-secondary-hover",
+    "clickable:cursor-pointer",
+  ],
+  {
+    variants: {
+      alternatingBackground: {
+        even: "even:bg-elevation-fill-inverted-4/5",
+        odd: "odd:bg-elevation-fill-inverted-4/5",
+      },
+    },
+  },
+);
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - When overriding cva types, it causes a type error
+export interface TableRowVariantProps extends VariantProps<typeof tableRow> {}
+
+export const tableHeadRow = cva(["h-8 w-full"]);
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - When overriding cva types, it causes a type error
+export interface TableHeadRowVariantProps extends VariantProps<typeof tableHeadRow> {}
+
+export const tableData = cva(["relative overflow-hidden text-ellipsis whitespace-nowrap px-2"], {
+  variants: {
+    isLast: {
+      true: "pr-4",
+      false: "",
+    },
+    hasBorder: {
+      true: "border-l border-l-elevation-outline-default-1",
+      false: "",
+    },
+  },
+});
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - When overriding cva types, it causes a type error
+export interface TableDataVariantProps extends VariantProps<typeof tableDataRow> {}

package/src/components/text/Link/Link.tsx

@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from "react";
+import { Link as AriaLink, type LinkProps as AriaLinkProps } from "react-aria-components";
+
+import { type LinkVariantProps, link } from "#ui/components/text/Link/link.cva";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+export interface LinkProps extends PropsWithChildren<AriaLinkProps>, LinkVariantProps {
+  className?: string;
+}
+
+export const Link = ({ variant, ...props }: LinkProps) => {
+  const uiStyle = UIStyle.useConfig();
+  const linkCva = (uiStyle?.link?.cva ?? link) as unknown as UIStyle.Cva<LinkVariantProps>;
+
+  return (
+    <AriaLink
+      {...props}
+      className={linkCva({ variant, className: props.className })}
+    />
+  );
+};

package/src/components/text/Link/link.cva.ts

@@ -0,0 +1,21 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+import { uiOutlineClass } from "#ui/components/outline.clsx";
+
+export const link = cva(["underline", uiOutlineClass], {
+  variants: {
+    variant: {
+      default: [
+        "text-interactive-text-primary-idle focus-visible:outline-interactive-text-primary-focus",
+        "hover:text-interactive-text-primary-hover focus-visible:text-interactive-text-primary-focus active:text-interactive-text-primary-pressed",
+      ],
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
+export interface LinkVariantProps extends VariantProps<typeof link> {}

package/src/components/text/Tag/Tag.tsx

@@ -0,0 +1,59 @@
+import { clsx } from "clsx";
+import { Button as AriaButton, type ButtonProps as AriaButtonProps } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+
+import { CloseIcon } from "#ui/assets/icons/Close";
+import { TooltipEllipsis } from "#ui/components/overlays/Tooltip/TooltipEllipsis";
+import { type TagVariantProps, tag } from "#ui/components/text/Tag/tag.cva";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { ns } from "#ui/config/i18n";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+export interface TagProps extends TagVariantProps, AriaButtonProps {
+  className?: string;
+  children: string;
+  dismissable?: boolean;
+  isDisabled?: boolean;
+  onDismiss?: () => void;
+}
+
+export const Tag = ({ color, className, children, dismissable, isDisabled, onDismiss, ...props }: TagProps) => {
+  const uiStyle = UIStyle.useConfig();
+  const tagCva = (uiStyle?.tag?.cva ?? tag) as unknown as UIStyle.Cva<TagVariantProps>;
+
+  const { t } = useTranslation(ns);
+
+  const buttonProps = { isDisabled, onPress: onDismiss, label: t(($) => $.ui.tag.dismiss), ...props };
+
+  return (
+    <TooltipEllipsis text={children}>
+      {(onContentRef) => (
+        <div
+          className={tagCva({
+            color,
+            className: clsx("pointer-events-none", className),
+          })}
+        >
+          <Typography
+            ref={onContentRef}
+            variant="default"
+            size="label-2"
+            as="span"
+            className="truncate"
+          >
+            {children}
+          </Typography>
+
+          {dismissable && (
+            <AriaButton
+              {...buttonProps}
+              className="pointer-events-auto shrink-0"
+            >
+              <CloseIcon className="size-4" />
+            </AriaButton>
+          )}
+        </div>
+      )}
+    </TooltipEllipsis>
+  );
+};

package/src/components/text/Tag/tag.cva.ts

@@ -0,0 +1,62 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+import { uiOutlineClass } from "#ui/components/outline.clsx";
+
+export const tag = cva(
+  [
+    uiOutlineClass,
+    "inline-flex items-center gap-list-gap-icon-to-label",
+    "p-pill-height-default px-1-5",
+    "rounded-pill-rounding-default",
+    "overflow-hidden",
+    "disabled:cursor-default",
+  ],
+  {
+    variants: {
+      color: {
+        primary: [
+          "bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
+          "hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
+          "pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
+          "disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+        ],
+        secondary: [
+          "bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
+          "hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+          "pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+          "disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+        ],
+        success: [
+          "bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
+          "hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
+          "pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
+          "disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+        ],
+        warning: [
+          "bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
+          "hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
+          "pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
+          "disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+        ],
+        error: [
+          "bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
+          "hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
+          "pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
+          "disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+        ],
+      },
+    },
+    defaultVariants: {
+      color: "primary",
+    },
+  },
+);
+
+// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
+export interface TagVariantProps extends VariantProps<typeof tag> {}