@icomponents/react 0.1.0

package/src/components/config-drawer.tsx

@@ -0,0 +1,401 @@
+import { Radio as RadioItemPrim } from "@base-ui/react/radio";
+import { RadioGroup as Radio } from "@base-ui/react/radio-group";
+import { IconDir } from "@icomponents/react/assets/custom/icon-dir";
+import { IconLayoutCompact } from "@icomponents/react/assets/custom/icon-layout-compact";
+import { IconLayoutDefault } from "@icomponents/react/assets/custom/icon-layout-default";
+import { IconLayoutFull } from "@icomponents/react/assets/custom/icon-layout-full";
+import { IconSidebarFloating } from "@icomponents/react/assets/custom/icon-sidebar-floating";
+import { IconSidebarInset } from "@icomponents/react/assets/custom/icon-sidebar-inset";
+import { IconSidebarSidebar } from "@icomponents/react/assets/custom/icon-sidebar-sidebar";
+import { IconThemeDark } from "@icomponents/react/assets/custom/icon-theme-dark";
+import { IconThemeLight } from "@icomponents/react/assets/custom/icon-theme-light";
+import { IconThemeSystem } from "@icomponents/react/assets/custom/icon-theme-system";
+import { Button } from "@icomponents/react/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@icomponents/react/components/ui/sheet";
+import { useDirection } from "@icomponents/react/context/direction-provider";
+import { useOptionalLanguage } from "@icomponents/react/context/language-provider";
+import { type Collapsible, useLayout } from "@icomponents/react/context/layout-provider";
+import { useTheme } from "@icomponents/react/context/theme-provider";
+import type { Locale } from "@icomponents/react/i18n/types";
+import { useTranslation } from "@icomponents/react/i18n/use-translation";
+import { cn } from "@icomponents/react/lib/utils";
+import { CircleCheck, RotateCcw, Settings } from "lucide-react";
+import { type SVGProps } from "react";
+
+import { useSidebar } from "./ui/sidebar";
+
+export function ConfigDrawer() {
+  const { setOpen } = useSidebar();
+  const { resetDir } = useDirection();
+  const { resetTheme } = useTheme();
+  const { resetLayout } = useLayout();
+  const language = useOptionalLanguage();
+  const { t } = useTranslation("common");
+
+  const handleReset = () => {
+    setOpen(true);
+    resetDir();
+    resetTheme();
+    resetLayout();
+    language?.resetLang();
+  };
+
+  return (
+    <Sheet>
+      <SheetTrigger
+        render={
+          <Button
+            size="icon"
+            variant="ghost"
+            aria-label={t("configDrawer.open")}
+            className="rounded-full"
+          >
+            <Settings aria-hidden="true" />
+          </Button>
+        }
+      />
+      <SheetContent className="flex flex-col">
+        <SheetHeader className="pb-0 text-start">
+          <SheetTitle>{t("configDrawer.title")}</SheetTitle>
+          <SheetDescription>{t("configDrawer.description")}</SheetDescription>
+        </SheetHeader>
+        <div className="space-y-6 overflow-y-auto px-4">
+          <LanguageConfig />
+          <ThemeConfig />
+          <SidebarConfig />
+          <LayoutConfig />
+          <DirConfig />
+        </div>
+        <SheetFooter className="gap-2">
+          <Button
+            variant="destructive"
+            onClick={handleReset}
+            aria-label={t("configDrawer.resetAllAria")}
+          >
+            {t("configDrawer.reset")}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function SectionTitle({
+  title,
+  showReset = false,
+  onReset,
+  resetAriaLabel,
+  className,
+}: {
+  title: string;
+  showReset?: boolean;
+  onReset?: () => void;
+  /** Shown on the small per-section reset (RotateCcw) for accessibility and tests. */
+  resetAriaLabel?: string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "mb-2 flex items-center gap-2 text-sm font-semibold text-muted-foreground",
+        className
+      )}
+    >
+      {title}
+      {showReset && onReset && (
+        <Button
+          type="button"
+          size="icon"
+          variant="secondary"
+          className="size-4 rounded-full"
+          onClick={onReset}
+          aria-label={resetAriaLabel}
+        >
+          <RotateCcw className="size-3" />
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function RadioGroupItem({
+  item,
+  isTheme = false,
+}: {
+  item: {
+    value: string;
+    label: string;
+    icon: (props: SVGProps<SVGSVGElement>) => React.ReactElement;
+  };
+  isTheme?: boolean;
+}) {
+  const { t } = useTranslation("common");
+  return (
+    <RadioItemPrim.Root
+      value={item.value}
+      className={cn("group outline-none", "transition duration-200 ease-in")}
+      aria-label={t("configDrawer.selectOption", { label: item.label.toLowerCase() })}
+      aria-describedby={`${item.value}-description`}
+    >
+      <div
+        className={cn(
+          "relative rounded-[6px] ring-[1px] ring-border",
+          "group-data-checked:shadow-2xl group-data-checked:ring-primary",
+          "group-focus-visible:ring-2"
+        )}
+        role="img"
+        aria-hidden="false"
+        aria-label={t("configDrawer.optionPreview", { label: item.label })}
+      >
+        <CircleCheck
+          className={cn(
+            "size-6 fill-primary stroke-white",
+            "group-data-unchecked:hidden",
+            "absolute top-0 right-0 translate-x-1/2 -translate-y-1/2"
+          )}
+          aria-hidden="true"
+        />
+        <item.icon
+          className={cn(
+            !isTheme &&
+              "fill-primary stroke-primary group-data-unchecked:fill-muted-foreground group-data-unchecked:stroke-muted-foreground"
+          )}
+          aria-hidden="true"
+        />
+      </div>
+      <div className="mt-1 text-xs" id={`${item.value}-description`} aria-live="polite">
+        {item.label}
+      </div>
+    </RadioItemPrim.Root>
+  );
+}
+
+const LANG_LABEL: Record<Locale, string> = { ru: "Русский", en: "English" };
+
+/** Секция языка. Прячется, если приложение не обёрнуто в LanguageProvider (продукт ещё не включил i18n). */
+function LanguageConfig() {
+  const language = useOptionalLanguage();
+  if (!language) return null;
+  const { defaultLang, lang, langs, setLang } = language;
+  return (
+    <div>
+      <SectionTitle
+        title="Язык · Language"
+        showReset={lang !== defaultLang}
+        onReset={() => setLang(defaultLang)}
+        resetAriaLabel="Reset language to default"
+      />
+      <div className="flex gap-2">
+        {langs.map((l) => (
+          <Button
+            key={l}
+            type="button"
+            size="sm"
+            variant={l === lang ? "default" : "secondary"}
+            onClick={() => setLang(l)}
+            aria-pressed={l === lang}
+          >
+            {LANG_LABEL[l]}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ThemeConfig() {
+  const { defaultTheme, theme, setTheme } = useTheme();
+  const { t } = useTranslation("common");
+  return (
+    <div>
+      <SectionTitle
+        title={t("theme.title")}
+        showReset={theme !== defaultTheme}
+        onReset={() => setTheme(defaultTheme)}
+        resetAriaLabel={t("configDrawer.theme.resetAria")}
+      />
+      <Radio
+        value={theme}
+        onValueChange={(v) => setTheme(v as typeof theme)}
+        className="grid w-full max-w-md grid-cols-3 gap-4"
+        aria-label={t("configDrawer.theme.selectAria")}
+        aria-describedby="theme-description"
+      >
+        {[
+          {
+            value: "system",
+            label: t("theme.system"),
+            icon: IconThemeSystem,
+          },
+          {
+            value: "light",
+            label: t("theme.light"),
+            icon: IconThemeLight,
+          },
+          {
+            value: "dark",
+            label: t("theme.dark"),
+            icon: IconThemeDark,
+          },
+        ].map((item) => (
+          <RadioGroupItem key={item.value} item={item} isTheme />
+        ))}
+      </Radio>
+      <div id="theme-description" className="sr-only">
+        {t("configDrawer.theme.hint")}
+      </div>
+    </div>
+  );
+}
+
+function SidebarConfig() {
+  const { defaultVariant, variant, setVariant } = useLayout();
+  const { t } = useTranslation("common");
+  return (
+    <div className="max-md:hidden">
+      <SectionTitle
+        title={t("configDrawer.sidebar.title")}
+        showReset={defaultVariant !== variant}
+        onReset={() => setVariant(defaultVariant)}
+        resetAriaLabel={t("configDrawer.sidebar.resetAria")}
+      />
+      <Radio
+        value={variant}
+        onValueChange={(v) => setVariant(v as typeof variant)}
+        className="grid w-full max-w-md grid-cols-3 gap-4"
+        aria-label={t("configDrawer.sidebar.selectAria")}
+        aria-describedby="sidebar-description"
+      >
+        {[
+          {
+            value: "inset",
+            label: t("configDrawer.sidebar.inset"),
+            icon: IconSidebarInset,
+          },
+          {
+            value: "floating",
+            label: t("configDrawer.sidebar.floating"),
+            icon: IconSidebarFloating,
+          },
+          {
+            value: "sidebar",
+            label: t("configDrawer.sidebar.sidebar"),
+            icon: IconSidebarSidebar,
+          },
+        ].map((item) => (
+          <RadioGroupItem key={item.value} item={item} />
+        ))}
+      </Radio>
+      <div id="sidebar-description" className="sr-only">
+        {t("configDrawer.sidebar.hint")}
+      </div>
+    </div>
+  );
+}
+
+function LayoutConfig() {
+  const { open, setOpen } = useSidebar();
+  const { defaultCollapsible, collapsible, setCollapsible } = useLayout();
+  const { t } = useTranslation("common");
+
+  const radioState = open ? "default" : collapsible;
+
+  return (
+    <div className="max-md:hidden">
+      <SectionTitle
+        title={t("configDrawer.layout.title")}
+        showReset={radioState !== "default"}
+        onReset={() => {
+          setOpen(true);
+          setCollapsible(defaultCollapsible);
+        }}
+        resetAriaLabel={t("configDrawer.layout.resetAria")}
+      />
+      <Radio
+        value={radioState}
+        onValueChange={(v) => {
+          if (v === "default") {
+            setOpen(true);
+            return;
+          }
+          setOpen(false);
+          setCollapsible(v as Collapsible);
+        }}
+        className="grid w-full max-w-md grid-cols-3 gap-4"
+        aria-label={t("configDrawer.layout.selectAria")}
+        aria-describedby="layout-description"
+      >
+        {[
+          {
+            value: "default",
+            label: t("configDrawer.layout.default"),
+            icon: IconLayoutDefault,
+          },
+          {
+            value: "icon",
+            label: t("configDrawer.layout.compact"),
+            icon: IconLayoutCompact,
+          },
+          {
+            value: "offcanvas",
+            label: t("configDrawer.layout.full"),
+            icon: IconLayoutFull,
+          },
+        ].map((item) => (
+          <RadioGroupItem key={item.value} item={item} />
+        ))}
+      </Radio>
+      <div id="layout-description" className="sr-only">
+        {t("configDrawer.layout.hint")}
+      </div>
+    </div>
+  );
+}
+
+function DirConfig() {
+  const { defaultDir, dir, setDir } = useDirection();
+  const { t } = useTranslation("common");
+  return (
+    <div>
+      <SectionTitle
+        title={t("configDrawer.direction.title")}
+        showReset={defaultDir !== dir}
+        onReset={() => setDir(defaultDir)}
+        resetAriaLabel={t("configDrawer.direction.resetAria")}
+      />
+      <Radio
+        value={dir}
+        onValueChange={(v) => setDir(v as typeof dir)}
+        className="grid w-full max-w-md grid-cols-3 gap-4"
+        aria-label={t("configDrawer.direction.selectAria")}
+        aria-describedby="direction-description"
+      >
+        {[
+          {
+            value: "ltr",
+            label: t("configDrawer.direction.ltr"),
+            icon: (props: SVGProps<SVGSVGElement>) => <IconDir dir="ltr" {...props} />,
+          },
+          {
+            value: "rtl",
+            label: t("configDrawer.direction.rtl"),
+            icon: (props: SVGProps<SVGSVGElement>) => <IconDir dir="rtl" {...props} />,
+          },
+        ].map((item) => (
+          <RadioGroupItem key={item.value} item={item} />
+        ))}
+      </Radio>
+      <div id="direction-description" className="sr-only">
+        {t("configDrawer.direction.hint")}
+      </div>
+    </div>
+  );
+}

package/src/components/confirm-dialog.dom.test.tsx

@@ -0,0 +1,60 @@
+import { afterEach, describe, expect, it, mock } from "bun:test";
+
+import { TESTID } from "@icomponents/react/testids";
+import { cleanup, render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+
+import { ConfirmDialog } from "./confirm-dialog";
+
+/**
+ * DOM-тесты пишутся ПЕРЕД перекраской и специально так, чтобы её пережить.
+ *
+ * Правило одно: цепляемся за РОЛЬ и ТЕКСТ, а не за классы и разметку. Тема меняет классы, отступы и
+ * оттенки — и тест, написанный по `.btn-destructive`, покраснеет весь разом, ничего при этом не
+ * доказав. Тест, написанный по «кнопке с именем „Удалить“», покраснеет ровно тогда, когда кнопка
+ * действительно исчезла или перестала работать. Именно это и надо ловить после смены дизайна.
+ *
+ * Диалог подтверждения — самое дорогое место для регрессии: он стоит перед разрушительными
+ * действиями (suspend, terminate, удаление). Если после перекраски он перестанет подтверждать —
+ * пользователь удалит компанию одним кликом и узнает об этом последним.
+ */
+afterEach(cleanup);
+
+const base = {
+  open: true,
+  onOpenChange: () => {},
+  title: "Удалить компанию?",
+  desc: "Действие необратимо.",
+};
+
+describe("ConfirmDialog — подтверждение разрушительного действия", () => {
+  it("диалог смонтирован и несёт заголовок с текстом (по контракту testid, а не по подписи)", () => {
+    render(<ConfirmDialog {...base} handleConfirm={() => {}} />);
+    expect(screen.getByTestId(TESTID.confirmDialog)).toBeDefined();
+    expect(screen.getByText("Удалить компанию?")).toBeDefined();
+  });
+
+  it("подтверждение вызывает действие ровно один раз", async () => {
+    const confirm = mock(() => {});
+    render(<ConfirmDialog {...base} confirmText="Удалить" handleConfirm={confirm} />);
+
+    await userEvent.click(screen.getByTestId(TESTID.confirmAccept));
+    expect(confirm).toHaveBeenCalledTimes(1);
+  });
+
+  it("отмена НЕ вызывает действие (иначе диалог — украшение, а не защита)", async () => {
+    const confirm = mock(() => {});
+    render(<ConfirmDialog {...base} confirmText="Удалить" handleConfirm={confirm} />);
+
+    await userEvent.click(screen.getByTestId(TESTID.confirmCancel));
+    expect(confirm).not.toHaveBeenCalled();
+  });
+
+  it("disabled — кнопка подтверждения не срабатывает", async () => {
+    const confirm = mock(() => {});
+    render(<ConfirmDialog {...base} confirmText="Удалить" disabled handleConfirm={confirm} />);
+
+    await userEvent.click(screen.getByTestId(TESTID.confirmAccept));
+    expect(confirm).not.toHaveBeenCalled();
+  });
+});

package/src/components/confirm-dialog.tsx

@@ -0,0 +1,75 @@
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@icomponents/react/components/ui/alert-dialog";
+import { Button } from "@icomponents/react/components/ui/button";
+import { useTranslation } from "@icomponents/react/i18n/use-translation";
+import { cn } from "@icomponents/react/lib/utils";
+import { TESTID, testid } from "@icomponents/react/testids";
+
+type ConfirmDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  disabled?: boolean;
+  desc: React.JSX.Element | string;
+  cancelBtnText?: string;
+  confirmText?: React.ReactNode;
+  destructive?: boolean;
+  isLoading?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+} & ({ form: string; handleConfirm?: undefined } | { form?: undefined; handleConfirm: () => void });
+
+export function ConfirmDialog(props: ConfirmDialogProps) {
+  // Подписи кнопок по умолчанию — из неймспейса "common", а не литералами: диалог подтверждения
+  // стоит перед КАЖДЫМ разрушительным действием, и вызывающие его экраны сплошь и рядом полагаются
+  // на дефолт. Литерал здесь означал бы английские «Cancel/Continue» посреди русского интерфейса
+  // ровно там, где человек решает, рушить или нет.
+  const { t } = useTranslation("common");
+  const {
+    title,
+    desc,
+    children,
+    className,
+    confirmText,
+    cancelBtnText,
+    destructive,
+    isLoading,
+    disabled = false,
+    form,
+    handleConfirm,
+    ...actions
+  } = props;
+  return (
+    <AlertDialog {...actions}>
+      <AlertDialogContent {...testid(TESTID.confirmDialog)} className={cn(className && className)}>
+        <AlertDialogHeader className="text-start">
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription render={<div>{desc}</div>} />
+        </AlertDialogHeader>
+        {children}
+        <AlertDialogFooter>
+          <AlertDialogCancel {...testid(TESTID.confirmCancel)} disabled={isLoading}>
+            {cancelBtnText ?? t("confirm.cancel")}
+          </AlertDialogCancel>
+          <Button
+            {...testid(TESTID.confirmAccept)}
+            type={form ? "submit" : "button"}
+            form={form}
+            onClick={handleConfirm}
+            variant={destructive ? "destructive" : "default"}
+            disabled={disabled || isLoading}
+          >
+            {confirmText ?? t("confirm.continue")}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}