@retailcrm/embed-ui-v1-components

Компоненты UI для использования в JS-расширениях RetailCRM

Установка

npm:

npm i --save @retailcrm/embed-ui-v1-components

yarn:

yarn add @retailcrm/embed-ui-v1-components

Применение в расширениях

Все компоненты в расширениях надо импортировать из @retailcrm/embed-ui-v1-components/remote

Пример импорта и использования кнопки UiButton

<template>
    <UiButton variant="danger">
        <IconDelete /> Удалить
    </UiButton>
</template>

<script lang="ts" setup>
import IconDelete from '@retailcrm/embed-ui-v1-components/assets/sprites/ui/delete-outlined.svg'
import { UiButton } from '@retailcrm/embed-ui-v1-components/remote'
</script>

[!IMPORTANT] Расширения используют определения из remote части для передачи системе инструкций, из чего собирать интерфейс. Библиотека также содержит @retailcrm/embed-ui-v1-components/host – набор компонентов, который будет использовать CRM при интерпретации инструкций от расширений. Не используйте host компоненты как часть кода расширения.

Документация пакета

Дополнительные материалы по пакету находятся в docs/:

• AGENTS.md — инструкции для AI-агентов, использующих пакет в целевом проекте.
• docs/README.md — обзор пакета и правил использования.
• docs/COMPONENTS.md — карта публичных компонентов.
• docs/AI.md — контекст для ИИ и автоматизаций.
• docs/PROFILES.md — AI-friendly YAML-профили компонентов и страниц.
• docs/FORMAT.md — формат описания компонента для AI-агентов.
• docs/profiles/pages — YAML-профили страниц, модалок, шторок, фильтров и таблиц.

AI и инициализация AGENTS.md

После установки пакет показывает подсказку, что внутри есть README.md, AGENTS.md, AI-заметки и YAML-профили компонентов и страниц.

Если в целевом проекте еще нет AGENTS.md, можно сгенерировать стартовый файл командой:

npx @retailcrm/embed-ui-v1-components init-agents

Если AGENTS.md уже существует, команда допишет в конец инструкции для @retailcrm/embed-ui-v1-components, если такого блока там еще нет. С --force можно обновить уже существующий блок пакета.

Для project-level skills можно создать .agents/skills/embed-ui-v1-components-ui/SKILL.md:

npx @retailcrm/embed-ui-v1-components init-skills

Skill описывает повторяемый workflow для выбора page pattern, чтения профилей компонентов, проверки styling constraints и ревью table pagination/form/widget composition.