prime-ui-kit 0.7.13 → 0.9.0

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

@@ -0,0 +1,65 @@
+/** Row styling: `striped` without dividers, `dividerStyle="dashed"` with `highlightColumnOnHover`, `columnDividers` without a header. Use striped rows for long numeric grids, column highlight for comparison tables. */
+
+import { DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Shift = { day: string; morning: number; evening: number; night: number };
+
+const rows: Shift[] = [
+  { day: "Понедельник", morning: 12, evening: 9, night: 4 },
+  { day: "Вторник", morning: 11, evening: 10, night: 4 },
+  { day: "Среда", morning: 13, evening: 8, night: 3 },
+  { day: "Четверг", morning: 12, evening: 9, night: 5 },
+];
+
+const columns: DataTableColumn<Shift>[] = [
+  { id: "day", header: "День", accessor: "day" },
+  { id: "morning", header: "Утро", accessor: "morning", numeric: true },
+  { id: "evening", header: "Вечер", accessor: "evening", numeric: true },
+  { id: "night", header: "Ночь", accessor: "night", numeric: true },
+];
+
+export default function DataTableAppearanceExample() {
+  return (
+    <div className={styles.statesGrid}>
+      <div className={styles.group}>
+        <Typography.Root variant="code" tone="muted">
+          striped + dividerStyle="none"
+        </Typography.Root>
+        <DataTable.Root
+          columns={columns}
+          rows={rows}
+          getRowKey={(r) => r.day}
+          striped
+          dividerStyle="none"
+        />
+      </div>
+      <div className={styles.group}>
+        <Typography.Root variant="code" tone="muted">
+          dividerStyle="dashed" + highlightColumnOnHover
+        </Typography.Root>
+        <DataTable.Root
+          columns={columns}
+          rows={rows}
+          getRowKey={(r) => r.day}
+          dividerStyle="dashed"
+          highlightColumnOnHover
+        />
+      </div>
+      <div className={styles.group}>
+        <Typography.Root variant="code" tone="muted">
+          dividerStyle="dotted" + columnDividers + showHeader=&#123;false&#125;
+        </Typography.Root>
+        <DataTable.Root
+          columns={columns}
+          rows={rows}
+          getRowKey={(r) => r.day}
+          dividerStyle="dotted"
+          columnDividers
+          showHeader={false}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/data-table/examples/content-width.tsx

@@ -0,0 +1,45 @@
+/** `fillWidth` (default) stretches the table to its container; `fillWidth={false}` sizes it by content; a column can be centered with `align="center"`. Use content width for short lookup tables inside wide layouts. */
+
+import { DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Task = { id: string; task: string; hours: number };
+
+const rows: Task[] = [
+  { id: "T-12", task: "Сверстать отчёт по спринту", hours: 3 },
+  { id: "T-13", task: "Проверить миграции БД", hours: 1.5 },
+  { id: "T-14", task: "Обновить подсказки в форме входа", hours: 2 },
+];
+
+const hours = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 1 });
+
+const columns: DataTableColumn<Task>[] = [
+  { id: "id", header: "Задача", accessor: "id" },
+  { id: "task", header: "Описание", accessor: "task" },
+  { id: "hours", header: "Часы", align: "center", cell: (row) => hours.format(row.hours) },
+];
+
+export default function DataTableContentWidthExample() {
+  return (
+    <div className={styles.stack}>
+      <div className={styles.group}>
+        <Typography.Root variant="code" tone="muted">
+          fillWidth (по умолчанию)
+        </Typography.Root>
+        <DataTable.Root columns={columns} rows={rows} getRowKey={(row) => row.id} />
+      </div>
+      <div className={styles.group}>
+        <Typography.Root variant="code" tone="muted">
+          fillWidth=&#123;false&#125;
+        </Typography.Root>
+        <DataTable.Root
+          columns={columns}
+          rows={rows}
+          getRowKey={(row) => row.id}
+          fillWidth={false}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,205 @@
+/** Store dashboard: a row of `stat-trend` cards and a recent-orders table with avatar, status badge and `numeric` sums. Use as the skeleton of an overview screen. */
+
+import {
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  DataTable,
+  type DataTableColumn,
+  SegmentedControl,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type OrderStatus = "paid" | "shipping" | "refund";
+type Order = {
+  id: string;
+  customer: string;
+  email: 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: "Алина Морозова",
+    email: "alina.m@mail.ru",
+    status: "paid",
+    items: 3,
+    total: 12_480,
+  },
+  {
+    id: "№ 48 212",
+    customer: "Сергей Фёдоров",
+    email: "s.fedorov@yandex.ru",
+    status: "shipping",
+    items: 1,
+    total: 54_990,
+  },
+  {
+    id: "№ 48 211",
+    customer: "Ольга Лебедева",
+    email: "olga.l@gmail.com",
+    status: "paid",
+    items: 6,
+    total: 8_730,
+  },
+  {
+    id: "№ 48 210",
+    customer: "Тимур Ахмедов",
+    email: "timur@ahmedov.ru",
+    status: "refund",
+    items: 2,
+    total: 3_200,
+  },
+  {
+    id: "№ 48 209",
+    customer: "Ксения Волкова",
+    email: "k.volkova@mail.ru",
+    status: "shipping",
+    items: 4,
+    total: 21_650,
+  },
+  {
+    id: "№ 48 208",
+    customer: "Павел Никитин",
+    email: "p.nikitin@corp.ru",
+    status: "paid",
+    items: 1,
+    total: 2_490,
+  },
+  {
+    id: "№ 48 207",
+    customer: "Елена Зайцева",
+    email: "zaytseva@gmail.com",
+    status: "paid",
+    items: 2,
+    total: 17_300,
+  },
+];
+
+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<Order>[] = [
+  { id: "id", header: "Заказ", accessor: "id", width: "7rem" },
+  {
+    id: "customer",
+    header: "Покупатель",
+    accessor: "customer",
+    sortable: true,
+    minWidth: "14rem",
+    cell: (row) => (
+      <span className={styles.customer}>
+        <Avatar.Root size="s" color="purple">
+          <Avatar.Fallback>{initials(row.customer)}</Avatar.Fallback>
+        </Avatar.Root>
+        <span className={styles.customerText}>
+          <span>{row.customer}</span>
+          <Typography.Root as="span" variant="caption" tone="muted" truncate>
+            {row.email}
+          </Typography.Root>
+        </span>
+      </span>
+    ),
+  },
+  {
+    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 DataTableDashboardExample() {
+  const [period, setPeriod] = React.useState("30");
+
+  return (
+    <div className={styles.dashboard}>
+      <div className={styles.dashboardHeader}>
+        <Typography.Root as="h3" variant="heading-s">
+          Продажи
+        </Typography.Root>
+        <SegmentedControl.Root aria-label="Период" value={period} onValueChange={setPeriod}>
+          <SegmentedControl.Item value="7">7 дней</SegmentedControl.Item>
+          <SegmentedControl.Item value="30">30 дней</SegmentedControl.Item>
+          <SegmentedControl.Item value="90">Квартал</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+
+      <div className={styles.kpis}>
+        <Card.Root variant="stat-trend">
+          <Card.Label>Выручка</Card.Label>
+          <Card.Value>₽ 4,82 млн</Card.Value>
+          <Card.Delta tone="success">+12,4% к прошлому периоду</Card.Delta>
+        </Card.Root>
+        <Card.Root variant="stat-trend">
+          <Card.Label>Заказы</Card.Label>
+          <Card.Value>1 284</Card.Value>
+          <Card.Delta tone="success">+86 заказов</Card.Delta>
+        </Card.Root>
+        <Card.Root variant="stat-trend">
+          <Card.Label>Средний чек</Card.Label>
+          <Card.Value>₽ 3 754</Card.Value>
+          <Card.Delta tone="neutral">без изменений</Card.Delta>
+        </Card.Root>
+        <Card.Root variant="stat-trend">
+          <Card.Label>Возвраты</Card.Label>
+          <Card.Value>2,1%</Card.Value>
+          <Card.Delta tone="danger">+0,4 п. п.</Card.Delta>
+        </Card.Root>
+      </div>
+
+      <DataTable.Root
+        columns={columns}
+        rows={orders}
+        getRowKey={(row) => row.id}
+        defaultSort={null}
+        pageSize={5}
+        onRowClick={() => {}}
+        toolbar={
+          <div className={styles.toolbar}>
+            <Typography.Root as="span" variant="body-s" tone="secondary">
+              Последние заказы
+            </Typography.Root>
+            <Button.Root variant="ghost" tone="neutral" size="s">
+              Все заказы
+            </Button.Root>
+          </div>
+        }
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,106 @@
+/** `renderExpanded` draws a full-width detail row under an expanded row, aligned with the first content column; with `stickyFirstColumn` the toggle sticks too. Use to show order details without leaving the list. */
+
+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: { name: string; qty: number }[];
+};
+
+const rows: Order[] = [
+  {
+    id: "o1",
+    number: "№ 10 482",
+    customer: "Анна Соколова",
+    date: "07.10.26",
+    total: 12_480,
+    address: "Москва, ул. Тверская, 12, кв. 45",
+    items: [
+      { name: "Кабель USB-C, 2 м", qty: 2 },
+      { name: "Док-станция", qty: 1 },
+    ],
+  },
+  {
+    id: "o2",
+    number: "№ 10 481",
+    customer: "Дмитрий Орлов",
+    date: "06.10.26",
+    total: 34_900,
+    address: "Санкт-Петербург, Невский пр., 28",
+    items: [{ name: 'Монитор 27"', qty: 1 }],
+  },
+  {
+    id: "o3",
+    number: "№ 10 477",
+    customer: "Мария Ким",
+    date: "05.10.26",
+    total: 4_350,
+    address: "Казань, ул. Баумана, 7",
+    items: [{ name: "Клавиатура", qty: 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, minWidth: "12rem" },
+  { 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.Root
+      columns={columns}
+      rows={rows}
+      getRowKey={(row) => row.id}
+      getRowLabel={(row) => row.number}
+      renderExpanded={(row) => (
+        <dl className={styles.details}>
+          <dt>
+            <Typography.Root as="span" variant="body-s" tone="muted">
+              Адрес доставки
+            </Typography.Root>
+          </dt>
+          <dd>
+            <Typography.Root as="span" variant="body-s">
+              {row.address}
+            </Typography.Root>
+          </dd>
+          <dt>
+            <Typography.Root as="span" variant="body-s" tone="muted">
+              Состав
+            </Typography.Root>
+          </dt>
+          <dd>
+            <Typography.Root as="span" variant="body-s">
+              {row.items.map((item) => `${item.name} × ${item.qty}`).join(", ")}
+            </Typography.Root>
+          </dd>
+        </dl>
+      )}
+      defaultExpanded={["o1"]}
+      stickyFirstColumn
+      showPagination={false}
+    />
+  );
+}

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

@@ -0,0 +1,148 @@
+/* Layout only: text roles and colors come from Typography. */
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-6);
+  width: 100%;
+  min-width: 0;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-2);
+  min-width: 0;
+}
+
+/* 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;
+}
+
+.toolbarGroup {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--prime-space-2);
+  min-width: 0;
+}
+
+/* The leading group takes the free space so the search can grow. */
+.toolbarGrow {
+  flex: 1 1 auto;
+}
+
+/* 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);
+}
+
+.tabular {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Columns of at least 18rem. */
+.statesGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-24) * 3)), 1fr));
+  gap: var(--prime-space-4);
+  width: 100%;
+  min-width: 0;
+}
+
+.errorBody {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--prime-space-2);
+}
+
+/* The host stretches children that contain a table; center the 320px probe inside. */
+.narrowFrame {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+/* 320px: the smallest supported viewport. */
+.narrow {
+  width: min(100%, calc(var(--prime-space-20) * 4));
+  min-width: 0;
+}
+
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-4);
+  width: 100%;
+  min-width: 0;
+}
+
+.dashboardHeader {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prime-space-3);
+}
+
+/* KPI columns of at least 13rem. */
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-4) * 13)), 1fr));
+  gap: var(--prime-space-3);
+}
+
+/* Avatar → text inside a table cell: the cell gap (`--prime-space-2`), the same step DataTable
+ * uses to indent sub-rows (avatar + gap), so child text lines up under the parent's text. */
+.customer {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-space-2);
+  min-width: 0;
+}
+
+.customerText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* Child-row icon box: same footprint as the parent's avatar keeps the text column aligned. */
+.iconBox {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--prime-avatar-m);
+  height: var(--prime-avatar-m);
+  border-radius: var(--prime-radius-m);
+  background: var(--prime-color-fill-muted);
+  color: var(--prime-color-text-secondary);
+}
+
+.iconBox svg {
+  width: var(--prime-icon-s);
+  height: var(--prime-icon-s);
+}
+
+.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;
+}

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

@@ -0,0 +1,54 @@
+/** `infiniteScroll` reveals loaded rows in batches (`infiniteBatchSize`), then calls `onLoadMore` while `hasMore`; `loadingMore` shows the footer status. Use for logs and feeds instead of pages. */
+
+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 all: 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 [count, setCount] = React.useState(20);
+  const [loadingMore, setLoadingMore] = React.useState(false);
+  const hasMore = count < all.length;
+
+  const loadMore = React.useCallback(() => {
+    if (loadingMore || !hasMore) return;
+    setLoadingMore(true);
+    window.setTimeout(() => {
+      setCount((n) => Math.min(n + 20, all.length));
+      setLoadingMore(false);
+    }, 600);
+  }, [hasMore, loadingMore]);
+
+  return (
+    <DataTable.Root
+      columns={columns}
+      rows={all.slice(0, count)}
+      getRowKey={(row) => row.id}
+      stickyHeader
+      infiniteScroll
+      initialVisibleRows={10}
+      infiniteBatchSize={10}
+      hasMore={hasMore}
+      loadingMore={loadingMore}
+      onLoadMore={loadMore}
+      scrollHeight={300}
+    />
+  );
+}

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

@@ -0,0 +1,60 @@
+/** A 320px container: columns scroll inside the table, the first one sticks; toolbar and footer reflow by the table's own width and pagination collapses to «‹ 3 / 8 ›». Use to check mobile layouts. */
+
+import { Badge, Button, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Ticket = { id: string; subject: string; priority: "high" | "normal"; age: number };
+
+const rows: Ticket[] = Array.from({ length: 36 }, (_, i) => ({
+  id: `T-${2400 + i}`,
+  subject: ["Не приходит письмо", "Ошибка оплаты", "Сброс пароля", "Вопрос по тарифу"][i % 4],
+  priority: i % 3 === 0 ? "high" : "normal",
+  age: (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.priority === "high" ? (
+        <Badge.Root color="red">Высокий</Badge.Root>
+      ) : (
+        <Badge.Root>Обычный</Badge.Root>
+      ),
+  },
+  { id: "age", header: "Ждёт, ч", accessor: "age", numeric: true },
+];
+
+export default function DataTableNarrowExample() {
+  return (
+    <div className={styles.narrowFrame}>
+      <div className={styles.narrow}>
+        <DataTable.Root
+          size="s"
+          columns={columns}
+          rows={rows}
+          getRowKey={(row) => row.id}
+          stickyFirstColumn
+          pageSize={5}
+          toolbar={
+            <div className={styles.toolbar}>
+              <Typography.Root
+                as="span"
+                variant="body-s"
+                tone="secondary"
+                className={styles.tabular}
+              >
+                Открытые: {rows.length}
+              </Typography.Root>
+              <Button.Root size="xs">Новый тикет</Button.Root>
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+}