@blenx-dev/components 0.0.0

package/src/DataTable/data-table-pagination.tsx

@@ -0,0 +1,80 @@
+import { Button } from "../components";
+import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+import type { Table } from "@tanstack/react-table";
+import * as styles from "./data-table.css";
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
+  const { pageIndex } = table.getState().pagination;
+  const pageCount = table.getPageCount();
+  const totalRows = table.getPrePaginationRowModel().rows.length;
+  const { pageSize } = table.getState().pagination;
+  const startRow = pageIndex * pageSize + 1;
+  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
+  const canPreviousPage = table.getCanPreviousPage();
+  const canNextPage = table.getCanNextPage();
+
+  return (
+    <nav aria-label="Pagination" className={styles.nav}>
+      <span className={styles.info}>{totalRows} results</span>
+      <div className={styles.controls}>
+        <span className={styles.range}>
+          {startRow}-{endRow} of {totalRows}
+        </span>
+        <div className={styles.buttonGroup}>
+          <Button
+            variant="outline"
+            size="small"
+            disabled={!canPreviousPage}
+            onClick={() => table.previousPage()}
+            aria-label="Previous page"
+          >
+            <CaretLeftIcon size={16} />
+          </Button>
+          {Array.from({ length: pageCount }, (_, i) => i + 1)
+            .filter((page) => {
+              const current = pageIndex + 1;
+              if (pageCount <= 7) return true;
+              if (page === 1 || page === pageCount) return true;
+              if (Math.abs(page - current) <= 1) return true;
+              return false;
+            })
+            .map((page, idx, filtered) => {
+              const pageIdx = page - 1;
+              const isActive = pageIdx === pageIndex;
+              const showGap = idx > 0 && page - filtered[idx - 1]! > 1;
+              return (
+                <div key={`page-${page.toString()}`} className={styles.pageWrap}>
+                  {showGap && <span className={styles.ellipsis}>...</span>}
+                  <Button
+                    variant={isActive ? "solid" : "ghost"}
+                    intent={isActive ? "primary" : undefined}
+                    size="small"
+                    disabled={isActive}
+                    onClick={() => table.setPageIndex(pageIdx)}
+                    aria-label={`Page ${page.toString()}`}
+                    aria-current={isActive ? "page" : undefined}
+                    className={styles.pageButton}
+                  >
+                    {page.toString()}
+                  </Button>
+                </div>
+              );
+            })}
+          <Button
+            variant="outline"
+            size="small"
+            disabled={!canNextPage}
+            onClick={() => table.nextPage()}
+            aria-label="Next page"
+          >
+            <CaretRightIcon size={16} />
+          </Button>
+        </div>
+      </div>
+    </nav>
+  );
+}

package/src/DataTable/data-table-toolbar.tsx

@@ -0,0 +1,62 @@
+import { Button, Input } from "../components";
+import type { Table } from "@tanstack/react-table";
+import { DataTableColumnToggle } from "./data-table-column-toggle";
+import type { BulkAction, TableFeatures } from "./types";
+import * as styles from "./data-table.css";
+
+interface DataTableToolbarProps<TData> {
+  table: Table<TData>;
+  features?: TableFeatures;
+  globalSearch?: string;
+  onGlobalSearchChange?: (value: string) => void;
+  customToolbar?: React.ReactNode;
+  bulkActions?: BulkAction<TData>[];
+  selectedRows: TData[];
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  features,
+  globalSearch,
+  onGlobalSearchChange,
+  customToolbar,
+  bulkActions,
+  selectedRows,
+}: DataTableToolbarProps<TData>) {
+  return (
+    <div className={styles.toolbarContainer}>
+      <div className={styles.leftGroup}>
+        {features?.globalSearch && (
+          <div className={styles.searchWrap}>
+            <Input
+              size="sm"
+              placeholder="Search..."
+              value={globalSearch ?? ""}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                onGlobalSearchChange?.(e.target.value);
+              }}
+            />
+          </div>
+        )}
+        {selectedRows.length > 0 &&
+          bulkActions?.map((action, index) => (
+            <Button
+              key={`bulk-action-${index.toString()}`}
+              variant={action.variant === "destructive" ? "solid" : "outline"}
+              intent={action.variant === "destructive" ? "danger" : undefined}
+              size="small"
+              disabled={action.disabled}
+              onClick={() => action.onClick(selectedRows)}
+            >
+              {action.icon && <span>{action.icon}</span>}
+              {action.label}
+            </Button>
+          ))}
+      </div>
+      <div className={styles.rightGroup}>
+        {customToolbar}
+        {features?.columnVisibility && <DataTableColumnToggle table={table} />}
+      </div>
+    </div>
+  );
+}

package/src/DataTable/data-table.css.ts

@@ -0,0 +1,421 @@
+import { style, keyframes } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { borderRadius, fontSize, fontWeight, spacing } from "@blenx-dev/theme/tokens";
+
+const pulse = keyframes({
+  "0%, 100%": { opacity: 0.4 },
+  "50%": { opacity: 0.8 },
+});
+
+export const actionsCell = style({
+  display: "flex",
+  gap: 4,
+});
+
+export const checkbox = style({
+  cursor: "pointer",
+});
+
+export const fetchingBar = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: spacing.small,
+  gap: spacing.small,
+});
+
+export const fetchingText = style({
+  color: themeContract.contentSecondary,
+  fontSize: "13px",
+});
+
+export const tableContainer = style({
+  overflowX: "auto",
+  overflowY: "auto",
+  borderRadius: borderRadius.medium,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  position: "relative",
+});
+
+export const table = style({
+  width: "100%",
+  borderCollapse: "collapse",
+  tableLayout: "auto",
+});
+
+export const theadStatic = style({});
+
+export const theadSticky = style({
+  position: "sticky",
+  top: 0,
+  zIndex: 1,
+});
+
+export const theadStickyScrolled = style({
+  position: "sticky",
+  top: 0,
+  zIndex: 1,
+  boxShadow: themeContract.shadowSm,
+});
+
+export const headRow = style({
+  backgroundColor: themeContract.backgroundSubtle,
+});
+
+export const th = style({
+  paddingTop: 10,
+  paddingBottom: 10,
+  paddingLeft: 12,
+  paddingRight: 12,
+  fontSize: "12px",
+  fontWeight: fontWeight.semibold,
+  color: themeContract.contentSecondary,
+  textAlign: "left",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  borderBottomWidth: 1,
+  borderBottomStyle: "solid",
+  borderBottomColor: themeContract.border,
+  whiteSpace: "nowrap",
+  userSelect: "none",
+});
+
+export const thSm = style({
+  fontSize: "11px",
+  paddingTop: 6,
+  paddingBottom: 6,
+  paddingLeft: 8,
+  paddingRight: 8,
+});
+
+export const thLg = style({
+  fontSize: "13px",
+  paddingTop: 14,
+  paddingBottom: 14,
+  paddingLeft: 16,
+  paddingRight: 16,
+});
+
+export const thSortable = style({
+  cursor: "pointer",
+});
+
+export const thContent = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+});
+
+export const td = style({
+  paddingTop: 10,
+  paddingBottom: 10,
+  paddingLeft: 12,
+  paddingRight: 12,
+  fontSize: fontSize.small,
+  color: themeContract.contentPrimary,
+  borderBottomWidth: 1,
+  borderBottomStyle: "solid",
+  borderBottomColor: themeContract.borderSubtle,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+});
+
+export const tdSm = style({
+  paddingTop: 6,
+  paddingBottom: 6,
+  paddingLeft: 8,
+  paddingRight: 8,
+});
+
+export const tdLg = style({
+  paddingTop: 14,
+  paddingBottom: 14,
+  paddingLeft: 16,
+  paddingRight: 16,
+});
+
+export const tr = style({
+  transition: "background-color 0.15s ease",
+});
+
+export const trSm = style({ height: 36 });
+
+export const trLg = style({ height: 60 });
+
+export const trSelected = style({
+  backgroundColor: themeContract.backgroundSubtle,
+});
+
+export const emptyTd = style({
+  padding: 0,
+  borderBottomWidth: 1,
+  borderBottomStyle: "solid",
+  borderBottomColor: themeContract.border,
+});
+
+// ─── Loading skeleton ────────────────────────────────────────────────────────
+
+export const loadingWrapper = style({
+  width: "100%",
+});
+
+export const loadingTable = style({
+  width: "100%",
+  borderCollapse: "collapse",
+});
+
+export const headerCell = style({
+  paddingTop: 12,
+  paddingBottom: 12,
+  paddingLeft: 16,
+  paddingRight: 16,
+  borderBottomColor: themeContract.border,
+  borderBottomStyle: "solid",
+  borderBottomWidth: 1,
+});
+
+export const skeletonBar = style({
+  borderRadius: 4,
+  backgroundColor: themeContract.surfaceRaised,
+  animationName: pulse,
+  animationDuration: "1.5s",
+  animationTimingFunction: "ease-in-out",
+  animationIterationCount: "infinite",
+});
+
+export const cell = style({
+  paddingTop: 12,
+  paddingBottom: 12,
+  paddingLeft: 16,
+  paddingRight: 16,
+  borderBottomColor: themeContract.borderSubtle,
+  borderBottomStyle: "solid",
+  borderBottomWidth: 1,
+});
+
+export const loadingFooter = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: 16,
+  gap: 8,
+});
+
+export const loadingText = style({
+  color: themeContract.contentSecondary,
+  fontSize: fontSize.small,
+});
+
+// ─── Column toggle ───────────────────────────────────────────────────────────
+
+export const itemLabel = style({
+  fontSize: 14,
+});
+
+export const deselectLabel = style({
+  color: themeContract.contentSecondary,
+  fontSize: 13,
+});
+
+export const checkboxChecked = style({
+  marginLeft: "auto",
+  width: 16,
+  height: 16,
+  borderRadius: 3,
+  borderWidth: 1.5,
+  borderStyle: "solid",
+  borderColor: themeContract.primary,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: themeContract.primary,
+});
+
+export const checkboxUnchecked = style({
+  marginLeft: "auto",
+  width: 16,
+  height: 16,
+  borderRadius: 3,
+  borderWidth: 1.5,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "transparent",
+});
+
+export const partial = style({
+  width: 8,
+  height: 2,
+  borderRadius: 1,
+  backgroundColor: themeContract.contentSecondary,
+});
+
+// ─── Empty state ─────────────────────────────────────────────────────────────
+
+export const emptyContainer = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  paddingTop: spacing.xxxlarge,
+  paddingBottom: spacing.xxxlarge,
+  paddingLeft: spacing.medium,
+  paddingRight: spacing.medium,
+  gap: 12,
+});
+
+export const iconWrap = style({
+  opacity: 0.5,
+});
+
+export const message = style({
+  color: themeContract.contentSecondary,
+  fontSize: fontSize.small,
+  lineHeight: 1.5,
+  textAlign: "center",
+  margin: 0,
+});
+
+export const actionWrap = style({
+  marginTop: spacing.xsmall,
+});
+
+// ─── Error state ─────────────────────────────────────────────────────────────
+
+export const errorContainer = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  paddingTop: spacing.xxxlarge,
+  paddingBottom: spacing.xxxlarge,
+  paddingLeft: spacing.medium,
+  paddingRight: spacing.medium,
+  gap: 12,
+});
+
+export const errorMessage = style({
+  color: themeContract.sentimentNegative,
+  fontSize: fontSize.small,
+  lineHeight: 1.5,
+  textAlign: "center",
+  margin: 0,
+});
+
+// ─── Infinite loader ─────────────────────────────────────────────────────────
+
+export const sentinel = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: spacing.medium,
+  minHeight: 48,
+});
+
+export const loadingInline = style({
+  display: "flex",
+  alignItems: "center",
+  gap: spacing.small,
+});
+
+export const loaderLoadingText = style({
+  color: themeContract.contentSecondary,
+  fontSize: fontSize.small,
+});
+
+export const noMore = style({
+  color: themeContract.contentDisabled,
+  fontSize: fontSize.small,
+});
+
+export const center = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: spacing.medium,
+});
+
+// ─── Pagination ──────────────────────────────────────────────────────────────
+
+export const nav = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  paddingTop: spacing.small,
+  paddingBottom: spacing.small,
+});
+
+export const info = style({
+  color: themeContract.contentSecondary,
+  fontSize: fontSize.small,
+});
+
+export const controls = style({
+  display: "flex",
+  alignItems: "center",
+  gap: spacing.small,
+});
+
+export const range = style({
+  color: themeContract.contentSecondary,
+  fontSize: fontSize.small,
+  whiteSpace: "nowrap",
+});
+
+export const buttonGroup = style({
+  display: "flex",
+  alignItems: "center",
+  gap: spacing.xsmall,
+});
+
+export const pageWrap = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 2,
+});
+
+export const ellipsis = style({
+  color: themeContract.contentDisabled,
+  fontSize: fontSize.small,
+  paddingLeft: spacing.xsmall,
+  paddingRight: spacing.xsmall,
+});
+
+export const pageButton = style({
+  minWidth: 32,
+  height: 32,
+});
+
+// ─── Toolbar ─────────────────────────────────────────────────────────────────
+
+export const toolbarContainer = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: spacing.medium,
+  paddingTop: spacing.small,
+  paddingBottom: spacing.small,
+});
+
+export const leftGroup = style({
+  display: "flex",
+  alignItems: "center",
+  gap: spacing.small,
+  flex: 1,
+});
+
+export const rightGroup = style({
+  display: "flex",
+  alignItems: "center",
+  gap: spacing.small,
+});
+
+export const searchWrap = style({
+  flex: 1,
+  maxWidth: 320,
+});