@icomponents/react 0.1.0

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

@@ -0,0 +1,127 @@
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon,
+} from "@radix-ui/react-icons";
+import { Button } from "@icomponents/react/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@icomponents/react/components/ui/select";
+import { cn, getPageNumbers } from "@icomponents/react/lib/utils";
+import { type Table } from "@tanstack/react-table";
+
+type DataTablePaginationProps<TData> = {
+  table: Table<TData>;
+  className?: string;
+};
+
+export function DataTablePagination<TData>({ table, className }: DataTablePaginationProps<TData>) {
+  const currentPage = table.getState().pagination.pageIndex + 1;
+  const totalPages = table.getPageCount();
+  const pageNumbers = getPageNumbers(currentPage, totalPages);
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between overflow-clip px-2",
+        "@max-2xl/content:flex-col-reverse @max-2xl/content:gap-4",
+        className
+      )}
+      style={{ overflowClipMargin: 1 }}
+    >
+      <div className="flex w-full items-center justify-between">
+        <div className="flex w-25 items-center justify-center text-sm font-medium @2xl/content:hidden">
+          Page {currentPage} of {totalPages}
+        </div>
+        <div className="flex items-center gap-2 @max-2xl/content:flex-row-reverse">
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+          >
+            <SelectTrigger className="h-8 w-17.5">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 30, 40, 50].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <p className="hidden text-sm font-medium sm:block">Rows per page</p>
+        </div>
+      </div>
+
+      <div className="flex items-center sm:space-x-6 lg:space-x-8">
+        <div className="flex w-25 items-center justify-center text-sm font-medium @max-3xl/content:hidden">
+          Page {currentPage} of {totalPages}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            className="size-8 p-0 @max-md/content:hidden"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to first page</span>
+            <DoubleArrowLeftIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="size-8 p-0"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeftIcon className="h-4 w-4" />
+          </Button>
+
+          {/* Page number buttons */}
+          {pageNumbers.map((pageNumber, index) => (
+            <div key={`${pageNumber}-${index}`} className="flex items-center">
+              {pageNumber === "..." ? (
+                <span className="px-1 text-sm text-muted-foreground">...</span>
+              ) : (
+                <Button
+                  variant={currentPage === pageNumber ? "default" : "outline"}
+                  className="h-8 min-w-8 px-2"
+                  onClick={() => table.setPageIndex((pageNumber as number) - 1)}
+                >
+                  <span className="sr-only">Go to page {pageNumber}</span>
+                  {pageNumber}
+                </Button>
+              )}
+            </div>
+          ))}
+
+          <Button
+            variant="outline"
+            className="size-8 p-0"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRightIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="size-8 p-0 @max-md/content:hidden"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to last page</span>
+            <DoubleArrowRightIcon className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/data-table/tanstack-table.d.ts

@@ -0,0 +1,12 @@
+import "@tanstack/react-table";
+
+// Module augmentation for the shared data-table pattern (mirrors the per-slice copies in
+// packages/iam/src/features/*/tanstack-table.d.ts). Identical augmentations merge without conflict.
+declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData, TValue> {
+    className?: string; // apply to both th and td
+    tdClassName?: string;
+    thClassName?: string;
+  }
+}

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

@@ -0,0 +1,88 @@
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { Button } from "@icomponents/react/components/ui/button";
+import { Input } from "@icomponents/react/components/ui/input";
+import { type Table } from "@tanstack/react-table";
+
+import { DataTableFacetedFilter } from "./faceted-filter";
+import { DataTableViewOptions } from "./view-options";
+
+type DataTableToolbarProps<TData> = {
+  table: Table<TData>;
+  searchPlaceholder?: string;
+  searchKey?: string;
+  filters?: {
+    columnId: string;
+    title: string;
+    options: {
+      label: string;
+      value: string;
+      icon?: React.ComponentType<{ className?: string }>;
+    }[];
+    testId?: string;
+    single?: boolean;
+  }[];
+  extra?: React.ReactNode;
+};
+
+export function DataTableToolbar<TData>({
+  table,
+  searchPlaceholder = "Filter...",
+  searchKey,
+  filters = [],
+  extra,
+}: DataTableToolbarProps<TData>) {
+  const isFiltered = table.getState().columnFilters.length > 0 || table.getState().globalFilter;
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex flex-1 flex-col-reverse items-start gap-y-2 sm:flex-row sm:items-center sm:space-x-2">
+        {searchKey ? (
+          <Input
+            placeholder={searchPlaceholder}
+            value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ""}
+            onChange={(event) => table.getColumn(searchKey)?.setFilterValue(event.target.value)}
+            className="h-8 w-37.5 lg:w-62.5"
+          />
+        ) : (
+          <Input
+            placeholder={searchPlaceholder}
+            value={table.getState().globalFilter ?? ""}
+            onChange={(event) => table.setGlobalFilter(event.target.value)}
+            className="h-8 w-37.5 lg:w-62.5"
+          />
+        )}
+        <div className="flex gap-x-2">
+          {filters.map((filter) => {
+            const column = table.getColumn(filter.columnId);
+            if (!column) return null;
+            return (
+              <DataTableFacetedFilter
+                key={filter.columnId}
+                column={column}
+                title={filter.title}
+                options={filter.options}
+                testId={filter.testId}
+                single={filter.single}
+              />
+            );
+          })}
+        </div>
+        {extra}
+        {isFiltered && (
+          <Button
+            variant="ghost"
+            onClick={() => {
+              table.resetColumnFilters();
+              table.setGlobalFilter("");
+            }}
+            className="h-8 px-2 lg:px-3"
+          >
+            Reset
+            <Cross2Icon className="ms-2 h-4 w-4" />
+          </Button>
+        )}
+      </div>
+      <DataTableViewOptions table={table} />
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { MixerHorizontalIcon } from "@radix-ui/react-icons";
+import { Button } from "@icomponents/react/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@icomponents/react/components/ui/dropdown-menu";
+import { type Table } from "@tanstack/react-table";
+
+type DataTableViewOptionsProps<TData> = {
+  table: Table<TData>;
+};
+
+export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger
+        render={
+          <Button variant="outline" size="sm" className="ms-auto hidden h-8 lg:flex">
+            <MixerHorizontalIcon className="size-4" />
+            View
+          </Button>
+        }
+      />
+      <DropdownMenuContent align="end" className="w-37.5">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide())
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {column.id}
+              </DropdownMenuCheckboxItem>
+            );
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/date-picker.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@icomponents/react/components/ui/button";
+import { Calendar } from "@icomponents/react/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@icomponents/react/components/ui/popover";
+import { format } from "date-fns";
+import { Calendar as CalendarIcon } from "lucide-react";
+
+type DatePickerProps = {
+  selected: Date | undefined;
+  onSelect: (date: Date | undefined) => void;
+  placeholder?: string;
+};
+
+export function DatePicker({ selected, onSelect, placeholder = "Pick a date" }: DatePickerProps) {
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            variant="outline"
+            data-empty={!selected}
+            className="w-60 justify-start text-start font-normal data-[empty=true]:text-muted-foreground"
+          >
+            {selected ? format(selected, "MMM d, yyyy") : <span>{placeholder}</span>}
+            <CalendarIcon className="ms-auto h-4 w-4 opacity-50" />
+          </Button>
+        }
+      />
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          captionLayout="dropdown"
+          selected={selected}
+          onSelect={onSelect}
+          disabled={(date: Date) => date > new Date() || date < new Date("1900-01-01")}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/detail-card.tsx

@@ -0,0 +1,63 @@
+import { cn } from "@icomponents/react/lib/utils";
+import * as React from "react";
+
+// Section card in the Evoca design language: a white surface with a hairline border, 4px radius and
+// a soft layered shadow, opened by a fixed-height header row (condensed display title + optional
+// right-aligned action). Reused across company detail / registry / dashboard so every panel reads
+// as one consistent, richer card system (vs a flat bordered box).
+export function DetailCard({
+  title,
+  action,
+  bodyClassName,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"section"> & {
+  title: React.ReactNode;
+  action?: React.ReactNode;
+  bodyClassName?: string;
+}) {
+  return (
+    <section
+      data-component="detail-card"
+      className={cn("overflow-hidden rounded border border-border bg-card soft-shadow", className)}
+      {...props}
+    >
+      <div className="flex h-14 items-center justify-between gap-3 border-b border-border px-5">
+        <h2 className="font-display text-[20px] font-bold leading-none tracking-tight text-foreground">
+          {title}
+        </h2>
+        {action}
+      </div>
+      <div className={bodyClassName}>{children}</div>
+    </section>
+  );
+}
+
+// One definition-list row inside a DetailCard body (wrap rows in a <dl className="divide-y
+// divide-border">). Label is muted + fixed-width; value is foreground, monospaced+tabular for
+// numeric/identifier data.
+export function DetailRow({
+  label,
+  value,
+  mono,
+}: {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  mono?: boolean;
+}) {
+  return (
+    <div className="flex items-start gap-4 px-5 py-3">
+      <dt className="w-44 shrink-0 text-[13px] text-muted-foreground">{label}</dt>
+      <dd
+        className={
+          mono
+            ? "font-mono text-[13.5px] tabular-nums text-foreground"
+            : "text-[14px] font-medium text-foreground"
+        }
+      >
+        {value}
+      </dd>
+    </div>
+  );
+}

package/src/components/language-switch.tsx

@@ -0,0 +1,38 @@
+import { Button } from "@icomponents/react/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@icomponents/react/components/ui/dropdown-menu";
+import { useLanguage } from "@icomponents/react/context/language-provider";
+import type { Locale } from "@icomponents/react/i18n/types";
+import { cn } from "@icomponents/react/lib/utils";
+import { Check, Languages } from "lucide-react";
+
+const LABEL: Record<Locale, string> = { ru: "Русский", en: "English" };
+
+/** Компактный переключатель языка для шапки (рядом с ThemeSwitch). Меняет i18next + куку + <html lang>. */
+export function LanguageSwitch() {
+  const { lang, langs, setLang } = useLanguage();
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger
+        render={
+          <Button variant="ghost" size="icon" className="scale-95 rounded-full">
+            <Languages className="size-[1.2rem]" />
+            <span className="sr-only">Сменить язык / Switch language</span>
+          </Button>
+        }
+      />
+      <DropdownMenuContent align="end">
+        {langs.map((l) => (
+          <DropdownMenuItem key={l} onClick={() => setLang(l)}>
+            {LABEL[l]}
+            <Check size={14} className={cn("ms-auto", lang !== l && "hidden")} />
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/layout/app-sidebar.tsx

@@ -0,0 +1,59 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from "@icomponents/react/components/ui/sidebar";
+import { useLayout } from "@icomponents/react/context/layout-provider";
+import { TESTID, testid } from "@icomponents/react/testids";
+
+// import { AppTitle } from './app-title'
+import { NavGroup } from "./nav-group";
+import { NavUser, type NavUserItem } from "./nav-user";
+import { TeamSwitcher } from "./team-switcher";
+import { type NavGroup as NavGroupType } from "./types";
+
+type Team = {
+  name: string;
+  logo: React.ElementType;
+  plan: string;
+};
+
+type AppSidebarProps = {
+  user: {
+    name: string;
+    email: string;
+    avatar?: string;
+  };
+  navGroups: NavGroupType[];
+  teams: Team[];
+  navUserItems: NavUserItem[];
+  onSignOut: () => void;
+};
+
+export function AppSidebar({ user, navGroups, teams, navUserItems, onSignOut }: AppSidebarProps) {
+  const { collapsible, variant } = useLayout();
+
+  return (
+    <Sidebar collapsible={collapsible} variant={variant}>
+      <SidebarHeader>
+        <TeamSwitcher teams={teams} />
+
+        {/* Replace <TeamSwitch /> with the following <AppTitle />
+         /* if you want to use the normal app title instead of TeamSwitch dropdown */}
+        {/* <AppTitle /> */}
+      </SidebarHeader>
+      {/* Пропала навигация — человек заперт на одном экране, и это не «косметика» (см. testids.ts). */}
+      <SidebarContent {...testid(TESTID.nav)}>
+        {navGroups.map((props) => (
+          <NavGroup key={props.title} {...props} />
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={user} items={navUserItems} onSignOut={onSignOut} />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+}

package/src/components/layout/app-title.tsx

@@ -0,0 +1,62 @@
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@icomponents/react/components/ui/sidebar";
+import { cn } from "@icomponents/react/lib/utils";
+import { Link } from "@tanstack/react-router";
+import { Menu, X } from "lucide-react";
+
+import { Button } from "../ui/button";
+
+// `appName` mirrors config.appName (default "Admin Console") — threaded as a prop since this is a
+// client component with no server-config seam; callers that have the runtime config can pass it.
+export function AppTitle({ appName = "Admin Console" }: { appName?: string } = {}) {
+  const { setOpenMobile } = useSidebar();
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          size="lg"
+          className="gap-0 py-0 hover:bg-transparent active:bg-transparent"
+          asChild
+        >
+          <div>
+            <Link
+              to="/"
+              onClick={() => setOpenMobile(false)}
+              className="grid flex-1 text-start text-sm leading-tight"
+            >
+              <span className="truncate font-bold">{appName}</span>
+            </Link>
+            <ToggleSidebar />
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}
+
+function ToggleSidebar({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("aspect-square size-8 max-md:scale-125", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <X className="md:hidden" />
+      <Menu className="max-md:hidden" />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}

package/src/components/layout/header.tsx

@@ -0,0 +1,61 @@
+import { Separator } from "@icomponents/react/components/ui/separator";
+import { SidebarTrigger } from "@icomponents/react/components/ui/sidebar";
+import { cn } from "@icomponents/react/lib/utils";
+import { useEffect, useState } from "react";
+
+type HeaderProps = React.HTMLAttributes<HTMLElement> & {
+  fixed?: boolean;
+  /**
+   * Suppress the Header's own SidebarTrigger (+ its leading separator). The global
+   * SidebarRail already provides a "Toggle Sidebar" affordance on every authenticated
+   * page, so a page that would otherwise show two toggles (e.g. /company-audit) opts out
+   * here. Default false keeps every other Header page unchanged (AC-F4-5, narrow fix).
+   */
+  hideSidebarTrigger?: boolean;
+  ref?: React.Ref<HTMLElement>;
+};
+
+export function Header({ className, fixed, hideSidebarTrigger, children, ...props }: HeaderProps) {
+  const [offset, setOffset] = useState(0);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setOffset(document.body.scrollTop || document.documentElement.scrollTop);
+    };
+
+    // Add scroll listener to the body
+    document.addEventListener("scroll", onScroll, { passive: true });
+
+    // Clean up the event listener on unmount
+    return () => document.removeEventListener("scroll", onScroll);
+  }, []);
+
+  return (
+    <header
+      className={cn(
+        "z-50 h-16",
+        fixed && "header-fixed peer/header sticky top-0 w-[inherit]",
+        offset > 10 && fixed ? "shadow" : "shadow-none",
+        className
+      )}
+      {...props}
+    >
+      <div
+        className={cn(
+          "relative flex h-full items-center gap-3 p-4 sm:gap-4",
+          offset > 10 &&
+            fixed &&
+            "after:absolute after:inset-0 after:-z-10 after:bg-background/20 after:backdrop-blur-lg"
+        )}
+      >
+        {!hideSidebarTrigger && (
+          <>
+            <SidebarTrigger variant="outline" className="max-md:scale-125" />
+            <Separator orientation="vertical" className="h-6" />
+          </>
+        )}
+        {children}
+      </div>
+    </header>
+  );
+}

package/src/components/layout/main.tsx

@@ -0,0 +1,34 @@
+import { cn } from "@icomponents/react/lib/utils";
+import { TESTID, testid } from "@icomponents/react/testids";
+
+type MainProps = React.HTMLAttributes<HTMLElement> & {
+  fixed?: boolean;
+  fluid?: boolean;
+  ref?: React.Ref<HTMLElement>;
+};
+
+/**
+ * Контейнер содержимого КАЖДОГО экрана. Несёт `data-testid="screen"` — это и есть признак «экран
+ * смонтировался», по которому e2e отличает живой экран от каркаса и от страницы ошибки. Вешаем здесь,
+ * а не в шапке страницы: шапку экран может и не использовать (дашборд не использует), а контейнер —
+ * использует всегда.
+ */
+export function Main({ fixed, className, fluid, ...props }: MainProps) {
+  return (
+    <main
+      {...testid(TESTID.screen)}
+      data-layout={fixed ? "fixed" : "auto"}
+      className={cn(
+        "px-4 py-6",
+
+        // If layout is fixed, make the main container flex and grow
+        fixed && "flex grow flex-col overflow-hidden",
+
+        // If layout is not fluid, set the max-width
+        !fluid && "@7xl/content:mx-auto @7xl/content:w-full @7xl/content:max-w-7xl",
+        className
+      )}
+      {...props}
+    />
+  );
+}