@drawbridge/components 0.0.78 → 0.1.1

package/dist/dashboard/table.mjs

@@ -0,0 +1,723 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useQueryClient } from "@tanstack/react-query";
+import { formatDateString } from "@drawbridge/drawbridge-utils";
+import { request } from "@drawbridge/drawbridge-utils/fetch";
+import Link from "./link.mjs";
+import { forwardRef, useMemo } from "react";
+import { useModal } from "./lib/hooks.mjs";
+import { iconLabel } from "../shared/lib/icon-labels.mjs";
+import BarsArrowDown from "../icons/bars-arrow-down.mjs";
+import BarsArrowUp from "../icons/bars-arrow-up.mjs";
+import Badge from "../shared/badge.mjs";
+import Button from "../shared/button.mjs";
+import CopyToClipboard from "../shared/copy-to-clipboard.mjs";
+import { TableCellTitleContext } from "./table-cell-title.mjs";
+import Progress from "../shared/progress.mjs";
+import Dropdown from "./dropdown.mjs";
+import FormAction from "./form-action.mjs";
+import Warning from "../icons/warning.mjs";
+import Tooltip from "../shared/tooltip.mjs";
+import { useWrapperGradient } from "../wrapper-gradient.mjs";
+const STICKY_ACTIONS_FADE_BASE = "before:content-[''] before:absolute before:right-full before:top-0 before:bottom-0 before:w-8 before:bg-gradient-to-l before:from-30% before:to-transparent before:pointer-events-none";
+const STICKY_ACTIONS_FADE_BODY = STICKY_ACTIONS_FADE_BASE + " before:from-white";
+const STICKY_ACTIONS_FADE_HEADER = STICKY_ACTIONS_FADE_BASE + " before:from-gray-light";
+const DATE_OPTIONS = {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+};
+const dateCell = ({ getValue }) => {
+  const value = getValue();
+  return value ? formatDateString({
+    date: value,
+    options: DATE_OPTIONS
+  }) : "\u2014";
+};
+const TableCellId = ({
+  id
+}) => id ? /* @__PURE__ */ jsx(
+  CopyToClipboard,
+  {
+    ...{
+      "aria-label": "Copy ID",
+      value: id
+    }
+  }
+) : "\u2014";
+const rateCell = ({ getValue, row }) => {
+  var _a;
+  const rate = getValue();
+  if (((_a = row == null ? void 0 : row.original) == null ? void 0 : _a.type) === "redemption") return "\u2014";
+  return rate || rate === 0 ? rate + "%" : "\u2014";
+};
+const dateTimeCell = ({ getValue }) => {
+  const value = getValue();
+  return value ? formatDateString({
+    date: value,
+    time: true,
+    options: DATE_OPTIONS
+  }) : "\u2014";
+};
+const TableContainer = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    "table",
+    {
+      ...{
+        className: ["min-w-full", className].filter(Boolean).join(" ")
+      },
+      children
+    }
+  );
+};
+const TableHeader = ({
+  classNameHeader = "px-4",
+  classNameRow,
+  headers,
+  headerGroups
+}) => {
+  const gradient = useWrapperGradient();
+  const showLeftFade = gradient ? !gradient.atRight : false;
+  if (headerGroups) {
+    return /* @__PURE__ */ jsx(
+      "thead",
+      {
+        ...{
+          className: "sticky top-0 z-20"
+        },
+        children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(
+          "tr",
+          {
+            ...{
+              className: ["bg-gray-light", classNameRow].filter(Boolean).join(" ")
+            },
+            children: headerGroup.headers.map((header) => {
+              var _a, _b, _c, _d, _e, _f;
+              return /* @__PURE__ */ jsx(
+                "th",
+                {
+                  ...{
+                    className: ["font-normal text-left py-2 capitalize text-sm text-gray-dark first:rounded-l last:rounded-r", header.column.getCanSort() && "cursor-pointer select-none", (_a = header.column.columnDef.meta) == null ? void 0 : _a.className, (_b = header.column.columnDef.meta) == null ? void 0 : _b.classNameHeader, classNameHeader, ((_d = (_c = header.column.columnDef.meta) == null ? void 0 : _c.className) == null ? void 0 : _d.includes("sticky")) && ((_f = (_e = header.column.columnDef.meta) == null ? void 0 : _e.className) == null ? void 0 : _f.includes("right-0")) && showLeftFade && STICKY_ACTIONS_FADE_HEADER].filter(Boolean).join(" "),
+                    colSpan: header.colSpan,
+                    onClick: header.column.getToggleSortingHandler()
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      ...{
+                        className: "flex items-center gap-2"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            ...{
+                              className: "min-w-0 truncate"
+                            },
+                            children: flexRender(header.column.columnDef.header, header.getContext())
+                          }
+                        ),
+                        (() => {
+                          const Icon = { asc: BarsArrowUp, desc: BarsArrowDown }[header.column.getIsSorted()];
+                          return Icon && /* @__PURE__ */ jsx(
+                            Icon,
+                            {
+                              ...{
+                                className: "w-4 h-4 shrink-0"
+                              }
+                            }
+                          );
+                        })()
+                      ]
+                    }
+                  )
+                },
+                header.id
+              );
+            })
+          },
+          headerGroup.id
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      ...{
+        className: "sticky top-0 z-20"
+      },
+      children: /* @__PURE__ */ jsx(
+        "tr",
+        {
+          ...{
+            className: ["bg-gray-light", classNameRow].filter(Boolean).join(" ")
+          },
+          children: (headers || []).map(({ className: thClassName, text, colSpan = 1 }, key) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              ...{
+                className: ["font-normal text-left py-2 capitalize text-sm text-gray-dark first:rounded-l last:rounded-r", thClassName, classNameHeader].filter(Boolean).join(" "),
+                colSpan
+              },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ...{
+                    className: "flex items-center gap-2"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      ...{
+                        className: "min-w-0 truncate"
+                      },
+                      children: text
+                    }
+                  )
+                }
+              )
+            },
+            key
+          ))
+        }
+      )
+    }
+  );
+};
+const TableRow = forwardRef(({
+  children,
+  className,
+  style,
+  ...rest
+}, ref) => {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ...{
+        ...rest,
+        className,
+        ref,
+        style
+      },
+      children
+    }
+  );
+});
+TableRow.displayName = "TableRow";
+const TableCell = ({
+  children,
+  // Default className includes alignment. Callers that want a different
+  // alignment (e.g. text-right) pass their own full className — the
+  // default is replaced rather than merged, so there's no source-order
+  // collision on `text-align`.
+  className = "px-4 text-left",
+  truncate = true,
+  ...rest
+}) => {
+  const gradient = useWrapperGradient();
+  const showLeftFade = gradient ? !gradient.atRight : false;
+  const isStickyRight = !!(className && className.includes("sticky") && className.includes("right-0"));
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      ...{
+        ...rest,
+        className: ["font-normal py-2", truncate && "truncate", !isStickyRight && "max-w-xs", className, isStickyRight && showLeftFade && "!overflow-visible " + STICKY_ACTIONS_FADE_BODY].filter(Boolean).join(" ")
+      },
+      children
+    }
+  );
+};
+const TableBody = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      ...{
+        // A row whose title cell has a second line (TableCellTitle marks itself
+        // data-stacked) top-aligns every cell to the title, so a reason grows the
+        // row downward; every other row stays centred.
+        className: "w-full divide-y divide-gray [&>tr:first-child>td]:pt-4 [&>tr:has([data-stacked])>td]:align-top"
+      },
+      children
+    }
+  );
+};
+const TableActionsCell = ({
+  actions
+}) => {
+  const { badge, button, controls = [], dropdown } = actions || {};
+  let buttonConfig;
+  if (button) {
+    const { element, icon, text = "Manage", tooltip, ...props } = button;
+    buttonConfig = {
+      element: element || Link,
+      icon,
+      props,
+      text,
+      tooltip
+    };
+  }
+  ;
+  if (!buttonConfig && controls.length === 0 && !dropdown && !badge) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        // table-actions: styles.css draws these buttons as the dashboard always has.
+        className: "table-actions flex items-center justify-end space-x-4"
+      },
+      children: [
+        badge && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            ...{
+              size: "small",
+              type: badge.type
+            },
+            children: badge.text
+          }
+        ),
+        controls.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              // table-actions: styles.css draws these buttons as the dashboard always has.
+              className: "table-actions flex items-center justify-end space-x-4"
+            },
+            children: controls.map(({ element = Link, icon, text, variant = "secondary", ...control }, key) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  "aria-label": !text && iconLabel(icon) || void 0,
+                  element,
+                  icon,
+                  inline: true,
+                  size: "small",
+                  variant,
+                  ...control
+                },
+                children: text
+              },
+              key
+            ))
+          }
+        ),
+        dropdown && (() => {
+          const { text = "Actions", ...dropdownProps } = dropdown;
+          return /* @__PURE__ */ jsx(
+            Dropdown,
+            {
+              ...{
+                anchor: "bottom end",
+                chevron: true,
+                ...dropdownProps
+              },
+              children: text
+            }
+          );
+        })(),
+        buttonConfig && (() => {
+          const buttonEl = /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...{
+                "aria-label": !buttonConfig.text && iconLabel(buttonConfig.icon) || void 0,
+                element: buttonConfig.element,
+                icon: buttonConfig.icon,
+                inline: true,
+                size: "small",
+                ...buttonConfig.props
+              },
+              children: buttonConfig.text
+            }
+          );
+          if (buttonConfig.tooltip) {
+            return /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                ...{
+                  content: buttonConfig.tooltip
+                },
+                children: buttonEl
+              }
+            );
+          }
+          ;
+          return buttonEl;
+        })()
+      ]
+    }
+  );
+};
+const confirmActionButton = ({
+  action,
+  endpoint,
+  label,
+  message,
+  method = "DELETE",
+  modal,
+  onError,
+  onSuccess,
+  title,
+  variant
+}) => ({
+  element: "button",
+  onClick: () => modal.open({
+    message: /* @__PURE__ */ jsx(
+      FormAction,
+      {
+        ...{
+          action,
+          callback: () => request({ endpoint, method }),
+          onError,
+          onSuccess: (response) => {
+            onSuccess(response);
+            modal.close();
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          "p",
+          {
+            ...{
+              className: "break-word"
+            },
+            children: message
+          }
+        )
+      }
+    ),
+    title
+  }),
+  text: label,
+  type: "button",
+  ...variant && { variant }
+});
+const TableRowError = ({
+  cells,
+  endpoint,
+  error,
+  onError,
+  onSuccess,
+  retry,
+  title
+}) => {
+  var _a, _b;
+  const queryClient = useQueryClient();
+  const modal = useModal({ queryClient });
+  const dataCells = cells.filter((cell) => cell.column.id !== "actions");
+  const actionsCell = cells.find((cell) => cell.column.id === "actions");
+  const failed = { indicator: { label: "Generation failed", type: "error" }, status: { text: "Failed", type: "error" } };
+  const actions = {
+    // Delete is the error-styled button ( confirm modal ); Warning is a
+    // secondary control that opens the error + Rerun (FormAction) modal.
+    button: confirmActionButton({
+      action: "Delete",
+      endpoint,
+      label: "Delete",
+      message: "Are you sure you want to delete this?",
+      modal,
+      onError,
+      onSuccess,
+      title: "Delete",
+      variant: "error"
+    }),
+    controls: [
+      {
+        element: "button",
+        icon: Warning,
+        onClick: () => modal.open({
+          message: /* @__PURE__ */ jsx(
+            FormAction,
+            {
+              ...{
+                action: "Rerun",
+                callback: () => request({ endpoint: retry, method: "POST" }),
+                onError,
+                onSuccess: (response) => {
+                  onSuccess(response);
+                  modal.close();
+                }
+              },
+              children: /* @__PURE__ */ jsx(
+                "p",
+                {
+                  ...{
+                    className: "text-sm break-word"
+                  },
+                  children: error || "We could not generate this. Try again or delete it."
+                }
+              )
+            }
+          ),
+          title: "Generation error"
+        }),
+        type: "button"
+      }
+    ]
+  };
+  return /* @__PURE__ */ jsxs(
+    TableRow,
+    {
+      ...{
+        "aria-busy": true
+      },
+      children: [
+        dataCells.map((cell, index) => {
+          var _a2;
+          return /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              className: [(_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.className].filter(Boolean).join(" ") || void 0,
+              children: index === 0 && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  ...{
+                    className: "flex items-center gap-2 min-w-0"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(TableCellTitleContext.Provider, { value: failed, children: flexRender(cell.column.columnDef.cell, cell.getContext()) || title || "Generation failed" }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        ...{
+                          className: "[td:has([data-title-cell])_&]:hidden"
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          Badge,
+                          {
+                            ...{
+                              size: "small",
+                              type: failed.type
+                            },
+                            children: failed.text
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            },
+            cell.id
+          );
+        }),
+        actionsCell && /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            className: [(_a = actionsCell.column.columnDef.meta) == null ? void 0 : _a.className, (_b = actionsCell.column.columnDef.meta) == null ? void 0 : _b.classNameCell].filter(Boolean).join(" ") || void 0,
+            children: /* @__PURE__ */ jsx(TableActionsCell, { actions })
+          },
+          actionsCell.id
+        )
+      ]
+    }
+  );
+};
+const TableRowProcessing = ({
+  actions,
+  cancel,
+  cells = [],
+  endpoint,
+  error,
+  onError,
+  onSuccess,
+  progress,
+  retry,
+  title
+}) => {
+  var _a, _b;
+  const queryClient = useQueryClient();
+  const modal = useModal({ queryClient });
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      TableRowError,
+      {
+        ...{
+          cells,
+          endpoint,
+          error,
+          onError,
+          onSuccess,
+          retry,
+          title
+        }
+      }
+    );
+  }
+  const firstDataCellId = (_a = cells.find((cell) => cell.column.id !== "actions")) == null ? void 0 : _a.id;
+  const pct = (progress == null ? void 0 : progress.total) > 0 ? Math.min(100, Math.round(progress.completed / progress.total * 100)) : 0;
+  const resolvedActions = actions || (cancel ? {
+    button: confirmActionButton({
+      action: "Cancel",
+      endpoint: cancel,
+      label: "Cancel",
+      message: "Are you sure you want to do this?",
+      method: "POST",
+      modal,
+      onError,
+      onSuccess,
+      title: "Cancel processing"
+    })
+  } : null);
+  const middleCells = cells.filter((cell) => cell.column.id !== "actions" && cell.id !== firstDataCellId);
+  const firstMiddleId = (_b = middleCells[0]) == null ? void 0 : _b.id;
+  return /* @__PURE__ */ jsx(
+    TableRow,
+    {
+      ...{
+        "aria-busy": true
+      },
+      children: cells.map((cell) => {
+        var _a2, _b2, _c;
+        if (cell.column.id === "actions") {
+          return /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              className: [(_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.className, (_b2 = cell.column.columnDef.meta) == null ? void 0 : _b2.classNameCell].filter(Boolean).join(" ") || void 0,
+              children: resolvedActions && /* @__PURE__ */ jsx(TableActionsCell, { actions: resolvedActions })
+            },
+            cell.id
+          );
+        }
+        if (cell.id === firstDataCellId) {
+          return /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              className: [(_c = cell.column.columnDef.meta) == null ? void 0 : _c.className].filter(Boolean).join(" ") || void 0,
+              children: typeof cell.column.columnDef.cell === "function" ? /* @__PURE__ */ jsx(TableCellTitleContext.Provider, { value: { indicator: { label: "Generating", type: "inactive" } }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) : title && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ...{
+                    className: "block truncate"
+                  },
+                  children: title
+                }
+              )
+            },
+            cell.id
+          );
+        }
+        if (cell.id !== firstMiddleId) return null;
+        return /* @__PURE__ */ jsx(TableCell, { colSpan: middleCells.length, children: /* @__PURE__ */ jsx(Progress, { percentage: pct }) }, cell.id);
+      })
+    }
+  );
+};
+const Table = ({
+  actions,
+  className,
+  classNameColumn,
+  classNameHeader,
+  classNameRow,
+  columns,
+  data = [],
+  headers = true,
+  manualSorting = false,
+  onSortingChange,
+  sorting,
+  truncate = true
+}) => {
+  const tableColumns = useMemo(
+    () => {
+      const normalized = (columns || []).map(({ sortable, ...rest }) => ({
+        ...rest,
+        ...sortable !== void 0 && {
+          enableSorting: sortable
+        }
+      }));
+      if (!actions) {
+        return normalized;
+      }
+      return [
+        ...normalized,
+        {
+          id: "actions",
+          header: "",
+          enableSorting: false,
+          meta: {
+            className: "sticky right-0 z-10",
+            classNameHeader: "bg-gray-light",
+            classNameCell: "bg-white"
+          },
+          cell: ({ row }) => /* @__PURE__ */ jsx(
+            TableActionsCell,
+            {
+              ...{
+                actions: actions(row.original)
+              }
+            }
+          )
+        }
+      ];
+    },
+    [actions, columns]
+  );
+  const table = useReactTable({
+    columns: tableColumns,
+    data,
+    enableSortingRemoval: false,
+    getCoreRowModel: getCoreRowModel(),
+    manualSorting,
+    ...onSortingChange && {
+      onSortingChange,
+      state: {
+        sorting: sorting || []
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs(TableContainer, { className, children: [
+    headers && /* @__PURE__ */ jsx(
+      TableHeader,
+      {
+        ...{
+          classNameHeader,
+          classNameRow,
+          headerGroups: table.getHeaderGroups()
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row) => {
+      var _a;
+      const loading = (_a = row.original) == null ? void 0 : _a.loading;
+      if (loading) {
+        return /* @__PURE__ */ jsx(
+          TableRowProcessing,
+          {
+            ...{
+              ...typeof loading === "object" ? loading : {},
+              cells: row.getVisibleCells()
+            }
+          },
+          row.id
+        );
+      }
+      return /* @__PURE__ */ jsx(TableRow, { className: classNameRow, children: row.getVisibleCells().map((cell) => {
+        var _a2, _b;
+        return /* @__PURE__ */ jsx(TableCell, { truncate, className: [(_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.className, (_b = cell.column.columnDef.meta) == null ? void 0 : _b.classNameCell, classNameColumn].filter(Boolean).join(" ") || void 0, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+      }) }, row.id);
+    }) })
+  ] });
+};
+var table_default = Table;
+export {
+  TableActionsCell,
+  TableBody,
+  TableCell,
+  TableCellId,
+  TableContainer,
+  TableHeader,
+  TableRow,
+  dateCell,
+  dateTimeCell,
+  table_default as default,
+  rateCell
+};