@icomponents/react 0.1.0

package/src/assets/custom/icon-sidebar-sidebar.tsx

@@ -0,0 +1,48 @@
+import { type SVGProps } from "react";
+
+export function IconSidebarSidebar(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      data-name="icon-sidebar-sidebar"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 79.86 51.14"
+      {...props}
+    >
+      <path
+        d="M23.42.51h51.99c2.21 0 4 1.79 4 4v42.18c0 2.21-1.79 4-4 4H23.42s-.04-.02-.04-.04V.55s.02-.04.04-.04z"
+        opacity={0.2}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <path
+        fill="none"
+        opacity={0.72}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth="2px"
+        d="M5.56 14.88L17.78 14.88"
+      />
+      <path
+        fill="none"
+        opacity={0.48}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth="2px"
+        d="M5.56 22.09L16.08 22.09"
+      />
+      <path
+        fill="none"
+        opacity={0.55}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth="2px"
+        d="M5.56 18.38L14.93 18.38"
+      />
+      <g strokeLinecap="round" strokeMiterlimit={10}>
+        <circle cx={7.51} cy={7.4} r={2.54} opacity={0.8} />
+        <path fill="none" opacity={0.8} strokeWidth="2px" d="M12.06 6.14L17.78 6.14" />
+        <path fill="none" opacity={0.6} d="M11.85 8.79L16.91 8.79" />
+      </g>
+    </svg>
+  );
+}

package/src/assets/custom/icon-theme-dark.tsx

@@ -0,0 +1,36 @@
+import { type SVGProps } from "react";
+
+export function IconThemeDark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      data-name="icon-theme-dark"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 79.86 51.14"
+      {...props}
+    >
+      <g fill="#1d2b3f">
+        <rect x={0.53} y={0.5} width={78.83} height={50.14} rx={3.5} ry={3.5} />
+        <path d="M75.86 1c1.65 0 3 1.35 3 3v43.14c0 1.65-1.35 3-3 3H4.03c-1.65 0-3-1.35-3-3V4c0-1.65 1.35-3 3-3h71.83m0-1H4.03c-2.21 0-4 1.79-4 4v43.14c0 2.21 1.79 4 4 4h71.83c2.21 0 4-1.79 4-4V4c0-2.21-1.79-4-4-4z" />
+      </g>
+      <path d="M22.88 0h52.97c2.21 0 4 1.79 4 4v43.14c0 2.21-1.79 4-4 4H22.88V0z" fill="#0d1628" />
+      <circle cx={6.7} cy={7.04} r={3.54} fill="#426187" />
+      <path
+        d="M18.12 6.39h-5.87c-.6 0-1.09-.45-1.09-1s.49-1 1.09-1h5.87c.6 0 1.09.45 1.09 1s-.49 1-1.09 1zM16.55 9.77h-4.24c-.55 0-1-.45-1-1s.45-1 1-1h4.24c.55 0 1 .45 1 1s-.45 1-1 1zM18.32 17.37H4.59c-.69 0-1.25-.47-1.25-1.05s.56-1.05 1.25-1.05h13.73c.69 0 1.25.47 1.25 1.05s-.56 1.05-1.25 1.05zM15.34 21.26h-11c-.55 0-1-.41-1-.91s.45-.91 1-.91h11c.55 0 1 .41 1 .91s-.45.91-1 .91zM16.46 25.57H4.43c-.6 0-1.09-.44-1.09-.98s.49-.98 1.09-.98h12.03c.6 0 1.09.44 1.09.98s-.49.98-1.09.98z"
+        fill="#426187"
+      />
+      <g fill="#2a62bc">
+        <rect x={33.36} y={19.73} width={2.75} height={3.42} rx={0.33} ry={0.33} opacity={0.32} />
+        <rect x={29.64} y={16.57} width={2.75} height={6.58} rx={0.33} ry={0.33} opacity={0.44} />
+        <rect x={37.16} y={14.44} width={2.75} height={8.7} rx={0.33} ry={0.33} opacity={0.53} />
+        <rect x={41.19} y={10.75} width={2.75} height={12.4} rx={0.33} ry={0.33} opacity={0.53} />
+      </g>
+      <circle cx={62.74} cy={16.32} r={8} fill="#2f5491" opacity={0.5} />
+      <path
+        d="M62.74 16.32l4.1-6.87c1.19.71 2.18 1.72 2.86 2.92s1.04 2.57 1.04 3.95h-8z"
+        fill="#2f5491"
+        opacity={0.74}
+      />
+      <rect x={29.64} y={27.75} width={41.62} height={18.62} rx={1.69} ry={1.69} fill="#17273f" />
+    </svg>
+  );
+}

package/src/assets/custom/icon-theme-light.tsx

@@ -0,0 +1,35 @@
+import { type SVGProps } from "react";
+
+export function IconThemeLight(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      data-name="icon-theme-light"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 79.86 51.14"
+      {...props}
+    >
+      <g fill="#d9d9d9">
+        <rect x={0.53} y={0.5} width={78.83} height={50.14} rx={3.5} ry={3.5} />
+        <path d="M75.86 1c1.65 0 3 1.35 3 3v43.14c0 1.65-1.35 3-3 3H4.03c-1.65 0-3-1.35-3-3V4c0-1.65 1.35-3 3-3h71.83m0-1H4.03c-2.21 0-4 1.79-4 4v43.14c0 2.21 1.79 4 4 4h71.83c2.21 0 4-1.79 4-4V4c0-2.21-1.79-4-4-4z" />
+      </g>
+      <path d="M22.88 0h52.97c2.21 0 4 1.79 4 4v43.14c0 2.21-1.79 4-4 4H22.88V0z" fill="#ecedef" />
+      <circle cx={6.7} cy={7.04} r={3.54} fill="#fff" />
+      <path
+        d="M18.12 6.39h-5.87c-.6 0-1.09-.45-1.09-1s.49-1 1.09-1h5.87c.6 0 1.09.45 1.09 1s-.49 1-1.09 1zM16.55 9.77h-4.24c-.55 0-1-.45-1-1s.45-1 1-1h4.24c.55 0 1 .45 1 1s-.45 1-1 1zM18.32 17.37H4.59c-.69 0-1.25-.47-1.25-1.05s.56-1.05 1.25-1.05h13.73c.69 0 1.25.47 1.25 1.05s-.56 1.05-1.25 1.05zM15.34 21.26h-11c-.55 0-1-.41-1-.91s.45-.91 1-.91h11c.55 0 1 .41 1 .91s-.45.91-1 .91zM16.46 25.57H4.43c-.6 0-1.09-.44-1.09-.98s.49-.98 1.09-.98h12.03c.6 0 1.09.44 1.09.98s-.49.98-1.09.98z"
+        fill="#fff"
+      />
+      <g fill="#c0c4c4">
+        <rect x={33.36} y={19.73} width={2.75} height={3.42} rx={0.33} ry={0.33} opacity={0.32} />
+        <rect x={29.64} y={16.57} width={2.75} height={6.58} rx={0.33} ry={0.33} opacity={0.44} />
+        <rect x={37.16} y={14.44} width={2.75} height={8.7} rx={0.33} ry={0.33} opacity={0.53} />
+        <rect x={41.19} y={10.75} width={2.75} height={12.4} rx={0.33} ry={0.33} opacity={0.53} />
+      </g>
+      <circle cx={62.74} cy={16.32} r={8} fill="#fff" />
+      <g fill="#d9d9d9">
+        <path d="M63.62 15.82L67 10.15c.93.64 1.7 1.48 2.26 2.47.56.98.89 2.08.96 3.21h-6.6z" />
+        <path d="M67.14 10.88a6.977 6.977 0 012.52 4.44h-5.17l2.65-4.44m-.31-1.43l-4.1 6.87h8c0-1.39-.36-2.75-1.04-3.95s-1.67-2.21-2.86-2.92z" />
+      </g>
+      <rect x={29.64} y={27.75} width={41.62} height={18.62} rx={1.69} ry={1.69} fill="#fff" />
+    </svg>
+  );
+}

package/src/assets/custom/icon-theme-system.tsx

@@ -0,0 +1,113 @@
+import { cn } from "@icomponents/react/lib/utils";
+import { type SVGProps } from "react";
+
+// Раскраску по состоянию радио-кнопки задаёт вызывающий (config-drawer) — одинаково для всех трёх
+// иконок темы, через group-data-checked/group-data-unchecked. Здесь её дублировать не нужно: раньше
+// тут висел радиксовый `group-data-[state=unchecked]`, которого Base UI не выставляет — селектор был
+// мёртв, а light/dark-иконки такой строки и не имели.
+export function IconThemeSystem({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      data-name="icon-theme-system"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 79.86 51.14"
+      className={cn("overflow-hidden rounded-[6px]", className)}
+      {...props}
+    >
+      <path opacity={0.2} d="M0 0.03H22.88V51.17H0z" />
+      <circle
+        cx={6.7}
+        cy={7.04}
+        r={3.54}
+        fill="#fff"
+        opacity={0.8}
+        stroke="#fff"
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <path
+        d="M18.12 6.39h-5.87c-.6 0-1.09-.45-1.09-1s.49-1 1.09-1h5.87c.6 0 1.09.45 1.09 1s-.49 1-1.09 1zM16.55 9.77h-4.24c-.55 0-1-.45-1-1s.45-1 1-1h4.24c.55 0 1 .45 1 1s-.45 1-1 1z"
+        fill="#fff"
+        stroke="none"
+        opacity={0.75}
+      />
+      <path
+        d="M18.32 17.37H4.59c-.69 0-1.25-.47-1.25-1.05s.56-1.05 1.25-1.05h13.73c.69 0 1.25.47 1.25 1.05s-.56 1.05-1.25 1.05z"
+        fill="#fff"
+        stroke="none"
+        opacity={0.72}
+      />
+      <path
+        d="M15.34 21.26h-11c-.55 0-1-.41-1-.91s.45-.91 1-.91h11c.55 0 1 .41 1 .91s-.45.91-1 .91z"
+        fill="#fff"
+        stroke="none"
+        opacity={0.55}
+      />
+      <path
+        d="M16.46 25.57H4.43c-.6 0-1.09-.44-1.09-.98s.49-.98 1.09-.98h12.03c.6 0 1.09.44 1.09.98s-.49.98-1.09.98z"
+        fill="#fff"
+        stroke="none"
+        opacity={0.67}
+      />
+      <rect
+        x={33.36}
+        y={19.73}
+        width={2.75}
+        height={3.42}
+        rx={0.33}
+        ry={0.33}
+        opacity={0.31}
+        stroke="none"
+      />
+      <rect
+        x={29.64}
+        y={16.57}
+        width={2.75}
+        height={6.58}
+        rx={0.33}
+        ry={0.33}
+        opacity={0.4}
+        stroke="none"
+      />
+      <rect
+        x={37.16}
+        y={14.44}
+        width={2.75}
+        height={8.7}
+        rx={0.33}
+        ry={0.33}
+        opacity={0.26}
+        stroke="none"
+      />
+      <rect
+        x={41.19}
+        y={10.75}
+        width={2.75}
+        height={12.4}
+        rx={0.33}
+        ry={0.33}
+        opacity={0.37}
+        stroke="none"
+      />
+      <g>
+        <circle cx={62.74} cy={16.32} r={8} opacity={0.25} />
+        <path
+          d="M62.74 16.32l4.1-6.87c1.19.71 2.18 1.72 2.86 2.92s1.04 2.57 1.04 3.95h-8z"
+          opacity={0.45}
+        />
+      </g>
+      <rect
+        x={29.64}
+        y={27.75}
+        width={41.62}
+        height={18.62}
+        rx={1.69}
+        ry={1.69}
+        opacity={0.3}
+        stroke="none"
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+    </svg>
+  );
+}

package/src/components/admin-page-header.tsx

@@ -0,0 +1,29 @@
+import { TESTID, testid } from "@icomponents/react/testids";
+import type { ReactNode } from "react";
+
+// The title/description/primary-action row shared by every admin page shell (§3). Extracted
+// verbatim from companies-page.tsx so adopting slices drop their inline copy for <AdminPageHeader>.
+export type AdminPageHeaderProps = {
+  title: string;
+  description: string;
+  action?: ReactNode;
+};
+
+/**
+ * Шапка экрана. Несёт `data-testid` контракта (см. `@icomponents/react/testids`): по ним тесты узнают,
+ * что экран смонтировался, — независимо от того, наша это вёрстка или вёрстка прототипа, в которую
+ * вайрится логика.
+ */
+export function AdminPageHeader({ title, description, action }: AdminPageHeaderProps) {
+  return (
+    <div className="flex flex-wrap items-end justify-between gap-2">
+      <div>
+        <h2 {...testid(TESTID.screenTitle)} className="text-2xl font-bold tracking-tight">
+          {title}
+        </h2>
+        <p className="text-muted-foreground">{description}</p>
+      </div>
+      {action}
+    </div>
+  );
+}

package/src/components/color-theme-switch.tsx

@@ -0,0 +1,93 @@
+import { Button } from "@icomponents/react/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@icomponents/react/components/ui/dropdown-menu";
+import { CheckIcon, PaletteIcon } from "lucide-react";
+import { useState } from "react";
+
+/** One selectable color theme (palette). `id` maps to a `[data-theme="<id>"]` block in the app's
+ *  theme.css; the option whose id is "default" clears the attribute (i.e. the base :root/.dark theme). */
+export type ColorThemeOption = { id: string; label: string };
+
+/** localStorage key shared with the no-flash inline script in index.html / spa-fallback.html. */
+export const COLOR_THEME_STORAGE_KEY = "color-theme";
+
+function getSavedColorTheme(themes: ColorThemeOption[], fallback: string): string {
+  try {
+    const saved = localStorage.getItem(COLOR_THEME_STORAGE_KEY);
+    return themes.some((t) => t.id === saved) ? (saved as string) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+/**
+ * Color-theme (palette) switcher — orthogonal to the light/dark `ThemeSwitch`.
+ *
+ * Sets `data-theme="<id>"` on <html> and persists to localStorage["color-theme"]. The option with
+ * id "default" (or the first option when none is "default") clears the attribute, falling back to the
+ * base :root/.dark theme. Each palette lives in the app's theme.css as `[data-theme="<id>"]` (+ its
+ * `.dark` variant), so it composes with the light/dark class. Pair with the no-flash inline script in
+ * index.html so the saved theme applies before first paint.
+ *
+ * The theme list is product-specific and passed in — the mechanism is generic.
+ */
+export function ColorThemeSwitch({
+  themes,
+  ariaLabel = "Color theme",
+}: {
+  themes: ColorThemeOption[];
+  ariaLabel?: string;
+}) {
+  const fallback = themes[0]?.id ?? "default";
+  const [colorTheme, setColorTheme] = useState<string>(() => getSavedColorTheme(themes, fallback));
+
+  const selectColorTheme = (id: string) => {
+    try {
+      localStorage.setItem(COLOR_THEME_STORAGE_KEY, id);
+    } catch {
+      /* storage unavailable — still apply for this session */
+    }
+    if (id === "default") document.documentElement.removeAttribute("data-theme");
+    else document.documentElement.setAttribute("data-theme", id);
+    setColorTheme(id);
+  };
+
+  // Nothing to switch between — don't render the control.
+  if (themes.length < 2) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            aria-label={ariaLabel}
+            data-testid="color-theme-switch"
+            size="icon"
+            variant="ghost"
+          />
+        }
+      >
+        <PaletteIcon />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuGroup>
+          {themes.map(({ id, label }) => (
+            <DropdownMenuItem
+              data-testid={`color-theme-${id}`}
+              key={id}
+              onClick={() => selectColorTheme(id)}
+            >
+              {label}
+              {colorTheme === id && <CheckIcon className="ms-auto" />}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/coming-soon.tsx

@@ -0,0 +1,16 @@
+import { Telescope } from "lucide-react";
+
+export function ComingSoon() {
+  return (
+    <div className="h-svh">
+      <div className="m-auto flex h-full w-full flex-col items-center justify-center gap-2">
+        <Telescope size={72} />
+        <h1 className="text-4xl leading-tight font-bold">Coming Soon!</h1>
+        <p className="text-center text-muted-foreground">
+          This page has not been created yet. <br />
+          Stay tuned though!
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/command-menu.tsx

@@ -0,0 +1,98 @@
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@icomponents/react/components/ui/command";
+import { useSearch } from "@icomponents/react/context/search-provider";
+import { useTheme } from "@icomponents/react/context/theme-provider";
+import { useTranslation } from "@icomponents/react/i18n/use-translation";
+import { useNavigate } from "@tanstack/react-router";
+import { ArrowRight, ChevronRight, Laptop, Moon, Sun } from "lucide-react";
+import React from "react";
+
+import { type NavGroup } from "./layout/types";
+import { ScrollArea } from "./ui/scroll-area";
+
+type CommandMenuProps = {
+  navGroups: NavGroup[];
+};
+
+export function CommandMenu({ navGroups }: CommandMenuProps) {
+  const navigate = useNavigate();
+  const { setTheme } = useTheme();
+  const { open, setOpen } = useSearch();
+  const { t } = useTranslation("common");
+
+  const runCommand = React.useCallback(
+    (command: () => unknown) => {
+      setOpen(false);
+      command();
+    },
+    [setOpen]
+  );
+
+  return (
+    <CommandDialog modal open={open} onOpenChange={setOpen}>
+      <CommandInput placeholder={t("commandMenu.placeholder")} />
+      <CommandList>
+        <ScrollArea className="h-72 pe-1">
+          <CommandEmpty>{t("noResults")}</CommandEmpty>
+          {navGroups.map((group) => (
+            <CommandGroup key={group.title} heading={group.title}>
+              {group.items.map((navItem, i) => {
+                if (navItem.url)
+                  return (
+                    <CommandItem
+                      key={`${navItem.url}-${i}`}
+                      value={navItem.title}
+                      onSelect={() => {
+                        runCommand(() => navigate({ to: navItem.url }));
+                      }}
+                    >
+                      <div className="flex size-4 items-center justify-center">
+                        <ArrowRight className="size-2 text-muted-foreground/80" />
+                      </div>
+                      {navItem.title}
+                    </CommandItem>
+                  );
+
+                return navItem.items?.map((subItem, i) => (
+                  <CommandItem
+                    key={`${navItem.title}-${subItem.url}-${i}`}
+                    value={`${navItem.title}-${subItem.url}`}
+                    onSelect={() => {
+                      runCommand(() => navigate({ to: subItem.url }));
+                    }}
+                  >
+                    <div className="flex size-4 items-center justify-center">
+                      <ArrowRight className="size-2 text-muted-foreground/80" />
+                    </div>
+                    {navItem.title} <ChevronRight /> {subItem.title}
+                  </CommandItem>
+                ));
+              })}
+            </CommandGroup>
+          ))}
+          <CommandSeparator />
+          <CommandGroup heading={t("theme.title")}>
+            <CommandItem onSelect={() => runCommand(() => setTheme("light"))}>
+              <Sun /> <span>{t("theme.light")}</span>
+            </CommandItem>
+            <CommandItem onSelect={() => runCommand(() => setTheme("dark"))}>
+              <Moon className="scale-90" />
+              <span>{t("theme.dark")}</span>
+            </CommandItem>
+            <CommandItem onSelect={() => runCommand(() => setTheme("system"))}>
+              <Laptop />
+              <span>{t("theme.system")}</span>
+            </CommandItem>
+          </CommandGroup>
+        </ScrollArea>
+      </CommandList>
+    </CommandDialog>
+  );
+}