@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/blocks/table/data-table-block.tsx

@@ -0,0 +1,313 @@
+import * as React from "react";
+import {
+  columnVisibilityFeature,
+  createColumnHelper,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  FlexRender,
+  rowPaginationFeature,
+  rowSortingFeature,
+  tableFeatures,
+  useTable,
+  type ColumnDef,
+  type ColumnVisibilityState,
+  type PaginationState,
+  type RowData,
+} from "@tanstack/react-table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@devxcrew/react-ui/components/table";
+import { cn } from "@devxcrew/react-ui/lib/utils";
+import { TopologyRegion, type InterfaceTopologyController } from "@devxcrew/react-ui/features/interface-topology";
+import { DataTablePagination } from "./data-table-pagination";
+import { DataTableToolbar } from "./data-table-toolbar";
+
+export const dataTableFeatures = tableFeatures({
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  rowSortingFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  sortedRowModel: createSortedRowModel(),
+});
+
+export type DataTableColumn<TData extends RowData> = ColumnDef<typeof dataTableFeatures, TData, unknown>;
+
+export function createDataTableColumnHelper<TData extends RowData>() {
+  return createColumnHelper<typeof dataTableFeatures, TData>();
+}
+
+export type DataTableBlockProps<TData extends RowData> = {
+  columns: DataTableColumn<TData>[];
+  data: TData[];
+  description?: string;
+  emptyMessage: string;
+  getRowId: (row: TData) => string;
+  getSearchText: (row: TData) => string;
+  filterOptions?: readonly { label: string; value: string }[];
+  getFilterValue?: (row: TData) => string;
+  layout?: "page" | "section";
+  primaryAction?: React.ReactNode;
+  pageWidth?: "full" | "wide";
+  defaultPageSize?: number;
+  itemLabel?: string;
+  pageSizeOptions?: readonly number[];
+  searchPlaceholder?: string;
+  showSerialNumber?: boolean;
+  showHeaderDivider?: boolean;
+  searchTopSpacing?: boolean;
+  summary?: React.ReactNode;
+  tableFooter?: React.ReactNode;
+  title?: string;
+  toolbarFilters?: React.ReactNode;
+  withPagination?: boolean;
+  withToolbar?: boolean;
+  topology?: InterfaceTopologyController;
+  topologyIds?: {
+    header: string;
+    search: string;
+    content: string;
+    pagination: string;
+    searchBar?: string;
+    columnFilter?: string;
+    rowHeader?: string;
+    rows?: string;
+    pageSize?: string;
+    pageNavigation?: string;
+  };
+};
+
+export function DataTableBlock<TData extends RowData>({
+  columns,
+  data,
+  description,
+  emptyMessage,
+  getRowId,
+  getSearchText,
+  filterOptions,
+  getFilterValue,
+  primaryAction,
+  pageWidth = "wide",
+  defaultPageSize = 10,
+  itemLabel = "records",
+  layout = "page",
+  pageSizeOptions = [10, 25, 50, 100],
+  searchPlaceholder = "Search",
+  showSerialNumber = true,
+  showHeaderDivider = true,
+  searchTopSpacing = false,
+  summary,
+  tableFooter,
+  title,
+  toolbarFilters,
+  withPagination = true,
+  withToolbar = true,
+  topology,
+  topologyIds,
+}: DataTableBlockProps<TData>) {
+  const [search, setSearch] = React.useState("");
+  const [filterValue, setFilterValue] = React.useState("");
+  const [columnVisibility, setColumnVisibility] = React.useState<ColumnVisibilityState>({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: defaultPageSize,
+  });
+  const visibleData = React.useMemo(() => {
+    const normalized = search.trim().toLocaleLowerCase();
+    return data.filter((row) => {
+      const matchesSearch = !normalized || getSearchText(row).toLocaleLowerCase().includes(normalized);
+      const matchesFilter = !filterValue || !getFilterValue || getFilterValue(row) === filterValue;
+      return matchesSearch && matchesFilter;
+    });
+  }, [data, filterValue, getFilterValue, getSearchText, search]);
+  const table = useTable({
+    columns,
+    data: visibleData,
+    getRowId,
+    state: { columnVisibility, pagination },
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
+    features: dataTableFeatures,
+  });
+  const pageCount = Math.max(table.getPageCount(), 1);
+  const firstRow = visibleData.length ? pagination.pageIndex * pagination.pageSize + 1 : 0;
+  const lastRow = Math.min((pagination.pageIndex + 1) * pagination.pageSize, visibleData.length);
+
+  function updateSearch(value: string) {
+    setSearch(value);
+    setPagination((current) => ({ ...current, pageIndex: 0 }));
+  }
+
+  const isSection = layout === "section";
+
+  function renderRegion(id: string, content: React.ReactNode) {
+    return topology ? (
+      <TopologyRegion as="div" id={id} topology={topology}>
+        {content}
+      </TopologyRegion>
+    ) : (
+      content
+    );
+  }
+
+  const header =
+    title || description || primaryAction ? (
+      <header
+        className={cn(
+          "flex flex-col gap-4 pb-4 sm:flex-row sm:items-center sm:justify-between",
+          showHeaderDivider && "border-b",
+          isSection && "px-4 py-3",
+          topologyIds?.header === "27.1.1" && "h-12 pb-0",
+        )}
+      >
+        <div className="min-w-0">
+          {title ? (
+            <h2 className={cn("font-semibold tracking-tight", isSection ? "text-sm" : "text-2xl")}>{title}</h2>
+          ) : null}
+          {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
+        </div>
+        {primaryAction ? <div className="flex shrink-0 items-center gap-2 sm:justify-end">{primaryAction}</div> : null}
+      </header>
+    ) : null;
+
+  const searchRegion = withToolbar ? (
+    <div className={cn(searchTopSpacing && "pt-16", isSection && "border-b p-2")}>
+      <DataTableToolbar
+        columns={table
+          .getAllColumns()
+          .filter((column) => column.getCanHide())
+          .map((column) => ({
+            id: column.id,
+            label: typeof column.columnDef.header === "string" ? column.columnDef.header : column.id,
+            onVisibleChange: (visible: boolean) => column.toggleVisibility(visible),
+            visible: column.getIsVisible(),
+          }))}
+        filters={toolbarFilters}
+        onSearchChange={updateSearch}
+        search={search}
+        searchPlaceholder={searchPlaceholder}
+        topology={topology}
+        topologyIds={{ columnFilter: topologyIds?.columnFilter, searchBar: topologyIds?.searchBar }}
+        filterOptions={filterOptions}
+        filterValue={filterValue}
+        onFilterChange={(value) => {
+          setFilterValue(value);
+          setPagination((current) => ({ ...current, pageIndex: 0 }));
+        }}
+      />
+    </div>
+  ) : null;
+
+  const content = (
+    <div
+      className={cn(
+        "overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:h-0",
+        !isSection && "rounded-md border bg-card shadow-sm",
+      )}
+    >
+      <Table>
+        <TableHeader
+          className="bg-muted data-[ito-highlighted=true]:outline data-[ito-highlighted=true]:outline-2 data-[ito-highlighted=true]:outline-violet-600"
+          {...(topology && topologyIds?.rowHeader ? topology.regionProps(topologyIds.rowHeader) : {})}
+        >
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {showSerialNumber ? (
+                <TableHead className="h-11 w-12 min-w-12 max-w-12 text-center text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  #
+                </TableHead>
+              ) : null}
+              {headerGroup.headers.map((header) => (
+                <TableHead
+                  className={cn(
+                    "h-11 text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+                    getUtilityColumnClass(header.column.id),
+                  )}
+                  key={header.id}
+                  colSpan={header.colSpan}
+                >
+                  {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                    <button
+                      className="flex items-center gap-1 text-left font-medium hover:text-foreground"
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      <FlexRender header={header} />
+                    </button>
+                  ) : (
+                    <FlexRender header={header} />
+                  )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody
+          className="data-[ito-highlighted=true]:outline data-[ito-highlighted=true]:outline-2 data-[ito-highlighted=true]:outline-violet-600"
+          {...(topology && topologyIds?.rows ? topology.regionProps(topologyIds.rows) : {})}
+        >
+          {table.getRowModel().rows.length ? (
+            table.getRowModel().rows.map((row, rowIndex) => (
+              <TableRow className="hover:bg-muted/60" key={row.id}>
+                {showSerialNumber ? (
+                  <TableCell className="w-12 min-w-12 max-w-12 text-center tabular-nums text-muted-foreground">
+                    {pagination.pageIndex * pagination.pageSize + rowIndex + 1}
+                  </TableCell>
+                ) : null}
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell className={getUtilityColumnClass(cell.column.id)} key={cell.id}>
+                    <FlexRender cell={cell} />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell
+                className="h-36 text-center text-sm text-muted-foreground"
+                colSpan={table.getVisibleLeafColumns().length + (showSerialNumber ? 1 : 0)}
+              >
+                {emptyMessage}
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+
+  const paginationContent = withPagination ? (
+    <DataTablePagination
+      firstRow={firstRow}
+      itemLabel={itemLabel}
+      lastRow={lastRow}
+      onPageChange={(page) => table.setPageIndex(page - 1)}
+      onPageSizeChange={(pageSize) => setPagination({ pageIndex: 0, pageSize })}
+      page={pagination.pageIndex + 1}
+      pageSize={pagination.pageSize}
+      pageSizeOptions={pageSizeOptions}
+      totalItems={visibleData.length}
+      totalPages={pageCount}
+      topology={topology}
+      topologyIds={{ pageNavigation: topologyIds?.pageNavigation, pageSize: topologyIds?.pageSize }}
+    />
+  ) : null;
+
+  return (
+    <section
+      className={cn(
+        isSection ? "w-full" : pageWidth === "wide" ? "mx-auto w-full lg:w-[90%]" : "w-full",
+        isSection ? "overflow-hidden rounded-lg border bg-card" : "space-y-4",
+      )}
+    >
+      {header ? renderRegion(topologyIds?.header ?? "data-table-header", header) : null}
+      {searchRegion ? renderRegion(topologyIds?.search ?? "data-table-search", searchRegion) : null}
+      {renderRegion(topologyIds?.content ?? "data-table-content", content)}
+      {summary}
+      {tableFooter ? <footer className="border-t p-3">{tableFooter}</footer> : null}
+      {paginationContent ? renderRegion(topologyIds?.pagination ?? "data-table-pagination", paginationContent) : null}
+    </section>
+  );
+}
+
+function getUtilityColumnClass(columnId: string) {
+  return columnId === "action" || columnId === "actions"
+    ? "w-14 min-w-14 max-w-14 text-center [&>button]:mx-auto [&>div]:mx-auto [&>svg]:mx-auto"
+    : undefined;
+}

package/src/blocks/table/data-table-filter-menu.tsx

@@ -0,0 +1,48 @@
+import { Funnel } from 'lucide-react'
+import { DropdownMenu, DropdownMenuCheckboxItem } from '@devxcrew/react-ui/components/dropdown-menu'
+import { DataTableIconMenuTrigger } from './data-table-icon-menu-trigger'
+import { DataTableMenuContent, dataTableMenuOptionClass } from './data-table-menu-content'
+
+export type DataTableFilterOption<TValue extends string> = {
+  checked: boolean
+  label: string
+  value: TValue
+}
+
+export function DataTableFilterMenu<TValue extends string>({
+  activeCount = 0,
+  clearLabel = 'Clear',
+  label = 'Filters',
+  onClear,
+  onSelect,
+  options,
+  title = 'Filter options',
+}: {
+  activeCount?: number
+  clearLabel?: string
+  label?: string
+  onClear: () => void
+  onSelect: (value: TValue) => void
+  options: DataTableFilterOption<TValue>[]
+  title?: string
+}) {
+  return (
+    <DropdownMenu>
+      <DataTableIconMenuTrigger active={activeCount > 0} label={label}>
+        <Funnel />
+      </DataTableIconMenuTrigger>
+      <DataTableMenuContent actionLabel={clearLabel} onAction={onClear} title={title}>
+        {options.map((option) => (
+          <DropdownMenuCheckboxItem
+            checked={option.checked}
+            className={dataTableMenuOptionClass}
+            key={option.value}
+            onCheckedChange={() => onSelect(option.value)}
+          >
+            {option.label}
+          </DropdownMenuCheckboxItem>
+        ))}
+      </DataTableMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/blocks/table/data-table-icon-menu-trigger.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react'
+import { Button } from '@devxcrew/react-ui/components/button'
+import { DropdownMenuTrigger } from '@devxcrew/react-ui/components/dropdown-menu'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@devxcrew/react-ui/components/tooltip'
+
+export function DataTableIconMenuTrigger({
+  active = false,
+  children,
+  label,
+}: {
+  active?: boolean
+  children: ReactNode
+  label: string
+}) {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <DropdownMenuTrigger
+          render={
+            <TooltipTrigger
+              render={
+                <Button aria-label={label} className="relative" size="icon-sm" variant="outline" />
+              }
+            >
+              {children}
+              {active ? (
+                <span
+                  aria-hidden="true"
+                  className="absolute top-1 right-1 size-1.5 rounded-full bg-primary"
+                />
+              ) : null}
+            </TooltipTrigger>
+          }
+        />
+        <TooltipContent>{label}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

package/src/blocks/table/data-table-menu-content.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react'
+import { DropdownMenuContent } from '@devxcrew/react-ui/components/dropdown-menu'
+
+export function DataTableMenuContent({
+  actionLabel,
+  children,
+  onAction,
+  title,
+}: {
+  actionLabel: string
+  children: ReactNode
+  onAction: () => void
+  title: string
+}) {
+  return (
+    <DropdownMenuContent align="end" className="w-56 p-0">
+      <div className="flex items-center justify-between gap-4 border-b px-3 py-2.5">
+        <span className="text-sm font-medium">{title}</span>
+        <button
+          className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+          onClick={onAction}
+          type="button"
+        >
+          {actionLabel}
+        </button>
+      </div>
+      <div className="grid gap-1 p-2">{children}</div>
+    </DropdownMenuContent>
+  )
+}
+
+export const dataTableMenuOptionClass = 'min-h-10 py-2.5 pl-3'

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

@@ -0,0 +1,149 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '@devxcrew/react-ui/components/button';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@devxcrew/react-ui/components/select';
+import { cn } from '@devxcrew/react-ui/lib/utils';
+import { TopologyRegion, type InterfaceTopologyController } from '@devxcrew/react-ui/features/interface-topology';
+
+export function DataTablePagination({
+  className,
+  firstRow,
+  itemLabel,
+  lastRow,
+  onPageChange,
+  onPageSizeChange,
+  page,
+  pageSize,
+  pageSizeOptions,
+  totalItems,
+  totalPages,
+  topology,
+  topologyIds,
+}: {
+  className?: string;
+  firstRow: number;
+  itemLabel: string;
+  lastRow: number;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+  page: number;
+  pageSize: number;
+  pageSizeOptions: readonly number[];
+  totalItems: number;
+  totalPages: number;
+  topology?: InterfaceTopologyController;
+  topologyIds?: { pageSize?: string; pageNavigation?: string };
+}) {
+  const pageSizeControl = (
+    <div className="flex flex-wrap items-center gap-3 text-muted-foreground">
+      <span>
+        Total {itemLabel}: <strong className="font-semibold text-foreground">{totalItems}</strong>
+      </span>
+      <span>Rows per page</span>
+      <Select
+        items={pageSizeOptions.map((size) => ({ label: String(size), value: String(size) }))}
+        onValueChange={(value) => onPageSizeChange(Number(value))}
+        value={String(pageSize)}
+      >
+        <SelectTrigger className="w-20" size="sm">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent side="top">
+          <SelectGroup>
+            {pageSizeOptions.map((size) => (
+              <SelectItem key={size} value={String(size)}>
+                {size}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+  const navigation = (
+    <div className="flex flex-wrap items-center gap-1 lg:justify-end">
+      <span className="mr-2 whitespace-nowrap text-muted-foreground">
+        Showing {firstRow} to {lastRow} of {totalItems}
+      </span>
+      <Button
+        className="px-2 text-muted-foreground"
+        disabled={page <= 1}
+        onClick={() => onPageChange(page - 1)}
+        size="sm"
+        variant="ghost"
+      >
+        <ChevronLeft />
+        Previous
+      </Button>
+      {buildPageItems(page, totalPages).map((item, index) =>
+        item === 'ellipsis' ? (
+          <span className="px-1.5 text-muted-foreground" key={`ellipsis-${index}`}>
+            …
+          </span>
+        ) : (
+          <Button
+            className="min-w-8 px-2"
+            key={item}
+            onClick={() => onPageChange(item)}
+            size="sm"
+            variant={item === page ? 'default' : 'ghost'}
+          >
+            {item}
+          </Button>
+        ),
+      )}
+      <Button
+        className="px-2 text-muted-foreground"
+        disabled={page >= totalPages}
+        onClick={() => onPageChange(page + 1)}
+        size="sm"
+        variant="ghost"
+      >
+        Next
+        <ChevronRight />
+      </Button>
+    </div>
+  );
+
+  return (
+    <footer
+      className={cn(
+        'flex flex-col gap-3 rounded-md border bg-card px-4 py-2 text-sm shadow-sm lg:flex-row lg:items-center lg:justify-between',
+        className,
+      )}
+    >
+      {topology && topologyIds?.pageSize ? (
+        <TopologyRegion as="div" id={topologyIds.pageSize} topology={topology}>
+          {pageSizeControl}
+        </TopologyRegion>
+      ) : (
+        pageSizeControl
+      )}
+      {topology && topologyIds?.pageNavigation ? (
+        <TopologyRegion as="div" id={topologyIds.pageNavigation} topology={topology}>
+          {navigation}
+        </TopologyRegion>
+      ) : (
+        navigation
+      )}
+    </footer>
+  );
+}
+
+function buildPageItems(page: number, totalPages: number): Array<number | 'ellipsis'> {
+  if (totalPages <= 5) return Array.from({ length: totalPages }, (_, index) => index + 1);
+  const candidates = [1, page - 1, page, page + 1, totalPages];
+  const pages = [...new Set(candidates.filter((item) => item >= 1 && item <= totalPages))];
+  const result: Array<number | 'ellipsis'> = [];
+  pages.forEach((item, index) => {
+    if (index > 0 && item - pages[index - 1]! > 1) result.push('ellipsis');
+    result.push(item);
+  });
+  return result;
+}

package/src/blocks/table/data-table-row-actions.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react'
+import { Ellipsis } from 'lucide-react'
+import { Button } from '@devxcrew/react-ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@devxcrew/react-ui/components/dropdown-menu'
+
+export type DataTableRowAction = {
+  disabled?: boolean
+  icon?: ReactNode
+  id: string
+  label: string
+  onSelect: () => void
+  separatorBefore?: boolean
+  tone?: 'default' | 'destructive'
+}
+
+export function DataTableRowActions({
+  actions,
+  label,
+}: {
+  actions: DataTableRowAction[]
+  label: string
+}) {
+  if (!actions.length) return null
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button aria-label={label} size="icon-sm" variant="outline" />}>
+        <Ellipsis />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-44">
+        {actions.map((action, index) => (
+          <div key={action.id}>
+            {action.separatorBefore && index > 0 ? <DropdownMenuSeparator /> : null}
+            <DropdownMenuItem
+              disabled={action.disabled}
+              onClick={action.onSelect}
+              variant={action.tone}
+            >
+              {action.icon}
+              {action.label}
+            </DropdownMenuItem>
+          </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/blocks/table/data-table-status.tsx

@@ -0,0 +1,42 @@
+import { CheckCircle2, Minus, XCircle } from 'lucide-react'
+import { cn } from '@devxcrew/react-ui/lib/utils'
+
+export type DataTableStatusTone = 'danger' | 'info' | 'neutral' | 'success' | 'warning'
+
+const toneClasses: Record<DataTableStatusTone, string> = {
+  danger:
+    'border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-300',
+  info: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-300',
+  neutral: 'border-border bg-muted/50 text-muted-foreground',
+  success:
+    'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-300',
+  warning:
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-300',
+}
+
+export function DataTableStatus({
+  className,
+  label,
+  showIcon = true,
+  tone = 'neutral',
+}: {
+  className?: string
+  label: string
+  showIcon?: boolean
+  tone?: DataTableStatusTone
+}) {
+  const Icon = tone === 'danger' ? XCircle : tone === 'neutral' ? Minus : CheckCircle2
+
+  return (
+    <span
+      className={cn(
+        'inline-flex h-6 items-center gap-1 rounded-md border px-2 text-[11px] font-medium',
+        toneClasses[tone],
+        className,
+      )}
+    >
+      {showIcon ? <Icon className="size-3" aria-hidden="true" /> : null}
+      {label}
+    </span>
+  )
+}