prime-ui-kit 0.14.0 → 0.16.0

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

@@ -0,0 +1,355 @@
+/** A list page: the title, a line of figures, search, filters and the one primary action in the app header, a DataTable of invoices with statuses, row actions, pages and a filtered empty state — `empty`, `pageSize`, `stickyFirstColumn`. */
+import {
+  AppHeader,
+  Avatar,
+  Badge,
+  Button,
+  DataTable,
+  type DataTableColumn,
+  Dropdown,
+  EmptyPage,
+  Icon,
+  matchesSmartFilter,
+  PageContent,
+  PageToolbar,
+  SmartFilter,
+  type SmartFilterField,
+  type SmartFilterValue,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./screen.module.css";
+
+type Status = "draft" | "sent" | "paid" | "overdue";
+
+type Invoice = {
+  id: string;
+  client: string;
+  inn: string;
+  manager: string;
+  due: string;
+  amount: number;
+  status: Status;
+};
+
+/** One tone per status across the product: the text carries the meaning, the tone repeats it. */
+const STATUS = {
+  draft: { label: "Черновик", tone: "neutral" },
+  sent: { label: "Отправлен", tone: "info" },
+  paid: { label: "Оплачен", tone: "success" },
+  overdue: { label: "Просрочен", tone: "danger" },
+} as const satisfies Record<Status, { label: string; tone: string }>;
+
+const INVOICES: Invoice[] = [
+  {
+    id: "2026-0418",
+    client: "ООО «Северный ветер»",
+    inn: "7704 512 908",
+    manager: "Анна Климова",
+    due: "2026-10-14",
+    amount: 486_000,
+    status: "sent",
+  },
+  {
+    id: "2026-0417",
+    client: "АО «Техностиль»",
+    inn: "7816 330 147",
+    manager: "Илья Петров",
+    due: "2026-10-02",
+    amount: 1_240_500,
+    status: "overdue",
+  },
+  {
+    id: "2026-0416",
+    client: "ИП Соколова М. А.",
+    inn: "5024 118 773",
+    manager: "Анна Климова",
+    due: "2026-10-20",
+    amount: 58_900,
+    status: "draft",
+  },
+  {
+    id: "2026-0415",
+    client: "ООО «Логистик Плюс»",
+    inn: "6658 402 215",
+    manager: "Марат Хасанов",
+    due: "2026-09-30",
+    amount: 312_000,
+    status: "paid",
+  },
+  {
+    id: "2026-0414",
+    client: "ООО «Гранит»",
+    inn: "5407 221 690",
+    manager: "Илья Петров",
+    due: "2026-09-28",
+    amount: 94_750,
+    status: "paid",
+  },
+  {
+    id: "2026-0413",
+    client: "ЗАО «Альфа Медиа»",
+    inn: "7702 845 336",
+    manager: "Марат Хасанов",
+    due: "2026-09-25",
+    amount: 760_000,
+    status: "overdue",
+  },
+  {
+    id: "2026-0412",
+    client: "ООО «Зелёный квартал»",
+    inn: "2310 194 552",
+    manager: "Анна Климова",
+    due: "2026-10-18",
+    amount: 205_300,
+    status: "sent",
+  },
+  {
+    id: "2026-0411",
+    client: "ООО «Мостострой»",
+    inn: "7728 609 481",
+    manager: "Илья Петров",
+    due: "2026-09-21",
+    amount: 2_480_000,
+    status: "paid",
+  },
+  {
+    id: "2026-0410",
+    client: "ООО «Пекарня №1»",
+    inn: "7811 077 264",
+    manager: "Марат Хасанов",
+    due: "2026-10-25",
+    amount: 37_200,
+    status: "draft",
+  },
+  {
+    id: "2026-0409",
+    client: "АО «Волга-Энерго»",
+    inn: "6316 255 018",
+    manager: "Анна Климова",
+    due: "2026-09-18",
+    amount: 1_095_000,
+    status: "paid",
+  },
+];
+
+const MONEY = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+const DAY = new Intl.DateTimeFormat("ru-RU", { day: "numeric", month: "short" });
+
+const OVERDUE = INVOICES.filter((row) => row.status === "overdue");
+
+/** The header's line of context carries data: how many invoices and what is overdue. */
+const SUMMARY = `${INVOICES.length} счетов · просрочено ${OVERDUE.length} на ${MONEY.format(
+  OVERDUE.reduce((sum, row) => sum + row.amount, 0),
+)}`;
+
+const asOptions = (values: string[]) => values.map((value) => ({ value, label: value }));
+
+const FIELDS: SmartFilterField[] = [
+  {
+    key: "status",
+    label: "Статус",
+    options: (Object.keys(STATUS) as Status[]).map((value) => ({
+      value,
+      label: STATUS[value].label,
+    })),
+  },
+  {
+    key: "manager",
+    label: "Менеджер",
+    finite: false,
+    options: asOptions(["Анна Климова", "Илья Петров", "Марат Хасанов"]),
+  },
+];
+
+const initials = (name: string) =>
+  name
+    .replace(/^(ООО|АО|ЗАО|ИП)\s+/, "")
+    .replace(/[^\p{L}\s]/gu, "")
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase();
+
+const COLUMNS: DataTableColumn<Invoice>[] = [
+  { id: "id", header: "Счёт", accessor: "id", sortable: true, numeric: true, align: "start" },
+  {
+    id: "client",
+    header: "Клиент",
+    accessor: "client",
+    sortable: true,
+    minWidth: "16rem",
+    cell: (row) => (
+      <span className={styles.client}>
+        <Avatar.Root size="s" color="gray">
+          <Avatar.Fallback>{initials(row.client)}</Avatar.Fallback>
+        </Avatar.Root>
+        <span className={styles.clientText}>
+          <Typography as="span" variant="body-m">
+            {row.client}
+          </Typography>
+          <Typography as="span" variant="caption" tone="muted">
+            ИНН {row.inn}
+          </Typography>
+        </span>
+      </span>
+    ),
+  },
+  {
+    id: "status",
+    header: "Статус",
+    accessor: "status",
+    cell: (row) => (
+      <Badge.Root tone={STATUS[row.status].tone}>{STATUS[row.status].label}</Badge.Root>
+    ),
+  },
+  {
+    id: "due",
+    header: "Оплатить до",
+    accessor: "due",
+    sortable: true,
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => DAY.format(new Date(row.due)),
+  },
+  {
+    id: "amount",
+    header: "Сумма",
+    accessor: "amount",
+    sortable: true,
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.amount),
+  },
+  {
+    id: "actions",
+    header: "Действия",
+    hideHeader: true,
+    width: "3.5rem",
+    align: "end",
+    cell: (row) => (
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root
+            size="s"
+            variant="ghost"
+            tone="neutral"
+            aria-label={`Действия со счётом ${row.id}`}
+          >
+            <Button.Icon>
+              <Icon name="action.more" />
+            </Button.Icon>
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Открыть</Dropdown.Item>
+          <Dropdown.Item>Скачать PDF</Dropdown.Item>
+          <Dropdown.Item>Отправить повторно</Dropdown.Item>
+          <Dropdown.Separator />
+          <Dropdown.Item tone="danger">Удалить</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+    ),
+  },
+];
+
+export default function DataTableScreenExample() {
+  const [filter, setFilter] = React.useState<SmartFilterValue>({});
+  const [search, setSearch] = React.useState("");
+
+  const query = search.trim().toLowerCase();
+  const rows = INVOICES.filter(
+    (row) =>
+      matchesSmartFilter(filter.status, row.status) &&
+      matchesSmartFilter(filter.manager, row.manager) &&
+      (row.id.includes(query) || row.client.toLowerCase().includes(query)),
+  );
+
+  const resetFilters = () => {
+    setFilter({});
+    setSearch("");
+  };
+
+  return (
+    <>
+      {/* The page lives in the app header: the only h1, a line of figures under it, and the page's
+          tools — search, filters, export, the one primary action; main has no PageContent.Header. */}
+      <AppHeader.Root>
+        <AppHeader.Start>
+          <AppHeader.Title>
+            Счета
+            <AppHeader.Description>{SUMMARY}</AppHeader.Description>
+          </AppHeader.Title>
+        </AppHeader.Start>
+        <AppHeader.Tools>
+          <SmartFilter.Root
+            fields={FIELDS}
+            value={filter}
+            onValueChange={setFilter}
+            search={search}
+            onSearchChange={setSearch}
+          >
+            <PageToolbar.Root aria-label="Счета">
+              <PageToolbar.Tools>
+                <SmartFilter.Toolbar />
+              </PageToolbar.Tools>
+              <PageToolbar.Actions>
+                <Button.Root variant="soft" tone="neutral" aria-label="Экспорт в Excel">
+                  <Button.Icon>
+                    <Icon name="action.download" />
+                  </Button.Icon>
+                </Button.Root>
+                <Button.Root>
+                  <Button.Icon>
+                    <Icon name="action.add" />
+                  </Button.Icon>
+                  Новый счёт
+                </Button.Root>
+              </PageToolbar.Actions>
+              <PageToolbar.Chips>
+                <SmartFilter.Chips />
+              </PageToolbar.Chips>
+            </PageToolbar.Root>
+          </SmartFilter.Root>
+        </AppHeader.Tools>
+      </AppHeader.Root>
+
+      <PageContent.Root>
+        <PageContent.Body>
+          <DataTable
+            columns={COLUMNS}
+            rows={rows}
+            getRowKey={(row) => row.id}
+            getRowLabel={(row) => `Счёт ${row.id}`}
+            pageSize={6}
+            stickyFirstColumn
+            defaultSort={{ columnId: "due", order: "desc" }}
+            empty={
+              <EmptyPage.Root size="s" role="status" aria-labelledby="invoices-empty">
+                <EmptyPage.Icon>
+                  <Icon name="action.search" />
+                </EmptyPage.Icon>
+                <EmptyPage.Title as="p" id="invoices-empty">
+                  Счетов не найдено
+                </EmptyPage.Title>
+                <EmptyPage.Description>Измените запрос или сбросьте фильтры.</EmptyPage.Description>
+                <EmptyPage.Actions>
+                  <Button.Root variant="soft" tone="neutral" onClick={resetFilters}>
+                    Сбросить фильтры
+                  </Button.Root>
+                </EmptyPage.Actions>
+              </EmptyPage.Root>
+            }
+          />
+        </PageContent.Body>
+      </PageContent.Root>
+    </>
+  );
+}

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

@@ -1,8 +1,6 @@
 /** 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[] = [
@@ -24,9 +22,9 @@ const COLUMNS: DataTableColumn<Invoice>[] = [
     header: "Статус",
     cell: (row) =>
       row.paid ? (
-        <Badge.Root color="green">Оплачен</Badge.Root>
+        <Badge.Root tone="success">Оплачен</Badge.Root>
       ) : (
-        <Badge.Root color="orange">Ожидает</Badge.Root>
+        <Badge.Root tone="warning">Ожидает</Badge.Root>
       ),
   },
   { id: "amount", header: "Сумма", numeric: true, cell: (row) => RUB.format(row.amount) },
@@ -36,21 +34,23 @@ 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 key={size}>
+          <div>
+            <DataTable
+              size={size}
+              columns={COLUMNS}
+              rows={INVOICES}
+              getRowKey={(row) => row.id}
+              paging="none"
+            />
+            <Typography as="span" variant="caption" tone="muted">
+              {size}
+            </Typography>
+          </div>
         </div>
       ))}
-    </div>
+    </>
   );
 }

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

@@ -1,8 +1,6 @@
-/** Loading skeleton, an empty period and a load error with a retry: the head stays, only the body changes — `loading`, `loadingRows`, `empty`, `error`. */
+/** Loading skeleton, an empty period and a load error with a retry: the head stays, only the body changes — `loading`, `loadingRows`, `empty`, `loadError`. */
 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>[] = [
@@ -16,34 +14,44 @@ 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>
+          <DataTable columns={COLUMNS} rows={NO_PAYMENTS} loading loadingRows={3} />
+          <Typography as="span" variant="caption" tone="muted">
+            loading · loadingRows=&#123;3&#125;
+          </Typography>
+        </div>
       </div>
-      <div className={styles.specimen}>
-        <DataTable columns={COLUMNS} rows={NO_PAYMENTS} empty="Платежей за выбранный период нет" />
-        <Typography as="span" variant="caption" tone="muted">
-          empty
-        </Typography>
+      <div>
+        <div>
+          <DataTable
+            columns={COLUMNS}
+            rows={NO_PAYMENTS}
+            empty="Платежей за выбранный период нет"
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            empty
+          </Typography>
+        </div>
       </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>
+        <div>
+          <DataTable
+            columns={COLUMNS}
+            rows={NO_PAYMENTS}
+            loadError={
+              <>
+                Не удалось загрузить платежи
+                <Button.Root variant="outline" tone="neutral" size="s">
+                  Повторить
+                </Button.Root>
+              </>
+            }
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            loadError
+          </Typography>
+        </div>
       </div>
     </>
   );