prime-ui-kit 0.10.0 → 0.11.0

package/dist/skill/reference/components/data-table/examples/columns-visibility.tsx

@@ -0,0 +1,151 @@
+/** Orders with the column chooser in the toolbar; the choice outlives a reload in local storage, the order number always stays — `DataTable.ColumnsMenu`, `hiddenColumns`, `onHiddenColumnsChange`, `hideable`. */
+import { Badge, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Status = "paid" | "shipped" | "waiting";
+type Order = {
+  id: string;
+  client: string;
+  manager: string;
+  city: string;
+  status: Status;
+  date: string;
+  items: number;
+  total: number;
+};
+
+const STATUS: Record<Status, { label: string; color: "green" | "blue" | "orange" }> = {
+  paid: { label: "Оплачен", color: "green" },
+  shipped: { label: "Отгружен", color: "blue" },
+  waiting: { label: "Ждёт оплаты", color: "orange" },
+};
+
+const ORDERS: Order[] = [
+  {
+    id: "№ 1040",
+    client: "ООО «Северный ветер»",
+    manager: "Ольга Смирнова",
+    city: "Москва",
+    status: "paid",
+    date: "02.10.2026",
+    items: 12,
+    total: 184_500,
+  },
+  {
+    id: "№ 1041",
+    client: "ИП Козлов",
+    manager: "Игорь Волков",
+    city: "Казань",
+    status: "waiting",
+    date: "03.10.2026",
+    items: 3,
+    total: 27_900,
+  },
+  {
+    id: "№ 1042",
+    client: "АО «Технопарк»",
+    manager: "Ольга Смирнова",
+    city: "Санкт-Петербург",
+    status: "shipped",
+    date: "04.10.2026",
+    items: 40,
+    total: 612_000,
+  },
+  {
+    id: "№ 1043",
+    client: "ООО «Лето»",
+    manager: "Мария Орлова",
+    city: "Екатеринбург",
+    status: "paid",
+    date: "05.10.2026",
+    items: 7,
+    total: 58_350,
+  },
+  {
+    id: "№ 1044",
+    client: "ООО «Гранит»",
+    manager: "Игорь Волков",
+    city: "Новосибирск",
+    status: "shipped",
+    date: "06.10.2026",
+    items: 18,
+    total: 241_800,
+  },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Order>[] = [
+  { id: "id", header: "Заказ", accessor: "id", hideable: false },
+  { id: "client", header: "Клиент", accessor: "client" },
+  { id: "manager", header: "Менеджер", accessor: "manager" },
+  { id: "city", header: "Город", accessor: "city" },
+  {
+    id: "status",
+    header: "Статус",
+    cell: (row) => (
+      <Badge.Root color={STATUS[row.status].color}>{STATUS[row.status].label}</Badge.Root>
+    ),
+  },
+  { id: "date", header: "Дата", accessor: "date", numeric: true },
+  { id: "items", header: "Позиций", accessor: "items", numeric: true },
+  {
+    id: "total",
+    header: "Сумма",
+    accessor: "total",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.total),
+  },
+];
+
+/** The kit keeps nothing: the app stores the choice where it likes (here, local storage). */
+const STORAGE_KEY = "orders.hiddenColumns";
+const DEFAULT_HIDDEN = ["city", "items"];
+
+function readHidden(): string[] {
+  try {
+    const saved = window.localStorage.getItem(STORAGE_KEY);
+    return saved ? (JSON.parse(saved) as string[]) : DEFAULT_HIDDEN;
+  } catch {
+    return DEFAULT_HIDDEN;
+  }
+}
+
+export default function DataTableColumnsVisibilityExample() {
+  const [hidden, setHidden] = React.useState(readHidden);
+
+  const changeHidden = (next: string[]) => {
+    setHidden(next);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    } catch {
+      // Private mode or a full storage: the choice lasts until the reload.
+    }
+  };
+
+  return (
+    <DataTable
+      columns={COLUMNS}
+      hiddenColumns={hidden}
+      onHiddenColumnsChange={changeHidden}
+      rows={ORDERS}
+      getRowKey={(row) => row.id}
+      stickyFirstColumn
+      toolbar={
+        <div className={styles.toolbar}>
+          <Typography as="span" variant="body-s" tone="secondary">
+            Заказы за неделю: {ORDERS.length}
+          </Typography>
+          <DataTable.ColumnsMenu />
+        </div>
+      }
+    />
+  );
+}

package/dist/skill/reference/components/data-table/examples/content-width.tsx

@@ -0,0 +1,65 @@
+/** A short lookup table sized by its content with a centered column, and a `grow` column that takes the free width and wraps — `fullWidth`, `align`, `grow`. */
+import { DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Task = { id: string; task: string; hours: number; note: string };
+
+const TASKS: Task[] = [
+  {
+    id: "T-12",
+    task: "Сверстать отчёт по спринту",
+    hours: 3,
+    note: "Сводка по закрытым задачам, графики скорости команды и список того, что переносится в следующий спринт.",
+  },
+  {
+    id: "T-13",
+    task: "Проверить миграции БД",
+    hours: 1.5,
+    note: "Прогнать миграции на копии продовой базы и сравнить время выполнения с прошлым релизом.",
+  },
+  {
+    id: "T-14",
+    task: "Обновить подсказки в форме входа",
+    hours: 2,
+    note: "Тексты ошибок и подсказок под полями, согласовать формулировки с поддержкой.",
+  },
+];
+
+const HOURS = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 1 });
+
+const LOOKUP_COLUMNS: DataTableColumn<Task>[] = [
+  { id: "id", header: "Задача", accessor: "id" },
+  { id: "task", header: "Описание", accessor: "task" },
+  { id: "hours", header: "Часы", align: "center", cell: (row) => HOURS.format(row.hours) },
+];
+
+const NOTE_COLUMNS: DataTableColumn<Task>[] = [
+  { id: "id", header: "Задача", accessor: "id" },
+  { id: "task", header: "Название", accessor: "task" },
+  { id: "note", header: "Комментарий", accessor: "note", grow: true },
+];
+
+export default function DataTableContentWidthExample() {
+  return (
+    <>
+      <div className={styles.specimen}>
+        <DataTable
+          columns={LOOKUP_COLUMNS}
+          rows={TASKS}
+          getRowKey={(row) => row.id}
+          fullWidth={false}
+        />
+        <Typography as="span" variant="caption" tone="muted">
+          fullWidth=&#123;false&#125; · align="center"
+        </Typography>
+      </div>
+      <div className={styles.specimen}>
+        <DataTable columns={NOTE_COLUMNS} rows={TASKS} getRowKey={(row) => row.id} />
+        <Typography as="span" variant="caption" tone="muted">
+          grow
+        </Typography>
+      </div>
+    </>
+  );
+}

package/dist/skill/reference/components/data-table/examples/controlled.tsx

@@ -0,0 +1,56 @@
+/** Sort and page owned by the parent (a URL or a store): a header click goes asc → desc → none, a new sort returns to page 1 — `sort`, `onSortChange`, `page`, `onPageChange`. */
+import { DataTable, type DataTableColumn, type DataTableSortState } from "prime-ui-kit";
+import * as React from "react";
+
+type Order = { id: number; customer: string; city: string; total: number };
+
+const CUSTOMERS = ["Анна Соколова", "Борис Кравец", "Вера Львова", "Глеб Миронов", "Дарья Носова"];
+const CITIES = ["Москва", "Казань", "Самара", "Томск", "Пермь"];
+
+const ORDERS: Order[] = Array.from({ length: 23 }, (_, i) => ({
+  id: 5000 + i,
+  customer: CUSTOMERS[i % CUSTOMERS.length],
+  city: CITIES[(i * 3) % CITIES.length],
+  total: 1200 + ((i * 7919) % 48_000),
+}));
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Order>[] = [
+  { id: "id", header: "№", accessor: "id", sortable: true, numeric: true, width: "5rem" },
+  { id: "customer", header: "Покупатель", accessor: "customer", sortable: true },
+  { id: "city", header: "Город", accessor: "city", sortable: true },
+  {
+    id: "total",
+    header: "Сумма",
+    accessor: "total",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.total),
+  },
+];
+
+export default function DataTableControlledExample() {
+  const [sort, setSort] = React.useState<DataTableSortState>({ columnId: "total", order: "desc" });
+  const [page, setPage] = React.useState(1);
+
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={ORDERS}
+      getRowKey={(row) => row.id}
+      sort={sort}
+      onSortChange={(next) => {
+        setSort(next);
+        setPage(1);
+      }}
+      page={page}
+      onPageChange={setPage}
+      pageSize={5}
+    />
+  );
+}

package/dist/skill/reference/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/dist/skill/reference/components/data-table/examples/examples.module.css

@@ -0,0 +1,86 @@
+/* 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;
+}
+
+/* fill-height: a panel of a fixed height (the rest of a page, a pane) the table fills. */
+.fillStage {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: calc(var(--prime-space-24) * 4);
+  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/dist/skill/reference/components/data-table/examples/fill-height.tsx

@@ -0,0 +1,55 @@
+/** An audit log that fills the height of its panel and loads older entries while scrolling; the status shows while the request is pending — `scrollHeight`, `paging`, `onLoadMore`. */
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type LogRow = { id: number; event: string; user: string; time: string };
+
+const EVENTS = ["Вход в систему", "Изменён тариф", "Загружен файл", "Создан отчёт", "Выход"];
+const USERS = ["Анна Смирнова", "Борис Котов", "Вера Ильина", "Глеб Орлов", "Дарья Лис"];
+
+const LOG: LogRow[] = Array.from({ length: 120 }, (_, i) => ({
+  id: 4800 - i,
+  event: EVENTS[i % EVENTS.length],
+  user: USERS[(i * 2) % USERS.length],
+  time: `${String(18 - (i % 10)).padStart(2, "0")}:${String((i * 7) % 60).padStart(2, "0")}`,
+}));
+
+const COLUMNS: DataTableColumn<LogRow>[] = [
+  { id: "id", header: "№", accessor: "id", numeric: true, width: "5rem" },
+  { id: "event", header: "Событие", accessor: "event" },
+  { id: "user", header: "Пользователь", accessor: "user" },
+  { id: "time", header: "Время", accessor: "time", numeric: true },
+];
+
+const BATCH = 30;
+
+export default function DataTableFillHeightExample() {
+  const [loaded, setLoaded] = React.useState(BATCH);
+
+  // The returned promise is the loading state: the table shows its status until it settles.
+  const loadMore = () =>
+    new Promise<void>((resolve) => {
+      window.setTimeout(() => {
+        setLoaded((count) => Math.min(count + BATCH, LOG.length));
+        resolve();
+      }, 700);
+    });
+
+  return (
+    <div className={styles.fillStage}>
+      <DataTable
+        columns={COLUMNS}
+        rows={LOG.slice(0, loaded)}
+        getRowKey={(row) => row.id}
+        paging="infinite"
+        pageSize={BATCH}
+        hasMore={loaded < LOG.length}
+        onLoadMore={loadMore}
+        scrollHeight="fill"
+        stickyHeader
+      />
+    </div>
+  );
+}

package/dist/skill/reference/components/data-table/examples/groups.tsx

@@ -0,0 +1,73 @@
+/** Payments grouped by month with the month's total in its header row; headers stay on top while their rows scroll — `getRowGroup`, `renderGroupHeader`, `stickyGroupHeaders`. */
+import { DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+
+type Payment = { id: string; month: string; client: string; date: string; amount: number };
+
+const PAYMENTS: Payment[] = [
+  {
+    id: "P-210",
+    month: "Октябрь 2026",
+    client: "ООО «Северный ветер»",
+    date: "07.10",
+    amount: 184_500,
+  },
+  { id: "P-209", month: "Октябрь 2026", client: "ИП Козлов", date: "04.10", amount: 27_900 },
+  { id: "P-208", month: "Октябрь 2026", client: "АО «Технопарк»", date: "02.10", amount: 612_000 },
+  { id: "P-207", month: "Сентябрь 2026", client: "ООО «Лето»", date: "28.09", amount: 58_350 },
+  { id: "P-206", month: "Сентябрь 2026", client: "ООО «Гранит»", date: "21.09", amount: 241_800 },
+  { id: "P-205", month: "Сентябрь 2026", client: "ИП Соколова", date: "15.09", amount: 12_400 },
+  { id: "P-204", month: "Сентябрь 2026", client: "ООО «Вектор»", date: "03.09", amount: 96_000 },
+  { id: "P-203", month: "Август 2026", client: "АО «Технопарк»", date: "29.08", amount: 305_000 },
+  {
+    id: "P-202",
+    month: "Август 2026",
+    client: "ООО «Северный ветер»",
+    date: "18.08",
+    amount: 75_200,
+  },
+  { id: "P-201", month: "Август 2026", client: "ИП Козлов", date: "06.08", amount: 31_600 },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Payment>[] = [
+  { id: "client", header: "Плательщик", accessor: "client", sortable: true },
+  { id: "date", header: "Дата", accessor: "date", numeric: true },
+  {
+    id: "amount",
+    header: "Сумма",
+    accessor: "amount",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.amount),
+  },
+];
+
+export default function DataTableGroupsExample() {
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={PAYMENTS}
+      getRowKey={(row) => row.id}
+      getRowGroup={(row) => row.month}
+      renderGroupHeader={(group) => (
+        <>
+          <span>
+            {group.key} · {group.rows.length}
+          </span>
+          <Typography as="span" variant="caption" tone="secondary">
+            {RUB.format(group.rows.reduce((sum, row) => sum + row.amount, 0))}
+          </Typography>
+        </>
+      )}
+      stickyGroupHeaders
+      stickyHeader
+      paging="none"
+      scrollHeight={320}
+    />
+  );
+}

package/dist/skill/reference/components/data-table/examples/heatmap.tsx

@@ -0,0 +1,44 @@
+/** Deals closed per manager and month as a heatmap: each count shades its cell on the chart scale and stays readable in it — `scale`, `numeric`. */
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+
+type Row = { manager: string; jul: number; aug: number; sep: number; oct: number };
+
+const MONTHS = [
+  { id: "jul", header: "Июль" },
+  { id: "aug", header: "Август" },
+  { id: "sep", header: "Сентябрь" },
+  { id: "oct", header: "Октябрь" },
+] as const;
+
+const ROWS: Row[] = [
+  { manager: "Ольга Смирнова", jul: 14, aug: 18, sep: 22, oct: 25 },
+  { manager: "Игорь Волков", jul: 9, aug: 7, sep: 12, oct: 10 },
+  { manager: "Мария Орлова", jul: 4, aug: 11, sep: 16, oct: 21 },
+  { manager: "Глеб Котов", jul: 2, aug: 3, sep: 5, oct: 8 },
+];
+
+const COLUMNS: DataTableColumn<Row>[] = [
+  { id: "manager", header: "Менеджер", accessor: "manager" },
+  // One fixed range for every month, so the same count has the same shade in each column.
+  ...MONTHS.map(
+    ({ id, header }): DataTableColumn<Row> => ({
+      id,
+      header,
+      accessor: id,
+      numeric: true,
+      scale: { min: 0, max: 25 },
+    }),
+  ),
+];
+
+export default function DataTableHeatmapExample() {
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={ROWS}
+      getRowKey={(row) => row.manager}
+      paging="none"
+      highlightRowOnHover={false}
+    />
+  );
+}

package/dist/skill/reference/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}
+    />
+  );
+}