src/docs/CheckboxesPage.tsx - master - pvldchkv/unity

src/docs/CheckboxesPage.tsx
194 строки7 KB
Dyachkov Pavel
Обновление иконок: новый base-набор + base solid; nav-иконки в админке
22 май 2026, 01:16
22 май 2026, 01:16a10a1ed
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Code, Flex, Table } from "@radix-ui/themes";
import {
  Body1,
  Body2,
  Button,
  Caption,
  Checkbox,
  H1,
  H3,
  BaseIcon,
  type CheckboxSize,
} from "../design-system/components";

interface SizeSpec {
  size: CheckboxSize;
  title: string;
  boxSize: string;
  radius: string;
  label: string;
}

const SIZES: SizeSpec[] = [
  { size: "normal", title: "Normal (default)", boxSize: "24×24", radius: "5px", label: "Body 1 — 16 / 24" },
  { size: "small",  title: "Small",            boxSize: "20×20", radius: "4px", label: "Body 2 — 14 / 20" },
];

function StatesRow({ size }: { size: CheckboxSize }) {
  const [checked, setChecked] = useState(true);
  return (
    <Flex align="center" gap="6" wrap="wrap" py="1">
      <Flex direction="column" align="center" gap="2">
        <Checkbox size={size} checked={false} onCheckedChange={() => {}} />
        <Caption color="gray">Unchecked</Caption>
      </Flex>
      <Flex direction="column" align="center" gap="2">
        <Checkbox
          size={size}
          checked={checked}
          onCheckedChange={(v) => setChecked(v === true)}
        />
        <Caption color="gray">Checked (interactive)</Caption>
      </Flex>
      <Flex direction="column" align="center" gap="2">
        <Checkbox size={size} checked="indeterminate" onCheckedChange={() => {}} />
        <Caption color="gray">Indeterminate</Caption>
      </Flex>
      <Flex direction="column" align="center" gap="2">
        <Checkbox size={size} checked={false} disabled />
        <Caption color="gray">Disabled</Caption>
      </Flex>
      <Flex direction="column" align="center" gap="2">
        <Checkbox size={size} checked disabled />
        <Caption color="gray">Disabled · checked</Caption>
      </Flex>
    </Flex>
  );
}

function LabelExample({ size }: { size: CheckboxSize }) {
  const [checked, setChecked] = useState(true);
  const LabelText = size === "normal" ? Body1 : Body2;
  return (
    <Flex align="center" gap="3" asChild>
      <label>
        <Checkbox
          size={size}
          checked={checked}
          onCheckedChange={(v) => setChecked(v === true)}
        />
        <LabelText>Согласен с обработкой персональных данных</LabelText>
      </label>
    </Flex>
  );
}

export default function CheckboxesPage() {
  const navigate = useNavigate();

  return (
    <div className="guidelines-page">
      <div className="docs-page-header">
        <Button
          intent="tertiary"
          size="normal"
          onClick={() => navigate("/docs")}
        >
          <BaseIcon name="arrow-left" size={24} /> Дизайн-система
        </Button>
        <H1>Чекбоксы</H1>
        <Body1 color="gray" as="p" mt="2">
          Два размера: <Code size="2">normal</Code> (24×24, лейбл Body 1) и{" "}
          <Code size="2">small</Code> (20×20, лейбл Body 2). Цвет, контраст
          и вариант зафиксированы внутри. На hover (unchecked) — тёмная
          обводка. По клику — gray-12 заливка и белая галочка.
        </Body1>
      </div>

      <div className="guidelines-card" style={{ marginBottom: 32 }}>
        <H3 mb="2">Правило</H3>
        <Body2 as="p" color="gray">
          Используйте только компонент{" "}
          <Code size="2">{`<Checkbox />`}</Code> из{" "}
          <Code size="2">design-system/components</Code>. Прямой импорт{" "}
          <Code size="2">Checkbox</Code> из{" "}
          <Code size="2">@radix-ui/themes</Code> запрещён в продуктовом
          коде. Из пропов поддерживаются только{" "}
          <Code size="2">size</Code>, <Code size="2">checked</Code>,{" "}
          <Code size="2">onCheckedChange</Code>,{" "}
          <Code size="2">disabled</Code> (и стандартные ref/aria).
        </Body2>
      </div>

      {SIZES.map((spec) => (
        <section key={spec.size} style={{ marginBottom: 40 }}>
          <Flex align="baseline" gap="3" mb="3">
            <H3>{spec.title}</H3>
            <Code size="2" color="gray">
              size="{spec.size}" — {spec.boxSize}
            </Code>
          </Flex>

          <div className="guidelines-card" style={{ marginBottom: 12 }}>
            <StatesRow size={spec.size} />
          </div>

          <div className="guidelines-card" style={{ marginBottom: 12 }}>
            <LabelExample size={spec.size} />
          </div>

          <Table.Root variant="surface" size="1">
            <Table.Header>
              <Table.Row>
                <Table.ColumnHeaderCell>Параметр</Table.ColumnHeaderCell>
                <Table.ColumnHeaderCell>Unchecked</Table.ColumnHeaderCell>
                <Table.ColumnHeaderCell>Hover (unchecked)</Table.ColumnHeaderCell>
                <Table.ColumnHeaderCell>Checked / Indeterminate</Table.ColumnHeaderCell>
                <Table.ColumnHeaderCell>Disabled</Table.ColumnHeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell><Body2>Размер</Body2></Table.Cell>
                <Table.Cell colSpan={4}>
                  <Code size="1">{spec.boxSize} px</Code>
                </Table.Cell>
              </Table.Row>
              <Table.Row>
                <Table.Cell><Body2>Border radius</Body2></Table.Cell>
                <Table.Cell colSpan={4}>
                  <Code size="1">{spec.radius}</Code>
                </Table.Cell>
              </Table.Row>
              <Table.Row>
                <Table.Cell><Body2>Border</Body2></Table.Cell>
                <Table.Cell><Code size="1">var(--gray-a7)</Code></Table.Cell>
                <Table.Cell><Code size="1">var(--gray-12)</Code></Table.Cell>
                <Table.Cell><Code size="1">—</Code></Table.Cell>
                <Table.Cell><Code size="1">var(--gray-a5)</Code></Table.Cell>
              </Table.Row>
              <Table.Row>
                <Table.Cell><Body2>Background</Body2></Table.Cell>
                <Table.Cell><Code size="1">transparent</Code></Table.Cell>
                <Table.Cell><Code size="1">transparent</Code></Table.Cell>
                <Table.Cell><Code size="1">var(--gray-12)</Code></Table.Cell>
                <Table.Cell><Code size="1">var(--gray-a3)</Code></Table.Cell>
              </Table.Row>
              <Table.Row>
                <Table.Cell><Body2>Галочка</Body2></Table.Cell>
                <Table.Cell><Code size="1">—</Code></Table.Cell>
                <Table.Cell><Code size="1">—</Code></Table.Cell>
                <Table.Cell><Code size="1">#fff (gray-1)</Code></Table.Cell>
                <Table.Cell><Code size="1">var(--gray-a8)</Code></Table.Cell>
              </Table.Row>
              <Table.Row>
                <Table.Cell><Body2>Лейбл</Body2></Table.Cell>
                <Table.Cell colSpan={4}>
                  <Code size="1">{spec.label}</Code>
                </Table.Cell>
              </Table.Row>
              <Table.Row>
                <Table.Cell><Body2>Cursor</Body2></Table.Cell>
                <Table.Cell colSpan={4}>
                  <Code size="1">pointer</Code>
                </Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table.Root>
        </section>
      ))}
    </div>
  );
}