prime-ui-kit 0.3.1 → 0.4.0

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

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

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

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

@@ -0,0 +1,78 @@
+/* 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

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

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

@@ -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" />
+    </>
+  );
+}