@povio/ui 0.0.5 → 0.0.7

package/src/components/table/Table.tsx

@@ -1,456 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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/Typography/Typography.tsx

@@ -1,33 +0,0 @@
-import type { HTMLAttributes, Ref } from "react";
-
-import { type TypographyVariantProps, typography } from "#ui/components/text/Typography/typography.cva";
-import { UIStyle } from "#ui/config/uiStyle.context";
-
-type TypographyTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
-
-interface TypographyPropsCva
-  extends Omit<TypographyVariantProps, "size">,
-    Required<Pick<TypographyVariantProps, "size">> {}
-
-export interface TypographyProps extends TypographyPropsCva, HTMLAttributes<HTMLElement> {
-  ref?: Ref<HTMLHeadingElement>;
-  as?: TypographyTag;
-}
-
-export const Typography = ({ as = "p", className, ...props }: TypographyProps) => {
-  const uiStyle = UIStyle.useConfig();
-  const typographyCva = (uiStyle?.typography?.cva ?? typography) as unknown as UIStyle.Cva<TypographyVariantProps>;
-
-  const Tag = as;
-
-  return (
-    <Tag
-      className={typographyCva({
-        ...props,
-        sizeMobile: props.sizeMobile ?? props.size,
-        className,
-      })}
-      {...props}
-    />
-  );
-};