prime-ui-kit 0.0.1

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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,90 @@
+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/sizes.tsx

@@ -0,0 +1,85 @@
+import { Badge, DataTable, type DataTableColumn, type DataTableSize, Tag } from "prime-ui-kit";
+
+import styles from "./examples-demos.module.css";
+
+type TeamRow = {
+  id: string;
+  member: string;
+  role: string;
+  team: string;
+  status: "Online" | "Offline" | "Busy" | "Away";
+};
+
+const rows: TeamRow[] = [
+  { id: "u1", member: "James Brown", role: "Product Manager", team: "Core", status: "Online" },
+  { id: "u2", member: "Sophia Williams", role: "Designer", team: "Growth", status: "Busy" },
+  { id: "u3", member: "Arthur Taylor", role: "Frontend Engineer", team: "Core", status: "Offline" },
+  { id: "u4", member: "Emma Wright", role: "QA Engineer", team: "Platform", status: "Away" },
+  {
+    id: "u5",
+    member: "Matthew Johnson",
+    role: "Data Engineer",
+    team: "Analytics",
+    status: "Online",
+  },
+];
+
+function mapStatusToBadge(status: TeamRow["status"]): "online" | "offline" | "busy" | "away" {
+  if (status === "Online") return "online";
+  if (status === "Offline") return "offline";
+  if (status === "Busy") return "busy";
+  return "away";
+}
+
+const columns: DataTableColumn<TeamRow>[] = [
+  { id: "member", header: "Member", accessor: "member", sortable: true, minWidth: "12rem" },
+  { id: "role", header: "Role", accessor: "role", sortable: true, minWidth: "12rem" },
+  {
+    id: "team",
+    header: "Team",
+    accessor: "team",
+    sortable: true,
+    minWidth: "9rem",
+    cell: (row) => <Tag.Root>{row.team}</Tag.Root>,
+  },
+  {
+    id: "status",
+    header: "Status",
+    accessor: "status",
+    sortable: true,
+    minWidth: "8rem",
+    cell: (row) => (
+      <Badge.Root variant="status" status={mapStatusToBadge(row.status)} label={row.status}>
+        {row.status}
+      </Badge.Root>
+    ),
+  },
+];
+
+function SizeRow({ size }: { size: DataTableSize }) {
+  return (
+    <>
+      <p className={styles.demoLabel}>size = {size}</p>
+      <DataTable.Root
+        className={styles.demoTable}
+        columns={columns}
+        rows={rows}
+        size={size}
+        pageSize={2}
+        paginationSize={size}
+      />
+    </>
+  );
+}
+
+/** Соответствует `playground/snippets/data-table/sizes.tsx`. */
+export default function DataTableSizesExample() {
+  return (
+    <>
+      <SizeRow size="s" />
+      <SizeRow size="m" />
+      <SizeRow size="l" />
+      <SizeRow size="xl" />
+    </>
+  );
+}

package/src/components/data-table/examples/sorting-pagination.tsx

@@ -0,0 +1,76 @@
+import { Badge, DataTable, type DataTableColumn, Tag } from "prime-ui-kit";
+
+type InvoiceRow = {
+  id: string;
+  customer: string;
+  amount: number;
+  country: string;
+  status: "Paid" | "Pending" | "Overdue";
+};
+
+const rows: InvoiceRow[] = [
+  { id: "INV-1001", customer: "Monday Inc.", amount: 1240, country: "USA", status: "Paid" },
+  { id: "INV-1002", customer: "Pixel Lab", amount: 860, country: "Germany", status: "Pending" },
+  { id: "INV-1003", customer: "Stella Team", amount: 2910, country: "Spain", status: "Paid" },
+  { id: "INV-1004", customer: "Nordic Grid", amount: 1490, country: "Sweden", status: "Pending" },
+  { id: "INV-1005", customer: "Onboardly", amount: 480, country: "France", status: "Overdue" },
+  { id: "INV-1006", customer: "Clever Peak", amount: 3010, country: "Canada", status: "Paid" },
+  { id: "INV-1007", customer: "Nimbus", amount: 1980, country: "UK", status: "Pending" },
+  { id: "INV-1008", customer: "Solar Crest", amount: 540, country: "Italy", status: "Overdue" },
+  { id: "INV-1009", customer: "Edge Point", amount: 2270, country: "USA", status: "Paid" },
+  { id: "INV-1010", customer: "Seven Loop", amount: 1750, country: "Poland", status: "Pending" },
+  { id: "INV-1011", customer: "Mint Dash", amount: 900, country: "Japan", status: "Paid" },
+  { id: "INV-1012", customer: "Blue Stone", amount: 1425, country: "Norway", status: "Overdue" },
+];
+
+function mapStatusToColor(status: InvoiceRow["status"]) {
+  if (status === "Paid") return "green";
+  if (status === "Overdue") return "red";
+  return "yellow";
+}
+
+const columns: DataTableColumn<InvoiceRow>[] = [
+  { id: "id", header: "Invoice", accessor: "id", sortable: true, minWidth: "8rem" },
+  { id: "customer", header: "Customer", accessor: "customer", sortable: true, minWidth: "12rem" },
+  {
+    id: "amount",
+    header: "Amount",
+    accessor: "amount",
+    sortable: true,
+    align: "end",
+    cell: (row) => `$${row.amount.toLocaleString()}`,
+    minWidth: "7rem",
+  },
+  {
+    id: "country",
+    header: "Country",
+    accessor: "country",
+    sortable: true,
+    minWidth: "8rem",
+    cell: (row) => <Tag.Root>{row.country}</Tag.Root>,
+  },
+  {
+    id: "status",
+    header: "Status",
+    accessor: "status",
+    sortable: true,
+    minWidth: "8rem",
+    cell: (row) => (
+      <Badge.Root color={mapStatusToColor(row.status)} variant="light">
+        {row.status}
+      </Badge.Root>
+    ),
+  },
+];
+
+/** Соответствует `playground/snippets/data-table/sorting-pagination.tsx`. */
+export default function DataTableSortingPaginationExample() {
+  return (
+    <DataTable.Root
+      columns={columns}
+      rows={rows}
+      defaultSort={{ columnId: "amount", order: "desc" }}
+      pageSize={5}
+    />
+  );
+}

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

@@ -0,0 +1,44 @@
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+
+import styles from "./examples-demos.module.css";
+
+type Row = { id: string; label: string };
+
+const columns: DataTableColumn<Row>[] = [
+  { id: "id", header: "Код", accessor: "id", minWidth: "6rem" },
+  { id: "label", header: "Название", accessor: "label", minWidth: "12rem" },
+];
+
+/** Соответствует `playground/snippets/data-table/states.tsx`. */
+export default function DataTableStatesExample() {
+  return (
+    <div className={styles.statesStack}>
+      <div>
+        <p className={styles.leadTight}>
+          <code>loading</code> при пустом наборе строк: одна строка с <code>loadingText</code>.
+        </p>
+        <DataTable.Root
+          columns={columns}
+          rows={[]}
+          loading
+          loadingText="Загружаем справочник…"
+          showPagination={false}
+          pageSize={10}
+        />
+      </div>
+      <div>
+        <p className={styles.leadTight}>
+          Пустой список: <code>emptyText</code> вместо строк данных.
+        </p>
+        <DataTable.Root
+          columns={columns}
+          rows={[]}
+          loading={false}
+          emptyText="Пока нет ни одной записи — добавьте первую через кнопку «Создать»."
+          showPagination={false}
+          pageSize={10}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,55 @@
+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}
+    />
+  );
+}