Product info row

Пакет @cloud-ru/ds-uikit-product-info-row — строки сводки по макету Figma infoRow: одна или две колонки значений, токены @cloud-ru/ds-figma-variables, интеграция с @cloud-ru/ds-button, @cloud-ru/ds-divider, @cloud-ru/ds-tooltip, @cloud-ru/ds-skeleton, @cloud-ru/ds-truncate-string.

Состав пакета

  • InfoRow — одна строка «метка — значение»; опционально две пары в ряд (column="2"), действия, скелетон, withTip для кнопок. Адаптивен: на desktop горизонтальная плотная раскладка, на mobile — вертикальная comfort (density comfort, отступы и разделители по position: first / inner / last).
  • InfoGroup — несколько строк по объекту data и схеме полей items (accessorKey или render). Адаптивен так же, как InfoRow.

Раскладку оба берут из AdaptiveProvider (@cloud-ru/ds-adaptive); отдельного пропа layoutType нет — форс через withLayoutType / вложенный <AdaptiveProvider>. Desktop/mobile-поверхности — internal. Вспомогательная getPosition({ index, length }) возвращает position строки в списке.

Установка

pnpm add @cloud-ru/ds-uikit-product-info-row
import {
  InfoGroup,
  InfoRow,
  NO_DATA_PLACEHOLDER,
  useGetContent,
} from '@cloud-ru/ds-uikit-product-info-row'
import '@cloud-ru/ds-uikit-product-info-row/style.css'

Когда какой использовать

ЗадачаКомпонент
Одна строка полей или две пары «метка — значение» в одной строкеInfoRow
Табличный список полей по одному объекту данныхInfoGroup
Несколько однотипных строк без InfoGroupInfoRow + useGetContent + InfoRowFieldItem[]
Узкий экран / mobile-раскладка той же матрицы FigmaInfoRow / InfoGroup (раскладка из AdaptiveProvider)