@icomponents/react 0.1.0

package/src/components/layout/nav-group.tsx

@@ -0,0 +1,185 @@
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@icomponents/react/components/ui/collapsible";
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
+} from "@icomponents/react/components/ui/sidebar";
+import { Link, useLocation } from "@tanstack/react-router";
+import { ChevronRight } from "lucide-react";
+import { type ReactNode } from "react";
+
+import { TESTID, testid } from "../../testids";
+import { Badge } from "../ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import {
+  type NavCollapsible,
+  type NavItem,
+  type NavLink,
+  type NavGroup as NavGroupProps,
+} from "./types";
+
+/**
+ * Устойчивая идентичность пункта меню — его АДРЕС, а не подпись.
+ *
+ * Подпись пункта — это перевод: «Companies» и «Компании» — один и тот же пункт, и e2e, написанный
+ * по подписи, краснеет от смены локали или редизайна, ничего не доказав (ровно так протух
+ * `platform.e2e.ts`). Адрес же не меняется ни от перевода, ни от вёрстки — и он же отвечает на
+ * вопрос, который тест на самом деле задаёт: «виден ли пользователю путь в этот раздел».
+ *
+ * `/organization-users` → `nav-item-organization-users`, `/` → `nav-item-root`.
+ */
+const navKey = (url: string | undefined): string =>
+  (url ?? "").replace(/^\/+/, "").replaceAll("/", "-") || "root";
+
+export function NavGroup({ title, items }: NavGroupProps) {
+  const { state, isMobile } = useSidebar();
+  const href = useLocation({ select: (location) => location.href });
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>{title}</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => {
+          const key = `${item.title}-${item.url}`;
+
+          if (!item.items) return <SidebarMenuLink key={key} item={item} href={href} />;
+
+          if (state === "collapsed" && !isMobile)
+            return <SidebarMenuCollapsedDropdown key={key} item={item} href={href} />;
+
+          return <SidebarMenuCollapsible key={key} item={item} href={href} />;
+        })}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}
+
+function NavBadge({ children }: { children: ReactNode }) {
+  return <Badge className="rounded-full px-1 py-0 text-xs">{children}</Badge>;
+}
+
+function SidebarMenuLink({ item, href }: { item: NavLink; href: string }) {
+  const { setOpenMobile } = useSidebar();
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton asChild isActive={checkIsActive(href, item)} tooltip={item.title}>
+        <Link
+          to={item.url}
+          {...testid(TESTID.navItem(navKey(item.url)))}
+          onClick={() => setOpenMobile(false)}
+        >
+          {item.icon && <item.icon />}
+          <span>{item.title}</span>
+          {item.badge && <NavBadge>{item.badge}</NavBadge>}
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}
+
+function SidebarMenuCollapsible({ item, href }: { item: NavCollapsible; href: string }) {
+  const { setOpenMobile } = useSidebar();
+  return (
+    <Collapsible
+      render={<SidebarMenuItem />}
+      defaultOpen={checkIsActive(href, item, true)}
+      className="group/collapsible"
+    >
+      <CollapsibleTrigger render={<SidebarMenuButton tooltip={item.title} />}>
+        {item.icon && <item.icon />}
+        <span>{item.title}</span>
+        {item.badge && <NavBadge>{item.badge}</NavBadge>}
+        <ChevronRight className="ms-auto transition-transform duration-200 group-data-open/collapsible:rotate-90 rtl:rotate-180" />
+      </CollapsibleTrigger>
+      <CollapsibleContent className="CollapsibleContent">
+        <SidebarMenuSub>
+          {item.items.map((subItem) => (
+            <SidebarMenuSubItem key={subItem.title}>
+              <SidebarMenuSubButton asChild isActive={checkIsActive(href, subItem)}>
+                <Link
+                  to={subItem.url}
+                  {...testid(TESTID.navItem(navKey(subItem.url)))}
+                  onClick={() => setOpenMobile(false)}
+                >
+                  {subItem.icon && <subItem.icon />}
+                  <span>{subItem.title}</span>
+                  {subItem.badge && <NavBadge>{subItem.badge}</NavBadge>}
+                </Link>
+              </SidebarMenuSubButton>
+            </SidebarMenuSubItem>
+          ))}
+        </SidebarMenuSub>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function SidebarMenuCollapsedDropdown({ item, href }: { item: NavCollapsible; href: string }) {
+  return (
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <SidebarMenuButton
+              tooltip={item.title}
+              isActive={checkIsActive(href, item)}
+              className="group/collapsed-dropdown"
+            >
+              {item.icon && <item.icon />}
+              <span>{item.title}</span>
+              {item.badge && <NavBadge>{item.badge}</NavBadge>}
+              <ChevronRight className="ms-auto transition-transform duration-200 group-data-popup-open/collapsed-dropdown:rotate-90" />
+            </SidebarMenuButton>
+          }
+        />
+        <DropdownMenuContent side="right" align="start" sideOffset={4}>
+          <DropdownMenuLabel>
+            {item.title} {item.badge ? `(${item.badge})` : ""}
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {item.items.map((sub) => (
+            <DropdownMenuItem
+              key={`${sub.title}-${sub.url}`}
+              render={
+                <Link
+                  to={sub.url}
+                  {...testid(TESTID.navItem(navKey(sub.url)))}
+                  className={`${checkIsActive(href, sub) ? "bg-secondary" : ""}`}
+                >
+                  {sub.icon && <sub.icon />}
+                  <span className="max-w-52 text-wrap">{sub.title}</span>
+                  {sub.badge && <span className="ms-auto text-xs">{sub.badge}</span>}
+                </Link>
+              }
+            />
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  );
+}
+
+function checkIsActive(href: string, item: NavItem, mainNav = false) {
+  return (
+    href === item.url || // /endpint?search=param
+    href.split("?")[0] === item.url || // endpoint
+    !!item?.items?.filter((i) => i.url === href).length || // if child nav is active
+    (mainNav && href.split("/")[1] !== "" && href.split("/")[1] === item?.url?.split("/")[1])
+  );
+}

package/src/components/layout/nav-user.tsx

@@ -0,0 +1,115 @@
+import { SignOutDialog } from "@icomponents/react/components/sign-out-dialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@icomponents/react/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@icomponents/react/components/ui/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@icomponents/react/components/ui/sidebar";
+import useDialogState from "@icomponents/react/hooks/use-dialog-state";
+import { Link, type LinkProps } from "@tanstack/react-router";
+import { ChevronsUpDown, LogOut } from "lucide-react";
+import { type ElementType } from "react";
+
+export type NavUserItem = {
+  title: string;
+  url: LinkProps["to"] | (string & {});
+  icon?: ElementType;
+};
+
+type NavUserProps = {
+  user: {
+    name: string;
+    email: string;
+    avatar?: string;
+  };
+  items: NavUserItem[];
+  onSignOut: () => void;
+};
+
+export function NavUser({ user, items, onSignOut }: NavUserProps) {
+  const { isMobile } = useSidebar();
+  const [open, setOpen] = useDialogState();
+
+  return (
+    <>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={
+                <SidebarMenuButton
+                  size="lg"
+                  className="data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground"
+                >
+                  <Avatar className="h-8 w-8 rounded-lg">
+                    <AvatarImage src={user.avatar} alt={user.name} />
+                    <AvatarFallback className="rounded-lg">SN</AvatarFallback>
+                  </Avatar>
+                  <div className="grid flex-1 text-start text-sm leading-tight">
+                    <span className="truncate font-semibold">{user.name}</span>
+                    <span className="truncate text-xs">{user.email}</span>
+                  </div>
+                  <ChevronsUpDown className="ms-auto size-4" />
+                </SidebarMenuButton>
+              }
+            />
+            <DropdownMenuContent
+              className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+              side={isMobile ? "bottom" : "right"}
+              align="end"
+              sideOffset={4}
+            >
+              <DropdownMenuLabel className="p-0 font-normal">
+                <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                  <Avatar className="h-8 w-8 rounded-lg">
+                    <AvatarImage src={user.avatar} alt={user.name} />
+                    <AvatarFallback className="rounded-lg">SN</AvatarFallback>
+                  </Avatar>
+                  <div className="grid flex-1 text-start text-sm leading-tight">
+                    <span className="truncate font-semibold">{user.name}</span>
+                    <span className="truncate text-xs">{user.email}</span>
+                  </div>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                {items.map((item) => (
+                  <DropdownMenuItem
+                    key={item.title}
+                    render={
+                      <Link to={item.url}>
+                        {item.icon && <item.icon />}
+                        {item.title}
+                      </Link>
+                    }
+                  />
+                ))}
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                data-testid="sign-out"
+                variant="destructive"
+                onClick={() => setOpen(true)}
+              >
+                <LogOut />
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+
+      <SignOutDialog open={!!open} onOpenChange={setOpen} onSignOut={onSignOut} />
+    </>
+  );
+}

package/src/components/layout/screen-header.tsx

@@ -0,0 +1,119 @@
+import { cn } from "@icomponents/react/lib/utils";
+import { TESTID, testid } from "@icomponents/react/testids";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+/**
+ * Шапка экрана — одна на всю консоль.
+ *
+ * Все экраны прототипа (`prototype/*.html`) несут `data-component="page-header"` ОДНОЙ структуры:
+ * моно-kicker с коротким штрихом бренда → `h1` display-шрифтом → абзац-объяснение → капсулы-бейджи,
+ * а справа — пара со-первичных действий. Это замер по семи экранам, а не догадка, поэтому шапка
+ * живёт компонентом, а не копией в каждом экране.
+ *
+ * Почему это важнее экономии строк: здесь навешен `TESTID.screenTitle`. Пока заголовок собирал
+ * каждый экран сам, контракт вёрстки держался на памяти автора — а забытый `data-testid` не роняет
+ * ни линтер, ни тайпчек, он тихо выключает e2e, который этот экран проверял.
+ *
+ * `description` и `actions` — `ReactNode`: в описании стоят моноширинные технические литералы
+ * (`draft → sandbox → active`, `409`), которые НЕ переводятся и собираются вызывающим экраном.
+ */
+const screenBadgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-[12px] whitespace-nowrap",
+  {
+    variants: {
+      tone: {
+        primary: "border-primary/40 bg-primary/10 font-medium text-primary",
+        neutral: "border-border bg-card text-muted-foreground",
+        success: "border-success/40 bg-success/10 font-semibold text-success",
+        destructive: "border-destructive/40 bg-destructive/10 font-semibold text-destructive",
+      },
+    },
+    defaultVariants: { tone: "neutral" },
+  }
+);
+
+export type ScreenBadgeTone = NonNullable<VariantProps<typeof screenBadgeVariants>["tone"]>;
+
+/**
+ * Капсула под заголовком: область действия права, режим, состояние стенда.
+ *
+ * Иконка типизирована структурно (`ComponentType<{ className }>`), а не импортом из набора: ядро
+ * не должно тащить зависимость на конкретную библиотеку иконок ради подписи в шапке.
+ */
+export function ScreenBadge({
+  tone,
+  icon: Icon,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof screenBadgeVariants> & {
+    icon?: React.ComponentType<{ className?: string }>;
+  }) {
+  return (
+    <span className={cn(screenBadgeVariants({ tone }), className)} {...props}>
+      {Icon ? <Icon className="size-3.5 shrink-0" /> : null}
+      {children}
+    </span>
+  );
+}
+
+type ScreenHeaderProps = {
+  /** Моно-капс над заголовком (`platform · control plane`). Латиница-термин — НЕ переводится. */
+  kicker?: string;
+  /** `h1` экрана. Несёт `TESTID.screenTitle` — отдельно вешать не нужно и не надо. */
+  title: React.ReactNode;
+  /** Абзац-объяснение. `ReactNode`, потому что внутри моноширинные литералы. */
+  description?: React.ReactNode;
+  /** Ряд капсул (`ScreenBadge`). */
+  badges?: React.ReactNode;
+  /** Со-первичные действия справа. */
+  actions?: React.ReactNode;
+  className?: string;
+};
+
+export function ScreenHeader({
+  kicker,
+  title,
+  description,
+  badges,
+  actions,
+  className,
+}: ScreenHeaderProps) {
+  return (
+    <section
+      className={cn("flex flex-wrap items-end justify-between gap-x-6 gap-y-4", className)}
+      data-slot="screen-header"
+    >
+      <div className="min-w-0">
+        {kicker ? (
+          <div className="flex items-center gap-2 font-mono text-[11px] font-medium tracking-[0.14em] text-muted-foreground uppercase">
+            <span className="h-px w-6 bg-primary" aria-hidden />
+            {kicker}
+          </div>
+        ) : null}
+
+        <h1
+          {...testid(TESTID.screenTitle)}
+          className={cn(
+            "font-display text-[32px] leading-[1.1] font-bold tracking-tight",
+            kicker && "mt-1.5"
+          )}
+        >
+          {title}
+        </h1>
+
+        {description ? (
+          <p className="mt-2 max-w-[64ch] text-[13px] leading-snug text-muted-foreground">
+            {description}
+          </p>
+        ) : null}
+
+        {badges ? <div className="mt-3 flex flex-wrap items-center gap-2">{badges}</div> : null}
+      </div>
+
+      {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
+    </section>
+  );
+}

package/src/components/layout/team-switcher.tsx

@@ -0,0 +1,84 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@icomponents/react/components/ui/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@icomponents/react/components/ui/sidebar";
+import { ChevronsUpDown, Plus } from "lucide-react";
+import * as React from "react";
+
+type TeamSwitcherProps = {
+  teams: {
+    name: string;
+    logo: React.ElementType;
+    plan: string;
+  }[];
+};
+
+export function TeamSwitcher({ teams }: TeamSwitcherProps) {
+  const { isMobile } = useSidebar();
+  const [activeTeam, setActiveTeam] = React.useState(teams[0]);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                className="data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground"
+              >
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <activeTeam.logo className="size-4" />
+                </div>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-semibold">{activeTeam.name}</span>
+                  <span className="truncate text-xs">{activeTeam.plan}</span>
+                </div>
+                <ChevronsUpDown className="ms-auto" />
+              </SidebarMenuButton>
+            }
+          />
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">Teams</DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/src/components/layout/top-nav.tsx

@@ -0,0 +1,68 @@
+import { Button } from "@icomponents/react/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@icomponents/react/components/ui/dropdown-menu";
+import { cn } from "@icomponents/react/lib/utils";
+import { Link } from "@tanstack/react-router";
+import { Menu } from "lucide-react";
+
+type TopNavProps = React.HTMLAttributes<HTMLElement> & {
+  links: {
+    title: string;
+    href: string;
+    isActive: boolean;
+    disabled?: boolean;
+  }[];
+};
+
+export function TopNav({ className, links, ...props }: TopNavProps) {
+  return (
+    <>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger
+          render={
+            <Button size="icon" variant="outline" className={cn("md:size-7 lg:hidden", className)}>
+              <Menu />
+              <span className="sr-only">Toggle navigation menu</span>
+            </Button>
+          }
+        />
+        <DropdownMenuContent side="bottom" align="start">
+          {links.map(({ title, href, isActive, disabled }) => (
+            <DropdownMenuItem
+              key={`${title}-${href}`}
+              render={
+                <Link
+                  to={href}
+                  className={!isActive ? "text-muted-foreground" : ""}
+                  disabled={disabled}
+                >
+                  {title}
+                </Link>
+              }
+            />
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <nav
+        className={cn("hidden items-center space-x-4 lg:flex lg:space-x-4 xl:space-x-6", className)}
+        {...props}
+      >
+        {links.map(({ title, href, isActive, disabled }) => (
+          <Link
+            key={`${title}-${href}`}
+            to={href}
+            disabled={disabled}
+            className={`text-sm font-medium transition-colors hover:text-primary ${isActive ? "" : "text-muted-foreground"}`}
+          >
+            {title}
+          </Link>
+        ))}
+      </nav>
+    </>
+  );
+}

package/src/components/layout/types.ts

@@ -0,0 +1,44 @@
+import { type LinkProps } from "@tanstack/react-router";
+
+type User = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+type Team = {
+  name: string;
+  logo: React.ElementType;
+  plan: string;
+};
+
+type BaseNavItem = {
+  title: string;
+  badge?: string;
+  icon?: React.ElementType;
+};
+
+type NavLink = BaseNavItem & {
+  url: LinkProps["to"] | (string & {});
+  items?: never;
+};
+
+type NavCollapsible = BaseNavItem & {
+  items: (BaseNavItem & { url: LinkProps["to"] | (string & {}) })[];
+  url?: never;
+};
+
+type NavItem = NavCollapsible | NavLink;
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+};
+
+type SidebarData = {
+  user: User;
+  teams: Team[];
+  navGroups: NavGroup[];
+};
+
+export type { SidebarData, NavGroup, NavItem, NavCollapsible, NavLink };

package/src/components/learn-more.tsx

@@ -0,0 +1,35 @@
+import { Button } from "@icomponents/react/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@icomponents/react/components/ui/popover";
+import { cn } from "@icomponents/react/lib/utils";
+import { CircleHelp } from "lucide-react";
+
+type LearnMoreProps = Omit<React.ComponentProps<typeof Popover>, "children"> & {
+  children?: React.ReactNode;
+  contentProps?: React.ComponentProps<typeof PopoverContent>;
+  triggerProps?: React.ComponentProps<typeof PopoverTrigger>;
+};
+
+export function LearnMore({ children, contentProps, triggerProps, ...props }: LearnMoreProps) {
+  return (
+    <Popover {...props}>
+      <PopoverTrigger
+        {...triggerProps}
+        className={cn("size-5 rounded-full", triggerProps?.className)}
+        render={
+          <Button variant="outline" size="icon">
+            <span className="sr-only">Learn more</span>
+            <CircleHelp className="size-4 [&>circle]:hidden" />
+          </Button>
+        }
+      />
+      <PopoverContent
+        side="top"
+        align="start"
+        {...contentProps}
+        className={cn("text-sm text-muted-foreground", contentProps?.className)}
+      >
+        {children}
+      </PopoverContent>
+    </Popover>
+  );
+}