prime-ui-kit 0.7.13 → 0.9.1

package/src/components/data-table/examples/detail-panel.tsx

@@ -0,0 +1,101 @@
+/** Order details in a full-width row under an expanded order, aligned with the first content column — `renderExpanded`, `defaultExpanded`. */
+import { DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Order = {
+  id: string;
+  number: string;
+  customer: string;
+  date: string;
+  total: number;
+  address: string;
+  items: string;
+};
+
+const ORDERS: Order[] = [
+  {
+    id: "o1",
+    number: "№ 10 482",
+    customer: "Анна Соколова",
+    date: "07.10.26",
+    total: 12_480,
+    address: "Москва, ул. Тверская, 12, кв. 45",
+    items: "Кабель USB-C, 2 м × 2, док-станция × 1",
+  },
+  {
+    id: "o2",
+    number: "№ 10 481",
+    customer: "Дмитрий Орлов",
+    date: "06.10.26",
+    total: 34_900,
+    address: "Санкт-Петербург, Невский пр., 28",
+    items: 'Монитор 27" × 1',
+  },
+  {
+    id: "o3",
+    number: "№ 10 477",
+    customer: "Мария Ким",
+    date: "05.10.26",
+    total: 4_350,
+    address: "Казань, ул. Баумана, 7",
+    items: "Клавиатура × 1",
+  },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Order>[] = [
+  { id: "number", header: "Заказ", accessor: "number", minWidth: "8rem" },
+  { id: "customer", header: "Покупатель", accessor: "customer", sortable: true },
+  { id: "date", header: "Дата", accessor: "date", numeric: true },
+  {
+    id: "total",
+    header: "Сумма",
+    accessor: "total",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.total),
+  },
+];
+
+export default function DataTableDetailPanelExample() {
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={ORDERS}
+      getRowKey={(row) => row.id}
+      getRowLabel={(row) => row.number}
+      renderExpanded={(row) => (
+        <dl className={styles.details}>
+          <dt>
+            <Typography as="span" variant="body-s" tone="muted">
+              Адрес доставки
+            </Typography>
+          </dt>
+          <dd>
+            <Typography as="span" variant="body-s">
+              {row.address}
+            </Typography>
+          </dd>
+          <dt>
+            <Typography as="span" variant="body-s" tone="muted">
+              Состав
+            </Typography>
+          </dt>
+          <dd>
+            <Typography as="span" variant="body-s">
+              {row.items}
+            </Typography>
+          </dd>
+        </dl>
+      )}
+      defaultExpanded={["o1"]}
+      paging="none"
+    />
+  );
+}

package/src/components/data-table/examples/examples.module.css

@@ -0,0 +1,77 @@
+/* Layout of the DataTable scenarios: semantic tokens only. */
+
+/* Toolbar content: two groups pushed to the edges; they wrap on narrow widths. */
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prime-space-2);
+  width: 100%;
+  min-width: 0;
+}
+
+.filters {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--prime-space-2);
+  min-width: 0;
+}
+
+/* The search grows from 12rem, at most 20rem. */
+.search {
+  flex: 1 1 calc(var(--prime-space-24) * 2);
+  min-width: 0;
+  max-width: calc(var(--prime-space-20) * 4);
+}
+
+/* sizes / appearance / states: a table with its caption under it; specimens kept apart. */
+.specimens {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-6);
+  width: 100%;
+  min-width: 0;
+}
+
+.specimen {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-2);
+  min-width: 0;
+}
+
+/* Avatar → name and note in a cell; the cell gap equals the sub-row indent step (avatar + gap). */
+.person {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-space-2);
+  min-width: 0;
+}
+
+.personText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.details {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--prime-space-1) var(--prime-space-4);
+  margin: 0;
+}
+
+.details dd {
+  margin: 0;
+  min-width: 0;
+}
+
+/* 320 px: the smallest supported viewport. */
+.narrow {
+  width: min(100%, calc(var(--prime-space-20) * 4));
+  min-width: 0;
+  margin-inline: auto;
+}

package/src/components/data-table/examples/infinite-scroll.tsx

@@ -0,0 +1,53 @@
+/** An audit log that reveals loaded rows in batches and then asks the server for more — `paging`, `infiniteBatchSize`, `hasMore`, `loadingMore`, `onLoadMore`. */
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+import * as React from "react";
+
+type LogRow = { id: number; event: string; user: string; time: string };
+
+const EVENTS = ["Вход в систему", "Изменён тариф", "Загружен файл", "Создан отчёт", "Выход"];
+const USERS = ["anna", "boris", "vera", "gleb", "darya"];
+
+const LOG: LogRow[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  event: EVENTS[i % EVENTS.length],
+  user: USERS[(i * 2) % USERS.length],
+  time: `${String(9 + (i % 10)).padStart(2, "0")}:${String((i * 7) % 60).padStart(2, "0")}`,
+}));
+
+const COLUMNS: DataTableColumn<LogRow>[] = [
+  { id: "id", header: "#", accessor: "id", numeric: true, width: "4rem" },
+  { id: "event", header: "Событие", accessor: "event" },
+  { id: "user", header: "Пользователь", accessor: "user" },
+  { id: "time", header: "Время", accessor: "time", numeric: true },
+];
+
+export default function DataTableInfiniteScrollExample() {
+  const [loaded, setLoaded] = React.useState(20);
+  const [loadingMore, setLoadingMore] = React.useState(false);
+  const hasMore = loaded < LOG.length;
+
+  const loadMore = () => {
+    if (loadingMore || !hasMore) return;
+    setLoadingMore(true);
+    window.setTimeout(() => {
+      setLoaded((count) => Math.min(count + 20, LOG.length));
+      setLoadingMore(false);
+    }, 600);
+  };
+
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={LOG.slice(0, loaded)}
+      getRowKey={(row) => row.id}
+      paging="infinite"
+      stickyHeader
+      pageSize={10}
+      infiniteBatchSize={10}
+      hasMore={hasMore}
+      loadingMore={loadingMore}
+      onLoadMore={loadMore}
+      scrollHeight={300}
+    />
+  );
+}

package/src/components/data-table/examples/narrow.tsx

@@ -0,0 +1,50 @@
+/** A 320 px support queue: columns scroll inside the table with the first one pinned, the toolbar and footer reflow and the pager turns compact — `stickyFirstColumn`, `size`. */
+import { Badge, Button, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Ticket = { id: string; subject: string; urgent: boolean; waiting: number };
+
+const SUBJECTS = ["Не приходит письмо", "Ошибка оплаты", "Сброс пароля", "Вопрос по тарифу"];
+
+const TICKETS: Ticket[] = Array.from({ length: 36 }, (_, i) => ({
+  id: `T-${2400 + i}`,
+  subject: SUBJECTS[i % SUBJECTS.length],
+  urgent: i % 3 === 0,
+  waiting: (i * 5) % 48,
+}));
+
+const COLUMNS: DataTableColumn<Ticket>[] = [
+  { id: "id", header: "Тикет", accessor: "id" },
+  { id: "subject", header: "Тема", accessor: "subject", truncate: true, maxWidth: "10rem" },
+  {
+    id: "priority",
+    header: "Приоритет",
+    cell: (row) =>
+      row.urgent ? <Badge.Root color="red">Высокий</Badge.Root> : <Badge.Root>Обычный</Badge.Root>,
+  },
+  { id: "waiting", header: "Ждёт, ч", accessor: "waiting", numeric: true },
+];
+
+export default function DataTableNarrowExample() {
+  return (
+    <div className={styles.narrow}>
+      <DataTable
+        size="s"
+        columns={COLUMNS}
+        rows={TICKETS}
+        getRowKey={(row) => row.id}
+        stickyFirstColumn
+        pageSize={5}
+        toolbar={
+          <div className={styles.toolbar}>
+            <Typography as="span" variant="body-s" tone="secondary">
+              Открытые: {TICKETS.length}
+            </Typography>
+            <Button.Root size="xs">Новый тикет</Button.Root>
+          </div>
+        }
+      />
+    </div>
+  );
+}

package/src/components/data-table/examples/nested-rows.tsx

@@ -0,0 +1,128 @@
+/** Partners with their expense lines: sub-rows indented under the parent's name, a chevron toggle, together with selection and sorting — `getRowChildren`, `expanded`, `onExpandedChange`. */
+import { Avatar, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Entry = {
+  id: string;
+  name: string;
+  note: string;
+  share: number;
+  amount: number;
+  children?: Entry[];
+};
+
+const ENTRIES: Entry[] = [
+  {
+    id: "denis",
+    name: "Денис Карпов",
+    note: "Партнёр",
+    share: 50,
+    amount: 184_000,
+    children: [
+      {
+        id: "denis-company",
+        name: "Расходы компании",
+        note: "доля 50%",
+        share: 50,
+        amount: 62_000,
+      },
+      {
+        id: "denis-payout",
+        name: "Выплата партнёру",
+        note: "за сентябрь",
+        share: 50,
+        amount: 122_000,
+      },
+    ],
+  },
+  {
+    id: "olga",
+    name: "Ольга Белова",
+    note: "Партнёр",
+    share: 30,
+    amount: 110_400,
+    children: [
+      { id: "olga-company", name: "Расходы компании", note: "доля 30%", share: 30, amount: 37_200 },
+      {
+        id: "olga-car",
+        name: "Toyota Camry · А 123 ВС",
+        note: "аренда",
+        share: 30,
+        amount: 73_200,
+      },
+    ],
+  },
+  { id: "ivan", name: "Иван Сорокин", note: "Инвестор", share: 20, amount: 73_600 },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const initials = (name: string) =>
+  name
+    .split(" ")
+    .map((part) => part[0])
+    .join("");
+
+const COLUMNS: DataTableColumn<Entry>[] = [
+  {
+    id: "name",
+    header: "Участник",
+    accessor: "name",
+    sortable: true,
+    cell: (row) => (
+      <div className={styles.person}>
+        {row.children ? (
+          <Avatar.Root color="purple">
+            <Avatar.Fallback>{initials(row.name)}</Avatar.Fallback>
+          </Avatar.Root>
+        ) : null}
+        <div className={styles.personText}>
+          <span>{row.name}</span>
+          <Typography as="span" variant="caption" tone="muted" truncate>
+            {row.note}
+          </Typography>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "share",
+    header: "Доля",
+    accessor: "share",
+    sortable: true,
+    numeric: true,
+    cell: (row) => `${row.share}%`,
+  },
+  {
+    id: "amount",
+    header: "Сумма",
+    accessor: "amount",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.amount),
+  },
+];
+
+export default function DataTableNestedRowsExample() {
+  const [expanded, setExpanded] = React.useState<React.Key[]>(["denis"]);
+
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={ENTRIES}
+      getRowKey={(row) => row.id}
+      getRowLabel={(row) => row.name}
+      getRowChildren={(row) => row.children}
+      expanded={expanded}
+      onExpandedChange={setExpanded}
+      selectable
+      paging="none"
+    />
+  );
+}

package/src/components/data-table/examples/numeric.tsx

@@ -0,0 +1,41 @@
+/** An inventory report: number columns align to the end in tabular figures, a long name stays on one line with a title — `numeric`, `truncate`, `maxWidth`. */
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+
+type Sku = {
+  sku: string;
+  name: string;
+  stock: number;
+  price: number;
+  sold: number;
+  margin: number;
+};
+
+const SKUS: Sku[] = [
+  {
+    sku: "KB-210",
+    name: "Клавиатура беспроводная с подсветкой, русская раскладка",
+    stock: 1240,
+    price: 4990,
+    sold: 318,
+    margin: 0.284,
+  },
+  { sku: "MS-044", name: "Мышь оптическая", stock: 86, price: 1290, sold: 1204, margin: 0.312 },
+  { sku: "MN-27Q", name: 'Монитор 27" QHD IPS', stock: 12, price: 32_900, sold: 41, margin: 0.118 },
+  { sku: "HB-7P", name: "USB-хаб на 7 портов", stock: 530, price: 2190, sold: 97, margin: 0.402 },
+];
+
+const INT = new Intl.NumberFormat("ru-RU");
+const PCT = new Intl.NumberFormat("ru-RU", { style: "percent", maximumFractionDigits: 1 });
+
+const COLUMNS: DataTableColumn<Sku>[] = [
+  { id: "sku", header: "Артикул", accessor: "sku", width: "6rem" },
+  { id: "name", header: "Товар", accessor: "name", truncate: true, maxWidth: "14rem" },
+  { id: "stock", header: "Остаток, шт", numeric: true, cell: (row) => INT.format(row.stock) },
+  { id: "price", header: "Цена, ₽", numeric: true, cell: (row) => INT.format(row.price) },
+  { id: "sold", header: "Продано", numeric: true, cell: (row) => INT.format(row.sold) },
+  { id: "margin", header: "Маржа", numeric: true, cell: (row) => PCT.format(row.margin) },
+];
+
+export default function DataTableNumericExample() {
+  return <DataTable columns={COLUMNS} rows={SKUS} getRowKey={(row) => row.sku} paging="none" />;
+}

package/src/components/data-table/examples/overview.tsx

@@ -0,0 +1,54 @@
+/** Recent orders: sortable columns, a status Badge, numeric sums and five rows per page — `columns`, `getRowKey`, `pageSize`. */
+import { Badge, DataTable, type DataTableColumn } from "prime-ui-kit";
+
+type OrderStatus = "paid" | "shipping" | "refund";
+type Order = { id: string; customer: string; status: OrderStatus; items: number; total: number };
+
+const STATUS: Record<OrderStatus, { label: string; color: "green" | "blue" | "red" }> = {
+  paid: { label: "Оплачен", color: "green" },
+  shipping: { label: "В пути", color: "blue" },
+  refund: { label: "Возврат", color: "red" },
+};
+
+const ORDERS: Order[] = [
+  { id: "№ 48 213", customer: "Алина Морозова", status: "paid", items: 3, total: 12_480 },
+  { id: "№ 48 212", customer: "Сергей Фёдоров", status: "shipping", items: 1, total: 54_990 },
+  { id: "№ 48 211", customer: "Ольга Лебедева", status: "paid", items: 6, total: 8_730 },
+  { id: "№ 48 210", customer: "Тимур Ахмедов", status: "refund", items: 2, total: 3_200 },
+  { id: "№ 48 209", customer: "Ксения Волкова", status: "shipping", items: 4, total: 21_650 },
+  { id: "№ 48 208", customer: "Павел Никитин", status: "paid", items: 1, total: 2_490 },
+  { id: "№ 48 207", customer: "Елена Зайцева", status: "paid", items: 2, total: 17_300 },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Order>[] = [
+  { id: "id", header: "Заказ", accessor: "id", width: "7rem" },
+  { id: "customer", header: "Покупатель", accessor: "customer", sortable: true },
+  {
+    id: "status",
+    header: "Статус",
+    accessor: "status",
+    sortable: true,
+    cell: (row) => (
+      <Badge.Root color={STATUS[row.status].color}>{STATUS[row.status].label}</Badge.Root>
+    ),
+  },
+  { id: "items", header: "Товаров", accessor: "items", numeric: true },
+  {
+    id: "total",
+    header: "Сумма",
+    accessor: "total",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.total),
+  },
+];
+
+export default function DataTableOverviewExample() {
+  return <DataTable columns={COLUMNS} rows={ORDERS} getRowKey={(row) => row.id} pageSize={5} />;
+}

package/src/components/data-table/examples/selection.tsx

@@ -0,0 +1,60 @@
+/** Team members with checkboxes: Shift+click range, press-and-drag, «select all» and bulk actions in the toolbar — `selectable`, `selected`, `onSelectedChange`, `getRowLabel`. */
+import { Button, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Member = { id: string; name: string; email: string; role: string };
+
+const MEMBERS: Member[] = [
+  { id: "u1", name: "Анна Соколова", email: "anna@prime.dev", role: "Владелец" },
+  { id: "u2", name: "Дмитрий Орлов", email: "d.orlov@prime.dev", role: "Администратор" },
+  { id: "u3", name: "Мария Ким", email: "maria.kim@prime.dev", role: "Редактор" },
+  { id: "u4", name: "Игорь Белов", email: "belov@prime.dev", role: "Наблюдатель" },
+  { id: "u5", name: "Ольга Лебедева", email: "o.lebedeva@prime.dev", role: "Редактор" },
+  { id: "u6", name: "Тимур Ахметов", email: "timur@prime.dev", role: "Наблюдатель" },
+];
+
+const COLUMNS: DataTableColumn<Member>[] = [
+  { id: "name", header: "Имя", accessor: "name", sortable: true },
+  { id: "email", header: "Почта", accessor: "email", truncate: true, maxWidth: "14rem" },
+  { id: "role", header: "Роль", accessor: "role", sortable: true },
+];
+
+export default function DataTableSelectionExample() {
+  const [selected, setSelected] = React.useState<React.Key[]>(["u2"]);
+
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={MEMBERS}
+      getRowKey={(row) => row.id}
+      getRowLabel={(row) => row.name}
+      selectable
+      selected={selected}
+      onSelectedChange={setSelected}
+      paging="none"
+      toolbar={
+        <div className={styles.toolbar}>
+          <Typography as="span" variant="body-s" tone="secondary">
+            Выбрано: {selected.length} из {MEMBERS.length}
+          </Typography>
+          <div className={styles.filters}>
+            <Button.Root
+              variant="outline"
+              tone="neutral"
+              size="s"
+              disabled={selected.length === 0}
+              onClick={() => setSelected([])}
+            >
+              Снять выбор
+            </Button.Root>
+            <Button.Root variant="soft" tone="danger" size="s" disabled={selected.length === 0}>
+              Удалить
+            </Button.Root>
+          </div>
+        </div>
+      }
+    />
+  );
+}