@icomponents/react 0.1.0

package/src/components/data-table/bulk-actions.tsx

@@ -0,0 +1,193 @@
+import { Badge } from "@icomponents/react/components/ui/badge";
+import { Button } from "@icomponents/react/components/ui/button";
+import { Separator } from "@icomponents/react/components/ui/separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@icomponents/react/components/ui/tooltip";
+import { cn } from "@icomponents/react/lib/utils";
+import { type Table } from "@tanstack/react-table";
+import { X } from "lucide-react";
+import { useState, useEffect, useRef } from "react";
+
+type DataTableBulkActionsProps<TData> = {
+  table: Table<TData>;
+  entityName: string;
+  children: React.ReactNode;
+};
+
+/**
+ * A modular toolbar for displaying bulk actions when table rows are selected.
+ *
+ * @template TData The type of data in the table.
+ * @param {object} props The component props.
+ * @param {Table<TData>} props.table The react-table instance.
+ * @param {string} props.entityName The name of the entity being acted upon (e.g., "task", "user").
+ * @param {React.ReactNode} props.children The action buttons to be rendered inside the toolbar.
+ * @returns {React.ReactNode | null} The rendered component or null if no rows are selected.
+ */
+export function DataTableBulkActions<TData>({
+  table,
+  entityName,
+  children,
+}: DataTableBulkActionsProps<TData>): React.ReactNode | null {
+  const selectedRows = table.getFilteredSelectedRowModel().rows;
+  const selectedCount = selectedRows.length;
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const [announcement, setAnnouncement] = useState("");
+
+  // Announce selection changes to screen readers
+  useEffect(() => {
+    if (selectedCount > 0) {
+      const message = `${selectedCount} ${entityName}${selectedCount > 1 ? "s" : ""} selected. Bulk actions toolbar is available.`;
+
+      // Use queueMicrotask to defer state update and avoid cascading renders
+      queueMicrotask(() => {
+        setAnnouncement(message);
+      });
+
+      // Clear announcement after a delay
+      const timer = setTimeout(() => setAnnouncement(""), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [selectedCount, entityName]);
+
+  const handleClearSelection = () => {
+    table.resetRowSelection();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    const buttons = toolbarRef.current?.querySelectorAll("button");
+    if (!buttons) return;
+
+    const currentIndex = Array.from(buttons).findIndex(
+      (button) => button === document.activeElement
+    );
+
+    switch (event.key) {
+      case "ArrowRight": {
+        event.preventDefault();
+        const nextIndex = (currentIndex + 1) % buttons.length;
+        buttons[nextIndex]?.focus();
+        break;
+      }
+      case "ArrowLeft": {
+        event.preventDefault();
+        const prevIndex = currentIndex === 0 ? buttons.length - 1 : currentIndex - 1;
+        buttons[prevIndex]?.focus();
+        break;
+      }
+      case "Home":
+        event.preventDefault();
+        buttons[0]?.focus();
+        break;
+      case "End":
+        event.preventDefault();
+        buttons[buttons.length - 1]?.focus();
+        break;
+      case "Escape": {
+        // Check if the Escape key came from a dropdown trigger or content
+        // We can't check dropdown state because Radix UI closes it before our handler runs
+        const target = event.target as HTMLElement;
+        const activeElement = document.activeElement as HTMLElement;
+
+        // Check if the event target or currently focused element is a dropdown trigger
+        const isFromDropdownTrigger =
+          target?.getAttribute("data-slot") === "dropdown-menu-trigger" ||
+          activeElement?.getAttribute("data-slot") === "dropdown-menu-trigger" ||
+          target?.closest('[data-slot="dropdown-menu-trigger"]') ||
+          activeElement?.closest('[data-slot="dropdown-menu-trigger"]');
+
+        // Check if the focused element is inside dropdown content (which is portaled)
+        const isFromDropdownContent =
+          activeElement?.closest('[data-slot="dropdown-menu-content"]') ||
+          target?.closest('[data-slot="dropdown-menu-content"]');
+
+        if (isFromDropdownTrigger || isFromDropdownContent) {
+          // Escape was meant for the dropdown - don't clear selection
+          return;
+        }
+
+        // Escape was meant for the toolbar - clear selection
+        event.preventDefault();
+        handleClearSelection();
+        break;
+      }
+    }
+  };
+
+  if (selectedCount === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Live region for screen reader announcements */}
+      <div aria-live="polite" aria-atomic="true" className="sr-only" role="status">
+        {announcement}
+      </div>
+
+      <div
+        ref={toolbarRef}
+        role="toolbar"
+        aria-label={`Bulk actions for ${selectedCount} selected ${entityName}${selectedCount > 1 ? "s" : ""}`}
+        aria-describedby="bulk-actions-description"
+        tabIndex={-1}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          "fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-xl",
+          "transition-all delay-100 duration-300 ease-out hover:scale-105",
+          "focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none"
+        )}
+      >
+        <div
+          className={cn(
+            "p-2 shadow-xl",
+            "rounded-xl border",
+            "bg-background/95 backdrop-blur-lg supports-backdrop-filter:bg-background/60",
+            "flex items-center gap-x-2"
+          )}
+        >
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={handleClearSelection}
+                  className="size-6 rounded-full"
+                  aria-label="Clear selection"
+                  title="Clear selection (Escape)"
+                >
+                  <X />
+                  <span className="sr-only">Clear selection</span>
+                </Button>
+              }
+            />
+            <TooltipContent>
+              <p>Clear selection (Escape)</p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Separator className="h-5" orientation="vertical" aria-hidden="true" />
+
+          <div className="flex items-center gap-x-1 text-sm" id="bulk-actions-description">
+            <Badge
+              variant="default"
+              className="min-w-8 rounded-lg"
+              aria-label={`${selectedCount} selected`}
+            >
+              {selectedCount}
+            </Badge>{" "}
+            <span className="hidden sm:inline">
+              {entityName}
+              {selectedCount > 1 ? "s" : ""}
+            </span>{" "}
+            selected
+          </div>
+
+          <Separator className="h-5" orientation="vertical" aria-hidden="true" />
+
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/data-table/column-header.tsx

@@ -0,0 +1,66 @@
+import { ArrowDownIcon, ArrowUpIcon, CaretSortIcon, EyeNoneIcon } from "@radix-ui/react-icons";
+import { Button } from "@icomponents/react/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@icomponents/react/components/ui/dropdown-menu";
+import { cn } from "@icomponents/react/lib/utils";
+import { type Column } from "@tanstack/react-table";
+
+type DataTableColumnHeaderProps<TData, TValue> = React.HTMLAttributes<HTMLDivElement> & {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>;
+  }
+
+  return (
+    <div className={cn("flex items-center space-x-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <Button variant="ghost" size="sm" className="h-8 data-popup-open:bg-accent">
+              <span>{title}</span>
+              {column.getIsSorted() === "desc" ? (
+                <ArrowDownIcon className="ms-2 h-4 w-4" />
+              ) : column.getIsSorted() === "asc" ? (
+                <ArrowUpIcon className="ms-2 h-4 w-4" />
+              ) : (
+                <CaretSortIcon className="ms-2 h-4 w-4" />
+              )}
+            </Button>
+          }
+        />
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUpIcon className="size-3.5 text-muted-foreground/70" />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDownIcon className="size-3.5 text-muted-foreground/70" />
+            Desc
+          </DropdownMenuItem>
+          {column.getCanHide() && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+                <EyeNoneIcon className="size-3.5 text-muted-foreground/70" />
+                Hide
+              </DropdownMenuItem>
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/components/data-table/data-table.dom.test.tsx

@@ -0,0 +1,54 @@
+import { afterEach, describe, expect, it } from "bun:test";
+
+import { TESTID } from "@icomponents/react/testids";
+import type { ColumnDef } from "@tanstack/react-table";
+import { cleanup, render, screen } from "@testing-library/react";
+
+import { DataTable } from "./data-table";
+
+/**
+ * Таблица — главный экран консоли, и при перекраске она ломается первой: меняют вёрстку шапки,
+ * оборачивают ячейку в новый компонент, теряют пустое состояние.
+ *
+ * Проверяем СМЫСЛ, а не оформление: строки видны, значения дошли до ячеек, а пустой список честно
+ * говорит, что он пуст. Последнее важнее, чем кажется: таблица, которая при нуле строк молча рисует
+ * пустой каркас, читается как «данные ещё грузятся» — и человек ждёт то, чего не будет.
+ */
+afterEach(cleanup);
+
+type Row = { id: string; email: string };
+
+const columns: ColumnDef<Row>[] = [
+  { accessorKey: "email", header: "Email", cell: ({ row }) => row.original.email },
+];
+
+const props = {
+  columns,
+  search: {},
+  navigate: (() => {}) as never,
+  columnFilters: [] as never,
+  searchPlaceholder: "Поиск…",
+  searchKey: "email",
+  filters: [] as never,
+  emptyMessage: "Пользователи не найдены.",
+};
+
+describe("DataTable — данные, а не каркас", () => {
+  it("строку можно адресовать по id сущности, и значение дошло до ячейки", () => {
+    render(<DataTable<Row> {...props} data={[{ id: "u1", email: "a@b.co" }]} />);
+    // Адресуем КОНКРЕТНУЮ строку, а не «третью сверху»: порядок сортировки — не контракт.
+    expect(screen.getByTestId(TESTID.tableRow("u1"))).toBeDefined();
+    expect(screen.getByText("a@b.co")).toBeDefined();
+  });
+
+  it("пустой список ГОВОРИТ, что он пуст — а не притворяется загрузкой", () => {
+    render(<DataTable<Row> {...props} data={[]} />);
+    expect(screen.getByTestId(TESTID.tableEmpty)).toBeDefined();
+    expect(screen.getByText("Пользователи не найдены.")).toBeDefined();
+  });
+
+  it("шапка колонки подписана (после перекраски заголовки любят терять текст)", () => {
+    render(<DataTable<Row> {...props} data={[{ id: "u1", email: "a@b.co" }]} />);
+    expect(screen.getAllByText("Email").length).toBeGreaterThan(0);
+  });
+});

package/src/components/data-table/data-table.tsx

@@ -0,0 +1,189 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@icomponents/react/components/ui/table";
+import { type NavigateFn, useTableUrlState } from "@icomponents/react/hooks/use-table-url-state";
+import { cn } from "@icomponents/react/lib/utils";
+import { TESTID, testid } from "@icomponents/react/testids";
+import {
+  type ColumnDef,
+  type SortingState,
+  type VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useEffect, useState } from "react";
+
+import { DataTablePagination } from "./pagination";
+import { DataTableToolbar } from "./toolbar";
+
+// Generic extraction of the identical CompaniesTable/UsersTable bodies (§3): same URL-synced
+// filter/sort/pagination state, same toolbar + table + pagination composition and className/spacing.
+// A slice supplies only its columns, row type, filter config, and labels.
+export type DataTableProps<TData> = {
+  data: TData[];
+  columns: ColumnDef<TData>[];
+  search: Record<string, unknown>;
+  navigate: NavigateFn;
+  columnFilters: Parameters<typeof useTableUrlState>[0]["columnFilters"];
+  searchPlaceholder: string;
+  searchKey: string;
+  filters: React.ComponentProps<typeof DataTableToolbar>["filters"];
+  emptyMessage: string;
+  defaultPageSize?: number;
+  rowCount?: number;
+  toolbarExtra?: React.ReactNode;
+};
+
+/** id сущности, если он есть: тест адресует КОНКРЕТНУЮ строку, а не «третью сверху». */
+const rowKey = (row: unknown, fallback: string): string => {
+  const id = (row as { id?: unknown })?.id;
+  return typeof id === "string" || typeof id === "number" ? String(id) : fallback;
+};
+
+export function DataTable<TData>({
+  data,
+  columns,
+  search,
+  navigate,
+  columnFilters: columnFilterConfig,
+  searchPlaceholder,
+  searchKey,
+  filters,
+  emptyMessage,
+  defaultPageSize = 10,
+  rowCount,
+  toolbarExtra,
+}: DataTableProps<TData>) {
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+
+  const serverMode = rowCount != null;
+  const [localSorting, setLocalSorting] = useState<SortingState>([]);
+
+  const {
+    columnFilters,
+    onColumnFiltersChange,
+    pagination,
+    onPaginationChange,
+    ensurePageInRange,
+    sorting: urlSorting,
+    onSortingChange: urlOnSortingChange,
+  } = useTableUrlState({
+    search,
+    navigate,
+    pagination: { defaultPage: 1, defaultPageSize },
+    globalFilter: { enabled: false },
+    columnFilters: columnFilterConfig,
+    sorting: { enabled: serverMode },
+  });
+
+  const sorting = serverMode ? (urlSorting ?? []) : localSorting;
+
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const table = useReactTable({
+    data,
+    columns,
+    rowCount,
+    state: { sorting, pagination, columnFilters, columnVisibility },
+    manualPagination: serverMode,
+    manualSorting: serverMode,
+    manualFiltering: serverMode,
+    onPaginationChange,
+    onColumnFiltersChange,
+    onSortingChange: serverMode ? urlOnSortingChange : setLocalSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: serverMode ? undefined : getPaginationRowModel(),
+    getFilteredRowModel: serverMode ? undefined : getFilteredRowModel(),
+    getSortedRowModel: serverMode ? undefined : getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  });
+
+  useEffect(() => {
+    ensurePageInRange(table.getPageCount());
+  }, [table, ensurePageInRange]);
+
+  return (
+    <div className="flex flex-1 flex-col gap-4">
+      <DataTableToolbar
+        table={table}
+        searchPlaceholder={searchPlaceholder}
+        searchKey={searchKey}
+        filters={filters}
+        extra={toolbarExtra}
+      />
+      <div className="overflow-hidden rounded-md border">
+        <Table {...testid(TESTID.table)}>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="group/row">
+                {headerGroup.headers.map((header) => (
+                  <TableHead
+                    key={header.id}
+                    colSpan={header.colSpan}
+                    className={cn(
+                      "bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted",
+                      header.column.columnDef.meta?.className,
+                      header.column.columnDef.meta?.thClassName
+                    )}
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  {...testid(TESTID.tableRow(rowKey(row.original, row.id)))}
+                  data-state={row.getIsSelected() && "selected"}
+                  className="group/row"
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      className={cn(
+                        "bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted",
+                        cell.column.columnDef.meta?.className,
+                        cell.column.columnDef.meta?.tdClassName
+                      )}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  {...testid(TESTID.tableEmpty)}
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} className="mt-auto" />
+    </div>
+  );
+}

package/src/components/data-table/faceted-filter.tsx

@@ -0,0 +1,156 @@
+import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons";
+import { Badge } from "@icomponents/react/components/ui/badge";
+import { Button } from "@icomponents/react/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@icomponents/react/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@icomponents/react/components/ui/popover";
+import { Separator } from "@icomponents/react/components/ui/separator";
+import { useTranslation } from "@icomponents/react/i18n/use-translation";
+import { cn } from "@icomponents/react/lib/utils";
+import { type Column } from "@tanstack/react-table";
+import * as React from "react";
+
+type DataTableFacetedFilterProps<TData, TValue> = {
+  column?: Column<TData, TValue>;
+  title?: string;
+  options: {
+    label: string;
+    value: string;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+  testId?: string;
+  single?: boolean;
+};
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options,
+  testId,
+  single = false,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+  const { t } = useTranslation("common");
+  // Faceted counts are derived client-side from the current row model. With server-side data
+  // (manualFiltering + no filtered row model) tanstack's getFacetedUniqueValues() throws
+  // ("reading 'length' of undefined"), so guard it — the count badges are cosmetic and simply
+  // omitted when unavailable.
+  let facets: Map<unknown, number> | undefined;
+  try {
+    facets = column?.getFacetedUniqueValues();
+  } catch {
+    facets = undefined;
+  }
+  // The URL-synced filter value is normally an array; tolerate a scalar/csv just in case.
+  const rawFilter = column?.getFilterValue();
+  const selectedValues = new Set(
+    Array.isArray(rawFilter) ? (rawFilter as string[]) : rawFilter ? [String(rawFilter)] : []
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button variant="outline" size="sm" className="h-8 border-dashed" data-testid={testId}>
+            <PlusCircledIcon className="size-4" />
+            {title}
+            {selectedValues?.size > 0 && (
+              <>
+                <Separator orientation="vertical" className="mx-2 h-4" />
+                <Badge variant="secondary" className="rounded-sm px-1 font-normal lg:hidden">
+                  {selectedValues.size}
+                </Badge>
+                <div className="hidden space-x-1 lg:flex">
+                  {selectedValues.size > 2 ? (
+                    <Badge variant="secondary" className="rounded-sm px-1 font-normal">
+                      {t("facetedFilter.selected", { n: selectedValues.size })}
+                    </Badge>
+                  ) : (
+                    options
+                      .filter((option) => selectedValues.has(option.value))
+                      .map((option) => (
+                        <Badge
+                          variant="secondary"
+                          key={option.value}
+                          className="rounded-sm px-1 font-normal"
+                        >
+                          {option.label}
+                        </Badge>
+                      ))
+                  )}
+                </div>
+              </>
+            )}
+          </Button>
+        }
+      />
+      <PopoverContent className="w-50 p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>{t("noResults")}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value);
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value);
+                      } else if (single) {
+                        selectedValues.clear();
+                        selectedValues.add(option.value);
+                      } else {
+                        selectedValues.add(option.value);
+                      }
+                      const filterValues = Array.from(selectedValues);
+                      column?.setFilterValue(filterValues.length ? filterValues : undefined);
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "flex size-4 items-center justify-center rounded-sm border border-primary",
+                        isSelected
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible"
+                      )}
+                    >
+                      <CheckIcon className={cn("h-4 w-4 text-background")} />
+                    </div>
+                    {option.icon && <option.icon className="size-4 text-muted-foreground" />}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ms-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => column?.setFilterValue(undefined)}
+                    className="justify-center text-center"
+                  >
+                    {t("facetedFilter.clear")}
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/data-table/index.ts

@@ -0,0 +1,5 @@
+export { DataTable, type DataTableProps } from "./data-table";
+export { DataTablePagination } from "./pagination";
+export { DataTableColumnHeader } from "./column-header";
+export { DataTableToolbar } from "./toolbar";
+export { DataTableBulkActions } from "./bulk-actions";