prime-ui-kit 0.7.13 → 0.9.0

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>
-  );
-}

package/src/components/data-table/examples/sticky-and-headers.tsx

@@ -1,113 +0,0 @@
-import { DataTable, type DataTableColumn } from "prime-ui-kit";
-
-import styles from "./examples-demos.module.css";
-
-type ForecastRow = {
-  id: string;
-  metric: string;
-  q1: number;
-  q2: number;
-  q3: number;
-  q4: number;
-  plan: number;
-  fact: number;
-};
-
-const rows: ForecastRow[] = [
-  { id: "r1", metric: "Revenue", q1: 1200, q2: 1280, q3: 1330, q4: 1410, plan: 5220, fact: 5105 },
-  { id: "r2", metric: "COGS", q1: 530, q2: 560, q3: 575, q4: 610, plan: 2275, fact: 2290 },
-  { id: "r3", metric: "Gross Profit", q1: 670, q2: 720, q3: 755, q4: 800, plan: 2945, fact: 2815 },
-  { id: "r4", metric: "Marketing", q1: 190, q2: 205, q3: 215, q4: 230, plan: 840, fact: 875 },
-  { id: "r5", metric: "R&D", q1: 160, q2: 170, q3: 180, q4: 190, plan: 700, fact: 710 },
-  { id: "r6", metric: "G&A", q1: 120, q2: 124, q3: 128, q4: 133, plan: 505, fact: 498 },
-  {
-    id: "r7",
-    metric: "Operating Profit",
-    q1: 200,
-    q2: 221,
-    q3: 232,
-    q4: 247,
-    plan: 900,
-    fact: 732,
-  },
-  { id: "r8", metric: "Tax", q1: 34, q2: 37, q3: 41, q4: 44, plan: 156, fact: 149 },
-  { id: "r9", metric: "Net Profit", q1: 166, q2: 184, q3: 191, q4: 203, plan: 744, fact: 583 },
-  {
-    id: "r10",
-    metric: "Customers",
-    q1: 1240,
-    q2: 1310,
-    q3: 1425,
-    q4: 1560,
-    plan: 5535,
-    fact: 5440,
-  },
-];
-
-const columns: DataTableColumn<ForecastRow>[] = [
-  { id: "metric", header: "Metric", accessor: "metric", sortable: true, minWidth: "13rem" },
-  { id: "q1", header: "Q1", accessor: "q1", sortable: true, align: "end", minWidth: "7rem" },
-  { id: "q2", header: "Q2", accessor: "q2", sortable: true, align: "end", minWidth: "7rem" },
-  { id: "q3", header: "Q3", accessor: "q3", sortable: true, align: "end", minWidth: "7rem" },
-  { id: "q4", header: "Q4", accessor: "q4", sortable: true, align: "end", minWidth: "7rem" },
-  { id: "plan", header: "Plan", accessor: "plan", sortable: true, align: "end", minWidth: "8rem" },
-  { id: "fact", header: "Fact", accessor: "fact", sortable: true, align: "end", minWidth: "8rem" },
-];
-
-function money(value: number): string {
-  return value.toLocaleString("en-US");
-}
-
-const formattedColumns: DataTableColumn<ForecastRow>[] = columns.map((column) => {
-  if (column.id === "metric") return column;
-  return {
-    ...column,
-    cell: (row) => money(row[column.id as keyof ForecastRow] as number),
-  };
-});
-
-function DemoBlock({
-  title,
-  showHeader,
-  stickyHeader,
-  stickyFirstColumn,
-}: {
-  title: string;
-  showHeader?: boolean;
-  stickyHeader?: boolean;
-  stickyFirstColumn?: boolean;
-}) {
-  return (
-    <>
-      <p className={styles.demoLabel}>{title}</p>
-      <DataTable.Root
-        className={styles.demoTable}
-        columns={formattedColumns}
-        rows={rows}
-        showHeader={showHeader}
-        stickyHeader={stickyHeader}
-        stickyFirstColumn={stickyFirstColumn}
-        showPagination={false}
-        scrollHeight={220}
-        infiniteScroll
-        initialVisibleRows={10}
-      />
-    </>
-  );
-}
-
-/** Соответствует `playground/snippets/data-table/sticky-and-headers.tsx`. */
-export default function DataTableStickyAndHeadersExample() {
-  return (
-    <>
-      <DemoBlock title="showHeader = false (верхняя шапка скрыта)" showHeader={false} />
-      <DemoBlock title="stickyHeader = true (липкая верхняя шапка)" stickyHeader />
-      <DemoBlock title="stickyFirstColumn = true (липкая первая колонка слева)" stickyFirstColumn />
-      <DemoBlock
-        title="stickyHeader + stickyFirstColumn (как в Excel)"
-        stickyHeader
-        stickyFirstColumn
-      />
-    </>
-  );
-}

package/src/components/data-table/examples/sticky-header-first-column.tsx

@@ -1,55 +0,0 @@
-import { DataTable, type DataTableColumn } from "prime-ui-kit";
-
-type MetricRow = {
-  id: string;
-  name: string;
-  m1: number;
-  m2: number;
-  m3: number;
-  m4: number;
-  total: number;
-};
-
-const rows: MetricRow[] = [
-  { id: "a", name: "Выручка", m1: 120, m2: 132, m3: 128, m4: 141, total: 521 },
-  { id: "b", name: "Себестоимость", m1: 54, m2: 58, m3: 56, m4: 61, total: 229 },
-  { id: "c", name: "Валовая прибыль", m1: 66, m2: 74, m3: 72, m4: 80, total: 292 },
-  { id: "d", name: "OPEX", m1: 22, m2: 23, m3: 24, m4: 25, total: 94 },
-  { id: "e", name: "EBITDA", m1: 44, m2: 51, m3: 48, m4: 55, total: 198 },
-];
-
-const columns: DataTableColumn<MetricRow>[] = [
-  { id: "name", header: "Показатель", accessor: "name", sortable: true, minWidth: "11rem" },
-  { id: "m1", header: "Янв", accessor: "m1", sortable: true, align: "end", minWidth: "5rem" },
-  { id: "m2", header: "Фев", accessor: "m2", sortable: true, align: "end", minWidth: "5rem" },
-  { id: "m3", header: "Мар", accessor: "m3", sortable: true, align: "end", minWidth: "5rem" },
-  { id: "m4", header: "Апр", accessor: "m4", sortable: true, align: "end", minWidth: "5rem" },
-  {
-    id: "total",
-    header: "Итого",
-    accessor: "total",
-    sortable: true,
-    align: "end",
-    minWidth: "6rem",
-  },
-];
-
-/**
- * Горизонтальный скролл + `stickyHeader` и `stickyFirstColumn`: первая колонка и шапка остаются на месте.
- * Для демо включён `infiniteScroll` с короткой высотой viewport, чтобы был вертикальный скролл внутри таблицы.
- */
-export default function DataTableStickyHeaderFirstColumnExample() {
-  return (
-    <DataTable.Root
-      columns={columns}
-      rows={rows}
-      getRowKey={(row) => row.id}
-      stickyHeader
-      stickyFirstColumn
-      showPagination={false}
-      infiniteScroll
-      initialVisibleRows={rows.length}
-      scrollHeight={200}
-    />
-  );
-}