InfoGroup

InfoGroup принимает объект data и массив items и рендерит по строке InfoRow на каждый элемент. Каждый item либо указывает accessorKey для чтения поля из data, либо задаёт render для кастомного вывода.

Демо

<InfoGroup data={"title":"Example","value":42} columns="single" width="fixed" data-test-id="info-group-demo" items=[{"label":"Title","accessorKey":"title"},{"label":"Value","accessorKey":"value"}] />

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

• Деталка сущности, где набор полей известен заранее: имя, статус, регион, тарифные параметры.
• Карточка объекта в админке/каталоге, где данные меняются, а схема полей — нет.
• Когда нужно единое поведение для пустых значений, булевых и async-загрузки (loading).

Когда не нужен InfoGroup:

• Если строк одна-две:
  • используйте отдельные InfoRow.
• Если поля разнородные и каждое требует своей разметки:
  • соберите композицию из InfoRow руками.

Анатомия

Columns (default single)

Раскладка строк:

• single — одна колонка строк.
• double — два столбца на ряд, для десктопных деталок с компактной подачей.

Width (default fixed)

Ширина строк:

• fixed — фиксированный лейбл-блок.
• full — лейбл и значение растягиваются на всю доступную ширину контейнера.

При columns='double' ширина строк всегда full.

Items

Элемент items — один из вариантов:

• { accessorKey, label } — прямое чтение поля из data.
• { render, label } — кастомный JSX.

Допускает все остальные пропсы InfoRow (кроме content).

Loading

loading={true} показывает скелетон вместо значений во всех строках. Применяется на время первой загрузки data.

Установка

pnpm add @cloud-ru/ds-uikit-product-info-row

import { InfoGroup } from '@cloud-ru/ds-uikit-product-info-row'
import '@cloud-ru/ds-uikit-product-info-row/style.css'

Примеры использования

Базовый список полей

import { InfoGroup } from '@cloud-ru/ds-uikit-product-info-row';

type Project = { name: string; status: string; active: boolean };

const data: Project = { name: 'Mercury', status: 'Running', active: true };

export function InfoGroupBasic() {
  return (
    <InfoGroup
      data={data}
      items={[
        { label: 'Имя', accessorKey: 'name' },
        { label: 'Статус', accessorKey: 'status' },
        { label: 'Активен', accessorKey: 'active' },
      ]}
    />
  );
}

Две колонки

import { InfoGroup } from '@cloud-ru/ds-uikit-product-info-row';

type Server = { region: string; cpu: string; memory: string; disk: string };

const data: Server = { region: 'eu-west-1', cpu: '4 vCPU', memory: '16 GiB', disk: '200 GiB SSD' };

export function InfoGroupDoubleColumn() {
  return (
    <InfoGroup
      data={data}
      columns='double'
      width='full'
      items={[
        { label: 'Регион', accessorKey: 'region' },
        { label: 'CPU', accessorKey: 'cpu' },
        { label: 'Память', accessorKey: 'memory' },
        { label: 'Диск', accessorKey: 'disk' },
      ]}
    />
  );
}

Кастомный render и формат булевых

import { InfoGroup } from '@cloud-ru/ds-uikit-product-info-row';

type Order = { id: string; total: number; paid: boolean };

const data: Order = { id: 'A-1024', total: 12990, paid: true };

const formatRub = (n: number) => `${n.toLocaleString('ru-RU')} ₽`;

export function InfoGroupCustomRender() {
  return (
    <InfoGroup
      data={data}
      items={[
        { label: 'Заказ', accessorKey: 'id' },
        { label: 'Сумма', render: order => <strong>{formatRub(order.total)}</strong> },
        { label: 'Оплачен', accessorKey: 'paid' },
      ]}
      formatBoolean={value => (value ? 'Да' : 'Нет')}
    />
  );
}

Поведение

• При отсутствии data или значения по accessorKey показывается плейсхолдер — (NO_DATA_PLACEHOLDER).
• Булевы по accessorKey форматируются через formatBoolean (по умолчанию «Да»/«Нет»).
• При loading={true} вместо значений рендерятся скелетоны; разметка строк сохраняется.

Props

Types

InfoGroupProps

DesktopInfoRowPropsBase

InfoGroupItem

Storybook

Смотри также

• InfoRow — одна строка «метка — значение», основа InfoGroup.

InfoGroup адаптивен: на mobile (раскладка из AdaptiveProvider) рендерит вертикальный comfort-список без отдельной обёртки.