prime-ui-kit 0.7.13 → 0.9.1

package/src/components/data-table/examples/canonical-orders.tsx

@@ -1,107 +0,0 @@
-import { Badge, DataTable, type DataTableColumn, Tag } from "prime-ui-kit";
-import * as React from "react";
-
-type OrderRow = {
-  id: string;
-  customer: string;
-  amount: number;
-  region: string;
-  status: "Оплачен" | "В работе" | "Просрочен";
-};
-
-const rows: OrderRow[] = [
-  { id: "ORD-104", customer: "ООО «Север»", amount: 128_400, region: "СЗФО", status: "Оплачен" },
-  { id: "ORD-105", customer: "ИП Ким", amount: 42_100, region: "ДВФО", status: "В работе" },
-  { id: "ORD-106", customer: "АО «Транзит»", amount: 901_000, region: "ЦФО", status: "Оплачен" },
-  { id: "ORD-107", customer: "ООО «Логистик»", amount: 15_750, region: "ЮФО", status: "Просрочен" },
-  {
-    id: "ORD-108",
-    customer: "Самозанятый Орлов",
-    amount: 6_200,
-    region: "ПФО",
-    status: "В работе",
-  },
-  { id: "ORD-109", customer: "ООО «Полюс»", amount: 333_000, region: "УФО", status: "Оплачен" },
-  { id: "ORD-110", customer: "КФХ «Рядок»", amount: 88_500, region: "ЮФО", status: "В работе" },
-  { id: "ORD-111", customer: "АНО «Школа»", amount: 12_000, region: "СКФО", status: "Просрочен" },
-];
-
-function statusColor(status: OrderRow["status"]) {
-  if (status === "Оплачен") return "green";
-  if (status === "Просрочен") return "red";
-  return "yellow";
-}
-
-const columns: DataTableColumn<OrderRow>[] = [
-  {
-    id: "id",
-    header: "Заказ",
-    accessor: "id",
-    sortable: true,
-    minWidth: "8.5rem",
-  },
-  {
-    id: "customer",
-    header: "Клиент",
-    accessor: "customer",
-    sortable: true,
-    minWidth: "12rem",
-  },
-  {
-    id: "amount",
-    header: "Сумма, ₽",
-    accessor: "amount",
-    sortable: true,
-    align: "end",
-    minWidth: "9rem",
-    cell: (row) => row.amount.toLocaleString("ru-RU"),
-  },
-  {
-    id: "region",
-    header: "Округ",
-    accessor: "region",
-    sortable: true,
-    minWidth: "6rem",
-    cell: (row) => <Tag.Root>{row.region}</Tag.Root>,
-  },
-  {
-    id: "status",
-    header: "Статус",
-    accessor: "status",
-    sortable: true,
-    minWidth: "9rem",
-    cell: (row) => (
-      <Badge.Root color={statusColor(row.status)} variant="light">
-        {row.status}
-      </Badge.Root>
-    ),
-  },
-];
-
-/**
- * Полноценная таблица: сортировка по умолчанию, пагинация (`pageSize` меньше числа строк),
- * стабильные ключи строк и типичное оформление ячеек через `Tag` / `Badge`.
- */
-export default function DataTableCanonicalOrdersExample() {
-  const [lastOpened, setLastOpened] = React.useState<string | null>(null);
-
-  return (
-    <div>
-      {lastOpened ? (
-        <p style={{ marginBottom: "0.75rem" }}>Открыт заказ: {lastOpened}</p>
-      ) : (
-        <p style={{ marginBottom: "0.75rem" }}>
-          Клик по строке выбирает заказ для сценария «открыть».
-        </p>
-      )}
-      <DataTable.Root
-        columns={columns}
-        rows={rows}
-        getRowKey={(row) => row.id}
-        defaultSort={{ columnId: "amount", order: "desc" }}
-        pageSize={4}
-        onRowClick={(row) => setLastOpened(row.id)}
-      />
-    </div>
-  );
-}

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

@@ -1,91 +0,0 @@
-import { ExternalLink, Mail } from "lucide-react";
-import { DataTable, type DataTableColumn, LinkButton } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples-demos.module.css";
-
-type ContactRow = {
-  id: string;
-  name: string;
-  email: string;
-  channel: string;
-};
-
-const rows: ContactRow[] = [
-  { id: "c1", name: "Ирина Соколова", email: "i.sokolova@example.com", channel: "Email" },
-  { id: "c2", name: "Павел Орлов", email: "p.orlov@example.com", channel: "Личный кабинет" },
-  { id: "c3", name: "Марина Волкова", email: "m.volkova@example.com", channel: "Телеграм-бот" },
-];
-
-const columns: DataTableColumn<ContactRow>[] = [
-  {
-    id: "name",
-    header: (
-      <span className={styles.inlineIconRow}>
-        <Mail size={14} strokeWidth={2} aria-hidden />
-        Контакт
-      </span>
-    ),
-    accessor: "name",
-    sortable: true,
-    minWidth: "11rem",
-  },
-  {
-    id: "email",
-    header: "Адрес",
-    accessor: "email",
-    sortable: true,
-    minWidth: "14rem",
-    align: "center",
-    cell: (row) => (
-      <LinkButton.Root size="s" href={`mailto:${row.email}`}>
-        {row.email}
-      </LinkButton.Root>
-    ),
-  },
-  {
-    id: "channel",
-    header: "Канал",
-    accessor: "channel",
-    sortable: true,
-    minWidth: "10rem",
-  },
-  {
-    id: "open",
-    header: "",
-    sortable: false,
-    align: "end",
-    minWidth: "7rem",
-    onCellClick: (row) => {
-      window.open(`mailto:${row.email}`, "_blank", "noopener,noreferrer");
-    },
-    cell: () => (
-      <span className={styles.inlineIconRowTight}>
-        <ExternalLink size={14} strokeWidth={2} aria-hidden />
-        Написать
-      </span>
-    ),
-  },
-];
-
-/** Соответствует `playground/snippets/data-table/composition.tsx`. */
-export default function DataTableCompositionExample() {
-  const [last, setLast] = React.useState<string | null>(null);
-
-  return (
-    <div>
-      <p className={styles.lead}>
-        {last ? `Последний клик по строке: ${last}` : "Клик по строке обновляет подпись ниже."}
-      </p>
-      <DataTable.Root
-        columns={columns}
-        rows={rows}
-        getRowKey={(row) => row.id}
-        onRowClick={(row) => setLast(row.name)}
-        showPagination={false}
-        pageSize={10}
-        highlightRowOnHover
-      />
-    </div>
-  );
-}

package/src/components/data-table/examples/controlled-sort-and-page.tsx

@@ -1,66 +0,0 @@
-import { DataTable, type DataTableColumn, type DataTableSortState } from "prime-ui-kit";
-import * as React from "react";
-
-type TaskRow = {
-  id: string;
-  title: string;
-  assignee: string;
-  priority: number;
-};
-
-const rows: TaskRow[] = [
-  { id: "T-01", title: "Сверстать отчёт", assignee: "Аня", priority: 2 },
-  { id: "T-02", title: "Починить билд", assignee: "Борис", priority: 1 },
-  { id: "T-03", title: "Обновить зависимости", assignee: "Вика", priority: 3 },
-  { id: "T-04", title: "Ревью API", assignee: "Гриша", priority: 2 },
-  { id: "T-05", title: "Документация полей", assignee: "Даша", priority: 4 },
-  { id: "T-06", title: "E2E флейки", assignee: "Егор", priority: 1 },
-];
-
-const columns: DataTableColumn<TaskRow>[] = [
-  { id: "id", header: "ID", accessor: "id", sortable: true, minWidth: "5rem" },
-  { id: "title", header: "Задача", accessor: "title", sortable: true, minWidth: "14rem" },
-  {
-    id: "assignee",
-    header: "Исполнитель",
-    accessor: "assignee",
-    sortable: true,
-    minWidth: "10rem",
-  },
-  {
-    id: "priority",
-    header: "Приоритет",
-    accessor: "priority",
-    sortable: true,
-    align: "end",
-    minWidth: "8rem",
-  },
-];
-
-/**
- * Управляемые `sort` и `page`: родитель синхронизирует состояние с URL, стором или формой фильтров.
- */
-export default function DataTableControlledSortAndPageExample() {
-  const [sort, setSort] = React.useState<DataTableSortState>({
-    columnId: "priority",
-    order: "asc",
-  });
-  const [page, setPage] = React.useState(1);
-
-  return (
-    <DataTable.Root
-      columns={columns}
-      rows={rows}
-      getRowKey={(row) => row.id}
-      sort={sort}
-      onSortChange={(next) => {
-        setSort(next);
-        setPage(1);
-      }}
-      page={page}
-      onPageChange={setPage}
-      pageSize={3}
-      siblingCount={1}
-    />
-  );
-}

package/src/components/data-table/examples/divider-styles.tsx

@@ -1,67 +0,0 @@
-import { Badge, DataTable, type DataTableColumn, type DataTableDividerStyle } from "prime-ui-kit";
-
-import styles from "./examples-demos.module.css";
-
-type Row = {
-  id: string;
-  member: string;
-  role: string;
-  status: "Online" | "Busy" | "Offline";
-};
-
-const rows: Row[] = [
-  { id: "r1", member: "James Brown", role: "Product Manager", status: "Online" },
-  { id: "r2", member: "Sophia Williams", role: "Designer", status: "Busy" },
-  { id: "r3", member: "Arthur Taylor", role: "Frontend Engineer", status: "Offline" },
-];
-
-function mapStatus(status: Row["status"]): "online" | "busy" | "offline" {
-  if (status === "Online") return "online";
-  if (status === "Busy") return "busy";
-  return "offline";
-}
-
-const columns: DataTableColumn<Row>[] = [
-  { id: "member", header: "Member", accessor: "member", sortable: true, minWidth: "11rem" },
-  { id: "role", header: "Role", accessor: "role", sortable: true, minWidth: "12rem" },
-  {
-    id: "status",
-    header: "Status",
-    accessor: "status",
-    sortable: true,
-    minWidth: "8rem",
-    cell: (row) => (
-      <Badge.Root variant="status" status={mapStatus(row.status)} label={row.status}>
-        {row.status}
-      </Badge.Root>
-    ),
-  },
-];
-
-function DividerRow({ divider }: { divider: DataTableDividerStyle }) {
-  return (
-    <>
-      <p className={styles.demoLabel}>dividerStyle = {divider}</p>
-      <DataTable.Root
-        className={styles.demoTable}
-        columns={columns}
-        rows={rows}
-        dividerStyle={divider}
-        pageSize={3}
-        showPagination={false}
-      />
-    </>
-  );
-}
-
-/** Соответствует `playground/snippets/data-table/divider-styles.tsx`. */
-export default function DataTableDividerStylesExample() {
-  return (
-    <>
-      <DividerRow divider="standard" />
-      <DividerRow divider="dashed" />
-      <DividerRow divider="dotted" />
-      <DividerRow divider="none" />
-    </>
-  );
-}

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

@@ -1,78 +0,0 @@
-/* Layout helpers for runnable examples (mirrors playground/snippets/data-table/*.module.css). */
-
-.demoLabel {
-  margin: var(--prime-sys-spacing-x4) 0 var(--prime-sys-spacing-x2);
-  font-size: var(--prime-sys-size-control-s-supportText);
-  font-weight: var(--prime-sys-typography-weight-medium);
-  color: var(--prime-sys-color-content-secondary);
-}
-
-.demoLabel:first-child {
-  margin-top: 0;
-}
-
-.demoTable {
-  margin-bottom: var(--prime-sys-spacing-x3);
-}
-
-.narrowCard {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 28rem;
-  padding: var(--prime-sys-spacing-x3);
-  border-radius: var(--prime-sys-shape-radius-m);
-  border: 1px dashed var(--prime-sys-color-border-subtle);
-}
-
-.lead {
-  margin: 0 0 var(--prime-sys-spacing-x3);
-  font-size: var(--prime-sys-size-control-s-supportText);
-  color: var(--prime-sys-color-content-secondary);
-}
-
-.leadTight {
-  margin: 0 0 var(--prime-sys-spacing-x2);
-  font-size: var(--prime-sys-size-control-s-supportText);
-  color: var(--prime-sys-color-content-secondary);
-}
-
-.statesStack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-x6);
-  width: 100%;
-}
-
-.inlineIconRow {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--prime-sys-spacing-x2);
-}
-
-.inlineIconRowTight {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--prime-sys-spacing-x1);
-}
-
-.optionsFieldset {
-  margin: 0 0 var(--prime-sys-spacing-x4);
-  padding: var(--prime-sys-spacing-x3) var(--prime-sys-spacing-x4);
-  border: 1px solid var(--prime-sys-color-border-subtle);
-  border-radius: var(--prime-sys-shape-radius-m);
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--prime-sys-spacing-x4) var(--prime-sys-spacing-x6);
-}
-
-.optionsLegend {
-  padding: 0 var(--prime-sys-spacing-x2);
-  font-size: var(--prime-sys-typography-support-xs);
-}
-
-.optionLabel {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--prime-sys-spacing-x3);
-  cursor: pointer;
-}

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

@@ -1,39 +0,0 @@
-import { DataTable, type DataTableColumn } from "prime-ui-kit";
-
-import styles from "./examples-demos.module.css";
-
-type Row = { id: string; task: string; hours: number };
-
-const rows: Row[] = [
-  { id: "T-12", task: "Сверстать отчёт по спринту", hours: 3 },
-  { id: "T-13", task: "Проверить миграции БД", hours: 1.5 },
-  { id: "T-14", task: "Обновить подсказки в форме входа", hours: 2 },
-];
-
-const columns: DataTableColumn<Row>[] = [
-  { id: "id", header: "Задача", accessor: "id", sortable: true, minWidth: "6rem" },
-  { id: "task", header: "Описание", accessor: "task", sortable: true, minWidth: "12rem" },
-  {
-    id: "hours",
-    header: "Часы",
-    accessor: "hours",
-    sortable: true,
-    align: "end",
-    minWidth: "5rem",
-    cell: (row) =>
-      row.hours.toLocaleString("ru-RU", { minimumFractionDigits: 0, maximumFractionDigits: 1 }),
-  },
-];
-
-/** Соответствует `playground/snippets/data-table/full-width.tsx`. */
-export default function DataTableFullWidthExample() {
-  return (
-    <div className={styles.narrowCard}>
-      <p className={styles.lead}>
-        Узкий контейнер: корень таблицы тянется на 100% ширины родителя (сетка карточки, колонка
-        формы).
-      </p>
-      <DataTable.Root columns={columns} rows={rows} showPagination={false} pageSize={10} />
-    </div>
-  );
-}

package/src/components/data-table/examples/highlight-and-striped.tsx

@@ -1,71 +0,0 @@
-import { DataTable, type DataTableColumn } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples-demos.module.css";
-
-type Row = { id: string; product: string; qty: number; price: number };
-
-const rows: Row[] = [
-  { id: "1", product: "Notebook", qty: 2, price: 1200 },
-  { id: "2", product: "Mouse", qty: 5, price: 45 },
-  { id: "3", product: "Keyboard", qty: 1, price: 180 },
-  { id: "4", product: "Display", qty: 1, price: 420 },
-];
-
-const columns: DataTableColumn<Row>[] = [
-  { id: "product", header: "Товар", accessor: "product", sortable: true, minWidth: "10rem" },
-  { id: "qty", header: "Кол-во", accessor: "qty", sortable: true, align: "end", minWidth: "6rem" },
-  {
-    id: "price",
-    header: "Цена",
-    accessor: "price",
-    sortable: true,
-    align: "end",
-    minWidth: "7rem",
-  },
-];
-
-/** Соответствует `playground/snippets/data-table/highlight-and-striped.tsx`. */
-export default function DataTableHighlightAndStripedExample() {
-  const [highlightRowOnHover, setHighlightRowOnHover] = React.useState(true);
-  const [highlightColumnOnHover, setHighlightColumnOnHover] = React.useState(false);
-  const [striped, setStriped] = React.useState(false);
-
-  return (
-    <div>
-      <fieldset className={styles.optionsFieldset}>
-        <legend className={styles.optionsLegend}>Опции таблицы</legend>
-        <label className={styles.optionLabel}>
-          <input
-            type="checkbox"
-            checked={highlightRowOnHover}
-            onChange={(e) => setHighlightRowOnHover(e.target.checked)}
-          />
-          Подсветка строки при наведении
-        </label>
-        <label className={styles.optionLabel}>
-          <input
-            type="checkbox"
-            checked={highlightColumnOnHover}
-            onChange={(e) => setHighlightColumnOnHover(e.target.checked)}
-          />
-          Подсветка колонки при наведении
-        </label>
-        <label className={styles.optionLabel}>
-          <input type="checkbox" checked={striped} onChange={(e) => setStriped(e.target.checked)} />
-          Чередование строк (зебра)
-        </label>
-      </fieldset>
-
-      <DataTable.Root
-        columns={columns}
-        rows={rows}
-        pageSize={10}
-        showPagination={false}
-        highlightRowOnHover={highlightRowOnHover}
-        highlightColumnOnHover={highlightColumnOnHover}
-        striped={striped}
-      />
-    </div>
-  );
-}

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

@@ -1,63 +0,0 @@
-import { DataTable, type DataTableColumn } from "prime-ui-kit";
-import * as React from "react";
-
-type LogRow = {
-  id: string;
-  time: string;
-  level: "info" | "warn" | "error";
-  message: string;
-};
-
-const fullDataset: LogRow[] = [
-  { id: "L1", time: "10:01:02", level: "info", message: "Сервис запущен" },
-  { id: "L2", time: "10:01:08", level: "info", message: "Подключение к БД" },
-  { id: "L3", time: "10:02:11", level: "warn", message: "Медленный запрос 420 ms" },
-  { id: "L4", time: "10:03:44", level: "error", message: "Таймаут внешнего API" },
-  { id: "L5", time: "10:04:01", level: "info", message: "Повтор запроса OK" },
-  { id: "L6", time: "10:05:30", level: "info", message: "Деплой v1.2.0" },
-  { id: "L7", time: "10:06:12", level: "warn", message: "Очередь > 500" },
-  { id: "L8", time: "10:07:00", level: "info", message: "Стабилизация очереди" },
-];
-
-const columns: DataTableColumn<LogRow>[] = [
-  { id: "time", header: "Время", accessor: "time", sortable: true, minWidth: "7rem" },
-  { id: "level", header: "Уровень", accessor: "level", sortable: true, minWidth: "6rem" },
-  { id: "message", header: "Сообщение", accessor: "message", sortable: true, minWidth: "16rem" },
-];
-
-/**
- * Сначала догружается локальный срез (`infiniteBatchSize`), затем при `hasMore` вызывается `onLoadMore`
- * (имитация запроса к API с задержкой).
- */
-export default function DataTableInfiniteScrollLoadMoreExample() {
-  const [loaded, setLoaded] = React.useState(4);
-  const [loadingMore, setLoadingMore] = React.useState(false);
-
-  const rows = fullDataset.slice(0, loaded);
-  const hasMore = loaded < fullDataset.length;
-
-  const onLoadMore = React.useCallback(() => {
-    if (loadingMore || !hasMore) return;
-    setLoadingMore(true);
-    window.setTimeout(() => {
-      setLoaded((n) => Math.min(n + 3, fullDataset.length));
-      setLoadingMore(false);
-    }, 400);
-  }, [hasMore, loadingMore]);
-
-  return (
-    <DataTable.Root
-      columns={columns}
-      rows={rows}
-      getRowKey={(row) => row.id}
-      infiniteScroll
-      initialVisibleRows={3}
-      infiniteBatchSize={2}
-      hasMore={hasMore}
-      loadingMore={loadingMore}
-      onLoadMore={onLoadMore}
-      showPagination={false}
-      scrollHeight={220}
-    />
-  );
-}

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

@@ -1,90 +0,0 @@
-import { Checkbox, DataTable, type DataTableColumn } from "prime-ui-kit";
-import * as React from "react";
-
-type LineRow = {
-  id: string;
-  sku: string;
-  name: string;
-  qty: number;
-};
-
-const rows: LineRow[] = [
-  { id: "1", sku: "SKU-100", name: "Кабель USB-C, 2 м", qty: 4 },
-  { id: "2", sku: "SKU-220", name: "Док-станция", qty: 1 },
-  { id: "3", sku: "SKU-305", name: 'Монитор 27"', qty: 2 },
-  { id: "4", sku: "SKU-410", name: "Клавиатура", qty: 3 },
-];
-
-/**
- * Встроенного multi-select у таблицы нет: колонка с `Checkbox` и `Set` выбранных id в родителе.
- * Выбор только через чекбоксы; при необходимости `onRowClick` проверяйте `event.target` на `input[type="checkbox"]`.
- */
-export default function DataTableRowSelectionExample() {
-  const [selected, setSelected] = React.useState<Set<string>>(() => new Set());
-
-  const ids = React.useMemo(() => rows.map((row) => row.id), []);
-  const allSelected = ids.length > 0 && ids.every((id) => selected.has(id));
-  const someSelected = ids.some((id) => selected.has(id)) && !allSelected;
-
-  const toggleOne = React.useCallback((id: string) => {
-    setSelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  }, []);
-
-  const toggleAll = React.useCallback(() => {
-    setSelected((prev) => {
-      if (ids.every((id) => prev.has(id))) return new Set();
-      return new Set(ids);
-    });
-  }, [ids]);
-
-  const columns: DataTableColumn<LineRow>[] = React.useMemo(
-    () => [
-      {
-        id: "select",
-        header: (
-          <Checkbox.Root checked={allSelected} indeterminate={someSelected} onChange={toggleAll}>
-            <Checkbox.Label aria-label="Выбрать все строки" />
-          </Checkbox.Root>
-        ),
-        minWidth: "3rem",
-        align: "center",
-        cell: (row) => (
-          <Checkbox.Root checked={selected.has(row.id)} onChange={() => toggleOne(row.id)}>
-            <Checkbox.Label aria-label={`Выбрать ${row.sku}`} />
-          </Checkbox.Root>
-        ),
-      },
-      { id: "sku", header: "Артикул", accessor: "sku", sortable: true, minWidth: "8rem" },
-      { id: "name", header: "Наименование", accessor: "name", sortable: true, minWidth: "14rem" },
-      {
-        id: "qty",
-        header: "Кол-во",
-        accessor: "qty",
-        sortable: true,
-        align: "end",
-        minWidth: "6rem",
-      },
-    ],
-    [allSelected, selected, someSelected, toggleAll, toggleOne],
-  );
-
-  return (
-    <div>
-      <p style={{ marginBottom: "0.75rem" }}>
-        Выбрано позиций: {selected.size}
-        {selected.size > 0 ? ` (${[...selected].join(", ")})` : ""}
-      </p>
-      <DataTable.Root
-        columns={columns}
-        rows={rows}
-        getRowKey={(row) => row.id}
-        showPagination={false}
-      />
-    </div>
-  );
-}