@povio/ui 0.0.8 → 0.0.9

package/dist/components/table/ColumnConfig.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Checkbox } from "../inputs/Checkbox/Checkbox.js";
+import { Modal } from "../overlays/Modal/Modal.js";
+import { Table } from "./Table.js";
+import { Typography } from "../text/Typography/Typography.js";
+import { ns } from "../../config/i18n.js";
+import { useTranslationMemo } from "../../hooks/useTranslationMemo.js";
+const VisibilityCell = ({ original, onToggle }) => /* @__PURE__ */ jsx(
+  Checkbox,
+  {
+    isSelected: original.visible,
+    onChange: () => onToggle(original.id),
+    hideLabel: true,
+    children: original.label
+  }
+);
+const getColumns = (t, handleToggleVisibility) => [
+  {
+    id: "name",
+    header: t(($) => $.ui.table.column, { ns }),
+    meta: {
+      width: "flex-1"
+    },
+    accessorKey: "label"
+  },
+  {
+    id: "visible",
+    header: t(($) => $.ui.table.show, { ns }),
+    meta: {
+      width: "w-20"
+    },
+    cell: ({ original }) => /* @__PURE__ */ jsx(
+      VisibilityCell,
+      {
+        original,
+        onToggle: handleToggleVisibility
+      }
+    )
+  }
+];
+function ColumnConfigModal({
+  isOpen,
+  onClose,
+  configColumns,
+  visibleColumns,
+  onVisibilityChange,
+  onOrderChange
+}) {
+  const { t } = useTranslation(ns);
+  const [data, setData] = useState([]);
+  useEffect(() => {
+    setData(
+      configColumns.map((column) => {
+        const columnId = column.id ?? column.accessorKey;
+        return {
+          id: columnId,
+          label: column.header,
+          visible: visibleColumns?.[columnId] ?? true
+        };
+      })
+    );
+  }, [configColumns, visibleColumns]);
+  const handleToggleVisibility = useCallback(
+    (columnId) => {
+      const newVisible = {
+        ...visibleColumns,
+        [columnId]: !visibleColumns[columnId]
+      };
+      onVisibilityChange(newVisible);
+    },
+    [visibleColumns, onVisibilityChange]
+  );
+  const getColumnsWithTranslation = useCallback(
+    (translateFn) => getColumns(translateFn, handleToggleVisibility),
+    [handleToggleVisibility]
+  );
+  const columns = useTranslationMemo(getColumnsWithTranslation);
+  const handleReorder = useCallback(
+    (reorderedItems) => {
+      setData(reorderedItems);
+      onOrderChange(reorderedItems.map((item) => item.id));
+    },
+    [onOrderChange]
+  );
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      isOpen,
+      onClose,
+      showCloseIcon: true,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-4", children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            as: "h2",
+            variant: "prominent-1",
+            size: "title-5",
+            children: t(($) => $.ui.table.configureColumns)
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "max-h-96 overflow-y-auto", children: /* @__PURE__ */ jsx(
+          Table,
+          {
+            items: data,
+            columns,
+            showCellBorder: true,
+            className: "w-full",
+            enableDragDrop: true,
+            getRowId: (row) => row.id,
+            onReorder: handleReorder
+          }
+        ) })
+      ] })
+    }
+  );
+}
+export {
+  ColumnConfigModal
+};

package/dist/components/table/HeaderText.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Typography } from "../text/Typography/Typography.js";
+const HeaderText = ({ children }) => /* @__PURE__ */ jsx(
+  Typography,
+  {
+    variant: "default",
+    size: "label-2",
+    as: "span",
+    className: "overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1",
+    children
+  }
+);
+export {
+  HeaderText
+};

package/dist/components/table/InfiniteTable.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Loader } from "../status/Loader/Loader.js";
+import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
+import { Table } from "./Table.js";
+const InfiniteTable = ({
+  hasNextPage,
+  isFetchingNextPage = false,
+  fetchNextPage,
+  ...rest
+}) => {
+  const handleLoadMore = useCallback(() => {
+    if (!isFetchingNextPage && hasNextPage) {
+      fetchNextPage();
+    }
+  }, [isFetchingNextPage, hasNextPage, fetchNextPage]);
+  const { setRef } = useIntersectionObserver({
+    onIntersection: handleLoadMore,
+    rootMargin: "100px"
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx(Table, { ...rest }),
+    (hasNextPage || isFetchingNextPage) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (ref) => {
+          setRef(ref);
+          return () => {
+            setRef(null);
+          };
+        },
+        className: "flex justify-center py-4",
+        children: /* @__PURE__ */ jsx(Loader, {})
+      }
+    )
+  ] });
+};
+export {
+  InfiniteTable
+};

package/dist/components/table/PaginatedTable.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Pagination } from "../shared/pagination/Pagination.js";
+import { Table } from "./Table.js";
+const PaginatedTable = ({
+  pagination,
+  setPagination,
+  items,
+  totalItems,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(
+      Table,
+      {
+        ...rest,
+        items: items ?? []
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        page: pagination.pageIndex,
+        pageSize: pagination.pageSize,
+        totalItems: totalItems ?? 0,
+        onPageChange: (page) => setPagination({ ...pagination, pageIndex: page }),
+        onPageSizeChange: (pageSize) => setPagination({ ...pagination, pageSize, pageIndex: 1 })
+      }
+    )
+  ] });
+};
+export {
+  PaginatedTable
+};

package/dist/components/table/Table.js

@@ -0,0 +1,370 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSensors, useSensor, MouseSensor, TouchSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { getCoreRowModel, getSortedRowModel, getPaginationRowModel, useReactTable, flexRender } from "@tanstack/react-table";
+import { clsx } from "clsx";
+import i18next from "i18next";
+import { useRef, useCallback, useMemo, useState } from "react";
+import { ChevronDownIcon } from "../../assets/icons/ChevronDown.js";
+import { ChevronUpIcon } from "../../assets/icons/ChevronUp.js";
+import { DragIcon } from "../../assets/icons/Drag.js";
+import { InlineIconButton } from "../buttons/InlineIconButton/InlineIconButton.js";
+import { CellText } from "./CellText.js";
+import { HeaderText } from "./HeaderText.js";
+import { UIStyle } from "../../config/uiStyle.context.js";
+import { useTableNav } from "../../hooks/useTableNav.js";
+import { tableRow, tableHeadRow, tableHeadData, tableData } from "./table.cva.js";
+const CustomCellContext = (context) => {
+  return { ...context, original: context.row.original, data: context.row.original, value: context.getValue() };
+};
+const CellRender = (Comp, props) => {
+  const rendered = typeof Comp === "function" ? Comp(props) : Comp;
+  return typeof rendered === "string" ? /* @__PURE__ */ jsx(CellText, { children: rendered }) : rendered;
+};
+const RowDragHandleCell = ({ rowId }) => {
+  const { attributes, listeners } = useSortable({
+    id: rowId
+  });
+  return /* @__PURE__ */ jsx(
+    InlineIconButton,
+    {
+      ...attributes,
+      ...listeners,
+      className: "cursor-move p-1",
+      label: "Drag handle",
+      icon: DragIcon
+    }
+  );
+};
+const AutoDragHandleCell = ({ row }) => /* @__PURE__ */ jsx(RowDragHandleCell, { rowId: row.id });
+const DraggableRow = ({
+  row,
+  showCellBorder,
+  onRowClick,
+  onDoubleClick,
+  tableRowCva,
+  tableDataCva,
+  hasOnClick,
+  ...props
+}) => {
+  const { transform, transition, setNodeRef, isDragging } = useSortable({
+    id: row.id
+  });
+  const style = {
+    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
+    /* @__PURE__ */ jsx(
+      "tr",
+      {
+        ref: setNodeRef,
+        style,
+        "data-clickable": hasOnClick,
+        "data-selected": row.getIsSelected() || void 0,
+        className: clsx(tableRowCva(props)),
+        onClick: () => {
+          row.toggleSelected();
+          onRowClick?.(row.original);
+        },
+        onDoubleClick: () => onDoubleClick?.(row.original),
+        children: row.getVisibleCells().map((cell, cellIndex) => {
+          const columnMeta = cell.column.columnDef.meta ?? {};
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              tabIndex: -1,
+              className: clsx(
+                tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }),
+                columnMeta.cellClass,
+                columnMeta.width
+              ),
+              children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+            },
+            cell.id
+          );
+        })
+      }
+    )
+  );
+};
+const Table = ({
+  items,
+  showCellBorder,
+  columns,
+  onRowClick,
+  onDoubleClick,
+  className,
+  sorting,
+  setSorting,
+  columnOrder,
+  setColumnOrder,
+  columnVisibility,
+  setColumnVisibility,
+  bulkSelectionActions: ActionHeader,
+  enableDragDrop = false,
+  onDragEnd,
+  onReorder,
+  getRowId,
+  enableRowSelection,
+  enableMultiRowSelection = false,
+  defaultSelectedRows,
+  onRowSelectionChange,
+  ...props
+}) => {
+  const uiStyle = UIStyle.useConfig();
+  const tableRowCva = uiStyle?.table?.rowCva ?? tableRow;
+  const tableHeadRowCva = uiStyle?.table?.headRowCva ?? tableHeadRow;
+  const tableHeadDataCva = uiStyle?.table?.headDataCva ?? tableHeadData;
+  const tableDataCva = uiStyle?.table?.dataCva ?? tableData;
+  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 [internalSelectedRows, setInternalSelectedRows] = useState({});
+  const { rowSelection, handleRowSelectionChange } = useMemo(() => {
+    const hasExternalRowSelection = defaultSelectedRows !== void 0 && onRowSelectionChange !== void 0;
+    return {
+      rowSelection: hasExternalRowSelection ? defaultSelectedRows : internalSelectedRows,
+      handleRowSelectionChange: hasExternalRowSelection ? onRowSelectionChange : setInternalSelectedRows
+    };
+  }, [defaultSelectedRows, onRowSelectionChange, internalSelectedRows]);
+  const baseColumns = useMemo(() => typeof columns === "function" ? columns(i18next.t) : columns, [columns]);
+  const tableColumns = useMemo(() => {
+    if (enableDragDrop && getRowId) {
+      const dragHandleColumn = {
+        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
+    },
+    rowCount: items.length,
+    getCoreRowModel: getCoreRowModelCallback(),
+    getSortedRowModel: getSortedRowModelCallback(),
+    getPaginationRowModel: getPaginationRowModelCallback(),
+    manualPagination: true,
+    onColumnOrderChange: setColumnOrder,
+    onColumnVisibilityChange: setColumnVisibility,
+    onSortingChange: setSorting,
+    onRowSelectionChange: handleRowSelectionChange,
+    manualSorting: true,
+    autoResetPageIndex: false,
+    autoResetExpanded: false,
+    defaultColumn: {
+      sortDescFirst: true
+    },
+    enableRowSelection,
+    enableMultiRowSelection,
+    getRowId: getRowId ? (row) => String(getRowId(row)) : void 0
+  });
+  const dataIds = useMemo(() => {
+    if (!enableDragDrop || !getRowId) {
+      return [];
+    }
+    return data.map((item) => getRowId(item));
+  }, [data, enableDragDrop, getRowId]);
+  const handleDragEnd = useCallback(
+    (event) => {
+      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 = /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: clsx("w-full", className),
+      ...listeners,
+      children: [
+        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 border-b border-b-elevation-outline-default-1", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
+          "tr",
+          {
+            className: clsx(tableHeadRowCva({})),
+            children: headerGroup.headers.filter((header) => {
+              if (isAnyRowSelected && header.index > 0) {
+                return false;
+              }
+              return header.column.getIsVisible();
+            }).map((header, index) => {
+              const columnMeta = header.column.columnDef.meta ?? {};
+              return /* @__PURE__ */ jsx(
+                "th",
+                {
+                  colSpan: isAnyRowSelected ? columnCount : header.colSpan,
+                  tabIndex: -1,
+                  className: clsx(
+                    tableHeadDataCva({
+                      hasRightBorder: index > 0 && showCellBorder
+                    }),
+                    columnMeta.headerClass,
+                    columnMeta.width
+                  ),
+                  children: isAnyRowSelected ? /* @__PURE__ */ jsx(ActionHeader, { table }) : /* @__PURE__ */ jsxs(
+                    "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()
+                      },
+                      children: [
+                        typeof header.column.columnDef.header === "function" ? flexRender(header.column.columnDef.header, header.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header.column.columnDef.header }),
+                        {
+                          asc: /* @__PURE__ */ jsx(
+                            ChevronUpIcon,
+                            {
+                              width: 18,
+                              height: 18
+                            }
+                          ),
+                          desc: /* @__PURE__ */ jsx(
+                            ChevronDownIcon,
+                            {
+                              width: 18,
+                              height: 18
+                            }
+                          )
+                        }[header.column.getIsSorted()] ?? null
+                      ]
+                    }
+                  )
+                },
+                header.id
+              );
+            })
+          },
+          headerGroup.id
+        )) }),
+        /* @__PURE__ */ jsx(
+          "tbody",
+          {
+            ref,
+            className: "relative",
+            children: enableDragDrop ? /* @__PURE__ */ jsx(
+              SortableContext,
+              {
+                items: dataIds,
+                strategy: verticalListSortingStrategy,
+                children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+                  DraggableRow,
+                  {
+                    row,
+                    showCellBorder,
+                    onRowClick,
+                    onDoubleClick,
+                    tableRowCva,
+                    tableHeadDataCva,
+                    tableDataCva,
+                    hasOnClick,
+                    ...props
+                  },
+                  row.id
+                ))
+              }
+            ) : table.getRowModel().rows.map((row) => {
+              return (
+                // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
+                /* @__PURE__ */ jsx(
+                  "tr",
+                  {
+                    className: clsx(tableRowCva({ ...props })),
+                    onClick: () => {
+                      row.toggleSelected();
+                      onRowClick?.(row.original);
+                    },
+                    onDoubleClick: () => onDoubleClick?.(row.original),
+                    "data-clickable": hasOnClick,
+                    "data-selected": row.getIsSelected() || void 0,
+                    children: row.getVisibleCells().map((cell, cellIndex) => {
+                      const columnMeta = cell.column.columnDef.meta ?? {};
+                      return /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          tabIndex: -1,
+                          className: clsx(
+                            tableDataCva({
+                              hasRightBorder: cellIndex > 0 && showCellBorder
+                            }),
+                            columnMeta.cellClass,
+                            columnMeta.width
+                          ),
+                          children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+                        },
+                        cell.id
+                      );
+                    })
+                  },
+                  row.id
+                )
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+  if (enableDragDrop) {
+    return /* @__PURE__ */ jsx(
+      DndContext,
+      {
+        collisionDetection: closestCenter,
+        modifiers: [restrictToVerticalAxis],
+        onDragEnd: handleDragEnd,
+        sensors,
+        children: tableElement
+      }
+    );
+  }
+  return tableElement;
+};
+export {
+  RowDragHandleCell,
+  Table
+};

package/dist/components/table/table.cva.js

@@ -0,0 +1,63 @@
+import { cva } from "class-variance-authority";
+const tableRow = cva(
+  [
+    "h-9 max-h-12",
+    "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",
+    "focus-within:bg-elevation-fill-default-2"
+  ],
+  {
+    variants: {
+      alternatingBackground: {
+        even: "even:bg-elevation-fill-inverted-4/5",
+        odd: "odd:bg-elevation-fill-inverted-4/5"
+      }
+    }
+  }
+);
+const tableHeadRow = cva(["h-8 w-full"]);
+const tableHeadData = cva(
+  ["border-b border-b-elevation-outline-default-1 border-solid px-table-header-cell-container-side-default text-left"],
+  {
+    variants: {
+      hasRightBorder: {
+        true: "border-l border-l-elevation-outline-default-1 border-solid",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      hasRightBorder: true
+    }
+  }
+);
+const tableData = cva(
+  [
+    "relative h-0-5 overflow-hidden text-ellipsis whitespace-nowrap border-t border-t-transparent px-2 py-2",
+    "border-b border-b-elevation-outline-default-1",
+    "has-[input[data-invalid]]:border-b-input-outlined-outline-error!",
+    "has-[input]:hover:border-b-input-outlined-outline-hover",
+    "has-[input]:focus:border-b-input-outlined-outline-active",
+    "has-[input]:invalid:border-b-input-outlined-outline-error",
+    "has-[input]:disabled:hover:border-transparent"
+  ],
+  {
+    variants: {
+      hasRightBorder: {
+        true: "border-l border-l-elevation-outline-default-1",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      hasRightBorder: true
+    }
+  }
+);
+export {
+  tableData,
+  tableHeadData,
+  tableHeadRow,
+  tableRow
+};

package/{src → dist}/components/text/Link/Link.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { LinkProps as AriaLinkProps } from 'react-aria-components';
-import { LinkVariantProps } from '#ui/components/text/Link/link.cva';
+import { LinkVariantProps } from './link.cva';
 export interface LinkProps extends PropsWithChildren<AriaLinkProps>, LinkVariantProps {
     className?: string;
 }

package/dist/components/text/Link/Link.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { Link as Link$1 } from "react-aria-components";
+import { link } from "./link.cva.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const Link = ({ variant, ...props }) => {
+  const uiStyle = UIStyle.useConfig();
+  const linkCva = uiStyle?.link?.cva ?? link;
+  return /* @__PURE__ */ jsx(
+    Link$1,
+    {
+      ...props,
+      className: linkCva({ variant, className: props.className })
+    }
+  );
+};
+export {
+  Link
+};

package/dist/components/text/Link/link.cva.js

@@ -0,0 +1,18 @@
+import { cva } from "class-variance-authority";
+import { uiOutlineClass } from "../../outline.clsx.js";
+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"
+  }
+});
+export {
+  link
+};