prime-ui-kit 0.10.0 → 0.11.0

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

@@ -0,0 +1,181 @@
+/** A CRM deal list the server sorts, pages and searches; a new search returns to page 1 — `source`, `rowCount`, `sort`, `page`, `loading`. */
+import {
+  Badge,
+  DataTable,
+  type DataTableColumn,
+  type DataTableSortState,
+  matchesSmartFilter,
+  SmartFilter,
+  type SmartFilterField,
+  type SmartFilterValue,
+} from "prime-ui-kit";
+import * as React from "react";
+
+type Stage = "new" | "talks" | "won" | "lost";
+type Deal = { id: number; client: string; manager: string; stage: Stage; amount: number };
+type DealsRequest = {
+  page: number;
+  sort: DataTableSortState;
+  search: string;
+  filter: SmartFilterValue;
+};
+type DealsPage = { rows: Deal[]; total: number };
+
+const PAGE_SIZE = 8;
+/** The fake server answers after this delay, like a real request. */
+const LATENCY_MS = 600;
+
+const STAGE: Record<Stage, { label: string; color: "blue" | "orange" | "green" | "gray" }> = {
+  new: { label: "Новая", color: "blue" },
+  talks: { label: "Переговоры", color: "orange" },
+  won: { label: "Выиграна", color: "green" },
+  lost: { label: "Проиграна", color: "gray" },
+};
+const STAGES = Object.keys(STAGE) as Stage[];
+
+const CLIENTS = [
+  "ООО «Вектор»",
+  "АО «Северсталь-Логистик»",
+  "ИП Смирнова",
+  "ООО «Альфа-Трейд»",
+  "ЗАО «Меридиан»",
+  "ООО «Гринлайн»",
+  "АО «Техносфера»",
+  "ООО «Купол»",
+  "ООО «Ространс»",
+  "АО «Нордик Фудс»",
+  "ООО «Пиксель Медиа»",
+];
+const MANAGERS = ["Анна Климова", "Илья Петров", "Марат Хасанов", "Ольга Тарасова"];
+
+/** The server's table: 137 deals. */
+const DEALS: Deal[] = Array.from({ length: 137 }, (_, i) => ({
+  id: 2401 + i,
+  client: CLIENTS[(i * 7) % CLIENTS.length],
+  manager: MANAGERS[(i * 3) % MANAGERS.length],
+  stage: STAGES[(i * 5) % STAGES.length],
+  amount: 40_000 + ((i * 7919) % 97) * 12_500,
+}));
+
+const FIELDS: SmartFilterField[] = [
+  {
+    key: "stage",
+    label: "Этап",
+    options: STAGES.map((value) => ({ value, label: STAGE[value].label })),
+  },
+  {
+    key: "manager",
+    label: "Менеджер",
+    options: MANAGERS.map((value) => ({ value, label: value })),
+  },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Deal>[] = [
+  { id: "id", header: "Сделка", accessor: "id", sortable: true, numeric: true, align: "start" },
+  { id: "client", header: "Клиент", accessor: "client", sortable: true },
+  { id: "manager", header: "Менеджер", accessor: "manager", sortable: true },
+  {
+    id: "stage",
+    header: "Этап",
+    accessor: "stage",
+    cell: (row) => <Badge.Root color={STAGE[row.stage].color}>{STAGE[row.stage].label}</Badge.Root>,
+  },
+  {
+    id: "amount",
+    header: "Сумма",
+    accessor: "amount",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.amount),
+  },
+];
+
+const compare = (a: string | number, b: string | number) =>
+  typeof a === "number" && typeof b === "number" ? a - b : String(a).localeCompare(String(b), "ru");
+
+/** Fake API: searches, filters, sorts and cuts one page on the «server», then answers late. */
+function fetchDeals({ page, sort, search, filter }: DealsRequest): Promise<DealsPage> {
+  const query = search.trim().toLowerCase();
+  const found = DEALS.filter(
+    (row) =>
+      matchesSmartFilter(filter.stage, row.stage) &&
+      matchesSmartFilter(filter.manager, row.manager) &&
+      (String(row.id).includes(query) || row.client.toLowerCase().includes(query)),
+  );
+  if (sort) {
+    const key = sort.columnId as keyof Deal;
+    const direction = sort.order === "asc" ? 1 : -1;
+    found.sort((a, b) => compare(a[key], b[key]) * direction);
+  }
+  const start = (page - 1) * PAGE_SIZE;
+  const answer = { rows: found.slice(start, start + PAGE_SIZE), total: found.length };
+  return new Promise((resolve) => window.setTimeout(() => resolve(answer), LATENCY_MS));
+}
+
+export default function DataTableServerExample() {
+  const [filter, setFilter] = React.useState<SmartFilterValue>({});
+  const [search, setSearch] = React.useState("");
+  const [sort, setSort] = React.useState<DataTableSortState>({ columnId: "amount", order: "desc" });
+  const [page, setPage] = React.useState(1);
+  const [result, setResult] = React.useState<DealsPage>({ rows: [], total: 0 });
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    let latest = true;
+    setLoading(true);
+    fetchDeals({ page, sort, search, filter }).then((answer) => {
+      // A newer request replaced this one: its answer is dropped.
+      if (!latest) return;
+      setResult(answer);
+      setLoading(false);
+    });
+    return () => {
+      latest = false;
+    };
+  }, [page, sort, search, filter]);
+
+  // A new search or filter is another result set: back to its first page.
+  const changeSearch = (next: string) => {
+    setSearch(next);
+    setPage(1);
+  };
+  const changeFilter = (next: SmartFilterValue) => {
+    setFilter(next);
+    setPage(1);
+  };
+
+  return (
+    <DataTable
+      source="server"
+      columns={COLUMNS}
+      rows={result.rows}
+      rowCount={result.total}
+      getRowKey={(row) => row.id}
+      pageSize={PAGE_SIZE}
+      page={page}
+      onPageChange={setPage}
+      sort={sort}
+      onSortChange={setSort}
+      loading={loading}
+      empty="Сделок не найдено — измените запрос или фильтры"
+      toolbar={
+        <SmartFilter.Root
+          fields={FIELDS}
+          value={filter}
+          onValueChange={changeFilter}
+          search={search}
+          onSearchChange={changeSearch}
+        >
+          <SmartFilter.Toolbar />
+          <SmartFilter.Chips />
+        </SmartFilter.Root>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,56 @@
+/** Every density: rows from 36 to 52 px, the head at the control height of the tier — `size`. */
+import { Badge, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Invoice = { id: string; client: string; paid: boolean; amount: number };
+
+const INVOICES: Invoice[] = [
+  { id: "INV-1042", client: "ООО «Северный ветер»", paid: true, amount: 184_500 },
+  { id: "INV-1043", client: "ИП Гончаров", paid: false, amount: 42_000 },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Invoice>[] = [
+  { id: "id", header: "Счёт", accessor: "id", width: "7rem" },
+  { id: "client", header: "Клиент", accessor: "client" },
+  {
+    id: "status",
+    header: "Статус",
+    cell: (row) =>
+      row.paid ? (
+        <Badge.Root color="green">Оплачен</Badge.Root>
+      ) : (
+        <Badge.Root color="orange">Ожидает</Badge.Root>
+      ),
+  },
+  { id: "amount", header: "Сумма", numeric: true, cell: (row) => RUB.format(row.amount) },
+];
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+export default function DataTableSizesExample() {
+  return (
+    <div className={styles.specimens}>
+      {SIZES.map((size) => (
+        <div key={size} className={styles.specimen}>
+          <DataTable
+            size={size}
+            columns={COLUMNS}
+            rows={INVOICES}
+            getRowKey={(row) => row.id}
+            paging="none"
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+/** Loading skeleton, an empty period and a load error with a retry: the head stays, only the body changes — `loading`, `loadingRows`, `empty`, `error`. */
+import { Button, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Payment = { id: string; payer: string; amount: number };
+
+const COLUMNS: DataTableColumn<Payment>[] = [
+  { id: "id", header: "Платёж", accessor: "id" },
+  { id: "payer", header: "Плательщик", accessor: "payer" },
+  { id: "amount", header: "Сумма, ₽", accessor: "amount", numeric: true },
+];
+
+const NO_PAYMENTS: Payment[] = [];
+
+export default function DataTableStatesExample() {
+  return (
+    <>
+      <div className={styles.specimen}>
+        <DataTable columns={COLUMNS} rows={NO_PAYMENTS} loading loadingRows={3} />
+        <Typography as="span" variant="caption" tone="muted">
+          loading · loadingRows=&#123;3&#125;
+        </Typography>
+      </div>
+      <div className={styles.specimen}>
+        <DataTable columns={COLUMNS} rows={NO_PAYMENTS} empty="Платежей за выбранный период нет" />
+        <Typography as="span" variant="caption" tone="muted">
+          empty
+        </Typography>
+      </div>
+      <div className={styles.specimen}>
+        <DataTable
+          columns={COLUMNS}
+          rows={NO_PAYMENTS}
+          error={
+            <>
+              Не удалось загрузить платежи
+              <Button.Root variant="outline" tone="neutral" size="s">
+                Повторить
+              </Button.Root>
+            </>
+          }
+        />
+        <Typography as="span" variant="caption" tone="muted">
+          error
+        </Typography>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,54 @@
+/** Monthly sales by region in a 280 px window: the head and the region column stay while scrolling both ways — `stickyHeader`, `stickyFirstColumn`, `scrollHeight`. */
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+
+type Region = { region: string; sales: number[] };
+
+const MONTHS = ["Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"];
+const REGIONS = [
+  "Москва",
+  "Санкт-Петербург",
+  "Новосибирск",
+  "Екатеринбург",
+  "Казань",
+  "Нижний Новгород",
+  "Челябинск",
+  "Самара",
+  "Омск",
+  "Ростов-на-Дону",
+  "Уфа",
+  "Красноярск",
+];
+
+const SALES: Region[] = REGIONS.map((region, r) => ({
+  region,
+  sales: MONTHS.map((_, m) => 120 + ((r * 37 + m * 53) % 480)),
+}));
+
+const INT = new Intl.NumberFormat("ru-RU");
+
+const COLUMNS: DataTableColumn<Region>[] = [
+  { id: "region", header: "Регион", accessor: "region", minWidth: "10rem" },
+  ...MONTHS.map(
+    (label, m): DataTableColumn<Region> => ({
+      id: label,
+      header: label,
+      numeric: true,
+      minWidth: "5rem",
+      cell: (row) => INT.format(row.sales[m]),
+    }),
+  ),
+];
+
+export default function DataTableStickyExample() {
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={SALES}
+      getRowKey={(row) => row.region}
+      paging="none"
+      stickyHeader
+      stickyFirstColumn
+      scrollHeight={280}
+    />
+  );
+}

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

@@ -0,0 +1,124 @@
+/** A campaign list with search, a status filter and export above the table; the empty text when nothing matches — `toolbar`, `empty`. */
+import {
+  Badge,
+  Button,
+  DataTable,
+  type DataTableColumn,
+  Icon,
+  Input,
+  SegmentedControl,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Status = "active" | "paused" | "archived";
+type Campaign = { id: string; name: string; status: Status; clicks: number; ctr: number };
+
+const STATUS: Record<Status, { label: string; color: "green" | "orange" | "gray" }> = {
+  active: { label: "Активна", color: "green" },
+  paused: { label: "Пауза", color: "orange" },
+  archived: { label: "Архив", color: "gray" },
+};
+
+const CAMPAIGNS: Campaign[] = [
+  { id: "c1", name: "Осенняя распродажа", status: "active", clicks: 18_420, ctr: 3.4 },
+  { id: "c2", name: "Возврат корзины", status: "active", clicks: 6_105, ctr: 5.1 },
+  { id: "c3", name: "Новые клиенты — поиск", status: "paused", clicks: 2_390, ctr: 1.8 },
+  { id: "c4", name: "Ретаргетинг 30 дней", status: "active", clicks: 9_874, ctr: 2.7 },
+  { id: "c5", name: "Летний промокод", status: "archived", clicks: 31_002, ctr: 4.0 },
+  { id: "c6", name: "Бренд — медийка", status: "paused", clicks: 1_120, ctr: 0.9 },
+  { id: "c7", name: "Чёрная пятница — тизер", status: "active", clicks: 4_560, ctr: 2.2 },
+];
+
+const INT = new Intl.NumberFormat("ru-RU");
+const PCT = new Intl.NumberFormat("ru-RU", { minimumFractionDigits: 1, maximumFractionDigits: 1 });
+
+const COLUMNS: DataTableColumn<Campaign>[] = [
+  {
+    id: "name",
+    header: "Кампания",
+    accessor: "name",
+    sortable: true,
+    truncate: true,
+    maxWidth: "16rem",
+  },
+  {
+    id: "status",
+    header: "Статус",
+    accessor: "status",
+    cell: (row) => (
+      <Badge.Root color={STATUS[row.status].color}>{STATUS[row.status].label}</Badge.Root>
+    ),
+  },
+  {
+    id: "clicks",
+    header: "Клики",
+    accessor: "clicks",
+    sortable: true,
+    numeric: true,
+    cell: (row) => INT.format(row.clicks),
+  },
+  {
+    id: "ctr",
+    header: "CTR, %",
+    accessor: "ctr",
+    sortable: true,
+    numeric: true,
+    cell: (row) => PCT.format(row.ctr),
+  },
+];
+
+export default function DataTableToolbarExample() {
+  const [query, setQuery] = React.useState("");
+  const [status, setStatus] = React.useState("all");
+
+  const found = CAMPAIGNS.filter(
+    (row) =>
+      (status === "all" || row.status === status) &&
+      row.name.toLowerCase().includes(query.trim().toLowerCase()),
+  );
+
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={found}
+      getRowKey={(row) => row.id}
+      pageSize={5}
+      empty="Ничего не найдено — измените запрос или фильтр"
+      toolbar={
+        <div className={styles.toolbar}>
+          <div className={styles.filters}>
+            <Input.Root size="s" className={styles.search}>
+              <Input.Wrapper>
+                <Input.Icon side="start">
+                  <Icon name="action.search" />
+                </Input.Icon>
+                <Input.Field
+                  type="search"
+                  placeholder="Поиск кампаний"
+                  aria-label="Поиск кампаний"
+                  value={query}
+                  onValueChange={setQuery}
+                />
+              </Input.Wrapper>
+            </Input.Root>
+            <SegmentedControl.Root
+              size="s"
+              aria-label="Статус"
+              value={status}
+              onValueChange={setStatus}
+            >
+              <SegmentedControl.Item value="all">Все</SegmentedControl.Item>
+              <SegmentedControl.Item value="active">Активные</SegmentedControl.Item>
+              <SegmentedControl.Item value="paused">На паузе</SegmentedControl.Item>
+            </SegmentedControl.Root>
+          </div>
+          <Button.Root variant="outline" tone="neutral" size="s">
+            Экспорт
+          </Button.Root>
+        </div>
+      }
+    />
+  );
+}