From e193d4dbb8a79d8065fc27ebe6edad6cd98b152d Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Fri, 29 May 2026 18:13:37 +0700 Subject: [PATCH 01/20] feat(mcp): fix data path --- packages/mcp/scripts/create-index-dir.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mcp/scripts/create-index-dir.mjs b/packages/mcp/scripts/create-index-dir.mjs index 197bceea91..bc64ea6268 100644 --- a/packages/mcp/scripts/create-index-dir.mjs +++ b/packages/mcp/scripts/create-index-dir.mjs @@ -11,7 +11,7 @@ const { version } = rootPackageJson; export function createIndexDir() { const indexDir = `v${version}`; - const versionDir = path.resolve(dirname, '..', 'data', indexDir); + const versionDir = path.resolve(dirname, '..', 'src', 'data', indexDir); rmSync(versionDir, { recursive: true, force: true }); mkdirSync(versionDir, { recursive: true }); From 02c26a0e38680d0dbedd50fd0c5225afa57eb9c3 Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Fri, 29 May 2026 18:17:18 +0700 Subject: [PATCH 02/20] feat(mcp): DROP THIS COMMIT --- packages/mcp/scripts/generate-data.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mcp/scripts/generate-data.mjs b/packages/mcp/scripts/generate-data.mjs index a6b788a9e0..a86941b064 100644 --- a/packages/mcp/scripts/generate-data.mjs +++ b/packages/mcp/scripts/generate-data.mjs @@ -34,8 +34,8 @@ function main() { demos, }, null, - 1, - ).replace(/^ +/gm, ''), + 4, + ), ); }); From 7783b0b613503426d55920ba3f4d962c0ba10b0d Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Fri, 29 May 2026 19:37:30 +0700 Subject: [PATCH 03/20] feat(mcp): add changelog path --- packages/mcp/scripts/generate-data.mjs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/mcp/scripts/generate-data.mjs b/packages/mcp/scripts/generate-data.mjs index a86941b064..fed9a701d1 100644 --- a/packages/mcp/scripts/generate-data.mjs +++ b/packages/mcp/scripts/generate-data.mjs @@ -23,6 +23,8 @@ function main() { const demos = generateDemo(path.join(path.dirname(filePath), 'docs', 'description.mdx')); + // const changelog = path.resolve(filePath, '../../', 'CHANGELOG.md'); + writeFileSync( path.resolve(versionDir, `${packageName}.json`), JSON.stringify( From 0a9cffe1b9676cc2ed65d803bbc589769e5bf9dc Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Tue, 2 Jun 2026 13:09:04 +0700 Subject: [PATCH 04/20] feat(mcp): generate data --- packages/mcp/src/data/v50.16.0/accordion.json | 154 ++++ .../mcp/src/data/v50.16.0/action-button.json | 125 +++ .../mcp/src/data/v50.16.0/amount-input.json | 458 ++++++++++ packages/mcp/src/data/v50.16.0/amount.json | 161 ++++ packages/mcp/src/data/v50.16.0/attach.json | 148 ++++ packages/mcp/src/data/v50.16.0/backdrop.json | 83 ++ packages/mcp/src/data/v50.16.0/bank-card.json | 103 +++ .../mcp/src/data/v50.16.0/base-modal.json | 345 ++++++++ .../mcp/src/data/v50.16.0/bottom-sheet.json | 740 ++++++++++++++++ packages/mcp/src/data/v50.16.0/button.json | 264 ++++++ .../mcp/src/data/v50.16.0/calendar-range.json | 187 ++++ .../data/v50.16.0/calendar-with-skeleton.json | 323 +++++++ packages/mcp/src/data/v50.16.0/calendar.json | 510 +++++++++++ .../mcp/src/data/v50.16.0/card-image.json | 121 +++ packages/mcp/src/data/v50.16.0/carousel.json | 236 +++++ packages/mcp/src/data/v50.16.0/cdn-icon.json | 79 ++ packages/mcp/src/data/v50.16.0/chart.json | 123 +++ .../mcp/src/data/v50.16.0/checkbox-group.json | 166 ++++ packages/mcp/src/data/v50.16.0/checkbox.json | 220 +++++ .../data/v50.16.0/circular-progress-bar.json | 265 ++++++ .../mcp/src/data/v50.16.0/code-input.json | 148 ++++ packages/mcp/src/data/v50.16.0/collapse.json | 126 +++ packages/mcp/src/data/v50.16.0/comment.json | 50 ++ .../mcp/src/data/v50.16.0/confirmation.json | 285 ++++++ .../mcp/src/data/v50.16.0/custom-button.json | 261 ++++++ .../data/v50.16.0/custom-picker-button.json | 632 +++++++++++++ .../src/data/v50.16.0/date-time-input.json | 491 +++++++++++ packages/mcp/src/data/v50.16.0/divider.json | 32 + packages/mcp/src/data/v50.16.0/drawer.json | 351 ++++++++ packages/mcp/src/data/v50.16.0/dropzone.json | 139 +++ .../src/data/v50.16.0/file-upload-item.json | 300 +++++++ .../mcp/src/data/v50.16.0/filter-tag.json | 203 +++++ .../mcp/src/data/v50.16.0/form-control.json | 261 ++++++ packages/mcp/src/data/v50.16.0/gallery.json | 95 ++ packages/mcp/src/data/v50.16.0/gap.json | 63 ++ .../src/data/v50.16.0/generic-wrapper.json | 86 ++ packages/mcp/src/data/v50.16.0/grid.json | 97 ++ .../data/v50.16.0/hatching-progress-bar.json | 61 ++ .../mcp/src/data/v50.16.0/icon-button.json | 165 ++++ packages/mcp/src/data/v50.16.0/indicator.json | 92 ++ .../src/data/v50.16.0/input-autocomplete.json | 612 +++++++++++++ packages/mcp/src/data/v50.16.0/input.json | 383 ++++++++ .../v50.16.0/international-phone-input.json | 829 ++++++++++++++++++ .../src/data/v50.16.0/keyboard-focusable.json | 23 + packages/mcp/src/data/v50.16.0/link.json | 116 +++ .../mcp/src/data/v50.16.0/list-header.json | 61 ++ packages/mcp/src/data/v50.16.0/list.json | 18 + packages/mcp/src/data/v50.16.0/markdown.json | 83 ++ .../mcp/src/data/v50.16.0/masked-input.json | 380 ++++++++ packages/mcp/src/data/v50.16.0/modal.json | 403 +++++++++ packages/mcp/src/data/v50.16.0/mq.json | 61 ++ .../mcp/src/data/v50.16.0/navigation-bar.json | 176 ++++ .../data/v50.16.0/notification-manager.json | 79 ++ .../mcp/src/data/v50.16.0/notification.json | 251 ++++++ .../mcp/src/data/v50.16.0/number-input.json | 393 +++++++++ .../mcp/src/data/v50.16.0/page-indicator.json | 91 ++ .../mcp/src/data/v50.16.0/pagination.json | 107 +++ packages/mcp/src/data/v50.16.0/pass-code.json | 155 ++++ .../mcp/src/data/v50.16.0/password-input.json | 380 ++++++++ .../mcp/src/data/v50.16.0/pattern-lock.json | 170 ++++ .../mcp/src/data/v50.16.0/phone-input.json | 362 ++++++++ .../mcp/src/data/v50.16.0/picker-button.json | 605 +++++++++++++ packages/mcp/src/data/v50.16.0/plate.json | 308 +++++++ packages/mcp/src/data/v50.16.0/popover.json | 242 +++++ .../mcp/src/data/v50.16.0/popup-sheet.json | 369 ++++++++ packages/mcp/src/data/v50.16.0/portal.json | 41 + .../mcp/src/data/v50.16.0/product-cover.json | 215 +++++ .../mcp/src/data/v50.16.0/progress-bar.json | 74 ++ packages/mcp/src/data/v50.16.0/pure-cell.json | 38 + .../mcp/src/data/v50.16.0/radio-group.json | 193 ++++ packages/mcp/src/data/v50.16.0/radio.json | 169 ++++ packages/mcp/src/data/v50.16.0/scrollbar.json | 176 ++++ .../src/data/v50.16.0/segmented-control.json | 134 +++ .../src/data/v50.16.0/select-with-tags.json | 625 +++++++++++++ packages/mcp/src/data/v50.16.0/select.json | 752 ++++++++++++++++ .../mcp/src/data/v50.16.0/side-panel.json | 425 +++++++++ packages/mcp/src/data/v50.16.0/skeleton.json | 106 +++ .../mcp/src/data/v50.16.0/slider-input.json | 558 ++++++++++++ packages/mcp/src/data/v50.16.0/slider.json | 245 ++++++ .../mcp/src/data/v50.16.0/sortable-list.json | 191 ++++ packages/mcp/src/data/v50.16.0/space.json | 104 +++ packages/mcp/src/data/v50.16.0/spinner.json | 110 +++ packages/mcp/src/data/v50.16.0/stack.json | 34 + .../mcp/src/data/v50.16.0/status-badge.json | 77 ++ packages/mcp/src/data/v50.16.0/status.json | 130 +++ .../data/v50.16.0/stepped-progress-bar.json | 86 ++ packages/mcp/src/data/v50.16.0/steps.json | 208 +++++ packages/mcp/src/data/v50.16.0/switch.json | 135 +++ .../mcp/src/data/v50.16.0/system-message.json | 73 ++ packages/mcp/src/data/v50.16.0/tab-bar.json | 99 +++ packages/mcp/src/data/v50.16.0/tag.json | 176 ++++ packages/mcp/src/data/v50.16.0/text.json | 127 +++ packages/mcp/src/data/v50.16.0/textarea.json | 301 +++++++ .../mcp/src/data/v50.16.0/toast-plate.json | 200 +++++ packages/mcp/src/data/v50.16.0/toast.json | 328 +++++++ packages/mcp/src/data/v50.16.0/tooltip.json | 332 +++++++ packages/mcp/src/data/v50.16.0/underlay.json | 106 +++ .../data/v50.16.0/universal-date-input.json | 503 +++++++++++ .../mcp/src/data/v50.16.0/with-suffix.json | 113 +++ packages/mcp/src/version.mts | 2 +- 100 files changed, 22591 insertions(+), 1 deletion(-) create mode 100644 packages/mcp/src/data/v50.16.0/accordion.json create mode 100644 packages/mcp/src/data/v50.16.0/action-button.json create mode 100644 packages/mcp/src/data/v50.16.0/amount-input.json create mode 100644 packages/mcp/src/data/v50.16.0/amount.json create mode 100644 packages/mcp/src/data/v50.16.0/attach.json create mode 100644 packages/mcp/src/data/v50.16.0/backdrop.json create mode 100644 packages/mcp/src/data/v50.16.0/bank-card.json create mode 100644 packages/mcp/src/data/v50.16.0/base-modal.json create mode 100644 packages/mcp/src/data/v50.16.0/bottom-sheet.json create mode 100644 packages/mcp/src/data/v50.16.0/button.json create mode 100644 packages/mcp/src/data/v50.16.0/calendar-range.json create mode 100644 packages/mcp/src/data/v50.16.0/calendar-with-skeleton.json create mode 100644 packages/mcp/src/data/v50.16.0/calendar.json create mode 100644 packages/mcp/src/data/v50.16.0/card-image.json create mode 100644 packages/mcp/src/data/v50.16.0/carousel.json create mode 100644 packages/mcp/src/data/v50.16.0/cdn-icon.json create mode 100644 packages/mcp/src/data/v50.16.0/chart.json create mode 100644 packages/mcp/src/data/v50.16.0/checkbox-group.json create mode 100644 packages/mcp/src/data/v50.16.0/checkbox.json create mode 100644 packages/mcp/src/data/v50.16.0/circular-progress-bar.json create mode 100644 packages/mcp/src/data/v50.16.0/code-input.json create mode 100644 packages/mcp/src/data/v50.16.0/collapse.json create mode 100644 packages/mcp/src/data/v50.16.0/comment.json create mode 100644 packages/mcp/src/data/v50.16.0/confirmation.json create mode 100644 packages/mcp/src/data/v50.16.0/custom-button.json create mode 100644 packages/mcp/src/data/v50.16.0/custom-picker-button.json create mode 100644 packages/mcp/src/data/v50.16.0/date-time-input.json create mode 100644 packages/mcp/src/data/v50.16.0/divider.json create mode 100644 packages/mcp/src/data/v50.16.0/drawer.json create mode 100644 packages/mcp/src/data/v50.16.0/dropzone.json create mode 100644 packages/mcp/src/data/v50.16.0/file-upload-item.json create mode 100644 packages/mcp/src/data/v50.16.0/filter-tag.json create mode 100644 packages/mcp/src/data/v50.16.0/form-control.json create mode 100644 packages/mcp/src/data/v50.16.0/gallery.json create mode 100644 packages/mcp/src/data/v50.16.0/gap.json create mode 100644 packages/mcp/src/data/v50.16.0/generic-wrapper.json create mode 100644 packages/mcp/src/data/v50.16.0/grid.json create mode 100644 packages/mcp/src/data/v50.16.0/hatching-progress-bar.json create mode 100644 packages/mcp/src/data/v50.16.0/icon-button.json create mode 100644 packages/mcp/src/data/v50.16.0/indicator.json create mode 100644 packages/mcp/src/data/v50.16.0/input-autocomplete.json create mode 100644 packages/mcp/src/data/v50.16.0/input.json create mode 100644 packages/mcp/src/data/v50.16.0/international-phone-input.json create mode 100644 packages/mcp/src/data/v50.16.0/keyboard-focusable.json create mode 100644 packages/mcp/src/data/v50.16.0/link.json create mode 100644 packages/mcp/src/data/v50.16.0/list-header.json create mode 100644 packages/mcp/src/data/v50.16.0/list.json create mode 100644 packages/mcp/src/data/v50.16.0/markdown.json create mode 100644 packages/mcp/src/data/v50.16.0/masked-input.json create mode 100644 packages/mcp/src/data/v50.16.0/modal.json create mode 100644 packages/mcp/src/data/v50.16.0/mq.json create mode 100644 packages/mcp/src/data/v50.16.0/navigation-bar.json create mode 100644 packages/mcp/src/data/v50.16.0/notification-manager.json create mode 100644 packages/mcp/src/data/v50.16.0/notification.json create mode 100644 packages/mcp/src/data/v50.16.0/number-input.json create mode 100644 packages/mcp/src/data/v50.16.0/page-indicator.json create mode 100644 packages/mcp/src/data/v50.16.0/pagination.json create mode 100644 packages/mcp/src/data/v50.16.0/pass-code.json create mode 100644 packages/mcp/src/data/v50.16.0/password-input.json create mode 100644 packages/mcp/src/data/v50.16.0/pattern-lock.json create mode 100644 packages/mcp/src/data/v50.16.0/phone-input.json create mode 100644 packages/mcp/src/data/v50.16.0/picker-button.json create mode 100644 packages/mcp/src/data/v50.16.0/plate.json create mode 100644 packages/mcp/src/data/v50.16.0/popover.json create mode 100644 packages/mcp/src/data/v50.16.0/popup-sheet.json create mode 100644 packages/mcp/src/data/v50.16.0/portal.json create mode 100644 packages/mcp/src/data/v50.16.0/product-cover.json create mode 100644 packages/mcp/src/data/v50.16.0/progress-bar.json create mode 100644 packages/mcp/src/data/v50.16.0/pure-cell.json create mode 100644 packages/mcp/src/data/v50.16.0/radio-group.json create mode 100644 packages/mcp/src/data/v50.16.0/radio.json create mode 100644 packages/mcp/src/data/v50.16.0/scrollbar.json create mode 100644 packages/mcp/src/data/v50.16.0/segmented-control.json create mode 100644 packages/mcp/src/data/v50.16.0/select-with-tags.json create mode 100644 packages/mcp/src/data/v50.16.0/select.json create mode 100644 packages/mcp/src/data/v50.16.0/side-panel.json create mode 100644 packages/mcp/src/data/v50.16.0/skeleton.json create mode 100644 packages/mcp/src/data/v50.16.0/slider-input.json create mode 100644 packages/mcp/src/data/v50.16.0/slider.json create mode 100644 packages/mcp/src/data/v50.16.0/sortable-list.json create mode 100644 packages/mcp/src/data/v50.16.0/space.json create mode 100644 packages/mcp/src/data/v50.16.0/spinner.json create mode 100644 packages/mcp/src/data/v50.16.0/stack.json create mode 100644 packages/mcp/src/data/v50.16.0/status-badge.json create mode 100644 packages/mcp/src/data/v50.16.0/status.json create mode 100644 packages/mcp/src/data/v50.16.0/stepped-progress-bar.json create mode 100644 packages/mcp/src/data/v50.16.0/steps.json create mode 100644 packages/mcp/src/data/v50.16.0/switch.json create mode 100644 packages/mcp/src/data/v50.16.0/system-message.json create mode 100644 packages/mcp/src/data/v50.16.0/tab-bar.json create mode 100644 packages/mcp/src/data/v50.16.0/tag.json create mode 100644 packages/mcp/src/data/v50.16.0/text.json create mode 100644 packages/mcp/src/data/v50.16.0/textarea.json create mode 100644 packages/mcp/src/data/v50.16.0/toast-plate.json create mode 100644 packages/mcp/src/data/v50.16.0/toast.json create mode 100644 packages/mcp/src/data/v50.16.0/tooltip.json create mode 100644 packages/mcp/src/data/v50.16.0/underlay.json create mode 100644 packages/mcp/src/data/v50.16.0/universal-date-input.json create mode 100644 packages/mcp/src/data/v50.16.0/with-suffix.json diff --git a/packages/mcp/src/data/v50.16.0/accordion.json b/packages/mcp/src/data/v50.16.0/accordion.json new file mode 100644 index 0000000000..46d8aa3741 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/accordion.json @@ -0,0 +1,154 @@ +{ + "packageName": "accordion", + "displayName": "Accordion", + "description": "Используется для отображения скрытого контента по клику.", + "props": { + "expanded": { + "defaultValue": null, + "description": "Состояние компонента", + "name": "expanded", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "header": { + "defaultValue": null, + "description": "Элемент заголовка", + "name": "header", + "required": true, + "type": { + "name": "ReactNode" + } + }, + "control": { + "defaultValue": null, + "description": "Слот для элемента управления", + "name": "control", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "controlPosition": { + "defaultValue": { + "value": "end" + }, + "description": "Указывает компоненту - где будет размещен control", + "name": "controlPosition", + "required": false, + "type": { + "name": "ControlPosition | undefined" + } + }, + "defaultExpanded": { + "defaultValue": { + "value": false + }, + "description": "Начальное состояние uncontrolled компонента", + "name": "defaultExpanded", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Основной элемент для отображения содержимого", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс обертки", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "containerClassName": { + "defaultValue": null, + "description": "Дополнительный класс для контейнера с заголовком", + "name": "containerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "headerClassName": { + "defaultValue": null, + "description": "Дополнительный класс для header", + "name": "headerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "controlClassName": { + "defaultValue": null, + "description": "Дополнительный класс для control", + "name": "controlClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "bodyClassName": { + "defaultValue": null, + "description": "Дополнительный класс для body", + "name": "bodyClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "bodyContentClassName": { + "defaultValue": null, + "description": "Дополнительный класс для body content", + "name": "bodyContentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onExpandedChange": { + "defaultValue": null, + "description": "Обработчик смены состояний `expanded`", + "name": "onExpandedChange", + "required": false, + "type": { + "name": "((expanded: boolean) => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Анатомия", + "description": "Компонент состоит из только 3 слотов: Control - элемента управления, Header - основной элемент для отображения содержимого и Body - содержимое.\nСлоты могут принимать в себя как готовые компоненты, так и кастомную вёрстку.", + "desktop": "}\ncontrol={
}\n>\n
\n" + }, + { + "title": "Контрол", + "description": "Control может быть в виде кнопки, иконки или любым другим интерактивным элементом, который инициирует раскрытие или сворачивание секции.\nПо умолчанию Control размещается сбоку справа от Header, но может располагаться и слева, что больше напоминает дерево.", + "desktop": "render(() => {\nconst [controlPosition, setControlPosition] = React.useState('end');\n\nconst handleControlPositionChange = React.useCallback((_, payload) => {\nsetControlPosition(payload.value);\n}, []);\n\nreturn \n}\ncontrolPosition={controlPosition}\n>\n
\n\n\n}\ncontrolPosition={controlPosition}\n>\n
\n\n\n}\ncontrolPosition={controlPosition}\n>\n
\n\n\n\n\n\n\n\n})" + }, + { + "title": "Примеры", + "description": "В качестве пресетов в компонент заложены текстовые контейнеры, как самый распространённый вариант использования.", + "desktop": "render(() => {\nreturn \n\nИспользуется для создания интерактивных списков,\nкоторые можно разворачивать и сворачивать для\nотображения дополнительной информации.\n\n\n\nПодходит для организации сложной информации в ограниченном пространстве,\nпредставления большого объема данных, иерархической структуры с\nвозможностью скрытия и открытия разделов,\nудовлетворения потребностей пользователей в доступе к информации\nпо запросу и просмотра нескольких связанных разделов контента.\n\n\n})" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/action-button.json b/packages/mcp/src/data/v50.16.0/action-button.json new file mode 100644 index 0000000000..7f9c9e5b0c --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/action-button.json @@ -0,0 +1,125 @@ +{ + "packageName": "action-button", + "displayName": "ActionButton", + "description": "Используется как триггер для выполнения определённого действия. Лейбл кнопки должен однозначно сообщать пользователю, что произойдёт после нажатия на неё.", + "props": { + "icon": { + "defaultValue": null, + "description": "Иконка кнопки", + "name": "icon", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "size": { + "defaultValue": { + "value": 48 + }, + "description": "Размер кнопки", + "name": "size", + "required": false, + "type": { + "name": "48 | undefined" + } + }, + "view": { + "defaultValue": { + "value": "primary" + }, + "description": "Тип кнопки", + "name": "view", + "required": false, + "type": { + "name": "\"primary\" | \"secondary\" | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "iconWrapperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для обертки иконки", + "name": "iconWrapperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "href": { + "defaultValue": null, + "description": "Значение href для ссылки", + "name": "href", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Заблокировать кнопку", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "loading": { + "defaultValue": null, + "description": "Показать лоадер", + "name": "loading", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля спиннера используется модификатор -loader", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Палитра, в контексте которой используется кнопка", + "name": "colors", + "required": false, + "type": { + "name": "Colors | undefined" + } + } + }, + "demos": [ + { + "title": "Виды кнопок", + "description": "", + "desktop": "render(() => {\nconst [disabled, setDisabled] = React.useState(false);\n\nreturn (\n<>\n} view='primary'>\nPrimary\n\n\n} view='secondary'>\nSecondary\n\n\n setDisabled((prevState) => !prevState)}\nlabel='Недоступна'\n/>\n\n);\n});" + }, + { + "title": "Перенос текста внутри кнопки", + "description": "Лейбл кнопки ограничен двумя строками.", + "desktop": "} view='primary'>\nПример переноса текста\n" + }, + { + "title": "Обработка событий", + "description": "С помощью свойства `loading` можно отобразить состояние загрузки.\nМинимальное время отображения лоадера — 500мс, чтобы при быстрых ответах от сервера кнопка не «моргала».", + "desktop": "render(() => {\nconst [loading, setLoading] = React.useState({\nprimary: false,\nsecondary: false,\n});\n\nconst handleClick = (buttonName, timeout) => {\nsetLoading({ ...loading, [buttonName]: true });\nsetTimeout(() => {\nsetLoading({ ...loading, [buttonName]: false });\n}, timeout);\n};\n\nreturn (\n<>\n}\nloading={loading.primary}\nonClick={() => handleClick('primary', 30)}\n>\nБыстрый запрос\n\n\n}\nloading={loading.secondary}\nonClick={() => handleClick('secondary', 1500)}\nview='secondary'\n>\nДолгий запрос\n\n\n);\n});" + }, + { + "title": "Кнопка-ссылка", + "description": "Любую кнопку можно превратить в ссылку, передав компоненту пропс `href`.", + "desktop": "render(() => {\nreturn (\n} href='http://www.alfabank.ru'>\n{'Переход  по ссылке'}\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/amount-input.json b/packages/mcp/src/data/v50.16.0/amount-input.json new file mode 100644 index 0000000000..77b4cada3d --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/amount-input.json @@ -0,0 +1,458 @@ +{ + "packageName": "amount-input", + "displayName": "AmountInput", + "description": "Используется для ввода сумм.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля FormControl используется модификатор -form-control", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClick": { + "defaultValue": null, + "description": "Обработчик клика по полю", + "name": "onClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseDown": { + "defaultValue": null, + "description": "Обработчик MouseDown по полю", + "name": "onMouseDown", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseUp": { + "defaultValue": null, + "description": "Обработчик MouseUp по полю", + "name": "onMouseUp", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "size": { + "defaultValue": { + "value": "48" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "bold": { + "defaultValue": { + "value": true + }, + "description": "Жирный текст\n@deprecated Используйте {@link BaseInputProps.fontWeight }", + "name": "bold", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "fontWeight": { + "defaultValue": null, + "description": "Вес шрифта инпута, в том числе плейсхолдера", + "name": "fontWeight", + "required": false, + "type": { + "name": "\"bold\" | \"medium\" | \"regular\" | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clear": { + "defaultValue": { + "value": false + }, + "description": "Крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "success": { + "defaultValue": null, + "description": "Отображение иконки успеха", + "name": "success", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл компонента", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "wrapperRef": { + "defaultValue": null, + "description": "Ref для обертки input", + "name": "wrapperRef", + "required": false, + "type": { + "name": "Ref | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки левых аддонов", + "name": "leftAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "rightAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки правых аддонов", + "name": "rightAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "bottomAddons": { + "defaultValue": null, + "description": "Слот под инпутом", + "name": "bottomAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "inputClassName": { + "defaultValue": null, + "description": "Дополнительный класс инпута", + "name": "inputClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "labelClassName": { + "defaultValue": null, + "description": "Дополнительный класс для лейбла", + "name": "labelClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "addonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для аддонов", + "name": "addonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "focusedClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен при фокусе", + "name": "focusedClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "filledClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен, если в поле есть значение", + "name": "filledClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку очистки", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "disableUserInput": { + "defaultValue": null, + "description": "Запрещает ввод с клавиатуры", + "name": "disableUserInput", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": null, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Денежное значение в минорных единицах", + "name": "value", + "required": false, + "type": { + "name": "string | number | null | undefined" + } + }, + "defaultValue": { + "defaultValue": { + "value": null + }, + "description": "Значение по-умолчанию в минорных единицах", + "name": "defaultValue", + "required": false, + "type": { + "name": "string | number | null | undefined" + } + }, + "codeFormat": { + "defaultValue": { + "value": "symbolic" + }, + "description": "Формат отображения кода валюты", + "name": "codeFormat", + "required": false, + "type": { + "name": "\"letter\" | \"symbolic\" | undefined" + } + }, + "view": { + "defaultValue": { + "value": "default" + }, + "description": "default - не отображаем копейки, если их значение 0\nwithZeroMinorPart - отображаем копейки, даже если их значение равно 0", + "name": "view", + "required": false, + "type": { + "name": "\"default\" | \"withZeroMinorPart\" | undefined" + } + }, + "currency": { + "defaultValue": { + "value": "RUR" + }, + "description": "Валюта", + "name": "currency", + "required": false, + "type": { + "name": "\"ALL\" | \"AFN\" | \"ARS\" | \"AWG\" | \"AUD\" | \"AZN\" | \"BSD\" | \"BBD\" | \"BYN\" | \"BZD\" | \"BMD\" | \"BOB\" | \"BOV\" | \"BAM\" | \"BWP\" | \"BGN\" | \"BRL\" | \"BND\" | \"KHR\" | \"CAD\" | \"KYD\" | \"CLP\" | \"CNY\" | ... 157 more ... | undefined" + } + }, + "suffix": { + "defaultValue": { + "value": "RUR" + }, + "description": "Дополнительный закрепленный текст справа от основного значения. (по умолчанию — символ валюты)", + "name": "suffix", + "required": false, + "type": { + "name": "string | null | undefined" + } + }, + "integerLength": { + "defaultValue": { + "value": 9 + }, + "description": "Максимальное число знаков до запятой\nmax 15", + "name": "integerLength", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "minority": { + "defaultValue": { + "value": 100 + }, + "description": "Минорные единицы", + "name": "minority", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "integersOnly": { + "defaultValue": { + "value": false + }, + "description": "Позволяет вводить только целые значения", + "name": "integersOnly", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "positiveOnly": { + "defaultValue": { + "value": true + }, + "description": "", + "name": "positiveOnly", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик события изменения значения", + "name": "onChange", + "required": false, + "type": { + "name": "((e: ChangeEvent | null, payload: { value: number | null; valueString: string; }) => void) | undefined" + } + }, + "transparentMinor": { + "defaultValue": { + "value": true + }, + "description": "Делает минорную часть полупрозрачной", + "name": "transparentMinor", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "stepper": { + "defaultValue": null, + "description": "Добавляет компонент \"Stepper\" в правый аддон", + "name": "stepper", + "required": false, + "type": { + "name": "{ step: number; min?: number | undefined; max?: number | undefined; } | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "По умолчанию в качестве суффикса отображается символ выбранной валюты.", + "desktop": "render(() => {\nconst [suffix, setSuffix] = React.useState('currency');\nconst [minor, setMinor] = React.useState(true);\nconst [value, setValue] = React.useState(1234567);\n\nconst handleChange = (_, payload) => {\nsetValue(payload.value);\n};\n\nconst suffixInput = {\ncurrency: 'RUR',\npercent: '%',\nnoSuffix: null,\n}[suffix];\n\nconst onChangeSuffix = (_, payload) => {\nsetSuffix(payload.value);\n};\n\nconst handleMinorChange = () => setMinor(!minor);\n\nreturn (\n
\n\n\n\n\n\n\n\n\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/amount.json b/packages/mcp/src/data/v50.16.0/amount.json new file mode 100644 index 0000000000..2842df0417 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/amount.json @@ -0,0 +1,161 @@ +{ + "packageName": "amount", + "displayName": "Amount", + "description": "Используется для отображения сумм.", + "props": { + "value": { + "defaultValue": null, + "description": "Денежное значение в минорных единицах", + "name": "value", + "required": true, + "type": { + "name": "number" + } + }, + "currency": { + "defaultValue": null, + "description": "Валюта", + "name": "currency", + "required": false, + "type": { + "name": "\"ALL\" | \"AFN\" | \"ARS\" | \"AWG\" | \"AUD\" | \"AZN\" | \"BSD\" | \"BBD\" | \"BYN\" | \"BZD\" | \"BMD\" | \"BOB\" | \"BOV\" | \"BAM\" | \"BWP\" | \"BGN\" | \"BRL\" | \"BND\" | \"KHR\" | \"CAD\" | \"KYD\" | \"CLP\" | \"CNY\" | ... 157 more ... | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "minority": { + "defaultValue": null, + "description": "Количество минорных единиц в валюте", + "name": "minority", + "required": true, + "type": { + "name": "number" + } + }, + "codeFormat": { + "defaultValue": { + "value": "symbolic" + }, + "description": "Формат отображения кода валюты", + "name": "codeFormat", + "required": false, + "type": { + "name": "\"letter\" | \"symbolic\" | undefined" + } + }, + "view": { + "defaultValue": { + "value": "default" + }, + "description": "default - не отображаем копейки, если их значение 0\nwithZeroMinorPart - отображаем копейки, даже если их значение равно 0", + "name": "view", + "required": false, + "type": { + "name": "\"default\" | \"withZeroMinorPart\" | undefined" + } + }, + "bold": { + "defaultValue": null, + "description": "Управление жирностью\n@deprecated Используйте проп {@link AmountProps.fontWeight }", + "name": "bold", + "required": false, + "type": { + "name": "\"none\" | \"full\" | \"major\" | undefined" + } + }, + "fontWeight": { + "defaultValue": { + "value": "bold === 'full' ? 'bold' : bold === 'major' ? { major: 'bold' } : undefined" + }, + "description": "Управление жирностью", + "name": "fontWeight", + "required": false, + "type": { + "name": "\"bold\" | \"medium\" | { major: \"bold\" | \"medium\"; } | undefined" + } + }, + "transparentMinor": { + "defaultValue": null, + "description": "Делает минорную часть полупрозрачной", + "name": "transparentMinor", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "showPlus": { + "defaultValue": { + "value": false + }, + "description": "Показывать значок + для положительных значений", + "name": "showPlus", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "trimZero": { + "defaultValue": { + "value": false + }, + "description": "Обрезать ноль в минорной части. Например: 1.70 -> 1.7", + "name": "trimZero", + "required": false, + "type": { + "name": "boolean | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Компонент состоит из четырёх частей: мажорной, минорной, валютной и дополнительного слота.", + "desktop": "render(() => {\nconst [minor, setMinor] = React.useState(true);\nconst [currency, setCurrency] = React.useState(false);\nconst [rightAddons, setRightAddons] = React.useState(false);\nconst [rightAddonsWithIcon, setRightAddonsWithIcon] = React.useState(false);\n\nconst handleMinorChange = () => setMinor(!minor);\nconst handleCurrencyChange = () => setCurrency(!currency);\nconst handleRightAddonsChange = () => {\nsetRightAddons(!rightAddons);\nsetRightAddonsWithIcon(false);\n};\nconst handleRightAddonsWithIconChange = () => {\nsetRightAddonsWithIcon(!rightAddonsWithIcon);\nsetRightAddons(false);\n};\n\nconst styleAddons = {\nborderRadius: '99px',\nbackground: 'linear-gradient(264deg, #FF42CA 0%, #FF8A00 100%)',\nboxSizing: 'border-box',\npadding: '6px 12px',\ndisplay: 'inline-flex',\nverticalAlign: 'bottom',\nmarginLeft: '4px',\n};\n\nconst rightAddonsContent = rightAddons && (\n\n\nCustom\n\n\n);\n\nconst rightAddonsWithIconContent = rightAddonsWithIcon && (\n\n\n\n);\n\nreturn (\n\n\n\n\n\n\n\n\n\n\n\n\n\n);\n});" + }, + { + "title": "Мажорная часть", + "description": "Для положительных значений можно включить отображение символа «+».", + "desktop": "render(() => {\nconst [plus, setPlus] = React.useState(false);\n\nconst handlePlusChange = () => setPlus(!plus);\n\nreturn (\n\n\n\n\n\n\n\n);\n});" + }, + { + "title": "Минорная часть", + "description": "При необходимости можно скрыть незначащую минорную часть.", + "desktop": "render(() => {\nconst [minor, setMinor] = React.useState(false);\n\nconst handleMinorChange = () => setMinor(!minor);\n\nreturn (\n\n\n\n\n\n\n\n\n\n\n\n);\n});" + }, + { + "title": "Валюта", + "description": "Для валюты можно использовать символ или буквенный код.", + "desktop": "\n\n\n\n\n\n\n\n" + }, + { + "title": "Стиль", + "description": "Компонент наследует стиль текста родителя и имеет два модификатора.", + "desktop": "render(() => {\nconst [textStyle, setTextStyle] = React.useState('headline');\nconst [fontWeight, setFontWeight] = React.useState('regular');\nconst [transparent, setTransparent] = React.useState('none');\n\nconst onTextStyleChange = React.useCallback((_, payload) => {\nsetTextStyle(payload.value);\n}, []);\n\nconst onFontWeightChange = React.useCallback((_, payload) => {\nsetFontWeight(payload.value);\n}, []);\n\nconst onTransparentChange = React.useCallback((_, payload) => {\nsetTransparent(payload.value);\n}, []);\n\nconst isHeadline = textStyle === 'headline';\nconst Component = isHeadline ? Typography.Title : Typography.Text;\n\nreturn (\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/attach.json b/packages/mcp/src/data/v50.16.0/attach.json new file mode 100644 index 0000000000..b1268aae95 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/attach.json @@ -0,0 +1,148 @@ +{ + "packageName": "attach", + "displayName": "Attach", + "description": "Используется для прикрепления файлов.", + "props": { + "buttonContent": { + "defaultValue": { + "value": "Выберите файл" + }, + "description": "Содержимое кнопки для выбора файла", + "name": "buttonContent", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "buttonProps": { + "defaultValue": { + "value": "{}" + }, + "description": "Свойства для кнопки", + "name": "buttonProps", + "required": false, + "type": { + "name": "(ButtonProps & ButtonHTMLAttributes) | undefined" + } + }, + "fileClassName": { + "defaultValue": null, + "description": "Дополнительный класс для блока с файлами", + "name": "fileClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "noFileClassName": { + "defaultValue": null, + "description": "Дополнительный класс для блока с подсказкой, когда файл не загружен", + "name": "noFileClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "maxFilenameLength": { + "defaultValue": null, + "description": "Число символов, после которого имя файла будет обрезаться", + "name": "maxFilenameLength", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "noFileText": { + "defaultValue": { + "value": "Нет файла" + }, + "description": "Текст для случая, когда файл не загружен", + "name": "noFileText", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "progressBarPercent": { + "defaultValue": null, + "description": "Процент выполнения загрузки файла", + "name": "progressBarPercent", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "size": { + "defaultValue": { + "value": 48 + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 32 | undefined" + } + }, + "multiple": { + "defaultValue": null, + "description": "Возможность прикрепления нескольких файлов", + "name": "multiple", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Содержимое поля ввода. Принимает массив объектов типа File или null.", + "name": "value", + "required": false, + "type": { + "name": "File[] | null | undefined" + } + }, + "defaultValue": { + "defaultValue": null, + "description": "Содержимое поля ввода, указанное по умолчанию. Принимает массив объектов типа File или null.", + "name": "defaultValue", + "required": false, + "type": { + "name": "File[] | null | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик поля ввода", + "name": "onChange", + "required": false, + "type": { + "name": "((event: ChangeEvent, payload: { files: File[]; }) => void) | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку очистки", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Для компонента можно настроить текст-плейсхолдер, размер и лейбл кнопки. Рекомендуем прикреплять для тестов тяжелый файл, иначе загрузка будет мгновенной.", + "desktop": "render(() => {\nconst [multiple, setMultiple] = React.useState(false);\nconst [progress, setProgress] = React.useState(0);\n\nconst simulateProgress = () => {\nconst interval = setInterval(() => {\nsetProgress((prevProgress) => {\nif (prevProgress === 100) {\nclearInterval(interval);\nreturn 100;\n}\nreturn prevProgress + 1;\n});\n}, 100);\n};\n\nconst handleChange = () => {\nsimulateProgress()\n};\n\nreturn (\n\n\n setMultiple(!multiple)}\n/>\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/backdrop.json b/packages/mcp/src/data/v50.16.0/backdrop.json new file mode 100644 index 0000000000..b645830ad2 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/backdrop.json @@ -0,0 +1,83 @@ +{ + "packageName": "backdrop", + "displayName": "Backdrop", + "description": "Используется для затемнения фона при вызове модального слоя.", + "props": { + "invisible": { + "defaultValue": { + "value": false + }, + "description": "Прозрачный бэкдроп\n@deprecated данное свойство больше не используется, временно оставлено для обратной совместимости\nИспользуйте свойство transparent", + "name": "invisible", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "open": { + "defaultValue": { + "value": false + }, + "description": "Управляет видимостью компонента", + "name": "open", + "required": false, + "type": { + "name": "boolean" + } + }, + "onClose": { + "defaultValue": null, + "description": "Обработчик клика по бэкдропу", + "name": "onClose", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "transitionClassNames": { + "defaultValue": null, + "description": "Классы анимации\n\nhttp://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames", + "name": "transitionClassNames", + "required": false, + "type": { + "name": "string | CSSTransitionClassNames | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "transparent": { + "defaultValue": { + "value": false + }, + "description": "Управляет прозрачностью бэкдроп", + "name": "transparent", + "required": false, + "type": { + "name": "boolean | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Компонент поддерживает все параметры из [CSSTransition](http://reactcommunity.org/react-transition-group/css-transition).", + "desktop": "render(() => {\nconst [open, setOpen] = React.useState(false);\n\nreturn (\n
\n setOpen(!open)}\nsize={56}\nblock={isMobile()}\nbreakpoint={BREAKPOINT}\n>\n{open ? 'Закрыть Backdrop' : 'Показать Backdrop'}\n\n setOpen(false)} />\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/bank-card.json b/packages/mcp/src/data/v50.16.0/bank-card.json new file mode 100644 index 0000000000..7c451e9d18 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/bank-card.json @@ -0,0 +1,103 @@ +{ + "packageName": "bank-card", + "displayName": "BankCard", + "description": "Используется для ввода номера карты или банковского счета.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "backgroundColor": { + "defaultValue": { + "value": "#EF3124" + }, + "description": "Цвет фона карты", + "name": "backgroundColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "bankLogo": { + "defaultValue": { + "value": "" + }, + "description": "Иконка логотипа банка (размер L)", + "name": "bankLogo", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "inputLabel": { + "defaultValue": { + "value": "getDefaultInputLabel(maskType)" + }, + "description": "Лэйбл поля ввода", + "name": "inputLabel", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Значение поля ввода", + "name": "value", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик ввода", + "name": "onChange", + "required": false, + "type": { + "name": "((event: ChangeEvent, payload: { value: string; }) => void) | undefined" + } + }, + "onUsePhoto": { + "defaultValue": null, + "description": "Обработчик вызова камеры", + "name": "onUsePhoto", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "maskType": { + "defaultValue": { + "value": "MaskTypeEnum.Default" + }, + "description": "Тип вводимой маски. Позволяет устанавливать необходимый тип номера (номер карты или номер счёта)\nЕсли параметр не передавать - работает с обоими типами номеров", + "name": "maskType", + "required": false, + "type": { + "name": "MaskType | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "При необходимости можно изменить логотип и цвет карты.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState('2201382000000013');\n\nconst handleChange = (event, payload) => setValue(payload.value);\n\nreturn (\n<>\n\n\n\n\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/base-modal.json b/packages/mcp/src/data/v50.16.0/base-modal.json new file mode 100644 index 0000000000..116cbf02df --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/base-modal.json @@ -0,0 +1,345 @@ +{ + "packageName": "base-modal", + "displayName": "BaseModal", + "description": "Используется для построения модальных сущностей.", + "props": { + "children": { + "defaultValue": null, + "description": "Контент", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "Backdrop": { + "defaultValue": { + "value": "({\n className,\n open = false,\n invisible = false,\n timeout = 200,\n children,\n onClose,\n dataTestId,\n transitionClassNames = styles,\n transparent = false,\n ...restProps\n}) => {\n const nodeRef = useRef(null);\n\n return (\n \n \n {children}\n
\n \n );\n}" + }, + "description": "Компонент бэкдропа", + "name": "Backdrop", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "backdropProps": { + "defaultValue": { + "value": "{}" + }, + "description": "Свойства для Бэкдропа", + "name": "backdropProps", + "required": false, + "type": { + "name": "(Partial & Record) | undefined" + } + }, + "container": { + "defaultValue": null, + "description": "Нода, компонент или функция возвращающая их\n\nКонтейнер к которому будут добавляться порталы", + "name": "container", + "required": false, + "type": { + "name": "(() => Element | null | undefined) | undefined" + } + }, + "disableAutoFocus": { + "defaultValue": { + "value": false + }, + "description": "Отключает автоматический перевод фокуса на модалку при открытии", + "name": "disableAutoFocus", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableFocusLock": { + "defaultValue": { + "value": false + }, + "description": "Отключает ловушку фокуса", + "name": "disableFocusLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableRestoreFocus": { + "defaultValue": { + "value": false + }, + "description": "Отключает восстановление фокуса на предыдущем элементе после закрытия модалки", + "name": "disableRestoreFocus", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableEscapeKeyDown": { + "defaultValue": { + "value": false + }, + "description": "Отключает вызов `callback` при нажатии Escape", + "name": "disableEscapeKeyDown", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableBackdropClick": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает вызов `callback` при клике на бэкдроп", + "name": "disableBackdropClick", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableBlockingScroll": { + "defaultValue": { + "value": false + }, + "description": "Отключает блокировку скролла при открытии модального окна\n@deprecated Используйте `scrollLock={true}`.", + "name": "disableBlockingScroll", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "scrollLock": { + "defaultValue": { + "value": "false" + }, + "description": "Управляет блокировкой скролла/overscroll фона при открытой модалке.", + "name": "scrollLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "keepMounted": { + "defaultValue": { + "value": false + }, + "description": "Содержимое модалки всегда в DOM", + "name": "keepMounted", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "open": { + "defaultValue": null, + "description": "Управление видимостью модалки", + "name": "open", + "required": true, + "type": { + "name": "boolean" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "wrapperProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на dialog wrapper", + "name": "wrapperProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "contentProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на обертку контента", + "name": "contentProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "componentDivProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на компонентную обертку контента", + "name": "componentDivProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "wrapperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для обертки (Modal)", + "name": "wrapperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "scrollHandler": { + "defaultValue": { + "value": "wrapper" + }, + "description": "Обработчик скролла контента", + "name": "scrollHandler", + "required": false, + "type": { + "name": "\"content\" | \"wrapper\" | MutableRefObject | undefined" + } + }, + "transitionProps": { + "defaultValue": { + "value": "{}" + }, + "description": "Пропсы для анимации (CSSTransition)", + "name": "transitionProps", + "required": false, + "type": { + "name": "Partial | undefined" + } + }, + "usePortal": { + "defaultValue": { + "value": true + }, + "description": "Рендерить ли в контейнер через портал.", + "name": "usePortal", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onBackdropClick": { + "defaultValue": null, + "description": "Обработчик события нажатия на бэкдроп", + "name": "onBackdropClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onEscapeKeyDown": { + "defaultValue": null, + "description": "Обработчик события нажатия на Escape\n\nЕсли `disableEscapeKeyDown` - false и модальное окно в фокусе", + "name": "onEscapeKeyDown", + "required": false, + "type": { + "name": "((event: KeyboardEvent) => void) | undefined" + } + }, + "onClose": { + "defaultValue": null, + "description": "Обработчик закрытия", + "name": "onClose", + "required": false, + "type": { + "name": "((event: MouseEvent | KeyboardEvent, reason?: \"backdropClick\" | \"escapeKeyDown\" | \"closerClick\" | undefined) => void) | undefined" + } + }, + "onMount": { + "defaultValue": null, + "description": "Обработчик события onEntered компонента Transition", + "name": "onMount", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "onUnmount": { + "defaultValue": null, + "description": "Обработчик события onExited компонента Transition", + "name": "onUnmount", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "zIndex": { + "defaultValue": { + "value": 100 + }, + "description": "z-index компонента", + "name": "zIndex", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "componentRef": { + "defaultValue": { + "value": null + }, + "description": "Реф, который должен быть установлен компонентной области", + "name": "componentRef", + "required": false, + "type": { + "name": "MutableRefObject | undefined" + } + }, + "contentElementRef": { + "defaultValue": { + "value": null + }, + "description": "Реф контентной области", + "name": "contentElementRef", + "required": false, + "type": { + "name": "MutableRefObject | undefined" + } + }, + "iOSLock": { + "defaultValue": { + "value": false + }, + "description": "Блокирует скролл когда модальное окно открыто. Работает только на iOS.\n@deprecated Используйте `scrollLock={true}`.", + "name": "iOSLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onWheel": { + "defaultValue": null, + "description": "Хэндлер события прокрутки колесиком", + "name": "onWheel", + "required": false, + "type": { + "name": "((e: WheelEvent) => void) | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "render(() => {\nconst [open, setOpen] = React.useState(false);\nconst handleModalOpen = () => setOpen(!open);\n\nreturn (\n<>\n\nПоказать BaseModal\n\n\n\n
BaseModal
\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/bottom-sheet.json b/packages/mcp/src/data/v50.16.0/bottom-sheet.json new file mode 100644 index 0000000000..3ea6de2341 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/bottom-sheet.json @@ -0,0 +1,740 @@ +{ + "packageName": "bottom-sheet", + "displayName": "BottomSheet", + "description": "Используется для отображения контента в модальном слое.", + "props": { + "adjustContainerHeight": { + "defaultValue": { + "value": "(value: number) => value" + }, + "description": "Метод, позволяющий донастраивать высоту контейнера для BottomSheet, например с учётом safe-area", + "name": "adjustContainerHeight", + "required": false, + "type": { + "name": "((height: number) => number) | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Контент", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "open": { + "defaultValue": null, + "description": "Управление видимостью", + "name": "open", + "required": true, + "type": { + "name": "boolean" + } + }, + "title": { + "defaultValue": null, + "description": "Заголовок", + "name": "title", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "titleSize": { + "defaultValue": { + "value": "default" + }, + "description": "Размер заголовка", + "name": "titleSize", + "required": false, + "type": { + "name": "\"default\" | \"compact\" | undefined" + } + }, + "subtitle": { + "defaultValue": null, + "description": "Подзаголовок.", + "name": "subtitle", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "actionButton": { + "defaultValue": null, + "description": "Кнопка действия (обычно, это кнопка закрытия)", + "name": "actionButton", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "container": { + "defaultValue": null, + "description": "Нода, компонент или функция возвращающая их\n\nКонтейнер к которому будут добавляться порталы", + "name": "container", + "required": false, + "type": { + "name": "(() => Element | null | undefined) | undefined" + } + }, + "usePortal": { + "defaultValue": null, + "description": "Рендерить ли в контейнер через портал.", + "name": "usePortal", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "bottomSheetWrapperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для обертки контейнера", + "name": "bottomSheetWrapperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "containerProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на контейнер.", + "name": "containerProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "containerClassName": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "containerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "backgroundColor": { + "defaultValue": null, + "description": "Цвет фона", + "name": "backgroundColor", + "required": false, + "type": { + "name": "\"primary\" | \"secondary\" | undefined" + } + }, + "headerClassName": { + "defaultValue": null, + "description": "Дополнительный класс шапки", + "name": "headerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "headerContentClassName": { + "defaultValue": null, + "description": "Дополнительный класс для контента шапки", + "name": "headerContentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "footerClassName": { + "defaultValue": null, + "description": "Дополнительный класс футера", + "name": "footerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "addonClassName": { + "defaultValue": null, + "description": "Дополнительный класс для аддонов", + "name": "addonClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "closerClassName": { + "defaultValue": null, + "description": "Дополнительный класс для компонента крестика", + "name": "closerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "backerClassName": { + "defaultValue": null, + "description": "Дополнительный класс для компонента стрелки назад", + "name": "backerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "modalClassName": { + "defaultValue": null, + "description": "Дополнительный класс для компонента модального окна", + "name": "modalClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "modalWrapperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для обертки модального окна", + "name": "modalWrapperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "showSwipeMarker": { + "defaultValue": { + "value": true + }, + "description": "Дефолтный маркер", + "name": "showSwipeMarker", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "swipeableMarkerClassName": { + "defaultValue": null, + "description": "", + "name": "swipeableMarkerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "swipeableMarker": { + "defaultValue": null, + "description": "Кастомный маркер", + "name": "swipeableMarker", + "required": false, + "type": { + "name": "ReactElement> | undefined" + } + }, + "transitionProps": { + "defaultValue": { + "value": "{}" + }, + "description": "TransitionProps, прокидываются в компонент CSSTransitionProps.", + "name": "transitionProps", + "required": false, + "type": { + "name": "Partial | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля заголовка используется модификатор -header", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "zIndex": { + "defaultValue": null, + "description": "z-index компонента", + "name": "zIndex", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "swipeable": { + "defaultValue": { + "value": true + }, + "description": "Будет ли свайпаться шторка", + "name": "swipeable", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "swipeableContent": { + "defaultValue": { + "value": true + }, + "description": "Будет ли свайпаться контент", + "name": "swipeableContent", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "swipeThreshold": { + "defaultValue": { + "value": 5 + }, + "description": "Порог свайпа", + "name": "swipeThreshold", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "outerClassName": { + "defaultValue": null, + "description": "Дополнительный класс для слота над шторкой", + "name": "outerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "outerAddons": { + "defaultValue": null, + "description": "Слот над шторкой", + "name": "outerAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "bottomAddons": { + "defaultValue": null, + "description": "Слот снизу", + "name": "bottomAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "hasCloser": { + "defaultValue": null, + "description": "Наличие компонента крестика", + "name": "hasCloser", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hasBacker": { + "defaultValue": null, + "description": "Наличие компонента стрелки назад", + "name": "hasBacker", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "backButtonProps": { + "defaultValue": null, + "description": "Дополнительные пропсы для кнопки \"Назад\"", + "name": "backButtonProps", + "required": false, + "type": { + "name": "Omit | undefined" + } + }, + "titleAlign": { + "defaultValue": { + "value": "left" + }, + "description": "Выравнивание заголовка", + "name": "titleAlign", + "required": false, + "type": { + "name": "BottomSheetTitleAlign | undefined" + } + }, + "stickyHeader": { + "defaultValue": null, + "description": "Фиксирует шапку", + "name": "stickyHeader", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "stickyFooter": { + "defaultValue": { + "value": true + }, + "description": "Фиксирует футер", + "name": "stickyFooter", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "initialHeight": { + "defaultValue": { + "value": "default" + }, + "description": "Высота шторки", + "name": "initialHeight", + "required": false, + "type": { + "name": "\"default\" | \"full\" | undefined" + } + }, + "hideOverlay": { + "defaultValue": null, + "description": "Будет ли виден оверлэй", + "name": "hideOverlay", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hideHeader": { + "defaultValue": null, + "description": "Будет ли видна шапка", + "name": "hideHeader", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "trimTitle": { + "defaultValue": null, + "description": "Будет ли обрезан заголовок", + "name": "trimTitle", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableOverlayClick": { + "defaultValue": null, + "description": "Запретить закрытие шторки кликом на оверлэй", + "name": "disableOverlayClick", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableBlockingScroll": { + "defaultValue": null, + "description": "Отключает блокировку скролла при открытии модального окна\n@deprecated Используйте `scrollLock={true}`.", + "name": "disableBlockingScroll", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "scrollLock": { + "defaultValue": { + "value": true + }, + "description": "Управляет блокировкой скролла/overscroll фона при открытой шторке.", + "name": "scrollLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableFocusLock": { + "defaultValue": null, + "description": "Отключает ловушку фокуса", + "name": "disableFocusLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "backdropProps": { + "defaultValue": null, + "description": "Свойства для Бэкдропа", + "name": "backdropProps", + "required": false, + "type": { + "name": "(Partial & Record) | undefined" + } + }, + "scrollableContainerRef": { + "defaultValue": { + "value": "() => null" + }, + "description": "Реф на контейнер, в котором происходит скролл", + "name": "scrollableContainerRef", + "required": false, + "type": { + "name": "RefObject | undefined" + } + }, + "bottomSheetInstanceRef": { + "defaultValue": null, + "description": "Реф для управления компонентом.", + "name": "bottomSheetInstanceRef", + "required": false, + "type": { + "name": "RefObject<{ scrollToArea: (idx: number) => void; }> | undefined" + } + }, + "sheetContainerRef": { + "defaultValue": { + "value": "() => null" + }, + "description": "Реф на контейнер, в котором находится шторка", + "name": "sheetContainerRef", + "required": false, + "type": { + "name": "RefObject | undefined" + } + }, + "magneticAreas": { + "defaultValue": null, + "description": "Магнитные области видимой высоты шторки.\nМожно использовать значения в пикселях - 10(число), либо в процентах - 10%(строка).\nПо-умолчанию -[0, window.innerHeight - '24px']\nмассив должен состоять минимум из 2 элементов", + "name": "magneticAreas", + "required": false, + "type": { + "name": "(string | number)[] | undefined" + } + }, + "initialActiveAreaIndex": { + "defaultValue": null, + "description": "Индекс точки из magneticAreas, к которому нужно примагнититься при первом открытии шторки.", + "name": "initialActiveAreaIndex", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "scrollLocked": { + "defaultValue": null, + "description": "Отключает скролл контентной области.", + "name": "scrollLocked", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hideScrollbar": { + "defaultValue": null, + "description": "Скрыть скроллбар внутри шторки", + "name": "hideScrollbar", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "headerOffset": { + "defaultValue": { + "value": 24 + }, + "description": "Верхний отступ шторки, если она открыта на максимальную высоту", + "name": "headerOffset", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "keepMounted": { + "defaultValue": null, + "description": "Содержимое bottom-sheet всегда в DOM", + "name": "keepMounted", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableAutoFocus": { + "defaultValue": null, + "description": "Отключает автоматический перевод фокуса на bottom-sheet при открытии", + "name": "disableAutoFocus", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableRestoreFocus": { + "defaultValue": null, + "description": "Отключает восстановление фокуса на предыдущем элементе после закрытия bottom-sheet", + "name": "disableRestoreFocus", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableEscapeKeyDown": { + "defaultValue": null, + "description": "Отключает вызов `onClose` при нажатии Escape", + "name": "disableEscapeKeyDown", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onClose": { + "defaultValue": null, + "description": "Обработчик закрытия", + "name": "onClose", + "required": true, + "type": { + "name": "() => void" + } + }, + "onBack": { + "defaultValue": null, + "description": "Обработчик нажатия на стрелку назад", + "name": "onBack", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "onMagnetize": { + "defaultValue": null, + "description": "Вызывается в начале анимации притягивания к одной из `magneticAreas`", + "name": "onMagnetize", + "required": false, + "type": { + "name": "((index: number) => void) | undefined" + } + }, + "onMagnetizeEnd": { + "defaultValue": null, + "description": "Вызывается после окончания анимации притягивания", + "name": "onMagnetizeEnd", + "required": false, + "type": { + "name": "((index: number) => void) | undefined" + } + }, + "onOffsetChange": { + "defaultValue": null, + "description": "Вызывается при изменении положения шторки", + "name": "onOffsetChange", + "required": false, + "type": { + "name": "((offset: number, percent: number) => void) | undefined" + } + }, + "onSwipeStart": { + "defaultValue": null, + "description": "Вызывается в начале свайпа", + "name": "onSwipeStart", + "required": false, + "type": { + "name": "((event: HandledEvents) => void) | undefined" + } + }, + "onSwipeEnd": { + "defaultValue": null, + "description": "Вызывается после окончания свайпа", + "name": "onSwipeEnd", + "required": false, + "type": { + "name": "((event: HandledEvents | null) => void) | undefined" + } + }, + "iOSLock": { + "defaultValue": { + "value": false + }, + "description": "Блокирует скролл когда модальное окно открыто. Работает только на iOS\n@deprecated Используйте `scrollLock={true}`.", + "name": "iOSLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "virtualKeyboard": { + "defaultValue": { + "value": false + }, + "description": "Учитывать высоту виртуальной клавиатуры", + "name": "virtualKeyboard", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "preventScrollOnSwipe": { + "defaultValue": { + "value": "false" + }, + "description": "Предотвращать скролл во время свайпа", + "name": "preventScrollOnSwipe", + "required": false, + "type": { + "name": "boolean | undefined" + } + } + }, + "demos": [ + { + "title": "Анатомия", + "description": "Компонент состоит из Header, Content, Footer, содержащих в себе кастомизируемые слоты.\nЧтобы во время скролла заголовок и кнопки оставались неподвижны,\nих нужно расположить в `header` и `footer`.\nТекст и изображения всегда располагаются в `content` части.", + "desktop": "const Header = () => {\nconst { setHasHeader, onClose } = React.useContext(ModalContext);\n\nReact.useEffect(() => setHasHeader(true), [setHasHeader]);\n\nconst commonStyles = {\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\nborderRadius: '8px',\nheight: '48px',\n};\n\nconst addonsStyles = {\n...commonStyles,\nwidth: '48px',\n};\n\nconst innerAddonsStyles = {\n...addonsStyles,\nbackgroundColor: 'rgba(207, 112, 255, 0.1)',\n};\n\nconst bottomAddonsStyles = {\n...commonStyles,\nwidth: '100%',\n};\n\nconst wrapperStyles = {\ndisplay: 'flex',\njustifyContent: 'center',\n};\n\nconst titleStyles = {\n...commonStyles,\nflexGrow: 1,\n};\n\nreturn (\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n);\n};\n\nrender(() => {\nconst [open, setOpen] = React.useState(false);\nconst handleOpen = () => setOpen(true);\nconst handleClose = () => setOpen(false);\n\nconst commonStyle = {\nwidth: '100%',\nborderRadius: '8px',\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\n};\n\nconst contentStyle = {\n...commonStyle,\nheight: '380px',\n};\n\nconst footerStyle = {\n...commonStyle,\nheight: '48px',\n};\n\nreturn (\n\n\nПоказать анатомию\n\n}\nactionButton={
}\nshowSwipeMarker={false}\n>\n
\n\n\n);\n});" + }, + { + "title": "Пресеты", + "description": "Ниже представлены самые популярные кейсы настройки шторки.", + "desktop": "const Text = ({ colors, onClose }) => (\n<>\n\nВ 2001 году в России начал действовать Федеральный закон №115 «О противодействии\nлегализации доходов, полученных преступным путём, и финансированию терроризма». В рамках\nзакона банки могут блокировать карты, отказывать в проведении сомнительных операций,\nограничить доступ в интернет-банк или запрашивать документы, если по операции клиента\nвозникли подозрения.{' '}\n\nНажмите сюда, чтобы закрыть шторку без крестика\n\n\n\n\nТребования 115-ФЗ и связанных с ним документов Банка России часто меняются,\nпредприниматели не всегда успевают за ними следить. Последствия нарушений\n«антиотмывочного» законодательства всегда неприятны: приходится остановить\nбизнес-процессы и доказать банку законность операций. Специалисты «Альфа-банка»\nсобрали понятные рекомендации, как сэкономить время на объяснения и предотвратить\nблокировки\n\n\n115-ФЗ Касается всех предпринимателей, фирм и физлиц, а также тех, кто пользуется\nбанковским счётом для бизнеса, крупных денежных переводов или личных расчётов.\nОграничения интернет-банка, блокировка карт добросовестных компаний могут произойти\nиз-за неправильно оформленных документов, ошибок в платёжке или попыток снизить\nналоги.\n\n
\n\nКлиенты воспринимают ограничения как атаку со стороны банка, но чаще всего сами\nдопускают ошибки или нарушения, которых можно избежать. Банки не преследуют цели\nдоставить неудобства клиентам — они обязаны соблюдать законодательство и следовать\nинструкциям и рекомендациям ЦБ, а в противном случае рискуют лишиться лицензии.\n\n
\n\nОбналичивание — сомнительные операции, когда юрлицо или предприниматель снимает со\nсчёта более 80% от оборота или переводит деньги на счета физлиц, которые затем\nснимают в наличной форме.\n\n\n\n);\n\nconst HEADER_SELECT_OPTIONS = [\n{ key: 'withoutTitle', content: 'Нет заголовка' },\n{ key: 'defaultTitle', content: 'Стандартный' },\n{ key: 'compactTitle', content: 'Компактный' },\n{ key: 'compactTitleWithSubtitle', content: 'Компактный с подписью' },\n{ key: 'compactTitleWithCenterAlign', content: 'Компактный центрированный' },\n{\nkey: 'compactTitleWithSubtitleAndCenterAlign',\ncontent: 'Компактный центрированный с подписью',\n},\n];\n\nconst FOOTER_SELECT_OPTIONS = [\n{ key: 'vertical', content: 'Вертикальный' },\n{ key: 'horizontal', content: 'Горизонтальный' },\n];\n\nconst HEADER_SETTINGS = [\n{ label: 'Крестик', name: 'hasCloser' },\n{ label: 'Стрелка назад', name: 'hasBackButton' },\n{ label: 'Фиксация шапки при скролле', name: 'sticky' },\n];\n\nconst FOOTER_SETTINGS = [\n{ label: 'Primary Button', name: 'hasPrimaryButton' },\n{ label: 'Secondary Button', name: 'hasSecondaryButton' },\n{ label: 'Фиксация футера при скролле', name: 'sticky' },\n];\n\nconst MECHANICS_SETTINGS = [\n{ label: 'Высота подстраивается под размер контента', name: 'adaptive' },\n{ label: 'Разрешить закрывать свайпом', name: 'swipeable' },\n];\n\nrender(() => {\nconst [open, setOpen] = React.useState(false);\nconst [headerViewSelected, setHeaderView] = React.useState(HEADER_SELECT_OPTIONS[0].key);\nconst [footerViewSelected, setFooterView] = React.useState(FOOTER_SELECT_OPTIONS[0].key);\nconst [headerSettings, setHeaderSettings] = React.useState(() => ({\n...HEADER_SETTINGS.reduce((res, item) => ({ ...res, [item.name]: false }), {}),\ntitleInContent: false,\n}));\nconst [footerSettings, setFooterSettings] = React.useState(() =>\nFOOTER_SETTINGS.reduce((res, item) => ({ ...res, [item.name]: false }), {}),\n);\nconst [mechanics, setMechanics] = React.useState(() =>\nMECHANICS_SETTINGS.reduce((res, item) => ({ ...res, [item.name]: false }), {}),\n);\n\nconst [themeSettings, setThemeSettings] = React.useState(() => ({\ninverted: false,\n}));\n\nconst colors = themeSettings.inverted ? 'inverted' : 'default';\n\nconst [backgroundColorSelected, setBackgroundColor] = React.useState('primary');\n\nconst showHeader =\nheaderViewSelected !== HEADER_SELECT_OPTIONS[0].key ||\nheaderSettings.hasCloser ||\nheaderSettings.hasBackButton;\n\nconst showFooter = footerSettings.hasPrimaryButton || footerSettings.hasSecondaryButton;\n\nconst getKey = () =>\n`${JSON.stringify({\n...headerSettings,\n...mechanics,\n...footerSettings,\n...themeSettings,\nbackgroundColor: backgroundColorSelected,\n})}-${headerViewSelected}-${footerViewSelected}`;\n\nconst handleOpen = () => setOpen(true);\n\nconst handleClose = () => setOpen(false);\n\nconst handleHeaderSettingsChange = (_, { name, checked }) => {\nsetHeaderSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nconst handleFooterSettingsChange = (_, { name, checked }) => {\nsetFooterSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nconst handleMechanicsChange = (_, { name, checked }) => {\nsetMechanics((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nconst handleThemeChange = (_, { name, checked }) => {\nsetThemeSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nreturn (\n\n\nПоказать шторку\n\n\n\n\n

Настройки шапки

\n\n setHeaderView(selected.key)}\nOption={BaseOption}\n/>\n\n\n\n\n{HEADER_SETTINGS.map((item) => (\n\n))}\n\n\n\n\n\n\n\n\n\n\n

Настройки футера

\n\n setFooterView(selected.key)}\nOption={BaseOption}\n/>\n\n\n\n\n{FOOTER_SETTINGS.map((item) => (\n\n))}\n\n\n\n\n\n{MECHANICS_SETTINGS.map((item) => (\n\n))}\n\n\n\n\n\n\n\n\n\n\n setBackgroundColor(value)}\n>\n\n\n\n\n\n{footerSettings.hasSecondaryButton && (\n\nSecondary\n\n)}\n\n{footerSettings.hasPrimaryButton &&\nfooterSettings.hasSecondaryButton ? (\n\n) : null}\n\n{footerSettings.hasPrimaryButton && (\n\nPrimary\n\n)}\n
\n) : undefined\n}\n>\n{headerSettings.titleInContent ? (\n<>\n\n{`Почему банк проверяет мои операции?`}\n\n\n\n) : undefined}\n\n\n\n\n);\n});" + }, + { + "title": "Последовательность шагов", + "description": "Компонент можно настроить для реализации многошаговых сценариев. Высота всех шторок в рамках сценария должны быть одинаковой.", + "desktop": "const DATA = {\n1: {\ntitle: 'Первый уровень',\nbtnText: 'Дальше',\nbg: 'rgba(55, 120, 251, 0.1)',\ncolor: '#3778FB',\n},\n2: {\ntitle: 'Второй уровень',\nbtnText: 'Дальше',\nbg: 'rgba(207, 112, 255, 0.1)',\ncolor: '#CF70FF',\n},\n3: {\ntitle: 'Третий уровень',\nbtnText: 'Готово',\nbg: 'rgba(112, 255, 126, 0.1)',\ncolor: '#058102',\n},\n};\n\nrender(() => {\nconst [step, setStep] = React.useState(1);\nconst [open, setOpen] = React.useState(false);\n\nconst handleOpen = () => {\nsetOpen(true);\nsetStep(1);\n};\nconst handleClose = () => setOpen(false);\n\nconst item = DATA[step];\n\nconst commonStyles = {\ndisplay: 'flex',\nalignItems: 'center',\njustifyContent: 'center',\ntransition: 'background 0.2s ease-in, border 0.2s ease-in',\nborderRadius: '8px',\nbackground: item.bg,\nborder: `1px dashed ${item.color}`,\ncolor: item.color,\nwidth: '100%',\nboxSizing: 'border-box',\n};\n\nreturn (\n\n\nПоказать шторку\n\n\n setStep(step - 1)}\nshowSwipeMarker={false}\nactionButton={\n setStep(step + 1) : handleClose\n}\n>\n{item.btnText}\n\n}\n>\n
\n{step}\n
\n\n\n);\n});" + }, + { + "title": "Управление высотой", + "description": "В шторку можно передать список магнитных точек.\nПервый элемент списка обозначает минимальную высоту шторки, последний, соответственно, максимальную.\nЕсли шторка не достигла своей максимальной высоты, рекомендуется блокировать скролл внутри неё, чтобы получить предсказуемое поведение.", + "desktop": "const VARIANTS = {\nMIN_MAX: 'min_max',\nEXTRA_AREA: 'extra_area',\nEXT_TRIGGER: 'ext_trigger',\n};\n\nconst SETTINGS = [\n{\nlabel: 'Минимальная и максимальная высота',\ndesc: 'Шторка откроется на 200рх, её можно будет растянуть на кастомную максимальную высоту, ограниченную 100рх до верха экрана. Свайп вниз от минимальной высоты закроет шторку.',\nvalue: VARIANTS.MIN_MAX,\n},\n{\nlabel: 'Промежуточная магнитная область',\ndesc: 'У шторки будет минимальная и максимальная высота, а между ними промежуточная магнитная область.',\nvalue: VARIANTS.EXTRA_AREA,\n},\n{\nlabel: 'Внешний триггер',\ndesc: 'Изначально шторка будет открыта на свою минимальную высоту, но по тапу на кнопку шторку можно будет открыть полностью.',\nvalue: VARIANTS.EXT_TRIGGER,\n},\n];\n\nconst VARIANT_PROPS_MAP = {\n[VARIANTS.MIN_MAX]: { magneticAreas: [0, 200, -100], initialActiveAreaIndex: 1 },\n[VARIANTS.EXTRA_AREA]: { magneticAreas: [0, 100, '50%', -100] },\n[VARIANTS.EXT_TRIGGER]: {\nmagneticAreas: [0, 200, -100],\nhideOverlay: true,\ninitialActiveAreaIndex: 1,\n},\n};\n\nconst ITEM_STYLES = {\ndisplay: 'flex',\nalignItems: 'center',\njustifyContent: 'center',\ntransition: 'background 0.2s ease-in, border 0.2s ease-in',\nborderRadius: '8px',\nbackground: 'rgba(55, 120, 251, 0.1)',\nborder: `1px dashed #3778FB`,\ncolor: '#3778FB',\nwidth: '100%',\nboxSizing: 'border-box',\nheight: 170,\n};\n\nconst WRAPPER_STYLES = {\npadding: 20,\nmargin: -20,\nheight: 600,\ntransition: 'background-color 0.3s ease',\n};\n\nrender(() => {\nconst [checked, setChecked] = React.useState(VARIANTS.MIN_MAX);\nconst [open, setOpen] = React.useState(false);\nconst [activeAreaIdx, setActiveAreaIdx] = React.useState(0);\nconst bottomSheetRef = React.useRef(null);\n\nconst variantProps = VARIANT_PROPS_MAP[checked];\nconst isExternalTrigger = checked === VARIANTS.EXT_TRIGGER && open;\nconst scrollLocked = activeAreaIdx !== variantProps.magneticAreas.length - 1;\nconst openWithExternalTrigger = isExternalTrigger && open;\nconst isNotLastAreaWithExtTrigger = openWithExternalTrigger && scrollLocked;\n\nconst handleOpen = () => {\nsetOpen(true);\n};\n\nconst handleClose = () => setOpen(false);\n\nconst handleAreaChange = (idx) => setActiveAreaIdx(idx);\n\nconst magnetizeToLastArea = () =>\nbottomSheetRef.current.scrollToArea(variantProps.magneticAreas.length - 1);\n\nreturn (\n\n\n{isExternalTrigger ? 'Открыть полностью' : 'Показать шторку'}\n\n\n\n\n setChecked(payload.value)}\n>\n{SETTINGS.map((item) => (\n\n))}\n\n\n\n
\n{[1, 2, 3, 4, 5].map((item) => (\n
\n{item}\n
\n))}\n
\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/button.json b/packages/mcp/src/data/v50.16.0/button.json new file mode 100644 index 0000000000..5f8f22d942 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/button.json @@ -0,0 +1,264 @@ +{ + "packageName": "button", + "displayName": "Button", + "description": "Используется как триггер для выполнения определённого действия. Лейбл кнопки должен однозначно сообщать пользователю, что произойдёт после нажатия на неё.", + "props": { + "view": { + "defaultValue": { + "value": "secondary" + }, + "description": "Тип кнопки", + "name": "view", + "required": false, + "type": { + "name": "\"text\" | \"primary\" | \"secondary\" | \"accent\" | \"outlined\" | \"transparent\" | undefined" + } + }, + "shape": { + "defaultValue": { + "value": "rectangular" + }, + "description": "Форма кнопки", + "name": "shape", + "required": false, + "type": { + "name": "\"rounded\" | \"rectangular\" | undefined" + } + }, + "textResizing": { + "defaultValue": { + "value": "hug" + }, + "description": "Ширина текстового контента", + "name": "textResizing", + "required": false, + "type": { + "name": "\"fill\" | \"hug\" | undefined" + } + }, + "hint": { + "defaultValue": null, + "description": "Подпись под лейблом (видна только в размерах >= m)", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "size": { + "defaultValue": { + "value": "56" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | 32 | undefined" + } + }, + "block": { + "defaultValue": { + "value": "false" + }, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "spinnerClassName": { + "defaultValue": null, + "description": "Дополнительный класс для спиннера", + "name": "spinnerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "href": { + "defaultValue": null, + "description": "Выводит ссылку в виде кнопки", + "name": "href", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "Component": { + "defaultValue": null, + "description": "Позволяет использовать кастомный компонент для кнопки (например Link из роутера)", + "name": "Component", + "required": false, + "type": { + "name": "ElementType | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля спиннера используется модификатор -loader", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "loading": { + "defaultValue": { + "value": "false" + }, + "description": "Показать лоадер", + "name": "loading", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "nowrap": { + "defaultValue": { + "value": "false" + }, + "description": "Не переносить текст кнопки на новую строку", + "name": "nowrap", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "colors": { + "defaultValue": null, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "allowBackdropBlur": { + "defaultValue": null, + "description": "Включает размытие фона для некоторых вариантов кнопки\n@description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.", + "name": "allowBackdropBlur", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние элементы.", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Виды кнопок", + "description": "", + "desktop": "render(() => {\nconst [disabled, setDisabled] = React.useState(false);\n\nreturn (\n<>\n\n\nAccent\n\n\nPrimary\n\n\nSecondary\n\n\nOutlined\n\n\nTransparent\n\n\nText\n\n\n\n\n\n setDisabled((prevState) => !prevState)}\nlabel='Недоступна'\n/>\n\n);\n});", + "mobile": "render(() => {\nconst [disabled, setDisabled] = React.useState(false);\n\nreturn (\n<>\n\nAccent\n\n\n\nPrimary\n\n\n\nSecondary\n\n\n\nOutlined\n\n\n\nTransparent\n\n\n\nText\n\n\n setDisabled((prevState) => !prevState)}\nlabel='Недоступна'\n/>\n\n);\n});" + }, + { + "title": "Размеры", + "description": "Кнопка доступна в размерах 72, 64, 56, 48, 40, 32.", + "desktop": "const BIG_SIZES = [72, 64, 56];\nconst SMALL_SIZES = [48, 40, 32];\n\nrender(\n<>\n\n{BIG_SIZES.map((size) => (\n\n{`${size}px`}\n\n))}\n\n\n\n{SMALL_SIZES.map((size) => (\n\n{`${size}px`}\n\n))}\n\n,\n);", + "mobile": "const SIZES = [72, 64, 56, 48, 40, 32];\n\nrender(\n\n{SIZES.map((size, idx) => (\n\n\n{`${size}px`}\n\n{SIZES.length - 1 !== idx && }\n\n))}\n,\n);" + }, + { + "title": "Форма", + "description": "Для кнопки доступно два варианта скругления углов.", + "desktop": "render(() => {\nconst [shape, setShape] = React.useState('rectangular');\n\nreturn (\n<>\n\n\n\n\n setShape(value)}\nbreakpoint={BREAKPOINT}\n>\n\n\n\n\n);\n});" + }, + { + "title": "Ширина", + "description": "Кнопка адаптируется под длину контента. Для каждого вертикального размера кнопки задан минимальный горизонтальный размер.\nС помощью свойства `block` можно заставить кнопку занимать всю ширину контейнера.\nЧерез доступ по classname можно задать кнопке ширину в рх.", + "desktop": "
\n\n\n\n\n\n\n\n\n
" + }, + { + "title": "Анатомия", + "description": "С помощью слотов `leftAddons` и `rightAddons` можно кастомизировать кнопку. Например, добавить иконку.\nПереданный контент будет отрисован слева или справа от текста кнопки. Если текста нет — будет отрисована квадратная кнопка.\nВ 56, 64 и 72 размерах доступна подпись под лейблом.", + "desktop": "render(() => {\nconst [label, setLabel] = React.useState(true);\nconst [hint, setHint] = React.useState();\nconst [leftAddons, setLeftAddons] = React.useState(false);\nconst [rightAddons, setRightAddons] = React.useState(false);\n\nconst handleLabelChange = () => setLabel(!label);\nconst handleHintChange = () => setHint((p) => (p ? undefined : 'Hint'));\nconst handleLeftAddonsChange = () => setLeftAddons(!leftAddons);\nconst handleRightAddonsChange = () => setRightAddons(!rightAddons);\n\nreturn (\n
\n}\nrightAddons={rightAddons && }\nhint={hint}\nview='primary'\nblock={isMobile()}\n>\n{label && 'Label'}\n\n\n\n\n\n\n\n\n\n\n\n
\n);\n});" + }, + { + "title": "Поведение лейбла", + "description": "С помощью свойства `textResizing` можно сжать или растянуть текстовый контент внутри кнопки.", + "desktop": "render(() => {\nconst [textResizing, setTextResizing] = React.useState('hug');\n\nreturn (\n
\n}\nleftAddons={}\nhint='Hint'\ntextResizing={textResizing}\n>\nLabel\n\n\n\n\n setTextResizing(value)}\nbreakpoint={BREAKPOINT}\n>\n\n\n\n
\n);\n});" + }, + { + "title": "Перенос текста внутри кнопки", + "description": "С помощью свойства `nowrap` можно запретить перенос текста на новую строку.", + "desktop": "render(() => {\nconst [checked, setChecked] = React.useState(true);\n\nconst handleChange = () => setChecked(!checked);\n\nreturn (\n\n
\n\nПример длинного текста\n\n
\n\nЗапретить перенос строки}\nchecked={checked}\nonChange={handleChange}\n/>\n\n\n);\n});", + "mobile": "render(() => {\nconst [checked, setChecked] = React.useState(true);\n\nconst handleChange = () => setChecked(!checked);\n\nreturn (\n\n
\n\nПример длинного текста\n\n
\n\nЗапретить перенос строки}\nchecked={checked}\nonChange={handleChange}\n/>\n\n\n);\n});" + }, + { + "title": "Размытие фона", + "description": "Для кнопок можно включить размытие фона, если она полупрозрачная, располагается поверх динамического контента или изображения.", + "desktop": "render(() => {\nconst [checked, setChecked] = React.useState(true);\nconst handleChange = () => setChecked(!checked);\n\nconst wrapper = {\nposition: 'relative',\nborderRadius: '16px',\nwidth: '330px',\nheight: '100px',\n};\n\nconst image = {\nwidth: '100%',\nheight: '100%',\nborderRadius: 'inherit',\nobjectFit: 'cover',\n};\n\nconst wrapperButton = {\nposition: 'absolute',\ndisplay: 'flex',\ninset: '0px',\npadding: '20px',\njustifyContent: 'space-between',\n};\n\nreturn (\n<>\n
\n\n
\n\nDisabled\n\n\n
\n
\n\n\n\n\n\n);\n});" + }, + { + "title": "Обработка событий", + "description": "С помощью свойства `loading` можно отобразить состояние загрузки.\nМинимальное время отображения лоадера — 500мс, чтобы при быстрых ответах от сервера кнопка не «моргала».", + "desktop": "render(() => {\nconst [loading, setLoading] = React.useState(false);\nconst [loadTimeout, setLoadTimeout] = React.useState('30');\nconst timeoutId = React.useRef();\n\nconst handleClick = () => {\nsetLoading(true);\n\nclearTimeout(timeoutId.current);\n\ntimeoutId.current = setTimeout(() => {\nsetLoading(false);\n}, Number(loadTimeout));\n};\n\nconst handleTimeoutChange = (_, { value }) => {\nclearTimeout(timeoutId.current);\nsetLoading(false);\nsetLoadTimeout(value);\n};\n\nreturn (\n<>\n\nОтправить запрос\n\n\n\n\n\n\n\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/calendar-range.json b/packages/mcp/src/data/v50.16.0/calendar-range.json new file mode 100644 index 0000000000..5a85144c0e --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/calendar-range.json @@ -0,0 +1,187 @@ +{ + "packageName": "calendar-range", + "displayName": "CalendarRange", + "description": "Используется для ввода диапазона дат.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "valueFrom": { + "defaultValue": null, + "description": "Значение инпута (используется и для календаря)", + "name": "valueFrom", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "valueTo": { + "defaultValue": null, + "description": "Значение инпута (используется и для календаря)", + "name": "valueTo", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "defaultMonth": { + "defaultValue": null, + "description": "Месяц в календаре по умолчанию", + "name": "defaultMonth", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "minDate": { + "defaultValue": null, + "description": "Минимальная дата, доступная для выбора (timestamp)", + "name": "minDate", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "maxDate": { + "defaultValue": null, + "description": "Максимальная дата, доступная для выбора (timestamp)", + "name": "maxDate", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "onDateFromChange": { + "defaultValue": null, + "description": "Обработчик изменения даты от", + "name": "onDateFromChange", + "required": false, + "type": { + "name": "((payload: { date: number | null; value: string; }) => void) | undefined" + } + }, + "onDateToChange": { + "defaultValue": null, + "description": "Обработчик изменения даты до", + "name": "onDateToChange", + "required": false, + "type": { + "name": "((payload: { date: number | null; value: string; }) => void) | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик изменения", + "name": "onChange", + "required": false, + "type": { + "name": "((payload: { dateFrom: number | null; valueFrom: string; dateTo: number | null; valueTo: string; }) => void) | undefined" + } + }, + "onError": { + "defaultValue": null, + "description": "Коллбэк, срабатывающий при возникновении ошибок валидации дат внутри компонента.", + "name": "onError", + "required": false, + "type": { + "name": "((hasError: boolean) => void) | undefined" + } + }, + "events": { + "defaultValue": null, + "description": "Список событий", + "name": "events", + "required": false, + "type": { + "name": "(number | Date)[] | undefined" + } + }, + "offDays": { + "defaultValue": null, + "description": "Список выходных", + "name": "offDays", + "required": false, + "type": { + "name": "(number | Date)[] | undefined" + } + }, + "inputFromProps": { + "defaultValue": null, + "description": "Пропсы для инпута даты от", + "name": "inputFromProps", + "required": false, + "type": { + "name": "CalendarInputResponsiveProps | undefined" + } + }, + "inputToProps": { + "defaultValue": null, + "description": "Пропсы для инпута даты до", + "name": "inputToProps", + "required": false, + "type": { + "name": "CalendarInputResponsiveProps | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "calendarPosition": { + "defaultValue": { + "value": "static" + }, + "description": "Определяет, как рендерить календарь — в поповере или снизу инпута", + "name": "calendarPosition", + "required": false, + "type": { + "name": "\"static\" | \"popover\" | undefined" + } + }, + "defaultMonthPosition": { + "defaultValue": null, + "description": "calendarPosition = static\nОтображать начальный месяц слева или справа (влияет только на начальный рендер)", + "name": "defaultMonthPosition", + "required": false, + "type": { + "name": "\"left\" | \"right\" | undefined" + } + }, + "returnInvalidDates": { + "defaultValue": null, + "description": "Возвращать невалидную дату для кастомной валидации", + "name": "returnInvalidDates", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "calendarContainerClassName": { + "defaultValue": null, + "description": "Дополнительный класс для контейнера календаря", + "name": "calendarContainerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "// import { startOfDay, subMonths, addMonths, startOfMonth, startOfDay } from 'date-fns';\n// import { parseDateString } from '@alfalab/core-components/calendar-input';\n\nrender(() => {\nconst [calendarPosition, setCalendarPosition] = React.useState('static');\n\nconst defaultDate = parseDateString('10.03.2022');\nconst [valueFrom, setValueFrom] = React.useState({ value: '', date: null });\nconst [valueTo, setValueTo] = React.useState({ value: '', date: null });\n\nconst minDate = subMonths(startOfDay(defaultDate), 3).getTime();\nconst maxDate = addMonths(startOfDay(defaultDate), 3).getTime();\n\nreturn (\n\n {\nsetValueFrom({ value: valueFrom, date: dateFrom });\nsetValueTo({ value: valueTo, date: dateTo });\n}}\n/>\n<>\n\nValues: {valueFrom.value} — {valueTo.value}\n\n\n\nDates: {valueFrom.date && formatDate(valueFrom.date)} — {valueTo.date && formatDate(valueTo.date)}\n\n\n setCalendarPosition(value)}\nvalue={calendarPosition}\n>\n\n\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/calendar-with-skeleton.json b/packages/mcp/src/data/v50.16.0/calendar-with-skeleton.json new file mode 100644 index 0000000000..7e346208df --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/calendar-with-skeleton.json @@ -0,0 +1,323 @@ +{ + "packageName": "calendar-with-skeleton", + "displayName": "CalendarWithSkeleton", + "description": "Используется во время загрузки календаря.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "headerClassName": { + "defaultValue": null, + "description": "Дополнительный класс шапки десктопного календаря", + "name": "headerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Дополнительный класс контента десктопного календаря", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "defaultView": { + "defaultValue": null, + "description": "Вид по умолчанию (выбор дней, месяцев, лет)", + "name": "defaultView", + "required": false, + "type": { + "name": "View | undefined" + } + }, + "selectorView": { + "defaultValue": null, + "description": "Вид шапки — месяц и год или только месяц", + "name": "selectorView", + "required": false, + "type": { + "name": "SelectorView | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Выбранная дата (timestamp)", + "name": "value", + "required": false, + "type": { + "name": "number | { dateFrom?: number | undefined; dateTo?: number | undefined; } | undefined" + } + }, + "mode": { + "defaultValue": { + "value": "single" + }, + "description": "Режим выбора дат", + "name": "mode", + "required": false, + "type": { + "name": "\"single\" | \"range\" | undefined" + } + }, + "rangeBehavior": { + "defaultValue": { + "value": "clarification" + }, + "description": "Тип выбора границ в календаре", + "name": "rangeBehavior", + "required": false, + "type": { + "name": "\"reset\" | \"clarification\" | undefined" + } + }, + "month": { + "defaultValue": null, + "description": "Открытый месяц (timestamp)", + "name": "month", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "defaultMonth": { + "defaultValue": null, + "description": "Месяц, открытый по умолчанию (timestamp)", + "name": "defaultMonth", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "minDate": { + "defaultValue": null, + "description": "Минимальная дата, доступная для выбора (timestamp)", + "name": "minDate", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "maxDate": { + "defaultValue": null, + "description": "Максимальная дата, доступная для выбора (timestamp)", + "name": "maxDate", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "selectedFrom": { + "defaultValue": null, + "description": "Начало выделенного периода (timestamp)\n@deprecated используйте value вместе с mode='range'", + "name": "selectedFrom", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "selectedTo": { + "defaultValue": null, + "description": "Конец выделенного периода (timestamp)\n@deprecated используйте value вместе с mode='range'", + "name": "selectedTo", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "rangeComplete": { + "defaultValue": null, + "description": "Индикатор, что выбран полный период", + "name": "rangeComplete", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "events": { + "defaultValue": null, + "description": "Список событий", + "name": "events", + "required": false, + "type": { + "name": "(number | Date)[] | undefined" + } + }, + "offDays": { + "defaultValue": null, + "description": "Список отключенных для выбора дней.", + "name": "offDays", + "required": false, + "type": { + "name": "(number | Date)[] | undefined" + } + }, + "holidays": { + "defaultValue": null, + "description": "Список выходных", + "name": "holidays", + "required": false, + "type": { + "name": "(number | Date)[] | undefined" + } + }, + "onMonthChange": { + "defaultValue": null, + "description": "Обработчик изменения месяца (или года)", + "name": "onMonthChange", + "required": false, + "type": { + "name": "((month: number) => void) | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик выбора даты", + "name": "onChange", + "required": false, + "type": { + "name": "((date?: number | undefined, dateTo?: number | undefined) => void) | undefined" + } + }, + "onMonthClick": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку месяца", + "name": "onMonthClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onYearClick": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку года", + "name": "onYearClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onPeriodClick": { + "defaultValue": null, + "description": "Обработчик нажатия на период", + "name": "onPeriodClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "hasHeader": { + "defaultValue": null, + "description": "Нужно ли рендерить шапку календаря", + "name": "hasHeader", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "responsive": { + "defaultValue": null, + "description": "Должен ли календарь подстраиваться под ширину родителя.", + "name": "responsive", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "dayAddons": { + "defaultValue": null, + "description": "Дополнительный контент под числом", + "name": "dayAddons", + "required": false, + "type": { + "name": "DayAddons[] | undefined" + } + }, + "shape": { + "defaultValue": null, + "description": "Форма ячейки дня", + "name": "shape", + "required": false, + "type": { + "name": "\"rounded\" | \"rectangular\" | undefined" + } + }, + "showCurrentYearSelector": { + "defaultValue": { + "value": "false" + }, + "description": "Отображать ли текущий год, если selectorView 'month-only'", + "name": "showCurrentYearSelector", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hideDisabledArrows": { + "defaultValue": { + "value": "true" + }, + "description": "Скрывает заблокированные кнопки в периоде, если selectorView 'month-only'", + "name": "hideDisabledArrows", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "mobile": { + "defaultValue": null, + "description": "CalendarDesktop используется в мобильной и десктопной версии\nПропс позволяет определить платформу", + "name": "mobile", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "animate": { + "defaultValue": { + "value": true + }, + "description": "Флаг включения анимации скелета", + "name": "animate", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "calendarVisible": { + "defaultValue": { + "value": true + }, + "description": "Флаг управлением видимостью календаря", + "name": "calendarVisible", + "required": false, + "type": { + "name": "boolean | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "render(() => {\nconst [visible, setVisible] = React.useState(true);\n\nconst calendarStyles = {\nborder: '1px solid rgba(233, 233, 235, 1)',\nborderRadius: 'var(--calendar-popover-border-radius, var(--border-radius-16))',\nboxShadow: `0px 20px 24px rgba(0, 0, 0, 0.08),\n0px 12px 16px rgba(0, 0, 0, 0.04),\n0px 4px 8px rgba(0, 0, 0, 0.04),\n0px 0px 1px rgba(0, 0, 0, 0.04)`,\n};\n\nreturn (\n
\n
\n\n
\n\n setVisible(!visible)}\n/>\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/calendar.json b/packages/mcp/src/data/v50.16.0/calendar.json new file mode 100644 index 0000000000..4db10aee22 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/calendar.json @@ -0,0 +1,510 @@ +{ + "packageName": "calendar", + "displayName": "CalendarResponsive", + "description": "", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "headerClassName": { + "defaultValue": null, + "description": "Дополнительный класс шапки десктопного календаря", + "name": "headerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Дополнительный класс контента десктопного календаря", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "defaultView": { + "defaultValue": null, + "description": "Вид по умолчанию (выбор дней, месяцев, лет)", + "name": "defaultView", + "required": false, + "type": { + "name": "View | undefined" + } + }, + "selectorView": { + "defaultValue": null, + "description": "Вид шапки — месяц и год или только месяц", + "name": "selectorView", + "required": false, + "type": { + "name": "SelectorView | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Выбранная дата (timestamp)", + "name": "value", + "required": false, + "type": { + "name": "number | { dateFrom?: number | undefined; dateTo?: number | undefined; } | undefined" + } + }, + "mode": { + "defaultValue": { + "value": "single" + }, + "description": "Режим выбора дат", + "name": "mode", + "required": false, + "type": { + "name": "\"single\" | \"range\" | undefined" + } + }, + "rangeBehavior": { + "defaultValue": { + "value": "clarification" + }, + "description": "Тип выбора границ в календаре", + "name": "rangeBehavior", + "required": false, + "type": { + "name": "\"reset\" | \"clarification\" | undefined" + } + }, + "month": { + "defaultValue": null, + "description": "Открытый месяц (timestamp)", + "name": "month", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "defaultMonth": { + "defaultValue": null, + "description": "Месяц, открытый по умолчанию (timestamp)", + "name": "defaultMonth", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "minDate": { + "defaultValue": null, + "description": "Минимальная дата, доступная для выбора (timestamp)", + "name": "minDate", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "maxDate": { + "defaultValue": null, + "description": "Максимальная дата, доступная для выбора (timestamp)", + "name": "maxDate", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "selectedFrom": { + "defaultValue": null, + "description": "Начало выделенного периода (timestamp)\n@deprecated используйте value вместе с mode='range'", + "name": "selectedFrom", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "selectedTo": { + "defaultValue": null, + "description": "Конец выделенного периода (timestamp)\n@deprecated используйте value вместе с mode='range'", + "name": "selectedTo", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "rangeComplete": { + "defaultValue": null, + "description": "Индикатор, что выбран полный период", + "name": "rangeComplete", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "events": { + "defaultValue": null, + "description": "Список событий", + "name": "events", + "required": false, + "type": { + "name": "(number | Date)[] | undefined" + } + }, + "offDays": { + "defaultValue": null, + "description": "Список отключенных для выбора дней.", + "name": "offDays", + "required": false, + "type": { + "name": "(number | Date)[] | undefined" + } + }, + "holidays": { + "defaultValue": null, + "description": "Список выходных", + "name": "holidays", + "required": false, + "type": { + "name": "(number | Date)[] | undefined" + } + }, + "onMonthChange": { + "defaultValue": null, + "description": "Обработчик изменения месяца (или года)", + "name": "onMonthChange", + "required": false, + "type": { + "name": "((month: number) => void) | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик выбора даты", + "name": "onChange", + "required": false, + "type": { + "name": "((date?: number | undefined, dateTo?: number | undefined) => void) | undefined" + } + }, + "onMonthClick": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку месяца", + "name": "onMonthClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onYearClick": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку года", + "name": "onYearClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onPeriodClick": { + "defaultValue": null, + "description": "Обработчик нажатия на период", + "name": "onPeriodClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "hasHeader": { + "defaultValue": null, + "description": "Нужно ли рендерить шапку календаря\nНужно ли рендерить шапку", + "name": "hasHeader", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "responsive": { + "defaultValue": null, + "description": "Должен ли календарь подстраиваться под ширину родителя.", + "name": "responsive", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "dayAddons": { + "defaultValue": null, + "description": "Дополнительный контент под числом", + "name": "dayAddons", + "required": false, + "type": { + "name": "DayAddons[] | undefined" + } + }, + "shape": { + "defaultValue": null, + "description": "Форма ячейки дня", + "name": "shape", + "required": false, + "type": { + "name": "\"rounded\" | \"rectangular\" | undefined" + } + }, + "showCurrentYearSelector": { + "defaultValue": { + "value": "false" + }, + "description": "Отображать ли текущий год, если selectorView 'month-only'", + "name": "showCurrentYearSelector", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hideDisabledArrows": { + "defaultValue": { + "value": "true" + }, + "description": "Скрывает заблокированные кнопки в периоде, если selectorView 'month-only'", + "name": "hideDisabledArrows", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "mobile": { + "defaultValue": null, + "description": "CalendarDesktop используется в мобильной и десктопной версии\nПропс позволяет определить платформу", + "name": "mobile", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "title": { + "defaultValue": null, + "description": "Заголовок календаря", + "name": "title", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "open": { + "defaultValue": null, + "description": "Управление видимостью модалки", + "name": "open", + "required": true, + "type": { + "name": "boolean" + } + }, + "onClose": { + "defaultValue": null, + "description": "Обработчик закрытия модалки", + "name": "onClose", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "allowSelectionFromEmptyRange": { + "defaultValue": null, + "description": "Разрешить выбор из недозаполненного диапазона дат.", + "name": "allowSelectionFromEmptyRange", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onApply": { + "defaultValue": null, + "description": "Обработчик клика на кнопку выбрать", + "name": "onApply", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "clickableMonth": { + "defaultValue": null, + "description": "При клике на месяц будут выбраны все доступные дни месяца", + "name": "clickableMonth", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "cancelButtonContent": { + "defaultValue": { + "value": "Отмена" + }, + "description": "Контент кнопки \"Отмена\"", + "name": "cancelButtonContent", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "selectButtonContent": { + "defaultValue": { + "value": "Выбрать" + }, + "description": "Контент кнопки \"Выбрать\"", + "name": "selectButtonContent", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "resetButtonContent": { + "defaultValue": { + "value": "Сбросить" + }, + "description": "Контент кнопки \"Сбросить\"", + "name": "resetButtonContent", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onMonthTitleClick": { + "defaultValue": null, + "description": "Обработчик клика на название месяца в мобильном календаре", + "name": "onMonthTitleClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "yearsAmount": { + "defaultValue": null, + "description": "Количество лет для генерации в обе стороны от текущего года", + "name": "yearsAmount", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "scrollableContainer": { + "defaultValue": null, + "description": "Родительский контейнер для отслеживания скролла", + "name": "scrollableContainer", + "required": false, + "type": { + "name": "HTMLElement | undefined" + } + }, + "onBack": { + "defaultValue": null, + "description": "обработчик клика по кнопке \"назад\"", + "name": "onBack", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "hasBackButton": { + "defaultValue": null, + "description": "Наличие кнопки \"Назад\"", + "name": "hasBackButton", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Выбор даты", + "description": "В зависимости от контекста рекомендуется использовать одну из двух конфигураций шапки календаря.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState();\n\nconst [firstRadioValue, setFirstRadioValue] = React.useState('single');\n\nReact.useEffect(() => {\nsetValue();\n}, [firstRadioValue]);\n\nconst format = React.useCallback((timestamp) => {\nif (!timestamp) return '';\n\nreturn new Intl.DateTimeFormat('ru-RU', {\nyear: 'numeric',\nmonth: '2-digit',\nday: '2-digit',\n}).format(new Date(timestamp));\n}, []);\n\nconst selectedDate = React.useMemo(() => {\nreturn format(value);\n}, [value]);\n\nconst onFirstRadioChange = React.useCallback((_, payload) => {\nsetFirstRadioValue(payload.value);\n}, []);\n\nconst calendarStyles = {\nborder: '1px solid rgba(233, 233, 235, 1)',\nborderRadius: 'var(--calendar-popover-border-radius, var(--border-radius-16))',\nboxShadow: 'var(--shadow-m)',\n};\n\nreturn (\n
\n
\n\n
\n

\nВыбранная дата: {value && selectedDate}\n

\n
\n\n\n\n\n
\n
\n);\n});", + "mobile": "render(() => {\nconst [open, setOpen] = React.useState(false);\nconst [value, setValue] = React.useState();\n\nconst [firstRadioValue, setFirstRadioValue] = React.useState('single');\n\nReact.useEffect(() => {\nsetValue();\n}, [firstRadioValue]);\n\nconst format = React.useCallback((timestamp) => {\nif (!timestamp) return '';\n\nreturn new Intl.DateTimeFormat('ru-RU', {\nyear: 'numeric',\nmonth: '2-digit',\nday: '2-digit',\n}).format(new Date(timestamp));\n}, []);\n\nconst selectedDate = React.useMemo(() => {\nreturn format(value);\n}, [value]);\n\nconst onFirstRadioChange = React.useCallback((_, payload) => {\nsetFirstRadioValue(payload.value);\n}, []);\n\nreturn (\n\n\n setOpen(false)}\nopen={open}\n/>\n
\n\n\n\n\n
\n\n);\n});" + }, + { + "title": "Указание диапазона", + "description": "Для указания диапазона есть несколько режимов работы пикера.", + "desktop": "render(() => {\nconst [rangeBehavior, setRangeBehavior] = React.useState('clarification');\nconst [value, setValue] = React.useState();\n\nconst format = React.useCallback((timestamp) => {\nif (!timestamp) return '';\n\nreturn new Intl.DateTimeFormat('ru-RU', {\nyear: 'numeric',\nmonth: '2-digit',\nday: '2-digit',\n}).format(new Date(timestamp));\n}, []);\n\nReact.useEffect(() => {\nsetValue([]);\n}, [rangeBehavior]);\n\nconst selectedRange = React.useMemo(() => {\nreturn `${format(value ? value.dateFrom : undefined)} - ${format(\nvalue ? value.dateTo : undefined,\n)}`;\n}, [value]);\n\nconst calendarStyles = {\nborder: '1px solid rgba(233, 233, 235, 1)',\nborderRadius: 'var(--calendar-popover-border-radius, var(--border-radius-16))',\nboxShadow: 'var(--shadow-m)',\n};\n\nreturn (\n
\n
\n setValue({ dateFrom, dateTo })}\nselectorView='month-only'\nshowCurrentYearSelector={true}\nresponsive={true}\n/>\n
\n

Values: {selectedRange}

\n
\n setRangeBehavior(payload.value)}\nvalue={rangeBehavior}\n>\n\n\n\n
\n
\n);\n});", + "mobile": "render(() => {\nconst [open, setOpen] = React.useState(false);\n\nconst [rangeBehavior, setRangeBehavior] = React.useState('clarification');\nconst [selectionMode, setSelectionMode] = React.useState('range');\nconst [value, setValue] = React.useState();\n\nconst format = React.useCallback((timestamp) => {\nif (!timestamp) return '';\n\nreturn new Intl.DateTimeFormat('ru-RU', {\nyear: 'numeric',\nmonth: '2-digit',\nday: '2-digit',\n}).format(new Date(timestamp));\n}, []);\n\nReact.useEffect(() => {\nsetValue([]);\n}, [rangeBehavior]);\n\nconst selectedRange = React.useMemo(() => {\nreturn `${format(value ? value.dateFrom : undefined)} - ${format(\nvalue ? value.dateTo : undefined,\n)}`;\n}, [value]);\n\nconst allowSelectionFromEmptyRange = selectionMode === 'singleAndRange';\n\nreturn (\n\n\n setValue({ dateFrom, dateTo })}\nonClose={() => setOpen(false)}\nopen={open}\nselectorView='month-only'\nallowSelectionFromEmptyRange={allowSelectionFromEmptyRange}\n/>\n

Values: {selectedRange}

\n
\n setSelectionMode(payload.value)}\nvalue={selectionMode}\n>\n\n\n\n
\n
\n setRangeBehavior(payload.value)}\nvalue={rangeBehavior}\n>\n\n\n\n
\n\n);\n});" + }, + { + "title": "События и недоступные даты", + "description": "В данном примере субботы и воскресенья помечены как выходные.\nВсе понедельники отмечены как недоступные для выбора даты. 4, 10 и 14 числа отмечены как события.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState();\nconst defaultDate = new Date('May 01, 2023 00:00:00');\nconst events = [defaultDate.setDate(4), defaultDate.setDate(10), defaultDate.setDate(14)];\n\nconst offDays = [\ndefaultDate.setDate(1),\ndefaultDate.setDate(8),\ndefaultDate.setDate(15),\ndefaultDate.setDate(22),\ndefaultDate.setDate(29),\n];\n\nconst holidays = [\ndefaultDate.setDate(6),\ndefaultDate.setDate(7),\ndefaultDate.setDate(13),\ndefaultDate.setDate(14),\ndefaultDate.setDate(20),\ndefaultDate.setDate(21),\ndefaultDate.setDate(27),\ndefaultDate.setDate(28),\n];\n\nconst calendarStyles = {\nborder: '1px solid rgba(233, 233, 235, 1)',\nborderRadius: 'var(--calendar-popover-border-radius, var(--border-radius-16))',\nboxSizing: 'border-box',\nboxShadow: 'var(--shadow-m)',\n};\n\nreturn (\n
\n\n
\n);\n});", + "mobile": "render(() => {\nconst [value, setValue] = React.useState();\nconst [open, setOpen] = React.useState(false);\nconst defaultDate = new Date('May 01, 2023 00:00:00');\nconst events = [defaultDate.setDate(4), defaultDate.setDate(10), defaultDate.setDate(14)];\n\nconst offDays = [\ndefaultDate.setDate(1),\ndefaultDate.setDate(8),\ndefaultDate.setDate(15),\ndefaultDate.setDate(22),\ndefaultDate.setDate(29),\n];\n\nconst holidays = [\ndefaultDate.setDate(6),\ndefaultDate.setDate(7),\ndefaultDate.setDate(13),\ndefaultDate.setDate(14),\ndefaultDate.setDate(20),\ndefaultDate.setDate(21),\ndefaultDate.setDate(27),\ndefaultDate.setDate(28),\n];\n\nreturn (\n\n\n setOpen(false)}\nopen={open}\nselectorView='month-only'\nevents={events}\noffDays={offDays}\nholidays={holidays}\n/>\n\n);\n});" + }, + { + "title": "Форма", + "description": "Для ячейки дня доступны две формы: круглая и прямоугольная.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState();\n\nconst [firstRadioValue, setFirstRadioValue] = React.useState('rounded');\n\nReact.useEffect(() => {\nsetValue();\n}, [firstRadioValue]);\n\nconst onFirstRadioChange = React.useCallback((_, payload) => {\nsetFirstRadioValue(payload.value);\n}, []);\n\nconst calendarStyles = {\nborder: '1px solid rgba(233, 233, 235, 1)',\nborderRadius: 'var(--calendar-popover-border-radius, var(--border-radius-16))',\nboxSizing: 'border-box',\nboxShadow: 'var(--shadow-m)',\n};\n\nreturn (\n<>\n
\n\n
\n\n\n\n\n\n\n);\n});", + "mobile": "render(() => {\nconst [value, setValue] = React.useState();\nconst [open, setOpen] = React.useState(false);\n\nconst [firstRadioValue, setFirstRadioValue] = React.useState('rounded');\n\nReact.useEffect(() => {\nsetValue();\n}, [firstRadioValue]);\n\nconst onFirstRadioChange = React.useCallback((_, payload) => {\nsetFirstRadioValue(payload.value);\n}, []);\n\nreturn (\n\n\n setOpen(false)}\nopen={open}\nselectorView='month-only'\nvalue={value}\nonChange={setValue}\nshape={firstRadioValue}\n/>\n\n\n\n\n\n\n);\n});" + }, + { + "title": "Слоты", + "description": "В каждую дату можно передать дополнительный контент, расположив его под числом.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState();\n\nconst firstAddonStyles = {\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\nborderRadius: '2px',\nheight: '8px',\nwidth: '40px',\n};\n\nconst secondAddonStyles = {\n...firstAddonStyles,\nheight: '16px',\n};\n\nconst thirdAddonStyles = {\n...firstAddonStyles,\nheight: '10px',\n};\n\nconst dayAddons = [\n{ date: new Date().setDate(5), addon:
},\n{ date: new Date().setDate(6), addon:
},\n{ date: new Date().setDate(7), addon:
},\n];\n\nconst calendarStyles = {\nborder: '1px solid rgba(233, 233, 235, 1)',\nborderRadius: 'var(--calendar-popover-border-radius, var(--border-radius-16))',\nboxSizing: 'border-box',\nboxShadow: 'var(--shadow-m)',\n};\n\nreturn (\n
\n\n
\n);\n});", + "mobile": "render(() => {\nconst [value, setValue] = React.useState();\nconst [open, setOpen] = React.useState(false);\n\nconst firstAddonStyles = {\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\nborderRadius: '2px',\nheight: '8px',\nwidth: '40px',\n};\n\nconst secondAddonStyles = {\n...firstAddonStyles,\nheight: '16px',\n};\n\nconst thirdAddonStyles = {\n...firstAddonStyles,\nheight: '10px',\n};\n\nconst dayAddons = [\n{ date: new Date().setDate(5), addon:
},\n{ date: new Date().setDate(6), addon:
},\n{ date: new Date().setDate(7), addon:
},\n];\n\nreturn (\n\n\n setOpen(false)}\nvalue={value}\nonChange={setValue}\nopen={open}\nselectorView='month-only'\ndayAddons={dayAddons}\nshape='rectangular'\n/>\n\n);\n});" + }, + { + "title": "Границы", + "description": "Можно ограничить выбор дат, задав допустимый диапазон с помощью свойств `minDate` и `maxDate`.\nДопустимый диапазон в примере: 06.02.23 — 06.07.23.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState(() => new Date().setMonth(1));\nconst minDate = startOfDay(new Date());\nminDate.setDate(6);\nminDate.setMonth(1);\n\nconst maxDate = startOfDay(new Date());\nmaxDate.setDate(6);\nmaxDate.setMonth(6);\n\nconst calendarStyles = {\nborder: '1px solid rgba(233, 233, 235, 1)',\nborderRadius: 'var(--calendar-popover-border-radius, var(--border-radius-16))',\nboxSizing: 'border-box',\nboxShadow: 'var(--shadow-m)',\n};\n\nreturn (\n
\n\n
\n);\n});", + "mobile": "render(() => {\nconst [value, setValue] = React.useState(() => new Date().setMonth(1));\nconst [open, setOpen] = React.useState(false);\nconst minDate = startOfDay(new Date());\nminDate.setDate(6);\nminDate.setMonth(1);\n\nconst maxDate = startOfDay(new Date());\nmaxDate.setDate(6);\nmaxDate.setMonth(6);\n\nreturn (\n\n\n setOpen(false)}\nopen={open}\nresponsive={true}\nselectorView='month-only'\nminDate={minDate.getTime()}\nmaxDate={maxDate.getTime()}\n/>\n\n);\n});" + }, + { + "title": "Скелетная загрузка", + "description": "На время подгрузки можно использовать скелетон.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState(() => new Date().setMonth(1));\nconst [visible, setVisible] = React.useState(true);\n\nconst calendarStyles = {\nborder: '1px solid rgba(233, 233, 235, 1)',\nborderRadius: 'var(--calendar-popover-border-radius, var(--border-radius-16))',\nboxSizing: 'border-box',\nboxShadow: 'var(--shadow-m)',\n};\n\nreturn (\n<>\n
\n\n
\n
\n\n\n);\n});" + }, + { + "title": "Выбор месяцев", + "description": "Для быстрого выбора месяцев можно использовать опцию `clickableMonth`.", + "desktop": "render(() => {\nconst [open, setOpen] = React.useState(false);\nconst [value, setValue] = React.useState();\n\nconst [firstRadioValue, setFirstRadioValue] = React.useState('rounded');\n\nReact.useEffect(() => {\nsetValue();\n}, [firstRadioValue]);\n\nconst onFirstRadioChange = React.useCallback((_, payload) => {\nsetFirstRadioValue(payload.value);\n}, []);\n\nreturn (\n\n\n setValue({ dateFrom, dateTo })}\nonClose={() => setOpen(false)}\nopen={open}\n/>\n
\n\n\n\n\n
\n\n);\n});" + }, + { + "title": "PeriodSlider", + "description": "Представляет из себя шапку календаря, которую можно использовать отдельно.\nС помощью компонента можно смещать выбранный период назад и вперед.", + "desktop": "render(() => {\nconst [values, setValues] = React.useState({\nvalue: new Date(),\nvalueFrom: new Date(),\nvalueTo: new Date(),\n});\n\nconst handler = (event, newValues) => setValues(newValues);\n\nreturn (\n
\n

Дата начала: {format(values.valueFrom, DATE_FORMAT)}

\n

\nДата конца: {format(values.valueTo, DATE_FORMAT)}\n

\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/card-image.json b/packages/mcp/src/data/v50.16.0/card-image.json new file mode 100644 index 0000000000..4ab7cff789 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/card-image.json @@ -0,0 +1,121 @@ +{ + "packageName": "card-image", + "displayName": "CardImage", + "description": "Компонент изображения карты.", + "props": { + "cardId": { + "defaultValue": null, + "description": "Идентификатор карты\n(например: ER, GQ, SU)", + "name": "cardId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "layers": { + "defaultValue": { + "value": "BACKGROUND,CARD_NUMBER,CARD_HOLDER,PAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE" + }, + "description": "Какие слои показывать, через запятую без пробелов\n(полный набор: BACKGROUND,CARD_NUMBER,CARD_HOLDER,\nPAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE)", + "name": "layers", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "width": { + "defaultValue": { + "value": 280 + }, + "description": "Ширина изображения", + "name": "width", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "rounded": { + "defaultValue": { + "value": true + }, + "description": "Скругление углов", + "name": "rounded", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "baseUrl": { + "defaultValue": { + "value": "https://online.alfabank.ru/cards-images/cards/" + }, + "description": "Базовый URL сервиса с изображениями", + "name": "baseUrl", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onLoad": { + "defaultValue": null, + "description": "Колбек, вызываемый при загрузке изображения", + "name": "onLoad", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "onError": { + "defaultValue": null, + "description": "Колбек, вызываемый при ошибке загрузки изображения", + "name": "onError", + "required": false, + "type": { + "name": "ReactEventHandler | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "alt": { + "defaultValue": null, + "description": "Текстовое описание изображения", + "name": "alt", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "id": { + "defaultValue": null, + "description": "Уникальный идентификатор блока", + "name": "id", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/carousel.json b/packages/mcp/src/data/v50.16.0/carousel.json new file mode 100644 index 0000000000..2cd0b86c52 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/carousel.json @@ -0,0 +1,236 @@ +{ + "packageName": "carousel", + "displayName": "Carousel", + "description": "Используется для отображения массива элементов с возможностью скролла контейнера.", + "props": { + "navigation": { + "defaultValue": { + "value": "never" + }, + "description": "Управление каруселью через кнопки навигации", + "name": "navigation", + "required": false, + "type": { + "name": "\"hover\" | \"always\" | \"never\" | undefined" + } + }, + "navigationPosition": { + "defaultValue": { + "value": "center" + }, + "description": "Положение кнопок навигации", + "name": "navigationPosition", + "required": false, + "type": { + "name": "\"start\" | \"center\" | undefined" + } + }, + "Pagination": { + "defaultValue": { + "value": "(): undefined => {}" + }, + "description": "Компонент для рендера пагинации", + "name": "Pagination", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "paginationProps": { + "defaultValue": { + "value": "{} as T" + }, + "description": "Дополнительные пропс для компонента пагинации", + "name": "paginationProps", + "required": false, + "type": { + "name": "Omit | undefined" + } + }, + "minHeight": { + "defaultValue": null, + "description": "Минимальная высота карусели", + "name": "minHeight", + "required": false, + "type": { + "name": "string | number | undefined" + } + }, + "height": { + "defaultValue": { + "value": "auto" + }, + "description": "Высота карусели", + "name": "height", + "required": false, + "type": { + "name": "string | number | undefined" + } + }, + "activeIndex": { + "defaultValue": null, + "description": "Индекс активного элемента карусели", + "name": "activeIndex", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "defaultActiveIndex": { + "defaultValue": null, + "description": "Индекс активного элемента карусели по-умолчанию", + "name": "defaultActiveIndex", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "onActiveIndexChange": { + "defaultValue": null, + "description": "Обработчик изменения индекса активного элемента карусели", + "name": "onActiveIndexChange", + "required": false, + "type": { + "name": "((nextActiveIndex: number) => void) | undefined" + } + }, + "gap": { + "defaultValue": { + "value": "8" + }, + "description": "Отступ между элементами карусели", + "name": "gap", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "visibleItems": { + "defaultValue": { + "value": "auto" + }, + "description": "Количество видимых элементов карусели", + "name": "visibleItems", + "required": false, + "type": { + "name": "number | \"auto\" | undefined" + } + }, + "items": { + "defaultValue": { + "value": "auto" + }, + "description": "Массив элементов карусели", + "name": "items", + "required": false, + "type": { + "name": "ItemProps[] | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для карусели", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "loop": { + "defaultValue": { + "value": "false" + }, + "description": "Зациклена ли карусель", + "name": "loop", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "overflow": { + "defaultValue": { + "value": "hidden" + }, + "description": "Поведение при переполнении контента элементов карусели", + "name": "overflow", + "required": false, + "type": { + "name": "\"hidden\" | \"visible\" | undefined" + } + }, + "mouseWheel": { + "defaultValue": { + "value": "false" + }, + "description": "Управление каруселью через колесо мыши", + "name": "mouseWheel", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "touchMoveStopPropagation": { + "defaultValue": { + "value": "false" + }, + "description": "Остановка всплытия событий при свайпе", + "name": "touchMoveStopPropagation", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "captureEvent": { + "defaultValue": { + "value": "false" + }, + "description": "Захват события при свайпе", + "name": "captureEvent", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "shortSwipe": { + "defaultValue": { + "value": "true" + }, + "description": "Обработка короткого свайпа", + "name": "shortSwipe", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "longSwipeTimeMs": { + "defaultValue": { + "value": "300" + }, + "description": "Минимальная время длинного свайпа в миллисекундах", + "name": "longSwipeTimeMs", + "required": false, + "type": { + "name": "number | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "const CarouselItem = ({ bgColor, itemColor }) => {\nreturn (\n\n\n\n\n
\n);\n};\n\nconst VISIBLE_ITEMS = isMobile() ? 2.2 : 4.2;\n\nrender(() => {\nconst [height, setHeight] = React.useState('fixed');\nconst handleHeightChange = (_, payload) => {\nsetHeight(payload.value);\n};\nconst [visibleItems, setVisibleItems] = React.useState('fixed');\nconst handleVisibleItemsChange = (_, payload) => {\nsetVisibleItems(payload.value);\n};\nconst [loop, setLoop] = React.useState(false);\nconst handleLoopChange = (_, payload) => {\nsetLoop(payload.value === 'true');\n};\nconst [navigationState, setNavigation] = React.useState(isMobile() ? 'never' : 'always');\nconst handleNavigationChange = (_, payload) => {\nsetNavigation(payload.value);\n};\n\nreturn (\n
\n ({\nkey: i,\nheight: itemProps.height,\nwidth: 256,\nchildren: ,\n}))}\nvisibleItems={visibleItems === 'fixed' ? VISIBLE_ITEMS : 'auto'}\nnavigation={navigationState}\ngap={8}\nloop={loop}\nheight={height === 'fixed' ? 280 : undefined}\nmouseWheel={!isMobile()}\n/>\n\n\n\n\n\n\n\n\n\n\n\n{!isMobile() && (\n\n\n\n\n\n\n\n\n)}\n\n\n\n\n\n
\n);\n});" + }, + { + "title": "Удаление контента", + "description": "Элементами карусели могут быть карточки счетов на оплату, подписки или другие сущности, которые пользователь должен иметь возможность удалить.", + "desktop": "const CarouselItem = ({ children, bgColor, itemColor }) => {\nreturn (\n\n\n\n\n{children}\n
\n);\n};\n\nrender(() => {\nconst [slides, setSlides] = React.useState(() =>\n[\n{\nbgColor: 'var(--color-light-decorative-muted-blue)',\nitemColor: 'var(--color-light-decorative-muted-alt-blue)',\nheight: 200,\n},\n{\nbgColor: 'var(--color-light-decorative-muted-red)',\nitemColor: 'var(--color-light-decorative-muted-alt-red)',\nheight: 280,\n},\n{\nbgColor: 'var(--color-light-decorative-muted-orange)',\nitemColor: 'var(--color-light-decorative-muted-alt-orange)',\nheight: 160,\n},\n{\nbgColor: 'var(--color-light-decorative-muted-green)',\nitemColor: 'var(--color-light-decorative-muted-alt-green)',\nheight: 240,\n},\n{\nbgColor: 'var(--color-light-decorative-muted-indigo)',\nitemColor: 'var(--color-light-decorative-muted-alt-indigo)',\nheight: 200,\n},\n{\nbgColor: 'var(--color-light-decorative-muted-cyan)',\nitemColor: 'var(--color-light-decorative-muted-alt-cyan)',\nheight: 160,\n},\n{\nbgColor: 'var(--color-light-decorative-muted-pistachio)',\nitemColor: 'var(--color-light-decorative-muted-alt-pistachio)',\nheight: 240,\n},\n].map((slide, index) => ({ ...slide, key: index, order: index })),\n);\n\nconst handleRemove = (key) => {\nconst slide = slides.find((slide) => slide.key === key);\n\nsetSlides(slides.filter((slide) => slide.key !== key));\n\nsetTimeout(() => {\nsetSlides((prevSlides) => [...prevSlides, slide].sort((a, b) => a.order - b.order));\n}, 5000);\n};\nreturn (\n ({\nkey,\nheight: itemProps.height,\nwidth: 256,\nchildren: (\n\n{itemProps.order < 2 && (\n {\nhandleRemove(key);\n}}\nstyle={{\nposition: 'absolute',\ntop: '50%',\nleft: '50%',\ntranslate: '-50% -50%',\nbackground: 'var(--color-light-neutral-translucent-100)',\nborderRadius: '50%',\nwidth: 32,\nheight: 32,\ndisplay: 'flex',\njustifyContent: 'center',\nalignItems: 'center',\nzIndex: 1,\n}}\n>\n\n
\n)}\n\n),\n}))}\nvisibleItems={'auto'}\ngap={8}\nheight={200}\nmouseWheel={!isMobile()}\n/>\n);\n});" + }, + { + "title": "Дополнительные слоты", + "description": "Компонент может принимать события извне. Поэтому при необходимости, можно отключить контролы навигации в самой карусели и расположить их в верхнем аддоне, а в нижний передать [PageIndicator](?path=/docs/pageindicator--docs).", + "desktop": "const CarouselItem = ({ bgColor, itemColor }) => {\nreturn (\n\n\n\n\n
\n);\n};\n\nconst VISIBLE_ITEMS = isMobile() ? 2.2 : 4.2;\n\nrender(() => {\nconst [activeIndex, setActiveIndex] = React.useState(0);\n\nreturn (\n
\n ({\nkey: i,\nheight: itemProps.height,\nwidth: 256,\nchildren: ,\n}))}\nvisibleItems={VISIBLE_ITEMS}\ngap={8}\nnavigation='always'\nmouseWheel={!isMobile()}\nnavigationPosition='start'\nPagination={PageIndicatorBullet}\npaginationProps={{ size: 6 }}\n/>\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/cdn-icon.json b/packages/mcp/src/data/v50.16.0/cdn-icon.json new file mode 100644 index 0000000000..6ee2595db4 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/cdn-icon.json @@ -0,0 +1,79 @@ +{ + "packageName": "cdn-icon", + "displayName": "CDNIcon", + "description": "Используется для отображения иконок.", + "props": { + "name": { + "defaultValue": null, + "description": "Имя иконки", + "name": "name", + "required": true, + "type": { + "name": "string" + } + }, + "color": { + "defaultValue": null, + "description": "Цвет иконки", + "name": "color", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "baseUrl": { + "defaultValue": { + "value": "https://alfabank.servicecdn.ru/icons" + }, + "description": "Базовый адрес cdn хранилища c иконками", + "name": "baseUrl", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "fallback": { + "defaultValue": null, + "description": "Fallback на случай, если не удастся загрузить иконку", + "name": "fallback", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "onError": { + "defaultValue": null, + "description": "Callback, вызываемый при ошибке загрузки иконки", + "name": "onError", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "\n\n\n\n" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/chart.json b/packages/mcp/src/data/v50.16.0/chart.json new file mode 100644 index 0000000000..a046f1f661 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/chart.json @@ -0,0 +1,123 @@ +{ + "packageName": "chart", + "displayName": "Chart", + "description": "Используется для построения графиков.", + "props": { + "id": { + "defaultValue": null, + "description": "Индефикатор графика", + "name": "id", + "required": true, + "type": { + "name": "string" + } + }, + "responsiveContainer": { + "defaultValue": null, + "description": "Компонент контейнера, позволяющий адаптировать диаграммы к размеру родительского контейнера", + "name": "responsiveContainer", + "required": false, + "type": { + "name": "ResponsiveContainerProps | undefined" + } + }, + "composeChart": { + "defaultValue": null, + "description": "Диаграмма, состоящая из bar, linear и area диаграмм", + "name": "composeChart", + "required": true, + "type": { + "name": "ComposedChartProps" + } + }, + "cartesianGrid": { + "defaultValue": null, + "description": "Отображение линий осей графика", + "name": "cartesianGrid", + "required": false, + "type": { + "name": "CartesianGridProps | undefined" + } + }, + "xAxis": { + "defaultValue": null, + "description": "Настройки оси Х", + "name": "xAxis", + "required": true, + "type": { + "name": "XAxisProps" + } + }, + "yAxis": { + "defaultValue": null, + "description": "Настройки оси У", + "name": "yAxis", + "required": true, + "type": { + "name": "YAxisProps" + } + }, + "tooltip": { + "defaultValue": null, + "description": "Всплывающаяся подсказка", + "name": "tooltip", + "required": false, + "type": { + "name": "TooltipProps | undefined" + } + }, + "brush": { + "defaultValue": null, + "description": "Компонент маштабирования графика", + "name": "brush", + "required": false, + "type": { + "name": "BrushProps | undefined" + } + }, + "legend": { + "defaultValue": null, + "description": "Компонент подписи графиков", + "name": "legend", + "required": false, + "type": { + "name": "LegendProps | undefined" + } + }, + "series": { + "defaultValue": null, + "description": "Mассив объектов с параметрами грaфиков с обязательным полем", + "name": "series", + "required": true, + "type": { + "name": "SeriaProps[]" + } + }, + "labels": { + "defaultValue": null, + "description": "Mассив меток", + "name": "labels", + "required": true, + "type": { + "name": "(string | number)[]" + } + } + }, + "demos": [ + { + "title": "Столбчатая диаграмма", + "description": "", + "desktop": "render(() => {\nconst cartesianGrid = {\nvertical: false,\nhorizontal: true,\nstrokeDasharray: 0,\nstroke: 'var(--color-light-neutral-400)',\nfill: 'var(--color-light-base-bg-primary)',\n};\nconst legend = {\nmarginTop: 10,\n};\nconst tooltip = {\nseparator: ' ',\noffset: 20,\nfilterNull: true,\ncursor: {\nstroke: 'var(--color-light-neutral-400)',\nstrokeWidth: 1,\n},\nisAnimationActive: true,\nanimationBegin: 0,\nanimationDuration: 500,\nanimationEasing: 'ease',\narrow: true,\n};\nconst brush = {\ndataKey: 'label',\ntravellerWidth: 20,\nheight: 20,\nalwaysShowText: true,\nstroke: 'var(--color-static-status-blue)',\n};\n\nconst chartBar = (includeValue) => {\nconst labels = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь']\nif (includeValue) {\nreturn labels.map((label, idx) => ({\nlabel: label,\nvalue: Math.floor(Math.random() * 250) + 10\n}));\n} else {\nreturn labels;\n}\n};\n\nconst barChartFirst = {\nzIndex: 1,\nchart: 'bar',\nproperties: {\nname: 'расход',\ndataKey: 'uv',\nformatter: (decimal) => `${decimal * 1000}`,\nfill: 'var(--color-static-graphic-persimmon)',\n},\ndata: chartBar(true),\n};\nconst barChartSecond = {\nzIndex: 10,\nchart: 'bar',\nproperties: {\nname: 'приход',\ndataKey: 'pv',\nformatter: (decimal) => `${decimal * 1000}`,\nfill: 'var(--color-static-graphic-green-jungle)',\n},\ndata: chartBar(true),\n};\nconst lineChart = {\nzIndex: 50,\nchart: 'line',\nicon: 'circleLine',\nproperties: {\nname: 'остаток',\ndataKey: 'cnt',\nstroke: 'var(--color-static-status-blue)',\ndot: true,\ndotSettings: {\nscale: 1.5,\ninitScale: 1,\nwidth: 18,\nheight: 18,\n},\nformatter: (decimal) => `${decimal * 1000}`,\ntype: 'monotone',\nstrokeWidth: 2,\n},\ndata: chartBar(true),\n};\nconst composeChart = {\ninitMargin: {\nleft: 20,\n},\nbarSize: 10,\n};\nconst xAxis = {\ntickLine: false,\naxisLine: false,\ninterval: 'preserveStartEnd',\ntickMargin: 10,\ndataKey: 'label',\n};\nconst yAxis = {\naxisLine: false,\ntype: 'number',\ntickCount: 6,\ntickLine: false,\ntickMargin: 0,\ntickFormatter: (decimal) => `${decimal}\\xa0тыс.`,\n};\n\nreturn (\n
\n
\n\n
\n
\n);\n});" + }, + { + "title": "Гистограмма", + "description": "", + "desktop": "render(() => {\nconst composeChart = {\nbarCategoryGap: '5%',\n};\nconst xAxis = {\naxisLine: false,\ntype: 'category',\ninterval: 'preserveStartEnd',\ntickLine: false,\ntickMargin: 10,\ndataKey: 'label',\n};\nconst yAxis = {\nhide: true,\n};\nconst labelsBarChart = [\n'Long label',\n'Label1',\n'Label2',\n'Label3',\n'Label4',\n'Label5',\n'Label6',\n'Label7',\n];\nconst barChart = {\nchart: 'bar',\nradius: { top: 10, bottom: 10, } || 0,\nlabelList: {\noffset: 10,\n},\nproperties: {\nname: 'приход',\ndataKey: 'cm',\nformatter: (decimal) => `${decimal * 1000}`,\nfill: 'var(--color-static-graphic-green-jungle)',\n},\ndata: [\n{\nlabel: 'Long label',\nvalue: 5000,\n},\n{\nlabel: 'Label1',\nvalue: 650,\n},\n{\nlabel: 'Label2',\nvalue: 3522,\n},\n{\nlabel: 'Label3',\nvalue: 0,\n},\n{\nlabel: 'Label4',\nvalue: 2000,\n},\n{\nlabel: 'Label5',\nvalue: 1043,\n},\n{\nlabel: 'Label6',\nvalue: 600,\n},\n{\nlabel: 'Label7',\nvalue: 1,\n},\n],\n};\n\nreturn (\n
\n
\n\n
\n
\n);\n});" + }, + { + "title": "Линейный график", + "description": "", + "desktop": "render(() => {\nconst formatXAxis = (time) => format(time, 'dd LLL');\nconst cartesianGrid = {\nstroke: 'var(--color-light-neutral-400)',\nfill: 'var(--color-light-base-bg-primary)',\n};\nconst composeChart = {\nbarSize: 24,\n};\nconst xAxis = {\naxisLine: false,\ntype: 'category',\ninterval: 'preserveStartEnd',\nminTickGap: 20,\ntickLine: false,\ndataKey: 'label',\ntickFormatter: formatXAxis,\ntickType: 'point',\n};\nconst yAxis = {\naxisLine: false,\ntype: 'number',\ntickCount: 6,\ninterval: 'preserveStartEnd',\ntickLine: false,\ntickSize: 6,\n};\nconst legend = {\nverticalAlign: 'top',\nmarginTop: 15,\niconHeight: 20,\n};\nconst tooltip = {\nseparator: ' ',\noffset: 20,\nfilterNull: true,\ncursor: {\nstroke: 'var(--color-light-neutral-400)',\nstrokeWidth: 1,\n},\nisAnimationActive: true,\nanimationBegin: 0,\nanimationDuration: 500,\nanimationEasing: 'ease',\narrow: true,\nlabelFormatter: formatXAxis,\n};\nconst brush = {\ndataKey: 'label',\ntravellerWidth: 20,\nbrushMargin: 10,\nheight: 20,\nstroke: 'var(--color-static-status-blue)',\nalwaysShowText: true,\ntickFormatter: formatXAxis,\n};\n\nconst chartData = (num, includeValue) => {\nconst labels = Array(20).fill(null).map((_, idx) => {\nconst date = new Date('2020-12-18');\ndate.setDate(date.getDate() + idx);\nreturn date.getTime();\n});\n\nif (includeValue) {\nreturn labels.map((label, idx) => ({\nlabel: idx === 0 ? label : labels[idx - 1],\nvalue: idx === 0 ? 15 : Math.floor(Math.random() * num) + 10\n}));\n} else {\nreturn labels;\n}\n};\n\nconst lineChart = {\nchart: 'line',\nicon: 'strokeCircle',\nproperties: {\nname: 'текущий период',\ndataKey: 'b',\nstroke: 'var(--color-static-status-blue)',\ndot: true,\ndotSettings: {\nscale: 1.5,\ninitScale: 0,\nwidth: 18,\nheight: 18,\n},\ninheritStroke: true,\ntype: 'monotone',\nstrokeWidth: 2,\nstrokeDasharray: '10 10',\n},\ndata: chartData(30, true)\n};\nconst areaChart = {\nchart: 'area',\nicon: 'filledCircle',\noffset: 0.1,\ngradient: {\ngid: 'ar-grad',\npoints: [\n{\noffset: 0,\nstopColor: 'rgba(0, 112, 224, 0.2)',\nstopOpacity: 1,\n},\n{\noffset: 95,\nstopColor: 'rgba(0, 128, 255, 0)',\nstopOpacity: 1,\n},\n],\n},\nproperties: {\nname: 'предыдущий период',\ndataKey: 'a',\ntype: 'monotone',\nstroke: 'var(--color-static-status-blue)',\ndotSettings: {\nscale: 1.5,\ninitScale: 0,\nwidth: 18,\nheight: 18,\n},\ndot: true,\nstrokeWidth: 2,\n},\ndata: chartData(50, true)\n};\n\nreturn (\n
\n
\n\n
\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/checkbox-group.json b/packages/mcp/src/data/v50.16.0/checkbox-group.json new file mode 100644 index 0000000000..dfe84b3c26 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/checkbox-group.json @@ -0,0 +1,166 @@ +{ + "packageName": "checkbox-group", + "displayName": "CheckboxGroup", + "description": "Используется для выбора одного или нескольких доступных значений.", + "props": { + "children": { + "defaultValue": null, + "description": "Дочерние элементы. Ожидаются компоненты `Checkbox` или `Tag`", + "name": "children", + "required": true, + "type": { + "name": "ReactNode" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "type": { + "defaultValue": null, + "description": "Тип компонента", + "name": "type", + "required": false, + "type": { + "name": "CheckboxGroupType | undefined" + } + }, + "onFocus": { + "defaultValue": null, + "description": "Обработчик фокуса.", + "name": "onFocus", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | undefined" + } + }, + "onBlur": { + "defaultValue": null, + "description": "Обработчик блюра.", + "name": "onBlur", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик изменения значения 'checked' одного из дочерних компонентов", + "name": "onChange", + "required": false, + "type": { + "name": "((event: MouseEvent | ChangeEvent, payload: { checked: boolean; name?: string | undefined; }) => void) | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Управление возможностью изменения состояния 'checked' дочерних компонентов CheckBox", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки снизу", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Заголовок группы", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "direction": { + "defaultValue": null, + "description": "Направление", + "name": "direction", + "required": false, + "type": { + "name": "Direction | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Горизонтальная группа", + "description": "Горизонтальное расположение используется при коротких названиях пунктов и малом количестве вариантов — от двух до трёх.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState({ one: false, two: false, three: false });\nconst [error, setError] = React.useState(false);\n\nconst onChange = (_, payload) => {\nsetValue({ ...value, [payload.name]: payload.checked });\n};\n\nreturn (\n
\n\n\n\n\n\n\n\n\n\n\n\n\n
\n);\n});", + "mobile": "render(() => {\nconst [value, setValue] = React.useState({ one: false, two: false, three: false });\nconst [error, setError] = React.useState(false);\n\nconst onChange = (_, payload) => {\nsetValue({ ...value, [payload.name]: payload.checked });\n};\n\nreturn (\n
\n\n\n\n\n\n\n\n\n\n\n\n\n
\n);\n});" + }, + { + "title": "Вертикальная группа", + "description": "Вертикальное расположение используется при длинных названиях пунктов. Рекомендуемое количество вариантов от двух до пяти.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState({\none: false,\ntwo: false,\nthree: false,\nfour: false,\nfive: false,\n});\nconst [error, setError] = React.useState(false);\n\nconst onChange = (_, payload) => {\nsetValue({ ...value, [payload.name]: payload.checked });\n};\n\nreturn (\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n);\n});", + "mobile": "render(() => {\nconst [value, setValue] = React.useState({\none: false,\ntwo: false,\nthree: false,\nfour: false,\nfive: false,\n});\nconst [error, setError] = React.useState(false);\n\nconst onChange = (_, payload) => {\nsetValue({ ...value, [payload.name]: payload.checked });\n};\n\nreturn (\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n);\n});" + }, + { + "title": "Группа тегов", + "description": "Теги могут использоваться в качестве радиокнопок в составе группы.\nГруппа тегов используется при коротких названиях пунктов и малом количестве вариантов — от двух до трех.\nЕсли варианты не помещаются в одну строку они могут перенестись на следующую.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState({ one: true, two: false, three: false, four: false });\nconst [error, setError] = React.useState(false);\n\nconst onChange = (_, payload) => {\nsetValue({ ...value, [payload.name]: payload.checked });\n};\n\nreturn (\n
\n\n\nВариант 1\n\n\nВариант 2\n\n\nВариант 3\n\n\nВариант 4\n\n\n\n\n\n\n\n\n\n
\n);\n});", + "mobile": "render(() => {\nconst [value, setValue] = React.useState({ one: true, two: false, three: false, four: false });\nconst [error, setError] = React.useState(false);\n\nconst onChange = (_, payload) => {\nsetValue({ ...value, [payload.name]: payload.checked });\n};\n\nreturn (\n
\n\n\nВариант 1\n\n\nВариант 2\n\n\nВариант 3\n\n\nВариант 4\n\n\n\n\n\n\n\n\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/checkbox.json b/packages/mcp/src/data/v50.16.0/checkbox.json new file mode 100644 index 0000000000..850fa47bb5 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/checkbox.json @@ -0,0 +1,220 @@ +{ + "packageName": "checkbox", + "displayName": "Checkbox", + "description": "", + "props": { + "onChange": { + "defaultValue": null, + "description": "Обработчик переключения чекбокса", + "name": "onChange", + "required": false, + "type": { + "name": "((event: ChangeEvent, payload: { checked: boolean; name?: string | undefined; }) => void) | undefined" + } + }, + "label": { + "defaultValue": null, + "description": "Текст подписи к чекбоксу", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки снизу", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "size": { + "defaultValue": { + "value": 20 + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "24 | 20 | undefined" + } + }, + "boxClassName": { + "defaultValue": null, + "description": "Доп. класс чекбокса", + "name": "boxClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Доп. класс контента", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "labelClassName": { + "defaultValue": null, + "description": "Доп. класс лейбла", + "name": "labelClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "hintClassName": { + "defaultValue": null, + "description": "Доп. класс подсказки", + "name": "hintClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "errorClassName": { + "defaultValue": null, + "description": "Доп. класс ошибки", + "name": "errorClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "addonsClassName": { + "defaultValue": null, + "description": "Доп. класс дополнительного слота", + "name": "addonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "align": { + "defaultValue": { + "value": "start" + }, + "description": "Выравнивание", + "name": "align", + "required": false, + "type": { + "name": "Align | undefined" + } + }, + "addons": { + "defaultValue": null, + "description": "Дополнительный слот", + "name": "addons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивать ли компонент на всю ширину", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "indeterminate": { + "defaultValue": { + "value": false + }, + "description": "Управление неопределенным состоянием чекбокса", + "name": "indeterminate", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "position": { + "defaultValue": { + "value": "before" + }, + "description": "Позиция чекбокса относительно контента", + "name": "position", + "required": false, + "type": { + "name": "\"before\" | \"after\" | undefined" + } + }, + "hiddenInput": { + "defaultValue": { + "value": false + }, + "description": "Флаг для скрытия нативного инпута.", + "name": "hiddenInput", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "inputRef": { + "defaultValue": null, + "description": "Реф на инпут", + "name": "inputRef", + "required": false, + "type": { + "name": "RefObject | undefined" + } + }, + "labelProps": { + "defaultValue": null, + "description": "Пропсы для label", + "name": "labelProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLLabelElement> | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + } + }, + "demos": [ + { + "title": "Размеры", + "description": "Компонент поддерживате два размера, 24 и 20 px", + "desktop": "render(() => {\nconst [checked, setChecked] = React.useState({\ncheckbox_24: true,\ncheckbox_20: true,\n});\n\nconst [switchChecked, setSwitchChecked] = React.useState(true);\nconst [error, setError] = React.useState(false);\nconst [disabled, setDisabled] = React.useState(false);\n\nconst handleChange = (name) => (event) => {\nsetChecked((prevState) => ({\n...prevState,\n[name]: event.target.checked,\n}));\n};\n\nreturn (\n\n\n
\n\n
\n\n
\n\n
\n
\n\n\n\n setSwitchChecked((prevState) => !prevState)}\n/>\n\n\n\n\n setDisabled((prevState) => !prevState)}\n>\nЗаблокирован\n\n\n\n);\n});" + }, + { + "title": "Состояния", + "description": "Чекбокс может находиться в выбранном и невыбранном состоянии. В редких кейсах его значение может быть неопределённым.\nЕсли чекбокс заблокирован, используется состояние «недоступен».", + "desktop": "render(() => {\nreturn (\n
\n\n\n\n\n\n\n\n\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/circular-progress-bar.json b/packages/mcp/src/data/v50.16.0/circular-progress-bar.json new file mode 100644 index 0000000000..77948f0678 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/circular-progress-bar.json @@ -0,0 +1,265 @@ +{ + "packageName": "circular-progress-bar", + "displayName": "CircularProgressBar", + "description": "Используется для отображения прогресса.", + "props": { + "value": { + "defaultValue": null, + "description": "Уровень прогресса, %", + "name": "value", + "required": true, + "type": { + "name": "number | { timer: number; counting?: \"forward\" | \"backward\" | undefined; onFinish?: (() => void) | undefined; }" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "title": { + "defaultValue": { + "value": "isObject(valueFromProps) ? null : `${valueFromProps}`" + }, + "description": "Основной текст", + "name": "title", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "contentColor": { + "defaultValue": { + "value": "secondary" + }, + "description": "Цвет контента", + "name": "contentColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "titleColor": { + "defaultValue": null, + "description": "Цвет заголовка\nПриоритет выше чем у `contentColor`", + "name": "titleColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "subtitleColor": { + "defaultValue": null, + "description": "Цвет подзаголовка\nПриоритет выше чем у `contentColor`", + "name": "subtitleColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "subtitle": { + "defaultValue": null, + "description": "Дополнительный текст", + "name": "subtitle", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "titleComplete": { + "defaultValue": null, + "description": "Основной текст при 100%", + "name": "titleComplete", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "subtitleComplete": { + "defaultValue": null, + "description": "Дополнительный текст при 100%", + "name": "subtitleComplete", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "view": { + "defaultValue": { + "value": "positive" + }, + "description": "Цвет заполнения", + "name": "view", + "required": false, + "type": { + "name": "\"positive\" | \"negative\" | undefined" + } + }, + "size": { + "defaultValue": { + "value": 64 + }, + "description": "Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px)", + "name": "size", + "required": false, + "type": { + "name": "ComponentSize | undefined" + } + }, + "stroke": { + "defaultValue": { + "value": true + }, + "description": "Наличие желоба", + "name": "stroke", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "fillComplete": { + "defaultValue": null, + "description": "Заливка при 100%", + "name": "fillComplete", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "completeTextColor": { + "defaultValue": null, + "description": "Цвет текста при 100%", + "name": "completeTextColor", + "required": false, + "type": { + "name": "\"primary\" | \"primary-inverted\" | \"positive\" | \"negative\" | undefined" + } + }, + "completeIconColor": { + "defaultValue": { + "value": "tertiary" + }, + "description": "Цвет иконки при 100%", + "name": "completeIconColor", + "required": false, + "type": { + "name": "\"primary-inverted\" | \"tertiary\" | \"positive\" | \"negative\" | undefined" + } + }, + "icon": { + "defaultValue": null, + "description": "Компонент иконки", + "name": "icon", + "required": false, + "type": { + "name": "ElementType<{ className?: string | undefined; }> | undefined" + } + }, + "iconComplete": { + "defaultValue": null, + "description": "Компонент иконки при 100%", + "name": "iconComplete", + "required": false, + "type": { + "name": "ElementType<{ className?: string | undefined; }> | undefined" + } + }, + "direction": { + "defaultValue": { + "value": "clockwise" + }, + "description": "Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)", + "name": "direction", + "required": false, + "type": { + "name": "\"clockwise\" | \"counter-clockwise\" | undefined" + } + }, + "height": { + "defaultValue": null, + "description": "Высота компонента, min = 24; max = 144\nиспользовать совместно с size :\n144 от 144\n128 от 128 до 143\n80 от 80 до 127\n64 от 64 до 79\n48 от 48 до 63\n24 от 24 до 47", + "name": "height", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Id компонента для тестов", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние элементы", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "progressStrokeColor": { + "defaultValue": null, + "description": "Цвет прогресса", + "name": "progressStrokeColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "circleColor": { + "defaultValue": null, + "description": "Цвет заливки внутри круга", + "name": "circleColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "strokeColor": { + "defaultValue": null, + "description": "Цвет желоба", + "name": "strokeColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "directionType": { + "defaultValue": { + "value": "asc" + }, + "description": "Направление заполнения круга", + "name": "directionType", + "required": false, + "type": { + "name": "\"desc\" | \"asc\" | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Доступны 144, 128, 96, 80, 64, 48, 24 и произвольный размер компонента.", + "desktop": "\n\n\n\n\n\n\n\n\n\n" + }, + { + "title": "Атрибуты", + "description": "У компонента есть два состояния — в процессе заполнения и полностью заполненный.\nМожно задать направление заполнения, цвет прогрессбара, наличие желоба и контент для обоих состояний.", + "desktop": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n" + }, + { + "title": "Таймер", + "description": "Компонент можно превратить в таймер, передав соответствующие параметры.", + "desktop": "\n\n\n\n\n\n\n\n\n\n" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/code-input.json b/packages/mcp/src/data/v50.16.0/code-input.json new file mode 100644 index 0000000000..8a17b09e6b --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/code-input.json @@ -0,0 +1,148 @@ +{ + "packageName": "code-input", + "displayName": "CodeInput", + "description": "Используется для ввода кода.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс (native prop)", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Коллбек ввода значения", + "name": "onChange", + "required": false, + "type": { + "name": "((code: string) => void) | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Заблокированное состояние", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Состояние с ошибкой", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "onComplete": { + "defaultValue": null, + "description": "Коллбек полного заполнения", + "name": "onComplete", + "required": false, + "type": { + "name": "((code: string) => void) | undefined" + } + }, + "fields": { + "defaultValue": null, + "description": "Количество полей", + "name": "fields", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "initialValues": { + "defaultValue": null, + "description": "Значение для предзаполнения", + "name": "initialValues", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "clearCodeOnError": { + "defaultValue": { + "value": "true" + }, + "description": "Флаг - нужно ли очищать код при возникновении ошибки", + "name": "clearCodeOnError", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "errorVisibleDuration": { + "defaultValue": { + "value": "1300" + }, + "description": "Продолжительность отображения ошибки", + "name": "errorVisibleDuration", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "onErrorAnimationEnd": { + "defaultValue": null, + "description": "Коллбэк вызываемый после окончания проигрывания анимации при возникновении ошибки.", + "name": "onErrorAnimationEnd", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Компонент поддерживает автоподстановку кода из СМС в браузерах с поддержкой WebOTP Api.", + "desktop": "\n\n" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/collapse.json b/packages/mcp/src/data/v50.16.0/collapse.json new file mode 100644 index 0000000000..84ac20a684 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/collapse.json @@ -0,0 +1,126 @@ +{ + "packageName": "collapse", + "displayName": "Collapse", + "description": "Используется для скрытия части объемного текста.", + "props": { + "expanded": { + "defaultValue": null, + "description": "Состояние компонента", + "name": "expanded", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "collapsedLabel": { + "defaultValue": null, + "description": "Текст ссылки в `expanded` состоянии", + "name": "collapsedLabel", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "expandedLabel": { + "defaultValue": null, + "description": "Текст ссылки в `collapsed` состоянии", + "name": "expandedLabel", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние элементы `Collapse`", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс обертки", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "expandedContentClassName": { + "defaultValue": null, + "description": "Дополнительный класс для скрываемого контента", + "name": "expandedContentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "id": { + "defaultValue": null, + "description": "Идентификатор компонента в DOM", + "name": "id", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "defaultExpanded": { + "defaultValue": { + "value": false + }, + "description": "Начальное состояние uncontrolled компонента", + "name": "defaultExpanded", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onExpandedChange": { + "defaultValue": null, + "description": "Обработчик смены состояний `expanded/collapsed`", + "name": "onExpandedChange", + "required": false, + "type": { + "name": "((expanded: boolean) => void) | undefined" + } + }, + "onTransitionEnd": { + "defaultValue": null, + "description": "Обработчик события завершения анимации", + "name": "onTransitionEnd", + "required": false, + "type": { + "name": "((expanded: boolean) => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Стандартный вид компонента.", + "desktop": "
\n\nПочему банк проверяет мои операции?\n\n\n\nВ 2001 году в России начал действовать Федеральный закон №115 «О противодействии легализации\nдоходов, полученных преступным путём, и финансированию терроризма». В рамках закона банки\nмогут блокировать карты, отказывать в проведении сомнительных операций, ограничить доступ в\nинтернет-банк или запрашивать документы, если по операции клиента возникли подозрения.\n\n\n\n\nТребования 115-ФЗ и связанных с ним документов Банка России часто меняются,\nпредприниматели не всегда успевают за ними следить. Последствия нарушений\n«антиотмывочного» законодательства всегда неприятны: приходится остановить\nбизнес-процессы и доказать банку законность операций. Специалисты «Альфа-банка» собрали\nпонятные рекомендации, как сэкономить время на объяснения и предотвратить блокировки.\n\n\n
" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/comment.json b/packages/mcp/src/data/v50.16.0/comment.json new file mode 100644 index 0000000000..f6df6e603d --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/comment.json @@ -0,0 +1,50 @@ +{ + "packageName": "comment", + "displayName": "Comment", + "description": "Используется для отображаения комментариев.", + "props": { + "rowLimit": { + "defaultValue": null, + "description": "Количество строк", + "name": "rowLimit", + "required": false, + "type": { + "name": "2 | 5 | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Сss класс для стилизации общей обёртки", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Id компонента для тестов", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние элементы.", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "
\nКороткий комментарий\n\nДлинный комментарий без ограничения по количеству строк\n\nДлинный комментарий с ограничением по количеству строк\n
" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/confirmation.json b/packages/mcp/src/data/v50.16.0/confirmation.json new file mode 100644 index 0000000000..507049efbe --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/confirmation.json @@ -0,0 +1,285 @@ +{ + "packageName": "confirmation", + "displayName": "ConfirmationResponsive", + "description": "", + "props": { + "children": { + "defaultValue": null, + "description": "Дочерние элементы", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "className": { + "defaultValue": null, + "description": "Сss класс для стилизации общей обёртки", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "mobile": { + "defaultValue": null, + "description": "Мобильная версия компонента для экрана", + "name": "mobile", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clearCodeOnError": { + "defaultValue": null, + "description": "Флаг - нужно ли очищать код при возникновении ошибки", + "name": "clearCodeOnError", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "errorVisibleDuration": { + "defaultValue": { + "value": "1300" + }, + "description": "Продолжительность отображения ошибки", + "name": "errorVisibleDuration", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "screen": { + "defaultValue": null, + "description": "Экран компонента", + "name": "screen", + "required": true, + "type": { + "name": "string" + } + }, + "state": { + "defaultValue": null, + "description": "Состояние компонента", + "name": "state", + "required": true, + "type": { + "name": "string" + } + }, + "alignContent": { + "defaultValue": null, + "description": "Позиционирование контента", + "name": "alignContent", + "required": false, + "type": { + "name": "\"center\" | \"left\" | undefined" + } + }, + "titleTag": { + "defaultValue": { + "value": "'h3'" + }, + "description": "HTML тег для заголовка", + "name": "titleTag", + "required": false, + "type": { + "name": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | undefined" + } + }, + "texts": { + "defaultValue": null, + "description": "Объект с текстами", + "name": "texts", + "required": false, + "type": { + "name": "ConfirmationTexts | undefined" + } + }, + "requiredCharAmount": { + "defaultValue": null, + "description": "Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка", + "name": "requiredCharAmount", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "countdownDuration": { + "defaultValue": null, + "description": "Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах", + "name": "countdownDuration", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "tempBlockDuration": { + "defaultValue": null, + "description": "Продолжительность блокировки формы (ms)", + "name": "tempBlockDuration", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "phone": { + "defaultValue": null, + "description": "Номер телефона, на который отправлен код", + "name": "phone", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "blockSmsRetry": { + "defaultValue": null, + "description": "Не осталось попыток ввода кода", + "name": "blockSmsRetry", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "maxWidth": { + "defaultValue": null, + "description": "Максимальная ширина контейнера компонента.\nДля mobile по умолчанию используется 288px, если не передано значение.", + "name": "maxWidth", + "required": false, + "type": { + "name": "MaxWidth | undefined" + } + }, + "onChangeState": { + "defaultValue": null, + "description": "Функция обновления состояния компонента", + "name": "onChangeState", + "required": true, + "type": { + "name": "(state: string) => void" + } + }, + "onChangeScreen": { + "defaultValue": null, + "description": "Функция обновления состояния компонента", + "name": "onChangeScreen", + "required": true, + "type": { + "name": "(state: string) => void" + } + }, + "onInputFinished": { + "defaultValue": null, + "description": "Обработчик события завершения ввода кода подписания", + "name": "onInputFinished", + "required": true, + "type": { + "name": "(code: string) => void" + } + }, + "onSmsRetryClick": { + "defaultValue": null, + "description": "Обработчик события нажатия на кнопку \"Запросить код\"", + "name": "onSmsRetryClick", + "required": true, + "type": { + "name": "() => void" + } + }, + "onFatalErrorOkButtonClick": { + "defaultValue": null, + "description": "Клик по кнопке \"Понятно\" на экране фатальной ошибки", + "name": "onFatalErrorOkButtonClick", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "onTempBlockFinished": { + "defaultValue": null, + "description": "Временная блокировка формы закончилась", + "name": "onTempBlockFinished", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "getScreensMap": { + "defaultValue": null, + "description": "Возвращает объект, где ключ - название экрана (screen), значение - компонент для экрана", + "name": "getScreensMap", + "required": false, + "type": { + "name": "((defaultScreensMap: ScreensMap) => ScreensMap) | undefined" + } + }, + "hideCountdownSection": { + "defaultValue": { + "value": "false" + }, + "description": "Скрыть секцию с повторной отправкой кода", + "name": "hideCountdownSection", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "initialScreenHintSlot": { + "defaultValue": null, + "description": "Слот для контента с подсказкой на главном экране", + "name": "initialScreenHintSlot", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "1. Корректный код: любой введеный код будет корректным.\n2. Некорректный код: любой введеный код будет некорректным.\n3. Код устарел: после ввода кода пользователю будет сообщено, что код устарел.\n4. Закончились попытки ввода кода, вводимый код некорректен: после ввода кода пользователю будет сообщено, что у него закончились попытки.\n5. Закончились попытки запроса кода, вводимый код устарел: после запроса следующего кода запрос нового будет заблокирован.\n6. Временная блокировка формы: после ввода кода форма будет заблокирована на 24 часа.", + "desktop": "render(() => {\nconst isMobileFrame = document.body.clientWidth < 450;\nconst variants = [\n{ key: 'success', content: 'Корректный код' },\n{ key: 'error', content: 'Некорректный код' },\n{ key: 'expired', content: 'Код устарел' },\n{ key: 'fatal', content: 'Закончились попытки ввода кода, вводимый код некорректен' },\n{\nkey: 'sms-requests-ended',\ncontent: 'Закончились попытки запроса кода, вводимый код устарел',\n},\n{ key: 'temp-block-over', content: 'Сценарий, когда форма временно заблокирована' },\n];\n\nconst [variant, setVariant] = React.useState(variants[0]);\nconst [shownSuccessScreen, setShownSuccessScreen] = React.useState(false);\n\nconst {\nconfirmationState,\nconfirmationScreen,\nconfirmationBlockSmsRetry,\nsetConfirmationState,\nsetConfirmationScreen,\nsetConfirmationBlockSmsRetry,\n} = useConfirmation();\n\nconst handleInputFinished = () => {\nsetTimeout(() => {\nswitch (variant.key) {\ncase 'success':\nsetShownSuccessScreen(true);\nsetConfirmationState('INITIAL');\nbreak;\ncase 'error':\nsetConfirmationState('CODE_ERROR');\nbreak;\ncase 'expired':\nsetConfirmationState('CODE_EXPIRED');\nbreak;\ncase 'fatal':\nsetConfirmationScreen('FATAL_ERROR');\nbreak;\ncase 'sms-requests-ended':\nsetConfirmationState('CODE_EXPIRED_ENDED');\nbreak;\ncase 'temp-block-over':\nsetConfirmationScreen('TEMP_BLOCK');\nbreak;\ndefault:\nbreak;\n}\n}, 1000);\n};\n\nconst durations = {\n'temp-block': 24 * 60 * 60 * 1000,\n'temp-block-over': 10000,\n};\n\nconst currentTempBlockDuration = durations[variant.key] || 10000;\n\nconst handleSmsRetryClick = () => {\nsetTimeout(() => {\nif (variant.key === 'sms-requests-ended') {\nsetConfirmationBlockSmsRetry(true);\n}\nsetConfirmationState('INITIAL');\n}, 1000);\n};\n\nconst handleTempBlockFinished = () => {\nif (variant.key === 'temp-block-over') {\nsetConfirmationScreen('TEMP_BLOCK_OVER');\n} else {\nsetConfirmationScreen('INITIAL');\nsetConfirmationState('CODE_SENDING');\n}\n};\n\nconst Component = isMobileFrame ? ConfirmationMobile : Confirmation;\n\nreturn (\n
\n {\nsetShownSuccessScreen(false);\nsetConfirmationState('INITIAL');\nsetConfirmationScreen('INITIAL');\nsetConfirmationBlockSmsRetry(false);\nsetVariant(selected);\n}}\nselected={variant.key}\nOption={BaseOption}\noptionsListWidth='field'\n/>\n\n{shownSuccessScreen ? (\n
\n\n\n
\n\n\n\n\n\n\n\nВведён корректный код\n\n
\n\n\n\n\n
\n
\n) : (\n\n)}\n
\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/custom-button.json b/packages/mcp/src/data/v50.16.0/custom-button.json new file mode 100644 index 0000000000..aded06da4b --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/custom-button.json @@ -0,0 +1,261 @@ +{ + "packageName": "custom-button", + "displayName": "CustomButton", + "description": "", + "props": { + "children": { + "defaultValue": null, + "description": "Дочерние элементы.", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля спиннера используется модификатор -loader", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "href": { + "defaultValue": null, + "description": "Выводит ссылку в виде кнопки", + "name": "href", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "size": { + "defaultValue": { + "value": "56" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | 32 | undefined" + } + }, + "loading": { + "defaultValue": { + "value": "false" + }, + "description": "Показать лоадер", + "name": "loading", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "block": { + "defaultValue": { + "value": "false" + }, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hint": { + "defaultValue": null, + "description": "Подпись под лейблом (видна только в размерах >= m)", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": null, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + }, + "shape": { + "defaultValue": { + "value": "rectangular" + }, + "description": "Форма кнопки", + "name": "shape", + "required": false, + "type": { + "name": "\"rounded\" | \"rectangular\" | undefined" + } + }, + "textResizing": { + "defaultValue": { + "value": "hug" + }, + "description": "Ширина текстового контента", + "name": "textResizing", + "required": false, + "type": { + "name": "\"fill\" | \"hug\" | undefined" + } + }, + "spinnerClassName": { + "defaultValue": null, + "description": "Дополнительный класс для спиннера", + "name": "spinnerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "Component": { + "defaultValue": null, + "description": "Позволяет использовать кастомный компонент для кнопки (например Link из роутера)", + "name": "Component", + "required": false, + "type": { + "name": "ElementType | undefined" + } + }, + "nowrap": { + "defaultValue": { + "value": "false" + }, + "description": "Не переносить текст кнопки на новую строку", + "name": "nowrap", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "allowBackdropBlur": { + "defaultValue": null, + "description": "Включает размытие фона для некоторых вариантов кнопки\n@description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.", + "name": "allowBackdropBlur", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "backgroundColor": { + "defaultValue": null, + "description": "Цвет кнопки", + "name": "backgroundColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "contentColor": { + "defaultValue": null, + "description": "Цвет контента", + "name": "contentColor", + "required": false, + "type": { + "name": "\"black\" | \"white\" | \"static-black\" | \"static-white\" | undefined" + } + }, + "stateType": { + "defaultValue": null, + "description": "Затемнение или осветление кнопки при hover и active", + "name": "stateType", + "required": false, + "type": { + "name": "\"darkening\" | \"lightening\" | \"static-darkening\" | \"static-lightening\" | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Блокировка кнопки", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableType": { + "defaultValue": { + "value": "default" + }, + "description": "Тип цвета для заблокированного состояния", + "name": "disableType", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | \"static\" | \"static-inverted\" | undefined" + } + } + }, + "demos": [ + { + "title": "Состояния и цвет контента", + "description": "Кнопка поддерживает четыре вида генерации состояний `stateType`, четыре цвета контента `contentColor` и четыре стиля для заблокированного состояния `disableType`. Для корректного поведения рекомендуется сочетать эти параметры только следующим образом.", + "desktop": "const VARIANTS = {\nStaticWhite: {\nstateType: 'static-lightening',\ncontentColor: 'static-white',\nbackgroundColor: '#EB58BF',\nhint: 'StaticLightening',\n},\nWhite: {\nstateType: 'lightening',\ncontentColor: 'white',\nbackgroundColor: '#EB58BF',\nhint: 'Lightening',\n},\nStaticBlack: {\nstateType: 'static-darkening',\ncontentColor: 'static-black',\nbackgroundColor: '#7FEFFA',\nhint: 'StaticDarkening',\n},\nBlack: {\nstateType: 'darkening',\ncontentColor: 'black',\nbackgroundColor: '#7FEFFA',\nhint: 'Darkening',\n},\n};\nrender(() => {\nconst [disabled, setDisabled] = React.useState(false);\nconst isMobile = document.body.clientWidth < 450;\nreturn (\n\n
\n\nНа светлом фоне\n\n
\n{Object.keys(VARIANTS).map((title) => (\n\n{title}\n\n))}\n
\n
\n
\n\n
\n\nНа светлом статичном фоне\n\n
\n{Object.keys(VARIANTS).map((title) => (\n\n{title}\n\n))}\n
\n
\n
\n\n
\n\nНа тёмном фоне\n\n
\n{Object.keys(VARIANTS).map((title) => (\n\n{title}\n\n))}\n
\n
\n
\n\n
\n\nНа тёмном статичном фоне\n\n
\n{Object.keys(VARIANTS).map((title) => (\n\n{title}\n\n))}\n
\n
\n
\n\n setDisabled((prevState) => !prevState)}\nlabel='Недоступна'\n/>\n\n);\n});" + }, + { + "title": "Цвет фона", + "description": "Кнопка может принимать в качестве цвета фона как токены, так и кастомные значения.\nПри использовании токенов, необходимо учитывать их поведение в dark mode.", + "desktop": "const VARIANTS = {\nToken: {\nstateType: 'lightening',\ncontentColor: 'white',\nbackgroundColor: 'var(--color-light-base-bg-secondary-inverted)',\n},\nColor: {\nstateType: 'lightening',\ncontentColor: 'white',\nbackgroundColor: '#EB58BF',\n},\nGradient: {\nstateType: 'lightening',\ncontentColor: 'white',\nbackgroundColor: 'linear-gradient(264deg, #FF42CA 0%, #FF8A00 100%)',\n},\n};\nrender(() => {\nconst isMobile = document.body.clientWidth < 450;\nreturn (\n
\n{Object.keys(VARIANTS).map((title) => (\n\n{title}\n\n))}\n
\n);\n});" + }, + { + "title": "Анатомия", + "description": "С помощью слотов `leftAddons` и `rightAddons` можно кастомизировать кнопку. Например, добавить иконку. Переданный контент будет отрисован слева или справа от текста кнопки. Если текста нет — будет отрисована квадратная кнопка. В 56, 64 и 72 размерах доступна подпись под лейблом.", + "desktop": "render(() => {\nconst [label, setLabel] = React.useState(true);\nconst [hint, setHint] = React.useState();\nconst [leftAddons, setLeftAddons] = React.useState(false);\nconst [rightAddons, setRightAddons] = React.useState(false);\n\nconst handleLabelChange = () => setLabel(!label);\nconst handleHintChange = () => setHint((p) => (p ? undefined : 'Hint'));\nconst handleLeftAddonsChange = () => setLeftAddons(!leftAddons);\nconst handleRightAddonsChange = () => setRightAddons(!rightAddons);\n\nreturn (\n
\n}\nrightAddons={rightAddons && }\nhint={hint}\nblock={isMobile()}\nbackgroundColor={'var(--color-light-base-bg-secondary-inverted)'}\n>\n{label && 'Label'}\n\n\n\n\n\n\n\n\n\n\n\n
\n);\n});" + }, + { + "title": "Кастомный цвет контента", + "description": "Для установки цвета контента можно использовать пропс `contentColor` который принимает четыре значения. Но также цвет можно переопределить через класс с помощью пропса `className`", + "desktop": "render(() => {\nreturn (\n\n\n\n\n\nLabel\n\n\nLabel\n\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/custom-picker-button.json b/packages/mcp/src/data/v50.16.0/custom-picker-button.json new file mode 100644 index 0000000000..f41f61734a --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/custom-picker-button.json @@ -0,0 +1,632 @@ +{ + "packageName": "custom-picker-button", + "displayName": "CustomPickerButtonResponsive", + "description": "", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля пункта меню используется модификатор -option, компонента поиска -search,\nкомпонента выпадающего меню -options-list, компонента BottomSheet -bottom-sheet,\nкомпонента поля -field, компонета FormControl -field-form-control", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "id": { + "defaultValue": null, + "description": "Атрибут id", + "name": "id", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onBlur": { + "defaultValue": null, + "description": "Обработчик блюра поля", + "name": "onBlur", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик выбора", + "name": "onChange", + "required": false, + "type": { + "name": "((payload: BaseSelectChangePayload) => void) | undefined" + } + }, + "onScroll": { + "defaultValue": null, + "description": "Обработчик скрола", + "name": "onScroll", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "icon": { + "defaultValue": null, + "description": "Кастомная иконка при variant = compact", + "name": "icon", + "required": false, + "type": { + "name": "ComponentType> | undefined" + } + }, + "size": { + "defaultValue": { + "value": "56" + }, + "description": "Размер кнопки", + "name": "size", + "required": false, + "type": { + "name": "PickerButtonSize | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Управление возможностью выбора значения", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "loading": { + "defaultValue": { + "value": "false" + }, + "description": "Показать лоадер", + "name": "loading", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "name": { + "defaultValue": null, + "description": "Атрибут name", + "name": "name", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clear": { + "defaultValue": null, + "description": "Флаг, показать крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл поля", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на крестик для очистки поля", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "environment": { + "defaultValue": { + "value": "window" + }, + "description": "Контекст окружения для downshift.js", + "name": "environment", + "required": false, + "type": { + "name": "Environment | undefined" + } + }, + "open": { + "defaultValue": null, + "description": "Управление открытием", + "name": "open", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "defaultOpen": { + "defaultValue": null, + "description": "Начальное состояние селекта", + "name": "defaultOpen", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "preventFlip": { + "defaultValue": null, + "description": "Запрещает поповеру менять свою позицию.\nНапример, если места снизу недостаточно,то он все равно будет показан снизу", + "name": "preventFlip", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "popoverPosition": { + "defaultValue": null, + "description": "Позиционирование выпадающего списка", + "name": "popoverPosition", + "required": false, + "type": { + "name": "Position | undefined" + } + }, + "zIndexPopover": { + "defaultValue": null, + "description": "z-index поповера", + "name": "zIndexPopover", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "options": { + "defaultValue": null, + "description": "", + "name": "options", + "required": true, + "type": { + "name": "((OptionShape | GroupShape) & { icon?: ComponentType> | undefined; })[]" + } + }, + "optionsListClassName": { + "defaultValue": null, + "description": "Дополнительный класс выпадающего меню", + "name": "optionsListClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionClassName": { + "defaultValue": null, + "description": "Дополнительный класс для пункта меню", + "name": "optionClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionGroupClassName": { + "defaultValue": null, + "description": "Дополнительный класс для компонента группы пунктов", + "name": "optionGroupClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "popperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поповера", + "name": "popperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionsSize": { + "defaultValue": null, + "description": "Размер пунктов меню", + "name": "optionsSize", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "optionsListWidth": { + "defaultValue": null, + "description": "Управляет шириной выпадающего меню.\nШирину определяет контент, либо ширина равна ширине поля", + "name": "optionsListWidth", + "required": false, + "type": { + "name": "\"content\" | \"field\" | undefined" + } + }, + "circularNavigation": { + "defaultValue": null, + "description": "При навигации с клавиатуры переходить от последнего пункта меню к первому и наоборот.", + "name": "circularNavigation", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "nativeSelect": { + "defaultValue": null, + "description": "Рендерит нативный селект вместо выпадающего меню. (на десктопе использовать только с multiple=false)", + "name": "nativeSelect", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "visibleOptions": { + "defaultValue": null, + "description": "Количество видимых пунктов меню (5 = 5.5)", + "name": "visibleOptions", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "valueRenderer": { + "defaultValue": null, + "description": "Кастомный рендер выбранного пункта", + "name": "valueRenderer", + "required": false, + "type": { + "name": "(({ selected, selectedMultiple, }: { selected?: OptionShape | undefined; selectedMultiple: OptionShape[]; valueSeparator?: string | undefined; }) => ReactNode) | undefined" + } + }, + "valueSeparator": { + "defaultValue": null, + "description": "Кастомный разделитель выбранных пунктов (Работает когда не прокинут valueRenderer)", + "name": "valueSeparator", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "Field": { + "defaultValue": null, + "description": "Компонент поля", + "name": "Field", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "fieldProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент поля", + "name": "fieldProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "optionsListProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент списка", + "name": "optionsListProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "optionProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент пункта меню", + "name": "optionProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "groupOptionProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент группового пункта меню", + "name": "groupOptionProps", + "required": false, + "type": { + "name": "AnyObject | undefined" + } + }, + "OptionsList": { + "defaultValue": null, + "description": "Компонент выпадающего меню", + "name": "OptionsList", + "required": false, + "type": { + "name": "ComponentType & { className?: string | undefined; optionGroupClassName?: string | undefined; scrollbarClassName?: string | undefined; ... 28 more ...; limitDynamicOptionGroupSize?: boolean | undefined; } & RefAttributes<...>> | undefined" + } + }, + "Optgroup": { + "defaultValue": null, + "description": "Компонент группы", + "name": "Optgroup", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "Option": { + "defaultValue": null, + "description": "Компонент пункта меню", + "name": "Option", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "onOpen": { + "defaultValue": null, + "description": "Обработчик открытия\\закрытия селекта", + "name": "onOpen", + "required": false, + "type": { + "name": "((payload: { open?: boolean | undefined; name?: string | undefined; }) => void) | undefined" + } + }, + "updatePopover": { + "defaultValue": null, + "description": "Хранит функцию, с помощью которой можно обновить положение поповера", + "name": "updatePopover", + "required": false, + "type": { + "name": "MutableRefObject<(() => void) | undefined> | undefined" + } + }, + "showEmptyOptionsList": { + "defaultValue": null, + "description": "Показывать OptionsList, если он пустой", + "name": "showEmptyOptionsList", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "popoverProps": { + "defaultValue": null, + "description": "Дополнительные пропсы для Popover", + "name": "popoverProps", + "required": false, + "type": { + "name": "Omit | undefined" + } + }, + "limitDynamicOptionGroupSize": { + "defaultValue": null, + "description": "Ограничение динамического размера группы вариантов выбора", + "name": "limitDynamicOptionGroupSize", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "variant": { + "defaultValue": null, + "description": "Тип кнопки", + "name": "variant", + "required": false, + "type": { + "name": "PickerButtonVariant | undefined" + } + }, + "showArrow": { + "defaultValue": { + "value": "true" + }, + "description": "Показывать стрелку", + "name": "showArrow", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "backgroundColor": { + "defaultValue": null, + "description": "Цвет кнопки", + "name": "backgroundColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "contentColor": { + "defaultValue": null, + "description": "Цвет контента", + "name": "contentColor", + "required": false, + "type": { + "name": "\"black\" | \"white\" | \"static-black\" | \"static-white\" | undefined" + } + }, + "stateType": { + "defaultValue": null, + "description": "Затемнение или осветление кнопки при hover и active", + "name": "stateType", + "required": false, + "type": { + "name": "\"darkening\" | \"lightening\" | \"static-darkening\" | \"static-lightening\" | undefined" + } + }, + "showClear": { + "defaultValue": null, + "description": "Показывать кнопку 'Сбросить' в футере мобильного компонента", + "name": "showClear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "showSelectAll": { + "defaultValue": null, + "description": "Показывать пункт \"Выбрать все\"", + "name": "showSelectAll", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "showHeaderWithSelectAll": { + "defaultValue": null, + "description": "Показывать пункт \"Выбрать все\" в заголовке списка у мобильного компонента", + "name": "showHeaderWithSelectAll", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "useWithApplyHook": { + "defaultValue": null, + "description": "Использовать ли хук useSelectWithApply в мобильном компоненте", + "name": "useWithApplyHook", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "checkmarkPosition": { + "defaultValue": { + "value": "'before'" + }, + "description": "Позиция чекбокса \"Выбрать все\" в Header", + "name": "checkmarkPosition", + "required": false, + "type": { + "name": "\"before\" | \"after\" | undefined" + } + }, + "footer": { + "defaultValue": null, + "description": "Футер\n@deprecated Используйте bottomSheetProps.actionButton", + "name": "footer", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "swipeable": { + "defaultValue": null, + "description": "Будет ли свайпаться шторка\n@deprecated Используйте bottomSheetProps.swipeable", + "name": "swipeable", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "bottomSheetProps": { + "defaultValue": null, + "description": "Дополнительные пропсы шторки", + "name": "bottomSheetProps", + "required": false, + "type": { + "name": "(Omit, \"bottomAddons\"> & { bottomAddons?: ReactNode | ((flatOptions: OptionShape[]) => ReactNode); }) | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "const options = [{ key: 'Car' }, { key: 'Star' }, { key: 'Flower' }, { key: 'Banknote' }];\n\nconst optionsWithIcons = [\n{ key: 'Car', icon: CarMIcon },\n{ key: 'Star', icon: StarMIcon },\n{ key: 'Flower', icon: FlowerMMIcon },\n{ key: 'Banknote', icon: BanknoteMIcon },\n];\n\nrender(\n\n\n\n,\n);", + "mobile": "const options = [{ key: 'Car' }, { key: 'Star' }, { key: 'Flower' }, { key: 'Banknote' }];\n\nconst optionsWithIcons = [\n{ key: 'Car', icon: CarMIcon },\n{ key: 'Star', icon: StarMIcon },\n{ key: 'Flower', icon: FlowerMMIcon },\n{ key: 'Banknote', icon: BanknoteMIcon },\n];\n\nrender(\n\n\n\n,\n);" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/date-time-input.json b/packages/mcp/src/data/v50.16.0/date-time-input.json new file mode 100644 index 0000000000..7e8b07aa99 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/date-time-input.json @@ -0,0 +1,491 @@ +{ + "packageName": "date-time-input", + "displayName": "DateTimeInputResponsive", + "description": "", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля FormControl используется модификатор -form-control", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "type": { + "defaultValue": null, + "description": "Атрибут type", + "name": "type", + "required": false, + "type": { + "name": "\"number\" | \"text\" | \"tel\" | \"email\" | \"password\" | \"money\" | undefined" + } + }, + "defaultValue": { + "defaultValue": null, + "description": "Начальное значение поля", + "name": "defaultValue", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик изменения значения", + "name": "onChange", + "required": false, + "type": { + "name": "((event: ChangeEvent | null, payload: { date: Date; value: string; }) => void) | undefined" + } + }, + "onClick": { + "defaultValue": null, + "description": "Обработчик клика по полю", + "name": "onClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseDown": { + "defaultValue": null, + "description": "Обработчик MouseDown по полю", + "name": "onMouseDown", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseUp": { + "defaultValue": null, + "description": "Обработчик MouseUp по полю", + "name": "onMouseUp", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "size": { + "defaultValue": { + "value": "48" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "colors": { + "defaultValue": null, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Значение поля ввода", + "name": "value", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "bold": { + "defaultValue": null, + "description": "Жирный текст\n@deprecated Используйте {@link BaseInputProps.fontWeight }", + "name": "bold", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "fontWeight": { + "defaultValue": null, + "description": "Вес шрифта инпута, в том числе плейсхолдера", + "name": "fontWeight", + "required": false, + "type": { + "name": "\"bold\" | \"medium\" | \"regular\" | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clear": { + "defaultValue": null, + "description": "Крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "success": { + "defaultValue": null, + "description": "Отображение иконки успеха", + "name": "success", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл компонента", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "wrapperRef": { + "defaultValue": null, + "description": "Ref для обертки input", + "name": "wrapperRef", + "required": false, + "type": { + "name": "Ref | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки левых аддонов", + "name": "leftAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "rightAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки правых аддонов", + "name": "rightAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "bottomAddons": { + "defaultValue": null, + "description": "Слот под инпутом", + "name": "bottomAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "inputClassName": { + "defaultValue": null, + "description": "Дополнительный класс инпута\nДополнительный класс для инпута", + "name": "inputClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "labelClassName": { + "defaultValue": null, + "description": "Дополнительный класс для лейбла", + "name": "labelClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "addonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для аддонов", + "name": "addonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "focusedClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен при фокусе", + "name": "focusedClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "filledClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен, если в поле есть значение", + "name": "filledClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку очистки", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "disableUserInput": { + "defaultValue": null, + "description": "Запрещает ввод с клавиатуры\nЗапретить ввод с клавиатуры", + "name": "disableUserInput", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024\n1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": null, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + }, + "defaultMonth": { + "defaultValue": null, + "description": "Месяц в календаре по умолчанию (timestamp)", + "name": "defaultMonth", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "minDate": { + "defaultValue": null, + "description": "Минимальная дата, доступная для выбора (timestamp)", + "name": "minDate", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "maxDate": { + "defaultValue": null, + "description": "Максимальная дата, доступная для выбора (timestamp)", + "name": "maxDate", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "events": { + "defaultValue": null, + "description": "Список событий", + "name": "events", + "required": false, + "type": { + "name": "(number | Date)[] | undefined" + } + }, + "offDays": { + "defaultValue": null, + "description": "Список выходных", + "name": "offDays", + "required": false, + "type": { + "name": "(number | Date)[] | undefined" + } + }, + "onComplete": { + "defaultValue": null, + "description": "Обработчик окончания ввода", + "name": "onComplete", + "required": false, + "type": { + "name": "((event: ChangeEvent | null, payload: { date: Date; value: string; }) => void) | undefined" + } + }, + "popoverClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поповера", + "name": "popoverClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "calendarProps": { + "defaultValue": null, + "description": "Доп. пропсы для календаря", + "name": "calendarProps", + "required": false, + "type": { + "name": "(CalendarDesktopProps & Record) | ({ title?: string | undefined; open: boolean; onClose?: (() => void) | undefined; allowSelectionFromEmptyRange?: boolean | undefined; ... 5 more ...; resetButtonContent?: string | undefined; } & ... 4 more ... & Record<...>) | undefined" + } + }, + "defaultOpen": { + "defaultValue": null, + "description": "Состояние открытия по умолчанию", + "name": "defaultOpen", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "preventFlip": { + "defaultValue": null, + "description": "Запрещает поповеру менять свою позицию.\nНапример, если места снизу недостаточно,то он все равно будет показан снизу", + "name": "preventFlip", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "Calendar": { + "defaultValue": null, + "description": "Компонент календаря", + "name": "Calendar", + "required": false, + "type": { + "name": "ElementType | undefined" + } + }, + "popoverPosition": { + "defaultValue": null, + "description": "Позиционирование поповера с календарем", + "name": "popoverPosition", + "required": false, + "type": { + "name": "Position | undefined" + } + }, + "zIndexPopover": { + "defaultValue": null, + "description": "z-index Popover", + "name": "zIndexPopover", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "useAnchorWidth": { + "defaultValue": null, + "description": "Календарь будет принимать ширину инпута", + "name": "useAnchorWidth", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "picker": { + "defaultValue": null, + "description": "Обработчик изменения значения", + "name": "picker", + "required": false, + "type": { + "name": "boolean | undefined" + } + } + }, + "demos": [ + { + "title": "Стандартный вид компонента", + "description": "Стандартный вид компонента — поле ввода с маской ДД.ММ.ГГГГ, ЧЧ:ММ", + "desktop": "render(\n
\n\n
,\n);" + }, + { + "title": "Пикер", + "description": "Пикер используется, когда выбор дат ограничен. Например, если нельзя указывать выходные дни.\nПри наличии пикера допустимо блокировать ввод с клавиатуры.\nЕсли дата указывается с пикера, или пользователь покинул поле после ввода даты и не заполнил время, считаем время равным 00:00", + "desktop": "render(\n
\n\n
,\n);" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/divider.json b/packages/mcp/src/data/v50.16.0/divider.json new file mode 100644 index 0000000000..6f7f92cda3 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/divider.json @@ -0,0 +1,32 @@ +{ + "packageName": "divider", + "displayName": "Divider", + "description": "Используется как разделитель.", + "props": { + "className": { + "defaultValue": null, + "description": "Кастомный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Id компонента для тестов", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "
\n
\n\n\n\n
\n
" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/drawer.json b/packages/mcp/src/data/v50.16.0/drawer.json new file mode 100644 index 0000000000..bf0718a98b --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/drawer.json @@ -0,0 +1,351 @@ +{ + "packageName": "drawer", + "displayName": "Drawer", + "description": "Используется для десктопных модальных сущностей, появляющихся слева или справа.", + "props": { + "children": { + "defaultValue": null, + "description": "Контент", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onWheel": { + "defaultValue": null, + "description": "Хэндлер события прокрутки колесиком", + "name": "onWheel", + "required": false, + "type": { + "name": "((e: WheelEvent) => void) | undefined" + } + }, + "open": { + "defaultValue": null, + "description": "Управление видимостью модалки", + "name": "open", + "required": true, + "type": { + "name": "boolean" + } + }, + "onClose": { + "defaultValue": null, + "description": "Обработчик закрытия", + "name": "onClose", + "required": false, + "type": { + "name": "((event: MouseEvent | KeyboardEvent, reason?: \"backdropClick\" | \"escapeKeyDown\" | \"closerClick\" | undefined) => void) | undefined" + } + }, + "Backdrop": { + "defaultValue": null, + "description": "Компонент бэкдропа", + "name": "Backdrop", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "backdropProps": { + "defaultValue": null, + "description": "Свойства для Бэкдропа", + "name": "backdropProps", + "required": false, + "type": { + "name": "(Partial & Record) | undefined" + } + }, + "disableAutoFocus": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает автоматический перевод фокуса на модалку при открытии", + "name": "disableAutoFocus", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableFocusLock": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает ловушку фокуса", + "name": "disableFocusLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableRestoreFocus": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает восстановление фокуса на предыдущем элементе после закрытия модалки", + "name": "disableRestoreFocus", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableEscapeKeyDown": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает вызов `callback` при нажатии Escape", + "name": "disableEscapeKeyDown", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableBackdropClick": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает вызов `callback` при клике на бэкдроп", + "name": "disableBackdropClick", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableBlockingScroll": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает блокировку скролла при открытии модального окна\n@deprecated Используйте `scrollLock={true}`.", + "name": "disableBlockingScroll", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "scrollLock": { + "defaultValue": { + "value": "false" + }, + "description": "Управляет блокировкой скролла/overscroll фона при открытой модалке.", + "name": "scrollLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "keepMounted": { + "defaultValue": { + "value": "false" + }, + "description": "Содержимое модалки всегда в DOM", + "name": "keepMounted", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "wrapperProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на dialog wrapper", + "name": "wrapperProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "contentProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на обертку контента", + "name": "contentProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "componentDivProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на компонентную обертку контента", + "name": "componentDivProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "wrapperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для обертки (Modal)", + "name": "wrapperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "scrollHandler": { + "defaultValue": null, + "description": "Обработчик скролла контента", + "name": "scrollHandler", + "required": false, + "type": { + "name": "\"content\" | \"wrapper\" | MutableRefObject | undefined" + } + }, + "transitionProps": { + "defaultValue": null, + "description": "Пропсы для анимации (CSSTransition)", + "name": "transitionProps", + "required": false, + "type": { + "name": "Partial | undefined" + } + }, + "usePortal": { + "defaultValue": { + "value": "true" + }, + "description": "Рендерить ли в контейнер через портал.", + "name": "usePortal", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onBackdropClick": { + "defaultValue": null, + "description": "Обработчик события нажатия на бэкдроп", + "name": "onBackdropClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onEscapeKeyDown": { + "defaultValue": null, + "description": "Обработчик события нажатия на Escape\n\nЕсли `disableEscapeKeyDown` - false и модальное окно в фокусе", + "name": "onEscapeKeyDown", + "required": false, + "type": { + "name": "((event: KeyboardEvent) => void) | undefined" + } + }, + "onMount": { + "defaultValue": null, + "description": "Обработчик события onEntered компонента Transition", + "name": "onMount", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "onUnmount": { + "defaultValue": null, + "description": "Обработчик события onExited компонента Transition", + "name": "onUnmount", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "zIndex": { + "defaultValue": null, + "description": "z-index компонента", + "name": "zIndex", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "componentRef": { + "defaultValue": null, + "description": "Реф, который должен быть установлен компонентной области", + "name": "componentRef", + "required": false, + "type": { + "name": "MutableRefObject | undefined" + } + }, + "contentElementRef": { + "defaultValue": null, + "description": "Реф контентной области", + "name": "contentElementRef", + "required": false, + "type": { + "name": "MutableRefObject | undefined" + } + }, + "iOSLock": { + "defaultValue": null, + "description": "Блокирует скролл когда модальное окно открыто. Работает только на iOS.\n@deprecated Используйте `scrollLock={true}`.", + "name": "iOSLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "placement": { + "defaultValue": { + "value": "right" + }, + "description": "Край экрана, с которого может появиться Drawer.", + "name": "placement", + "required": false, + "type": { + "name": "\"left\" | \"right\" | undefined" + } + }, + "nativeScrollbar": { + "defaultValue": { + "value": true + }, + "description": "Нужно ли использовать нативный скроллбар", + "name": "nativeScrollbar", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "contentTransitionProps": { + "defaultValue": null, + "description": "Пропсы для анимации контента (CSSTransition)", + "name": "contentTransitionProps", + "required": false, + "type": { + "name": "Partial | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "const Header = () => {\nconst { setHasHeader } = React.useContext(DrawerContext);\nReact.useEffect(() => setHasHeader(true), [setHasHeader]);\n\nconst commonStyles = {\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\nborderRadius: '8px',\nheight: '48px',\n};\n\nconst addonsStyles = {\n...commonStyles,\nwidth: '48px',\n};\n\nconst innerAddonsStyles = {\n...addonsStyles,\nbackgroundColor: 'rgba(207, 112, 255, 0.1)',\n};\n\nconst bottomAddonsStyles = {\n...commonStyles,\nwidth: '100%',\n};\n\nconst wrapperStyles = {\ndisplay: 'flex',\njustifyContent: 'center',\n};\n\nconst titleStyles = {\n...commonStyles,\nflexGrow: 1,\n};\n\nreturn (\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n);\n};\n\nfunction Content() {\nconst { contentRef } = React.useContext(DrawerContext);\nconst styleContent = {\nheight: '100%',\nborderRadius: '8px',\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\nmargin: '0 40px',\n};\n\nreturn
;\n}\n\nfunction Footer() {\nconst { setHasFooter } = React.useContext(DrawerContext);\nReact.useEffect(() => setHasFooter(true), [setHasFooter]);\n\nconst styleFooter = {\nminHeight: '48px',\nborderRadius: '8px',\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\nmargin: 'var(--modal-s-footer-paddings)',\n};\nreturn
;\n}\n\nrender(() => {\nconst [modalAnatomy, setModalAnatomy] = React.useState(false);\nconst handleModalAnatomy = () => setModalAnatomy(!modalAnatomy);\n\nreturn (\n\n\n\n
\n\n
\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/dropzone.json b/packages/mcp/src/data/v50.16.0/dropzone.json new file mode 100644 index 0000000000..c19080d408 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/dropzone.json @@ -0,0 +1,139 @@ +{ + "packageName": "dropzone", + "displayName": "Dropzone", + "description": "Используется для прикрепления файлов.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Дополнительный класс для контента", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "text": { + "defaultValue": { + "value": "Перетащите файлы" + }, + "description": "Подпись для заглушки", + "name": "text", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Заблокированное состояние", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": { + "value": false + }, + "description": "Состояние ошибки", + "name": "error", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "block": { + "defaultValue": { + "value": false + }, + "description": "Растягивать ли компонент на всю ширину", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "Overlay": { + "defaultValue": { + "value": "({ text = 'Перетащите файлы', visible = false }) => (\n \n \n {text}\n
\n)" + }, + "description": "Компонент оверлея", + "name": "Overlay", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "onDrop": { + "defaultValue": null, + "description": "Обработчик события 'drop'", + "name": "onDrop", + "required": false, + "type": { + "name": "((files: File[]) => void) | undefined" + } + }, + "onDragOver": { + "defaultValue": null, + "description": "Обработчик события 'dragover'", + "name": "onDragOver", + "required": false, + "type": { + "name": "((event: DragEvent) => void) | undefined" + } + }, + "onDragLeave": { + "defaultValue": null, + "description": "Обработчик события 'dragleave'", + "name": "onDragLeave", + "required": false, + "type": { + "name": "((event: DragEvent) => void) | undefined" + } + }, + "onDragEnter": { + "defaultValue": null, + "description": "Обработчик события 'dragenter'", + "name": "onDragEnter", + "required": false, + "type": { + "name": "((event: DragEvent) => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние элементы.", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "render(() => {\nconst [filesList, setFilesList] = React.useState([]);\nconst [ downloadStatus, setDownloadStatus] = React.useState('success');\n\nconst handleDrop = files => {\nsetFilesList(\nArray.from(files)\n.map(file => file.name)\n.filter(Boolean),\n);\n};\nconst onDownloadStatusChange = (_, payload) => {\nsetDownloadStatus(payload.value);\nsetFilesList([])\n};\n\nconst stylesStatus = {\ndisplay: 'flex',\nflexDirection: 'column',\nalignItems: 'center',\njustifyContent: 'center',\nwidth: 724,\nheight: 200,\n}\n\nconst stylesText = {\nlineHeight: '24px',\nmarginTop: 8,\n}\n\nconst isError = filesList.length && downloadStatus === 'error';\n\nconst statusDropzone = (text, Icon)=> (\n
\n\n{text}\n
\n)\n\nreturn (\n\n\n{filesList.length > 0 ? (\ndownloadStatus === 'success' ?\nstatusDropzone('Успех',CheckmarkMIcon ) :\nstatusDropzone('Ошибка',CrossMIcon )\n) : (\nstatusDropzone('Перетащите файлы',ContainerMIcon )\n)}\n\n\n\n\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/file-upload-item.json b/packages/mcp/src/data/v50.16.0/file-upload-item.json new file mode 100644 index 0000000000..daa4e340b1 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/file-upload-item.json @@ -0,0 +1,300 @@ +{ + "packageName": "file-upload-item", + "displayName": "FileUploadItemComponent", + "description": "Используется для отображения загружаемого файла.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "id": { + "defaultValue": { + "value": "0" + }, + "description": "Идентификатор элемента", + "name": "id", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "title": { + "defaultValue": { + "value": "" + }, + "description": "Имя файла / заголовок", + "name": "title", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "subtitle": { + "defaultValue": null, + "description": "Подзаголовок файла", + "name": "subtitle", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "size": { + "defaultValue": null, + "description": "Размер файла", + "name": "size", + "required": false, + "type": { + "name": "string | number | undefined" + } + }, + "uploadDate": { + "defaultValue": null, + "description": "Дата загрузки файла", + "name": "uploadDate", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "downloadLink": { + "defaultValue": null, + "description": "Ссылка на файл. Если прокидывается этот параметр, то появляется кнопка скачивания", + "name": "downloadLink", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "download": { + "defaultValue": null, + "description": "Рекомендует браузеру скачивать контент по ссылке.\nВ проп может быть передано рекомендуемое название скачиваемого файла.", + "name": "download", + "required": false, + "type": { + "name": "string | true | undefined" + } + }, + "showDelete": { + "defaultValue": null, + "description": "Отображение кнопки удаления", + "name": "showDelete", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "showRestore": { + "defaultValue": null, + "description": "Отображение кнопки восстановления", + "name": "showRestore", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "uploadStatus": { + "defaultValue": null, + "description": "Статус загрузки файла", + "name": "uploadStatus", + "required": false, + "type": { + "name": "FileUploadItemStatus | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Сообщение об ошибке", + "name": "error", + "required": false, + "type": { + "name": "string | string[] | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние элементы", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "onDownload": { + "defaultValue": null, + "description": "Обработчик загрузки файла", + "name": "onDownload", + "required": false, + "type": { + "name": "((id: string) => void) | undefined" + } + }, + "onDelete": { + "defaultValue": null, + "description": "Обработчик удаления файла", + "name": "onDelete", + "required": false, + "type": { + "name": "((id: string, event?: MouseEvent | undefined) => void) | undefined" + } + }, + "onRestore": { + "defaultValue": null, + "description": "Обработчик восстановления файла", + "name": "onRestore", + "required": false, + "type": { + "name": "((id: string) => void) | undefined" + } + }, + "disableButtons": { + "defaultValue": null, + "description": "Управление активностью кнопок", + "name": "disableButtons", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "isClickable": { + "defaultValue": { + "value": true + }, + "description": "Управление отображением кликабельности элемента Content", + "name": "isClickable", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "target": { + "defaultValue": null, + "description": "Указывает, где открыть скачиваемый документ", + "name": "target", + "required": false, + "type": { + "name": "HTMLAttributeAnchorTarget | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "iconStyle": { + "defaultValue": { + "value": "gray" + }, + "description": "Цвет заполнения иконки", + "name": "iconStyle", + "required": false, + "type": { + "name": "\"gray\" | \"colored\" | undefined" + } + }, + "customIcon": { + "defaultValue": null, + "description": "Кастомная иконка", + "name": "customIcon", + "required": false, + "type": { + "name": "ElementType<{ className?: string | undefined; }> | undefined" + } + }, + "progressBar": { + "defaultValue": { + "value": 0 + }, + "description": "Шкала прогресса\nот 0 до 100", + "name": "progressBar", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "progressBarAvailable": { + "defaultValue": { + "value": true + }, + "description": "Шкала прогресса", + "name": "progressBarAvailable", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "customContent": { + "defaultValue": null, + "description": "Кастомный контент", + "name": "customContent", + "required": false, + "type": { + "name": "ElementType | undefined" + } + }, + "truncate": { + "defaultValue": { + "value": "false" + }, + "description": "Отсечение контента", + "name": "truncate", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "imageUrl": { + "defaultValue": null, + "description": "Фоновое изображение. Имеет приоритет над иконкой и заливкой", + "name": "imageUrl", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "backgroundColor": { + "defaultValue": null, + "description": "Цвет заливки `StatusControl`", + "name": "backgroundColor", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Типы файлов", + "description": "Для разных типов файлов можно использовать различные иконки.", + "desktop": "render(() => {\nconst radioButtons = [\n{ title: 'Нет файла', extension: 'Нет файла' },\n{ title: 'Пример.docx', extension: 'DocX' },\n{ title: 'Пример.pdf', extension: 'PDF' },\n{ title: 'Пример.xls', extension: 'XLS' },\n{ title: 'Пример.1c', extension: '1C' },\n{ title: 'Фото газеты.jpg', extension: 'Img' },\n{ title: 'Пример.fig', extension: 'Другой тип' },\n{ title: '2 файла', extension: 'Несколько файлов' },\n];\n\nconst [status, setStatus] = React.useState('INITIAL');\nconst [title, setTitle] = React.useState('Прикрепите файл');\nconst [checked, setChecked] = React.useState(0);\nconst [progressBar, setProgressBar] = React.useState(0);\nconst [switchChecked, setSwitchChecked] = React.useState(false);\n\nconst handleChange = (index) => () => {\nsetChecked(index);\nsetProgressBar(0);\nsetTitle(radioButtons[index].title);\nsetStatus(index === 0 ? 'INITIAL' : 'UPLOADED');\n};\n\nconst handleDelete = () => {\nsetChecked(0);\nsetTitle(radioButtons[0].title);\nsetStatus('INITIAL');\n};\n\nconst handleSwitchChange = () => {\nsetSwitchChecked((prev) => !prev);\n};\n\nconst isImg = radioButtons[checked].extension === 'Img';\n\nreturn (\n\n
\n\n\n\n\n\n
\n\nКонтент\n\n{radioButtons.map((button, index) => (\n\n\n\n\n))}\n\n\n\n\n\n);\n});" + }, + { + "title": "Загрузка файла", + "description": "Результатом загрузки может быть как успех, так и ошибка.", + "desktop": "render(() => {\nconst [status, setStatus] = React.useState('INITIAL');\nconst [title, setTitle] = React.useState('Прикрепите файл');\nconst [progressBar, setProgressBar] = React.useState(0);\nconst [isProgressKnown, setIsProgressKnown] = React.useState(false);\nconst [error, setError] = React.useState('');\n\nconst isUploading = status === 'UPLOADING' || status === 'LOADING';\nconst subtitle = isUploading ? 'Загружается' : 'Нет файла';\n\nconst distance = 100;\nconst duration = 500;\nconst spinnerDuration = 5000;\nlet startAnimation = null;\n\nconst resetState = () => {\nsetError('');\nsetProgressBar(0);\nsetStatus('INITIAL');\n};\n\nconst measure = (timestamp, status, isSpinner = false) => {\nif (!startAnimation) {\nstartAnimation = timestamp;\n}\n\nconst elapsed = timestamp - startAnimation;\nconst currentDuration = isSpinner ? spinnerDuration : duration;\n\nif (isSpinner) {\nif (elapsed < currentDuration) {\nreturn requestAnimationFrame((t) => measure(t, status, isSpinner));\n}\n} else {\nconst progress = elapsed / currentDuration;\nconst progressValue = progress * distance;\nsetProgressBar(progressValue);\n\nif (progress < 1) {\nreturn requestAnimationFrame((t) => measure(t, status, isSpinner));\n}\n}\n\nif (status === 'SUCCESS') {\nsetStatus(status);\n} else if (status === 'ERROR') {\nsetStatus('ERROR');\nsetError('Описание первой ошибки');\n} else if (status === 'MULTI_ERROR') {\nsetStatus('ERROR');\nsetError(['Описание первой ошибки', 'Описание второй ошибки']);\n}\n};\n\nconst startUpload = (finalStatus, errorMessage) => {\nsetError('');\nsetProgressBar(0);\nsetTitle('Пример.docx');\n\nif (!isProgressKnown) {\nsetStatus('LOADING');\nrequestAnimationFrame((t) => measure(t, finalStatus, true));\n} else {\nsetStatus('UPLOADING');\nrequestAnimationFrame((t) => measure(t, finalStatus));\n}\n};\n\nconst handleSuccessClick = () => startUpload('SUCCESS');\nconst handleError = () => startUpload('ERROR', 'Описание первой ошибки');\nconst handleMultiError = () =>\nstartUpload('MULTI_ERROR', ['Описание первой ошибки', 'Описание второй ошибки']);\n\nconst handleToggleChange = () => {\nsetIsProgressKnown((prev) => !prev);\nresetState();\n};\n\nreturn (\n\n\n\n\n\n\n\n
\n\n\n\n\n\n
\n\n\n\n);\n});" + }, + { + "title": "Действия с загруженным файлом", + "description": "Загруженный файл можно скачать или удалить, а удалённый восстановить.", + "desktop": "render(() => {\nconst [isRestore, showIsRestore] = React.useState({\nelement_1: false,\nelement_2: false,\n});\n\nconst handleDelete = (element) => () => {\nshowIsRestore((prev) => ({\n...prev,\n[element]: true,\n}));\n};\n\nconst handleRestore = (element) => () => {\nshowIsRestore((prev) => ({\n...prev,\n[element]: false,\n}));\n};\n\nreturn (\n\n
\n\n\n\n\n\n\n })}\n>\n\n\n\n\n
\n\n);\n});" + }, + { + "title": "Примеры использования", + "description": "Использование в качестве кнопки для прикрепления файла. Прогресс загрузки файла может отображаться самой кнопкой. Такой подход хорошо подходит, когда нужно загрузить один файл.", + "desktop": "render(() => {\nconst [status, setStatus] = React.useState('INITIAL');\nconst [title, setTitle] = React.useState('Прикрепите файл');\nconst [size, setSize] = React.useState(0);\nconst [imageUrl, setImageUrl] = React.useState(null);\nconst [isImage, setIsImage] = React.useState(false);\nconst [isShowDelete, setIsShowDelete] = React.useState(false);\nconst inputRef = React.useRef(null);\n\nconst handleFileChange = (e) => {\nconst file = e.target.files[0];\nsetStatus('SUCCESS');\nsetTitle(file.name);\nsetSize(file.size);\nsetImageUrl('');\nsetIsShowDelete(true);\n\n// если тип фала image, добавляем картинку как иконку\nif (file && file.type.includes('image')) {\nsetIsImage(true);\nconst reader = new FileReader();\n\nreader.onloadend = () => {\nsetImageUrl(reader.result);\n};\n\nreader.readAsDataURL(file);\n}\n};\n\nconst handleDelete = () => {\nsetStatus('INITIAL');\nsetImageUrl('');\nsetTitle('Прикрепите файл');\nsetIsShowDelete(false);\ninputRef.current.value = null;\n};\n\nreturn (\n\n\n\n\n\n\n\n);\n});" + }, + { + "title": "Кастомизация", + "description": "Каждый слот компонента может быть кастомизирован.", + "desktop": "render(() => {\nconst commonStyles = {\nheight: 48,\nborder: '1px dashed var(--color-light-status-info)',\nborderRadius: '8px',\nbackgroundColor: 'var(--color-light-status-muted-alt-info)',\n};\n\nconst leftAddonStyles = {\nwidth: 48,\n...commonStyles,\n};\n\nconst contentStyles = {\nwidth: 232,\n...commonStyles,\n};\n\nconst rightAddonStyles = {\nwidth: 80,\n...commonStyles,\n};\n\nreturn (\n\n
\n
\n
\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/filter-tag.json b/packages/mcp/src/data/v50.16.0/filter-tag.json new file mode 100644 index 0000000000..ab8294714b --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/filter-tag.json @@ -0,0 +1,203 @@ +{ + "packageName": "filter-tag", + "displayName": "FilterTag", + "description": "Используется чтобы вывести параметры фильтрации и отобразить примененное значение.", + "props": { + "children": { + "defaultValue": null, + "description": "Контент", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClick": { + "defaultValue": null, + "description": "Обработчик клика", + "name": "onClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "size": { + "defaultValue": null, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 32 | undefined" + } + }, + "view": { + "defaultValue": null, + "description": "Стиль тега", + "name": "view", + "required": false, + "type": { + "name": "\"filled\" | \"outlined\" | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Состояние блокировки", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "checked": { + "defaultValue": null, + "description": "Состояние выбора", + "name": "checked", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "block": { + "defaultValue": { + "value": "false" + }, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик очистки", + "name": "onClear", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "shape": { + "defaultValue": { + "value": "rounded" + }, + "description": "Форма тега", + "name": "shape", + "required": false, + "type": { + "name": "\"rounded\" | \"rectangular\" | undefined" + } + }, + "open": { + "defaultValue": null, + "description": "Состояние открытия", + "name": "open", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "showClear": { + "defaultValue": null, + "description": "Показывать крестик для очистки выбора", + "name": "showClear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Группа фильтров", + "description": "Обычно фильтры объединяются в группу, в рамках группы используется один паттерн отображения лейбла.", + "desktop": "// Одиночный выбор\nconst CustomField = ({\nlabel,\nselected,\nsetSelectedItems,\ninnerProps: { ref, ...restInnerProps },\n...restProps\n}) => {\nconst checkedContent = (\n\n{!label && 'Одиночный выбор:'}\n {selected && selected.content}\n\n);\n\nconst contentLabel = Одиночный выбор;\n\nreturn (\n
\n setSelectedItems([])}\nchecked={selected}\n{...restInnerProps}\n{...restProps}\n>\n{selected ? checkedContent : contentLabel}\n\n
\n);\n};\n\n// Множественный выбор\nconst CustomFieldMultiple = ({\nlabel,\nselected,\nsetSelectedItems,\nselectedMultiple,\ninnerProps: { ref, ...restInnerProps },\n...restProps\n}) => {\nconst content = selected && selected.content;\n\nconst checkedContent = (\n\n{!label && 'Множественный выбор:'}\n\n{' '}\n{selectedMultiple.length !== 1 ? `Выбрано ${selectedMultiple.length}` : content}\n\n\n);\n\nconst contentLabel = Множественный выбор;\n\nreturn (\n
\n setSelectedItems([])}\nchecked={selected}\n{...restInnerProps}\n{...restProps}\n>\n{selected ? checkedContent : contentLabel}\n\n
\n);\n};\n\nrender(() => {\nconst options = React.useMemo(\n() => [\n{ key: '1', content: 'Aurum' },\n{ key: '2', content: 'Bercelium' },\n{ key: '3', content: 'Curium' },\n{ key: '4', content: 'Neptunium' },\n{ key: '5', content: 'Plutonuim' },\n],\n[],\n);\n\nconst [label, setLabel] = React.useState(false);\n\nconst [selected, setSelected] = React.useState([]);\n\nconst handleChangeSelected = ({ selectedMultiple }) => {\nsetSelected(selectedMultiple);\n};\n\nconst [selectedMultiple, setSelectedMultiple] = React.useState([]);\nconst handleChangeMultiple = ({ selectedMultiple }) => {\nsetSelectedMultiple(selectedMultiple.map((option) => option.key));\n};\n\n// Диапазон значений\nconst [filterTag, setFilterTag] = React.useState(null);\nconst [open, setOpen] = React.useState(false);\nconst [value, setValue] = React.useState();\nconst { selectedFrom, selectedTo, updatePeriod } = usePeriod();\n\nconst handleOpen = () => {\nsetOpen(!open);\n};\n\nconst handleClear = () => {\nsetOpen(false);\nupdatePeriod(null, null);\n};\n\nconst handleUpdatePeriodr = (date) => {\nupdatePeriod(date);\n\nif (selectedFrom) {\nsetOpen(false);\n}\n};\n\nconst handleFilterTagRef = (node) => {\nsetFilterTag(node);\n};\n\nconst handleBlur = (ref, handleClick) => {\nReact.useEffect(() => {\nconst listener = (event) => {\nif (ref.current && !ref.current.contains(event.target)) {\nhandleClick(event);\n}\n};\n\ndocument.addEventListener('mousedown', listener);\ndocument.addEventListener('touchstart', listener);\n\nreturn () => {\ndocument.removeEventListener('mousedown', listener);\ndocument.removeEventListener('touchstart', listener);\n};\n}, [ref, handleClick]);\n};\nconst calendarRef = React.useRef(null);\n\nhandleBlur(calendarRef, (event) => {\nif (filterTag && !filterTag.contains(event.target)) {\nhandleOpen();\n}\n});\n\nconst getDateString = React.useCallback((date) => {\nconst day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();\nconst month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;\nconst year = date.getFullYear();\n\nreturn `${day}.${month}.${year}`;\n}, []);\n\nconst selectedRange = React.useMemo(() => {\nif (selectedFrom && selectedTo) {\nconst selectedFromDate = new Date(selectedFrom);\nconst selectedToDate = new Date(selectedTo);\nreturn `${getDateString(selectedFromDate)} – ${getDateString(selectedToDate)}`;\n}\nreturn '';\n}, [selectedFrom, selectedTo]);\n\nconst checkedContent = (\n\n{!label && 'Диапазон значений:'}\n {selectedRange && selectedRange}\n\n);\nconst content = Диапазон значений;\n\nconst css = `\ndiv {\nborder-radius: var(--border-radius-8);\n}\n`;\n\nreturn (\n<>\n\n\n\n\n\n\n\n\n\n\n{selectedRange ? checkedContent : content}\n\n\n setLabel(!label)}\n/>\n\n);\n});", + "mobile": "// Одиночный выбор\nconst CustomField = ({\nlabel,\nselected,\nsetSelectedItems,\ninnerProps: { ref, ...restInnerProps },\n...restProps\n}) => {\nconst checkedContent = (\n\n{!label && 'Одиночный выбор:'}\n {selected && selected.content}\n\n);\n\nconst contentLabel = Одиночный выбор;\n\nreturn (\n
\n setSelectedItems([])}\nchecked={selected}\n{...restInnerProps}\n{...restProps}\n>\n{selected ? checkedContent : contentLabel}\n\n
\n);\n};\n\n// Множественный выбор\nconst CustomFieldMultiple = ({\nlabel,\nselected,\nsetSelectedItems,\nselectedMultiple,\ninnerProps: { ref, ...restInnerProps },\n...restProps\n}) => {\nconst content = selected && selected.content;\n\nconst checkedContent = (\n\n{!label && 'Множественный выбор:'}\n\n{' '}\n{selectedMultiple.length !== 1 ? `Выбрано ${selectedMultiple.length}` : content}\n\n\n);\n\nconst contentLabel = Множественный выбор;\n\nreturn (\n
\n setSelectedItems([])}\nchecked={selected}\n{...restInnerProps}\n{...restProps}\n>\n{selected ? checkedContent : contentLabel}\n\n
\n);\n};\n\nrender(() => {\nconst options = [\n{ key: '1', content: 'Aurum' },\n{ key: '2', content: 'Bercelium' },\n{ key: '3', content: 'Curium' },\n{ key: '4', content: 'Neptunium' },\n{ key: '5', content: 'Plutonuim' },\n];\n\nconst [label, setLabel] = React.useState(false);\n\nconst [selected, setSelected] = React.useState([]);\n\nconst handleChangeSelected = ({ selectedMultiple }) => {\nsetSelected(selectedMultiple);\n};\n\nconst [selectedMultiple, setSelectedMultiple] = React.useState([]);\nconst handleChangeMultiple = ({ selectedMultiple }) => {\nsetSelectedMultiple(selectedMultiple.map((option) => option.key));\n};\n\n// Диапазон значений\nconst [open, setOpen] = React.useState(false);\nconst [value, setValue] = React.useState();\nconst { selectedFrom, selectedTo, updatePeriod } = usePeriod();\n\nconst handleOpen = () => {\nsetOpen(!open);\n};\n\nconst handleClear = () => {\nsetOpen(false);\nupdatePeriod(null, null);\n};\n\nconst handleUpdatePeriodr = (date) => {\nupdatePeriod(date);\n\nif (selectedFrom) {\nsetOpen(false);\n}\n};\n\nconst getDateString = React.useCallback((date) => {\nconst day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();\nconst month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;\nconst year = date.getFullYear();\n\nreturn `${day}.${month}.${year}`;\n}, []);\n\nconst selectedRange = React.useMemo(() => {\nif (selectedFrom && selectedTo) {\nconst selectedFromDate = new Date(selectedFrom);\nconst selectedToDate = new Date(selectedTo);\nreturn `${getDateString(selectedFromDate)} - ${getDateString(selectedToDate)}`;\n}\nreturn '';\n}, [selectedFrom, selectedTo]);\n\nconst checkedContent = (\n\n{!label && 'Диапазон значений:'}\n {selectedRange && selectedRange}\n\n);\nconst content = Диапазон значений;\n\nreturn (\n<>\n\n\n\n\n setOpen(false)}\nvalue={value}\nselectedFrom={selectedFrom}\nselectedTo={selectedTo}\nonChange={handleUpdatePeriodr}\nselectorView='month-only'\n/>\n\n{selectedRange ? checkedContent : content}\n\n\n setLabel(!label)}\n/>\n\n);\n});" + }, + { + "title": "Предзаполненное значение фильтра", + "description": "Компонент может иметь предзаполненное значение, в таком случае в заполненном состоянии у него не может быть крестика очистки.", + "desktop": "const CustomField = ({\nlabel,\nselected,\nsetSelectedItems,\ninnerProps: { ref, ...restInnerProps },\n...restProps\n}) => (\n
\n\n{selected.content}\n\n
\n);\nrender(() => {\nconst options = React.useMemo(\n() => [\n{ key: '1', content: 'По возрастанию' },\n{ key: '2', content: 'По убыванию' },\n],\n[],\n);\n\nconst [selected, setSelected] = React.useState([options[0]]);\n\nconst handleChangeSelected = ({ selectedMultiple }) => {\nsetSelected(selectedMultiple);\n};\n\nreturn (\n\n);\n});", + "mobile": "const CustomField = ({\nlabel,\nselected,\nsetSelectedItems,\ninnerProps: { ref, ...restInnerProps },\n...restProps\n}) => (\n
\n\n{selected.content}\n\n
\n);\nrender(() => {\nconst options = React.useMemo(\n() => [\n{ key: '1', content: 'По возрастанию' },\n{ key: '2', content: 'По убыванию' },\n],\n[],\n);\n\nconst [selected, setSelected] = React.useState([options[0]]);\n\nconst handleChangeSelected = ({ selectedMultiple }) => {\nsetSelected(selectedMultiple);\n};\n\nreturn (\n\n);\n});" + }, + { + "title": "Состояния", + "description": "Таб может находиться в активном и неактивном состоянии. Взаимодействие может быть ограничено с помощью свойства `disabled`.", + "desktop": "render(() => {\nconst [disabled, setDisabled] = React.useState(false);\n\nreturn (\n\n\n\nLabel\n\n\n\n{disabled ? (\nLabel\n) : (\n\nLabel: Value\n\n)}\n\n\n\n setDisabled((prevState) => !prevState)}\n/>\n\n);\n});" + }, + { + "title": "Дополнительный слот", + "description": "С помощью слота leftAddons можно кастомизировать фильтртэг.", + "desktop": "render(() => {\nconst [leftAddons, setLeftAddons] = React.useState(true);\nconst [selected, setSelected] = React.useState(false);\n\nconst addon = () => {\nif (leftAddons) {\nreturn (\n\n);\n}\n\nreturn null;\n};\n\nreturn (\n\n\n{selected ? (\n\nLabel: Value\n\n) : (\nLabel\n)}\n\n\n setLeftAddons((prevState) => !prevState)}\n/>\n\n setSelected((prevState) => !prevState)}\n/>\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/form-control.json b/packages/mcp/src/data/v50.16.0/form-control.json new file mode 100644 index 0000000000..585c5cc6a4 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/form-control.json @@ -0,0 +1,261 @@ +{ + "packageName": "form-control", + "displayName": "FormControl", + "description": "Базовый компонент для построения полей ввода. Не может быть использован в чистом виде.", + "props": { + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля слота слева используется модификатор -left-addons, слота справа -right-addons,\nошибки -error-message, текста подсказки -hint, внутренней части компонента -inner", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "size": { + "defaultValue": { + "value": "48" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Заблокированное состояние", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "colors": { + "defaultValue": null, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "readOnly": { + "defaultValue": null, + "description": "Cостояние только для чтения", + "name": "readOnly", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл компонента", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки левых аддонов", + "name": "leftAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "rightAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки правых аддонов", + "name": "rightAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "bottomAddons": { + "defaultValue": null, + "description": "Слот под полем", + "name": "bottomAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "labelClassName": { + "defaultValue": null, + "description": "Дополнительный класс для лейбла", + "name": "labelClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "addonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для аддонов", + "name": "addonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "filled": { + "defaultValue": null, + "description": "Заполненное состояние", + "name": "filled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "focused": { + "defaultValue": null, + "description": "Выбранное (фокус) состояние", + "name": "focused", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "inputWrapperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "inputWrapperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Размеры", + "description": "Компонент доступен в размерах 72, 64, 56, 48, 40.", + "desktop": "
\n\n\n\n\n\n\n\n\n\n
" + }, + { + "title": "Лейбл", + "description": "Лейбл может быть размещен внутри либо снаружи инпута или отсутствовать.", + "desktop": "
\n\n\n\n\n\n
" + }, + { + "title": "Префиксы и суффиксы", + "description": "Инпут может содержать предзаполненное значение, располагающееся спереди или сзади вводимого пользователем значения.", + "desktop": "render(() => {\nconst SuffixInputComponent = isMobile() ? withSuffix(InputMobile) : withSuffix(InputDesktop);\n\nreturn (\n
\n Suffix}\nbreakpoint={BREAKPOINT}\n/>\n
\n);\n});" + }, + { + "title": "Хинт", + "description": "Под полем ввода можно разместить подсказку.", + "desktop": "
\n\n
" + }, + { + "title": "Аддоны", + "description": "С помощью `leftAddons` и `rightAddons` можно кастомизировать инпут. Каждый аддон может содержать до двух элементов.\nТип, приоритет расположения контента в слотах и механики взаимодействия описаны в спецификациях к конкретным типам инпутов.", + "desktop": "render(() => {\nconst styleWrapperIcons = {\nheight: '100%',\ndisplay: 'flex',\ngap: 4,\n};\n\nreturn (\n
\n\n}\n/>\n\n\n}\n/>\n\n\n\n\n
\n}\nrightAddons={\n
\n\n\n
\n}\n/>\n
\n);\n});" + }, + { + "title": "BottomAddon", + "description": "При необходимости в BottomAddon может быть передан любой контент, например шкала для слайдера.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState(3);\n\nreturn (\n
\n setValue(value)}\nbreakpoint={BREAKPOINT}\n/>\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/gallery.json b/packages/mcp/src/data/v50.16.0/gallery.json new file mode 100644 index 0000000000..306e3816f2 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/gallery.json @@ -0,0 +1,95 @@ +{ + "packageName": "gallery", + "displayName": "Gallery", + "description": "Используется для просмотра изображений.", + "props": { + "open": { + "defaultValue": null, + "description": "Управление видимостью", + "name": "open", + "required": true, + "type": { + "name": "boolean" + } + }, + "images": { + "defaultValue": null, + "description": "Массив изображений", + "name": "images", + "required": true, + "type": { + "name": "GalleryImage[]" + } + }, + "loop": { + "defaultValue": { + "value": true + }, + "description": "Зациклить галерею", + "name": "loop", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "initialSlide": { + "defaultValue": { + "value": 0 + }, + "description": "Индекс открытого изображение", + "name": "initialSlide", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "onClose": { + "defaultValue": null, + "description": "Обработчик закрытия", + "name": "onClose", + "required": true, + "type": { + "name": "() => void" + } + }, + "slideIndex": { + "defaultValue": null, + "description": "Индекс текущего изображения", + "name": "slideIndex", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "onSlideIndexChange": { + "defaultValue": null, + "description": "Обработчик изменения текущего изображения", + "name": "onSlideIndexChange", + "required": false, + "type": { + "name": "((index: number) => void) | undefined" + } + }, + "popupClassName": { + "defaultValue": null, + "description": "Дополнительный класс для попапа", + "name": "popupClassName", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "const images = [\n{\nname: 'Вертикальное изображение',\nsrc: './images/gallery_1.jpg',\n},\n{\nname: 'Горизонтальное изображение',\nsrc: './images/gallery_2.jpg',\n},\n{\nname: 'Квадратное изображение',\nsrc: './images/gallery_3.jpg',\n},\n{\nname: 'Маленькое изображение',\nsrc: './images/gallery_4.jpg',\n},\n{\nname: 'Alfa promo.m3u8',\nsrc: 'https://alfavideo.servicecdn.ru/videos/101064_31s0hnwZaamhbwE/master.m3u8',\n},\n{\nname: 'Битое изображение.jpg',\nsrc: 'https://picsum.photos',\n},\n];\n\nconst video = [\n{\nname: 'Alfa promo.m3u8',\nsrc: 'https://alfavideo.servicecdn.ru/videos/101064_31s0hnwZaamhbwE/master.m3u8',\n},\n];\n\nconst imagesQuantityMapper = {\nsome: images,\none: [images[0]],\n'one video': video,\n};\n\nrender(() => {\nconst [open, setOpen] = React.useState(false);\nconst [imagesQuantity, setImagesQuantity] = React.useState('some');\n\nconst onImagesQuantityChange = (_, payload) => {\nsetImagesQuantity(payload.value);\n};\n\nreturn (\n
\n\n {\nsetOpen(false);\n}}\nimages={imagesQuantityMapper[imagesQuantity]}\n/>\n\n\n\n\n\n\n
\n);\n});" + }, + { + "title": "Галерея с предпросмотром", + "description": "", + "desktop": "const images = [\n{\nname: 'Вертикальное изображение',\nsrc: './images/gallery_1.jpg',\n},\n{\nname: 'Горизонтальное изображение',\nsrc: './images/gallery_2.jpg',\n},\n{\nname: 'Квадратное изображение',\nsrc: './images/gallery_3.jpg',\n},\n{\nname: 'Маленькое изображение',\nsrc: './images/gallery_4.jpg',\n},\n];\n\nrender(() => {\nconst [open, setOpen] = React.useState(false);\nconst [slideIndex, setSlideIndex] = React.useState(0);\n\nconst openGallery = (slideIndex) => {\nsetSlideIndex(slideIndex);\nsetOpen(true);\n};\n\nconst closeGallery = () => setOpen(false);\n\nreturn (\n
\n\n{images.map((image, index) => (\n {\nopenGallery(index);\n}}\nstyle={{\nwidth: '200px',\nheight: '200px',\ncursor: 'pointer',\nbackgroundSize: 'cover',\nbackgroundImage: `url(${image.src})`,\nmargin: '4px',\n}}\n/>\n))}\n
\n\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/gap.json b/packages/mcp/src/data/v50.16.0/gap.json new file mode 100644 index 0000000000..aae13d6d8c --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/gap.json @@ -0,0 +1,63 @@ +{ + "packageName": "gap", + "displayName": "Gap", + "description": "Используется для создания отступов между блоками.", + "props": { + "size": { + "defaultValue": null, + "description": "Размер отступа", + "name": "size", + "required": true, + "type": { + "name": "Size" + } + }, + "direction": { + "defaultValue": { + "value": "vertical" + }, + "description": "Вид отступа (вертикальный или горизонтальный)", + "name": "direction", + "required": false, + "type": { + "name": "\"horizontal\" | \"vertical\" | undefined" + } + }, + "tag": { + "defaultValue": { + "value": "div" + }, + "description": "HTML тег", + "name": "tag", + "required": false, + "type": { + "name": "\"div\" | \"span\" | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "render(() => {\nconst [direction, setDirection] = React.useState('horizontal');\n\nconst stylesAddon={\nwidth: '64px',\nheight: '64px',\nborderRadius: '8px',\nbackgroundColor: 'rgba(38, 55, 88, 0.06)',\nboxSizing: 'border-box',\n}\n\nconst stylesWrapper = {\ndisplay: 'flex',\nflexDirection: direction === 'vertical' ? 'column' : 'row',\n}\n\nreturn (\n
\n
\n
\n\n
\n\n
\n
\n\n setDirection(value)}\nvalue={direction}\n>\n\n\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/generic-wrapper.json b/packages/mcp/src/data/v50.16.0/generic-wrapper.json new file mode 100644 index 0000000000..823b1d7b43 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/generic-wrapper.json @@ -0,0 +1,86 @@ +{ + "packageName": "generic-wrapper", + "displayName": "GenericWrapper", + "description": "", + "props": { + "column": { + "defaultValue": { + "value": false + }, + "description": "Свойство управляет направлением основной оси внутри флекс-контейнера", + "name": "column", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "padding": { + "defaultValue": null, + "description": "Внутренние отступы\n@description 3xs, 2xs, xs, s, m, l, xl deprecated,\nиспользуйте 0, 2, 4, 8, 12, 16, 20, 24", + "name": "padding", + "required": false, + "type": { + "name": "PaddingPropType | undefined" + } + }, + "alignItems": { + "defaultValue": null, + "description": "Свойство для выравнивания элементов внутри контейнера по поперечной оси.", + "name": "alignItems", + "required": false, + "type": { + "name": "\"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\" | undefined" + } + }, + "justifyContent": { + "defaultValue": null, + "description": "Свойство выравнивает флекс-элементы внутри флекс-контейнера по основной оси.", + "name": "justifyContent", + "required": false, + "type": { + "name": "\"start\" | \"end\" | \"center\" | \"between\" | \"around\" | \"evenly\" | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "grow": { + "defaultValue": { + "value": false + }, + "description": "Позволяет заполнить всё доступное пространство родительского элемента.", + "name": "grow", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "gap": { + "defaultValue": null, + "description": "Отступы между элементами флекс-контейнера", + "name": "gap", + "required": false, + "type": { + "name": "GapType | undefined" + } + } + }, + "demos": [ + { + "title": "Лейаут", + "description": "Компонент представляет собой флексовый контейнер с возможностью настройки вертикального и горизонтального расположения дочерних элементов.\nВертикальные и горизонтальные отступы можно настраивать независимо друг от друга.", + "desktop": "render(() => {\nconst [direction, setDirection] = React.useState('horizontal');\n\nconst addon = (\n\n);\n\nreturn (\n\n\n
\n\n{addon}\n{addon}\n{addon}\n\n
\n\n
\n setDirection(value)}\nvalue={direction}\n>\n\n\n\n
\n\n);\n});" + }, + { + "title": "Примеры", + "description": "На базе компонента могут быть собраны готовые для использования в продукте пресеты ячеек.", + "desktop": "\n
\n\nTitle\n\nSubtitle\n\n\n\n\n\n\n\n\n\n\n\nБлаготворительность\n\n25 000 ₽\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nПерекрёсток\n−6 231 ₽\n\n\n\nГипермаркет\n+62 ₽\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Между своими счетами
\n\n+18 777 ₽\n\n\nПополнение\n\nКоплю на мечту\n\n\n\n\n\nПлатёж 14 октября\n\nСумма платежа\n30 600,90 ₽\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nИспользуется вложенность\nОдной ячейки в другую\n\n\n\n\n
\n" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/grid.json b/packages/mcp/src/data/v50.16.0/grid.json new file mode 100644 index 0000000000..b7c92bee81 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/grid.json @@ -0,0 +1,97 @@ +{ + "packageName": "grid", + "displayName": "Row", + "description": "Используется для создания лейаута.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "gutter": { + "defaultValue": null, + "description": "Горизонтальный отступ между колонками.\nВозможные значения: `[0, 8, 16, 24]`\nили `{ mobile: [0..24], tablet: [0..24], desktop: [0..24] }`\nили `{ mobile: { xs: [0..24], s: [0..24], m: [0..24], l: [0..24] },\ntablet: { s: [0..24], m: [0..24] },\ndesktop: { s: [0..24], m: [0..24], l: [0..24], xl: [0..24] } }`.", + "name": "gutter", + "required": false, + "type": { + "name": "ResponsivePropertyType | undefined" + } + }, + "align": { + "defaultValue": null, + "description": "Управление выравниванием колонок по вертикальной оси", + "name": "align", + "required": false, + "type": { + "name": "\"top\" | \"bottom\" | \"middle\" | undefined" + } + }, + "justify": { + "defaultValue": null, + "description": "Управление выравниванием колонок по горизонтальной оси", + "name": "justify", + "required": false, + "type": { + "name": "\"center\" | \"left\" | \"right\" | \"between\" | \"around\" | undefined" + } + }, + "tag": { + "defaultValue": null, + "description": "Html тег компонента.\nИз-за ограничений и багов,\nсуществующих во флексбоксах, невозможно использовать\nнекоторые элементы HTML как flex-контейнеры.", + "name": "tag", + "required": false, + "type": { + "name": "keyof IntrinsicElements | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Контент", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Создание сетки", + "description": "Сетка имеет резиновую систему разметки, которая масштабируется до 12 столбцов. Столбцы должны быть помещены в строки.", + "desktop": "render(() => {\nconst styleCol = {\nlineHeight: '24px',\ncolor: 'var(--color-light-text-secondary)',\nbackground: 'var(--color-light-neutral-translucent-200)',\nborderRadius: '8px',\ntextAlign: 'center',\n};\n\nconst styleRow = { \nbackground: 'var(--color-light-base-bg-primary)', \npadding: '8px 20px',\nmarginTop: '1px',\n};\n\nconst styleWrapper = { \nbackground: 'var(--color-light-neutral-400)', \nmargin: 'var(--gap-20-neg)',\n};\n\nreturn (\n
\n
\n\n\n
12
\n\n\n
\n\n
\n\n{[1, 2].map(key => (\n\n
6
\n\n))}\n\n
\n\n
\n\n{[1, 2, 3].map(key => (\n\n
4
\n\n))}\n\n
\n\n
\n\n{[1, 2, 3, 4].map(key => (\n\n
3
\n\n))}\n\n
\n\n
\n\n{[1, 2, 3, 4, 5, 6].map(key => (\n\n
2
\n\n))}\n\n
\n\n
\n\n{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(key => (\n\n
1
\n\n))}\n\n
\n
\n);\n});" + }, + { + "title": "Работа со строками", + "description": "Элементы внутри строки можно выравнивать по вертикали.", + "desktop": "render(() => {\nconst styleCol = {\nlineHeight: '24px',\ncolor: 'var(--color-light-text-secondary)',\nbackground: 'var(--color-light-neutral-translucent-200)',\nborderRadius: '8px',\ntextAlign: 'center',\n};\n\nconst styleRow = { \nbackground: 'var(--color-light-base-bg-primary)', \npadding: '8px 20px',\nmarginTop: '1px',\n};\n\nconst styleWrapper = { \nbackground: 'var(--color-light-neutral-400)', \nmargin: 'var(--gap-20-neg)',\n};\n\nreturn (\n
\n
\n\n{Array(3).fill('top').map((item, key) => (\n\n
{item}
\n\n))}\n
\n\n
\n
\n\n{Array(3).fill('middle').map((item, key) => (\n\n
{item}
\n\n))}\n
\n\n
\n
\n\n{Array(3).fill('bottom').map((item, key) => (\n\n
{item}
\n\n))}\n
\n\n
\n
\n);\n});" + }, + { + "title": "Работа со столбцами", + "description": "Внутри каждого столбца можно задать индивидуальное выравнивание.", + "desktop": "render(() => {\nconst styleCol = {\nlineHeight: '24px',\ncolor: 'var(--color-light-text-secondary)',\nbackground: 'var(--color-light-neutral-translucent-200)',\nborderRadius: '8px',\ntextAlign: 'center',\n};\n\nconst styleRow = { \nbackground: 'var(--color-light-base-bg-primary)', \npadding: '0px 8px',\nboxSizing: 'border-box',\nmargin: 'var(--gap-20-neg)',\n};\n\nconst style = {\nwidth: 1,\nbackground: 'var(--color-light-neutral-400)'\n};\n\nreturn (\n
\n\n\n
top
\n\n
\n\n
middle
\n\n
\n\n
bottom
\n\n
\n\n
\n);\n});" + }, + { + "title": "Адаптивная ширина", + "description": "Для построения сложного адаптивного интерфейса можно задать сетку для каждого брейкпоинта. \nВ этом примере отступ между колонками равен 16рх на десктопном брейкпоинте и 8рх на мобильном.", + "desktop": "render(() => {\nconst styleCol = {\nheight: '24px',\ncolor: 'var(--color-light-text-secondary)',\nbackground: 'var(--color-light-neutral-translucent-200)',\nborderRadius: '8px',\ntextAlign: 'center',\n};\n\nconst styleRow = { \nbackground: 'var(--color-light-base-bg-primary)', \npadding: '8px 20px',\n};\n\nconst styleWrapper = { \nbackground: 'var(--color-light-neutral-400)', \nmargin: 'var(--gap-20-neg)',\n};\n\nreturn (\n
\n
\n\n{[1, 2, 3].map(key => (\n\n
\n\n))}\n\n
\n
\n);\n});" + }, + { + "title": "Изменение порядка элементов", + "description": "Для изменения порядка можно использовать значение order.", + "desktop": "render(() => {\nconst styleCol = {\nlineHeight: '24px',\ncolor: 'var(--color-light-text-secondary)',\nbackground: 'var(--color-light-neutral-translucent-200)',\nborderRadius: '8px',\ntextAlign: 'center',\n};\n\nconst styleRow = { \nbackground: 'var(--color-light-base-bg-primary)', \npadding: '8px 20px',\n};\n\nconst styleWrapper = { \nbackground: 'var(--color-light-neutral-400)', \nmargin: 'var(--gap-20-neg)',\n};\n\nreturn (\n
\n
\n\n\n
order = 1
\n\n\n
order = 3
\n\n\n
order = 2
\n\n\n
\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/hatching-progress-bar.json b/packages/mcp/src/data/v50.16.0/hatching-progress-bar.json new file mode 100644 index 0000000000..d88e2f3b17 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/hatching-progress-bar.json @@ -0,0 +1,61 @@ +{ + "packageName": "hatching-progress-bar", + "displayName": "HatchingProgressBar", + "description": "Используется для отображения прогресса при заполнении формы.", + "props": { + "value": { + "defaultValue": null, + "description": "Значение заполненной части 0-100", + "name": "value", + "required": true, + "type": { + "name": "number" + } + }, + "hatchValue": { + "defaultValue": null, + "description": "Значение будущей заполненной части 0-100", + "name": "hatchValue", + "required": true, + "type": { + "name": "number" + } + }, + "className": { + "defaultValue": null, + "description": "Css-класс для стилизации", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "view": { + "defaultValue": { + "value": "positive" + }, + "description": "Цвет заполнения", + "name": "view", + "required": false, + "type": { + "name": "\"link\" | \"primary\" | \"secondary\" | \"accent\" | \"tertiary\" | \"positive\" | \"negative\" | \"attention\" | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Id компонента для тестов", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Пример", + "description": "Заливкой обозначается текущий прогресс. \nШтриховкой обозначается прогресс, который будет достигнут при выполнении какого-либо условия.", + "desktop": "" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/icon-button.json b/packages/mcp/src/data/v50.16.0/icon-button.json new file mode 100644 index 0000000000..8eeae48cdc --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/icon-button.json @@ -0,0 +1,165 @@ +{ + "packageName": "icon-button", + "displayName": "IconButtonResponsive", + "description": "Используется для создания кликабельных иконок.", + "props": { + "icon": { + "defaultValue": null, + "description": "Компонент иконки", + "name": "icon", + "required": true, + "type": { + "name": "ElementType<{ className?: string | undefined; }> | ReactElement<{ className?: string | undefined; }, string | JSXElementConstructor>" + } + }, + "view": { + "defaultValue": null, + "description": "Тип кнопки", + "name": "view", + "required": false, + "type": { + "name": "\"primary\" | \"secondary\" | \"transparent\" | \"tertiary\" | \"negative\" | undefined" + } + }, + "size": { + "defaultValue": { + "value": "48" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 32 | 24 | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "transparentBg": { + "defaultValue": { + "value": "false" + }, + "description": "Включает прозрачный фон", + "name": "transparentBg", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "alignIcon": { + "defaultValue": { + "value": "'center'" + }, + "description": "Выравнивание иконки", + "name": "alignIcon", + "required": false, + "type": { + "name": "\"center\" | \"left\" | \"right\" | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "colors": { + "defaultValue": null, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "href": { + "defaultValue": null, + "description": "Выводит ссылку в виде кнопки", + "name": "href", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "loading": { + "defaultValue": { + "value": "false" + }, + "description": "Показать лоадер", + "name": "loading", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024\n1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "Component": { + "defaultValue": null, + "description": "Позволяет использовать кастомный компонент для кнопки (например Link из роутера)", + "name": "Component", + "required": false, + "type": { + "name": "ElementType | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": null, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Виды кнопок", + "description": "Primary, secondary, tertiary, negative.", + "desktop": "\n\n{['primary', 'secondary', 'tertiary', 'negative'].map((view) => (\n\n\n\n))}\n\n" + }, + { + "title": "Размеры компонента", + "description": "Рекомендуется использовать один из пяти размеров, в зависимости от контекста.", + "desktop": "\n{[56, 48, 40, 32, 24].map((size) => (\n\n))}\n" + }, + { + "title": "Размеры иконки", + "description": "Допускается использовать иконку 24 и 16 размера.", + "desktop": "\n\n\n" + }, + { + "title": "Обработка событий", + "description": "С помощью свойства `loading` можно отобразить состояние загрузки. Минимальное время отображения лоадера — 500мс, чтобы при быстрых ответах от сервера кнопка не «моргала».", + "desktop": "render(() => {\nconst [loading, setLoading] = React.useState({\nprimary: false,\nsecondary: false,\n});\n\nconst handleClick = (buttonName, timeout) => {\nsetLoading({ ...loading, [buttonName]: true });\nsetTimeout(() => {\nsetLoading({ ...loading, [buttonName]: false });\n}, timeout);\n};\n\nreturn (\n\n\n\n handleClick('primary', 30)}\n/>\n\n\n handleClick('secondary', 1500)}\n/>\n\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/indicator.json b/packages/mcp/src/data/v50.16.0/indicator.json new file mode 100644 index 0000000000..b657e6aedf --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/indicator.json @@ -0,0 +1,92 @@ +{ + "packageName": "indicator", + "displayName": "Indicator", + "description": "Используется для визаулизации количества уведомлений, сообщений и т. д.", + "props": { + "value": { + "defaultValue": null, + "description": "Значение индикатора", + "name": "value", + "required": false, + "type": { + "name": "number | ReactElement> | undefined" + } + }, + "backgroundColor": { + "defaultValue": null, + "description": "Цвет заливки", + "name": "backgroundColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "height": { + "defaultValue": null, + "description": "Высота компонента, min = 16; max = 48", + "name": "height", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "size": { + "defaultValue": { + "value": "getSize(height, value)" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "40 | 32 | 24 | 20 | 8 | 16 | undefined" + } + }, + "border": { + "defaultValue": null, + "description": "Настройки обводки", + "name": "border", + "required": false, + "type": { + "name": "boolean | Border | undefined" + } + }, + "view": { + "defaultValue": null, + "description": "Пресет компонента", + "name": "view", + "required": false, + "type": { + "name": "\"white\" | \"red\" | \"grey\" | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Размер", + "description": "Компонент занимает заданную высоту, подстраивая под неё свои отступы и стиль текста.", + "desktop": "const styles = {\ndisplay: 'flex',\njustifyContent: 'center',\ngap: '20px',\nwidth: 342,\npadding: 20,\nbackgroundColor: 'var(--color-light-base-bg-secondary)',\nborderRadius: '12px',\nboxSizing: 'border-box',\nalignItems: 'center',\n};\n\nrender(\n\n
\n\n\n\n\n\n\n\n
\n\n);", + "mobile": "const styles = {\ndisplay: 'flex',\njustifyContent: 'center',\ngap: '12px',\nwidth: '100%',\npadding: 20,\nbackgroundColor: 'var(--color-light-base-bg-secondary)',\nborderRadius: '12px',\nboxSizing: 'border-box',\nalignItems: 'center',\n};\n\nrender(\n\n
\n\n\n\n\n\n\n\n
\n\n);" + }, + { + "title": "Виды индикатора", + "description": "Индикатор имеет три преднастроенных вида.", + "desktop": "render(() => {\nconst [border, setBorder] = React.useState(false);\n\nconst styles = {\ndisplay: 'flex',\njustifyContent: 'center',\ngap: '20px',\nwidth: 169,\npadding: 20,\nbackgroundColor: 'var(--color-light-base-bg-secondary)',\nborderRadius: '12px',\nboxSizing: 'border-box',\nalignItems: 'center',\n};\nreturn (\n\n\n
\n\n\n\n
\n\n
\n\n\n\n
\n\n
\n\n\n\n
\n\n setBorder(!border)}\n/>\n\n);\n});", + "mobile": "render(() => {\nconst [border, setBorder] = React.useState(false);\n\nconst styles = {\ndisplay: 'flex',\njustifyContent: 'center',\ngap: '12px',\nwidth: 320,\npadding: 20,\nbackgroundColor: 'var(--color-light-base-bg-secondary)',\nborderRadius: '12px',\nboxSizing: 'border-box',\nalignItems: 'center',\n};\n\nreturn (\n\n\n
\n\n\n\n
\n\n
\n\n\n\n
\n\n
\n\n\n\n
\n\n setBorder(!border)}\n/>\n\n);\n});" + }, + { + "title": "Кастомизация", + "description": "При необходимости, можно задать индикатору кастомный фон, цвет текста, цвет и толщину обводки.", + "desktop": "const styles = {\ndisplay: 'flex',\njustifyContent: 'center',\ngap: '20px',\nwidth: 108,\npadding: 20,\nbackgroundColor: 'var(--color-light-base-bg-secondary)',\nborderRadius: '12px',\nboxSizing: 'border-box',\nalignItems: 'center',\n};\n\nrender(\n\n
\n\n\n
\n\n);", + "mobile": "const styles = {\ndisplay: 'flex',\njustifyContent: 'center',\ngap: '12px',\nwidth: 320,\npadding: 20,\nbackgroundColor: 'var(--color-light-base-bg-secondary)',\nborderRadius: '12px',\nboxSizing: 'border-box',\nalignItems: 'center',\n};\n\nrender(\n\n
\n\n\n
\n\n);" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/input-autocomplete.json b/packages/mcp/src/data/v50.16.0/input-autocomplete.json new file mode 100644 index 0000000000..f55adf595c --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/input-autocomplete.json @@ -0,0 +1,612 @@ +{ + "packageName": "input-autocomplete", + "displayName": "InputAutocomplete", + "description": "Дает возможность выбрать значение из списка доступных, либо ввести своё с помощью клавиатуры.", + "props": { + "mobileProps": { + "defaultValue": null, + "description": "Пропсы для мобильного компонента", + "name": "mobileProps", + "required": false, + "type": { + "name": "MobileProps | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + }, + "Input": { + "defaultValue": null, + "description": "Компонент ввода значения", + "name": "Input", + "required": false, + "type": { + "name": "ComponentType & { breakpoint?: number | undefined; client?: \"desktop\" | \"mobile\" | undefined; defaultMatchMediaValue?: boolean | ... 1 more ... | undefined; } & RefAttributes<...>> | undefined" + } + }, + "inputProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в инпут", + "name": "inputProps", + "required": false, + "type": { + "name": "(Omit & { breakpoint?: number | undefined; client?: \"desktop\" | \"mobile\" | undefined; defaultMatchMediaValue?: boolean | ... 1 more ... | undefined; } & Record<...>) | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Значение поля ввода", + "name": "value", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "readOnly": { + "defaultValue": null, + "description": "Поле доступно только для чтения", + "name": "readOnly", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "success": { + "defaultValue": null, + "description": "Отображение иконки успеха", + "name": "success", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onInput": { + "defaultValue": null, + "description": "Обработчик ввода", + "name": "onInput", + "required": false, + "type": { + "name": "((value: string, reason?: OnInputTypeReason | undefined) => void) | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля пункта меню используется модификатор -option, компонента поиска -search,\nкомпонента выпадающего меню -options-list, компонента BottomSheet -bottom-sheet,\nкомпонента поля -field, компонета FormControl -field-form-control", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "id": { + "defaultValue": null, + "description": "Атрибут id", + "name": "id", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onFocus": { + "defaultValue": null, + "description": "Обработчик фокуса поля", + "name": "onFocus", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | undefined" + } + }, + "onBlur": { + "defaultValue": null, + "description": "Обработчик блюра поля", + "name": "onBlur", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик выбора", + "name": "onChange", + "required": false, + "type": { + "name": "((payload: BaseSelectChangePayload) => void) | undefined" + } + }, + "onScroll": { + "defaultValue": null, + "description": "Обработчик скрола", + "name": "onScroll", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "size": { + "defaultValue": { + "value": "48" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Управление возможностью выбора значения", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "name": { + "defaultValue": null, + "description": "Атрибут name", + "name": "name", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "multiple": { + "defaultValue": null, + "description": "Возможность выбрать несколько значений", + "name": "multiple", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "placeholder": { + "defaultValue": null, + "description": "Плейсхолдер поля", + "name": "placeholder", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clear": { + "defaultValue": null, + "description": "Флаг, показать крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "hint": { + "defaultValue": null, + "description": "Подсказка под полем", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл поля", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на крестик для очистки поля", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "environment": { + "defaultValue": { + "value": "window" + }, + "description": "Контекст окружения для downshift.js", + "name": "environment", + "required": false, + "type": { + "name": "Environment | undefined" + } + }, + "open": { + "defaultValue": null, + "description": "Управление открытием", + "name": "open", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "defaultOpen": { + "defaultValue": null, + "description": "Начальное состояние селекта", + "name": "defaultOpen", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "preventFlip": { + "defaultValue": null, + "description": "Запрещает поповеру менять свою позицию.\nНапример, если места снизу недостаточно,то он все равно будет показан снизу", + "name": "preventFlip", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "popoverPosition": { + "defaultValue": null, + "description": "Позиционирование выпадающего списка", + "name": "popoverPosition", + "required": false, + "type": { + "name": "Position | undefined" + } + }, + "zIndexPopover": { + "defaultValue": null, + "description": "z-index поповера", + "name": "zIndexPopover", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "Arrow": { + "defaultValue": null, + "description": "Компонент стрелки", + "name": "Arrow", + "required": false, + "type": { + "name": "false | ComponentType | null | undefined" + } + }, + "selected": { + "defaultValue": null, + "description": "Список value выбранных пунктов (controlled-селект)", + "name": "selected", + "required": false, + "type": { + "name": "string | OptionShape | (string | OptionShape)[] | null | undefined" + } + }, + "closeOnSelect": { + "defaultValue": null, + "description": "Закрывать меню после выбора?", + "name": "closeOnSelect", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "allowUnselect": { + "defaultValue": null, + "description": "Позволяет снять выбранное значение", + "name": "allowUnselect", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "options": { + "defaultValue": null, + "description": "Список вариантов выбора", + "name": "options", + "required": true, + "type": { + "name": "(OptionShape | GroupShape)[]" + } + }, + "searchProps": { + "defaultValue": null, + "description": "Настройки поиска", + "name": "searchProps", + "required": false, + "type": { + "name": "{ componentProps?: SearchProps | undefined; accessor?: ((option: OptionShape) => string) | undefined; filterFn?: ((optionText: string, search: string) => boolean) | undefined; value?: string | undefined; onChange?: ((value: string) => void) | undefined; filterGroup?: boolean | undefined; groupAccessor?: ((group: Gro..." + } + }, + "Search": { + "defaultValue": null, + "description": "Компонент поиска", + "name": "Search", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "optionsListClassName": { + "defaultValue": null, + "description": "Дополнительный класс выпадающего меню", + "name": "optionsListClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionClassName": { + "defaultValue": null, + "description": "Дополнительный класс для пункта меню", + "name": "optionClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionGroupClassName": { + "defaultValue": null, + "description": "Дополнительный класс для компонента группы пунктов", + "name": "optionGroupClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "popperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поповера", + "name": "popperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionsSize": { + "defaultValue": null, + "description": "Размер пунктов меню", + "name": "optionsSize", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "optionsListWidth": { + "defaultValue": null, + "description": "Управляет шириной выпадающего меню.\nШирину определяет контент, либо ширина равна ширине поля", + "name": "optionsListWidth", + "required": false, + "type": { + "name": "\"content\" | \"field\" | undefined" + } + }, + "circularNavigation": { + "defaultValue": null, + "description": "При навигации с клавиатуры переходить от последнего пункта меню к первому и наоборот.", + "name": "circularNavigation", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "visibleOptions": { + "defaultValue": null, + "description": "Количество видимых пунктов меню (5 = 5.5)", + "name": "visibleOptions", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "valueSeparator": { + "defaultValue": null, + "description": "Кастомный разделитель выбранных пунктов (Работает когда не прокинут valueRenderer)", + "name": "valueSeparator", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "Field": { + "defaultValue": null, + "description": "Компонент поля", + "name": "Field", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "fieldProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент поля", + "name": "fieldProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "optionsListProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент списка", + "name": "optionsListProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "optionProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент пункта меню", + "name": "optionProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "groupOptionProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент группового пункта меню", + "name": "groupOptionProps", + "required": false, + "type": { + "name": "AnyObject | undefined" + } + }, + "OptionsList": { + "defaultValue": null, + "description": "Компонент выпадающего меню", + "name": "OptionsList", + "required": false, + "type": { + "name": "ComponentType & { className?: string | undefined; optionGroupClassName?: string | undefined; scrollbarClassName?: string | undefined; ... 28 more ...; limitDynamicOptionGroupSize?: boolean | undefined; } & RefAttributes<...>> | undefined" + } + }, + "Optgroup": { + "defaultValue": null, + "description": "Компонент группы", + "name": "Optgroup", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "Option": { + "defaultValue": null, + "description": "Компонент пункта меню", + "name": "Option", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "onOpen": { + "defaultValue": null, + "description": "Обработчик открытия\\закрытия селекта", + "name": "onOpen", + "required": false, + "type": { + "name": "((payload: { open?: boolean | undefined; name?: string | undefined; }) => void) | undefined" + } + }, + "updatePopover": { + "defaultValue": null, + "description": "Хранит функцию, с помощью которой можно обновить положение поповера", + "name": "updatePopover", + "required": false, + "type": { + "name": "MutableRefObject<(() => void) | undefined> | undefined" + } + }, + "showEmptyOptionsList": { + "defaultValue": null, + "description": "Показывать OptionsList, если он пустой", + "name": "showEmptyOptionsList", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "popoverProps": { + "defaultValue": null, + "description": "Дополнительные пропсы для Popover", + "name": "popoverProps", + "required": false, + "type": { + "name": "Omit | undefined" + } + }, + "limitDynamicOptionGroupSize": { + "defaultValue": null, + "description": "Ограничение динамического размера группы вариантов выбора", + "name": "limitDynamicOptionGroupSize", + "required": false, + "type": { + "name": "boolean | undefined" + } + } + }, + "demos": [ + { + "title": "Шеврон", + "description": "Добавляйте шеврон, если пользователю будет удобней выбирать значение, просматривая список, не вводя первые символы.\nЕсли список длинный и вы предполагаете, что пользователь будет вводить значение с клавиатуры, шеврон можно скрыть.", + "desktop": "const options = [\n{ key: 'Neptunium' },\n{ key: 'Plutonium' },\n{ key: 'Americium' },\n{ key: 'Curium' },\n{ key: 'Berkelium' },\n{ key: 'Californium' },\n{ key: 'Einsteinium' },\n{ key: 'Fermium' },\n{ key: 'Mendelevium' },\n{ key: 'Nobelium' },\n{ key: 'Lawrencium' },\n{ key: 'Rutherfordium' },\n{ key: 'Dubnium' },\n{ key: 'Seaborgium' },\n{ key: 'Bohrium' },\n];\n\nrender(() => {\nconst [shownChevron, setShownChevron] = React.useState(false);\nconst [multiple, setMultiple] = React.useState(false);\nconst [showInModal, setShowInModal] = React.useState(false);\nconst [value, setValue] = React.useState('');\n\nconst matchOption = (option, inputValue) =>\noption.key.toLowerCase().includes((inputValue || '').toLowerCase());\n\nconst handleInput = (newValue) => setValue(newValue);\n\nconst handleChange = ({ selected, selectedMultiple }) => {\nif (multiple) {\nconst value = selectedMultiple.length\n? selectedMultiple.map((option) => option.key).join(', ') + ', '\n: '';\nsetValue(value);\n\nreturn;\n}\n\nsetValue(selected ? selected.key : '');\n};\n\nconst inputValues = value.replace(/ /g, '').split(',');\n\nconst selectedOptions = options.filter((option) => inputValues.includes(option.key.trim()));\n\nconst selected = multiple\n? selectedOptions.map((option) => option.key)\n: options.find((o) => o.key === inputValues[0]) || [];\n\nconst getFilteredOptions = () => {\nif (multiple) {\nreturn inputValues.length === selected.length\n// отображаем весь список, если значения в поле ввода совпадают с выбранными значениями в списке\n? options\n// отображаем только совпадения с новым введенным значением, включая уже выбранные элементы\n: options.filter((option) => matchOption(option, inputValues[inputValues.length - 1]));\n}\n\nreturn options.some(({ key }) => key === value)\n? options\n: options.filter((option) => matchOption(option, value));\n};\n\nreturn (\n
\n setValue(''),\nclear: true,\n}}\noptionsListProps={{\nemptyPlaceholder: (\n
\n\nНичего не нашлось\n\n
\n),\n}}\n/>\n\n setShownChevron((prevState) => !prevState)}\n/>\n\n {\nsetMultiple((prevState) => !prevState);\nsetValue('');\n}}\n/>\n{isMobile() && (\n<>\n\n setShowInModal((prevState) => !prevState)}\n/>\n\n)}\n
\n);\n});" + }, + { + "title": "Кастомизация инпута", + "description": "При необходимости можно кастомизировать инпут и выпадающий список.", + "desktop": "render(() => {\nconst matchOption = (option, inputValue) =>\noption.content.toLowerCase().includes((inputValue || '').toLowerCase());\n\nconst mask = [\n/\\d/,\n/\\d/,\n/\\d/,\n/\\d/,\n' ',\n/\\d/,\n/\\d/,\n/\\d/,\n/\\d/,\n' ',\n/\\d/,\n/\\d/,\n/\\d/,\n/\\d/,\n' ',\n/\\d/,\n/\\d/,\n/\\d/,\n/\\d/,\n];\n\nconst cards = [\n{\nkey: 'Карта 1',\ncontent: '4035 5010 0000 0008',\n},\n{\nkey: 'Карта 2',\ncontent: '4360 0000 0100 0005',\n},\n{\nkey: 'Карта 3',\ncontent: '8171 9999 2766 0000',\n},\n{\nkey: 'Карта 4',\ncontent: '5204 2477 5000 1471',\n},\n{\nkey: 'Карта 5',\ncontent: '4111 1111 1111 1111',\n},\n];\n\nconst CardOption = (props) => (\n\n
\n{props.option.content}\n\n\n{props.option.key}\n\n
\n\n);\n\nconst [value, setValue] = React.useState('');\nconst inputRef = React.useRef();\n\nconst handleInput = (newValue) => setValue(newValue);\n\nconst handleChange = ({ selected }) => {\nconst value = selected ? selected.content : null;\nsetValue(value);\nif (value && inputRef.current) {\nrequestAnimationFrame(() =>\ninputRef.current.setSelectionRange(value.length, value.length),\n);\n}\n};\n\nconst filteredOptions = cards.filter((option) => matchOption(option, value));\n\nreturn (\n
\n setValue(''),\n}}\n/>\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/input.json b/packages/mcp/src/data/v50.16.0/input.json new file mode 100644 index 0000000000..135857ed32 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/input.json @@ -0,0 +1,383 @@ +{ + "packageName": "input", + "displayName": "Input", + "description": "Дает возможность указать значение с помощью клавиатуры.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля FormControl используется модификатор -form-control", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "type": { + "defaultValue": null, + "description": "Атрибут type", + "name": "type", + "required": false, + "type": { + "name": "\"number\" | \"text\" | \"tel\" | \"email\" | \"password\" | \"money\" | undefined" + } + }, + "defaultValue": { + "defaultValue": null, + "description": "Начальное значение поля", + "name": "defaultValue", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик поля ввода", + "name": "onChange", + "required": false, + "type": { + "name": "((event: ChangeEvent, payload: { value: string; }) => void) | undefined" + } + }, + "onClick": { + "defaultValue": null, + "description": "Обработчик клика по полю", + "name": "onClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseDown": { + "defaultValue": null, + "description": "Обработчик MouseDown по полю", + "name": "onMouseDown", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseUp": { + "defaultValue": null, + "description": "Обработчик MouseUp по полю", + "name": "onMouseUp", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "size": { + "defaultValue": { + "value": "48" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "colors": { + "defaultValue": null, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Значение поля ввода", + "name": "value", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "bold": { + "defaultValue": null, + "description": "Жирный текст\n@deprecated Используйте {@link BaseInputProps.fontWeight }", + "name": "bold", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "fontWeight": { + "defaultValue": null, + "description": "Вес шрифта инпута, в том числе плейсхолдера", + "name": "fontWeight", + "required": false, + "type": { + "name": "\"bold\" | \"medium\" | \"regular\" | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clear": { + "defaultValue": null, + "description": "Крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "success": { + "defaultValue": null, + "description": "Отображение иконки успеха", + "name": "success", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл компонента", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "wrapperRef": { + "defaultValue": null, + "description": "Ref для обертки input", + "name": "wrapperRef", + "required": false, + "type": { + "name": "Ref | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки левых аддонов", + "name": "leftAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "rightAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки правых аддонов", + "name": "rightAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "bottomAddons": { + "defaultValue": null, + "description": "Слот под инпутом", + "name": "bottomAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "inputClassName": { + "defaultValue": null, + "description": "Дополнительный класс инпута", + "name": "inputClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "labelClassName": { + "defaultValue": null, + "description": "Дополнительный класс для лейбла", + "name": "labelClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "addonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для аддонов", + "name": "addonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "focusedClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен при фокусе", + "name": "focusedClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "filledClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен, если в поле есть значение", + "name": "filledClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку очистки", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "disableUserInput": { + "defaultValue": null, + "description": "Запрещает ввод с клавиатуры", + "name": "disableUserInput", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Размеры", + "description": "Основным типом инпутов в десктопном вебе являются инпуты размера 56 с внутренним расположением лейбла.\nДля мобильного веба рекомендуемый размер 48 с внешним расположением лейбла.", + "desktop": "
\n\n\n\n
" + }, + { + "title": "Валидация", + "description": "См. гайд [валидация](?path=/docs/guidelines-validation--docs).", + "desktop": "render(() => {\nconst [error, setError] = React.useState(false);\n\nreturn (\n
\n
\n\n
\n\n\n\n\n
\n);\n});" + }, + { + "title": "Disabled и ReadOnly", + "description": "Доступный только для чтения инпут может быть выбран с клавиатуры, его значение передается при отправке формы.\nЗаблокированный инпут нельзя выбрать с клавиатуры и его значение не будет отправлено.", + "desktop": "render(() => {\nconst [inputProps, setInputProps] = React.useState({});\n\nreturn (\n
\n
\n\n
\n\n\n\n\n setInputProps({ disabled: true })}\n>\nЗаблокирован\n\n setInputProps({ readOnly: true })}\n>\nТолько чтение\n\n\n
\n);\n});" + }, + { + "title": "Дополнительная информация", + "description": "Для упрощения пользовательского ввода используется несколько паттернов вывода дополнительной информации.\n\n1. Placeholder — подсказка внутри поля, отображается до тех пор, пока пользователь не начнет вводить значение.\n2. Hint — подсказка под полем. Если поле перейдёт в состоянии ошибки hint будет заменен на сообщение об ошибке.\n3. Tooltip — иконка с подсказкой.", + "desktop": "render(() => {\nconst [open, setOpen] = React.useState(false);\n\n/* Указать для IconButton через className */\nconst css = `\nbutton[data-test-id='icon'] {\nmargin-right: var(--gap-12-neg);\n}\n`;\n\nreturn (\n
\n\n\n{`Сообщение тултипа\\nотображается при\\n${\nisMobile() ? 'клике' : 'наведении'\n}`}\n\n}\nonOpen={() => setOpen(true)}\nonClose={() => setOpen(false)}\nposition='right'\n>\n
\n\n
\n\n}\n/>\n
\n);\n});" + }, + { + "title": "Статусы", + "description": "В некоторых кейсах может потребоваться дополнительная индикация ошибки или успеха.", + "desktop": "render(() => {\nconst [success, setSuccess] = React.useState(false);\nconst [value, setValue] = React.useState('');\n\nconst handleChange = (e) => {\nconst value = e.target.value;\nsetValue(value);\n\nif (value.length === 5) {\nsetSuccess(true);\n} else {\nsetSuccess(false);\n}\n};\n\nconst hasError = value.length > 5;\n\nreturn (\n
\n\n
\n);\n});" + }, + { + "title": "Крестик очистки", + "description": "В редких кейсах может потребоваться механика быстрой очистки введенного контента.\nРекомендуется использовать данную механику точечно, а не глобально ко всем полям большой формы.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState('Value');\n\nreturn (\n
\n setValue(e.target.value)}\nlabel='Label'\nplaceholder='Placeholder'\nlabelView={isMobile() ? 'outer' : 'inner'}\nsize={isMobile() ? 48 : 56}\nbreakpoint={BREAKPOINT}\nclear={true}\nonClear={() => setValue('')}\n/>\n
\n);\n});" + }, + { + "title": "Кликабельные аддоны", + "description": "Для кликабельных адоннов рекомендуем использовать увеличенную область нажатия.", + "desktop": "render(() => {\nconst [isVisible, setIsVisible] = React.useState(false);\nconst [title, setTitle] = React.useState('');\nconst [valueOne, setValueOne] = React.useState('Value');\nconst [valueTwo, setValueTwo] = React.useState('Value');\n\nconst toggleVisiblity = () => setIsVisible((prev) => !prev);\n\nconst singleIcon = () => {\nsetTitle('Вы восхитительны!');\ntoggleVisiblity();\n};\n\nconst leftIcon = () => {\nsetTitle('Левая');\ntoggleVisiblity();\n};\n\nconst rightIcon = () => {\nsetTitle('Правая');\ntoggleVisiblity();\n};\n\nconst hideNotification = React.useCallback(() => setIsVisible(false), []);\n\nconst styleWrapperIcons = {\nheight: '100%',\ndisplay: 'flex',\ngap: 4,\nmarginRight: 'var(--gap-8-neg)',\n};\n\n/* Указать для IconButton через className */\nconst css = `\nbutton[data-test-id='icon'] {\nmargin-right: var(--gap-12-neg);\n}\n`;\n\nreturn (\n
\n\n setValueOne(e.target.value)}\nlabel='Label'\nplaceholder='Placeholder'\nlabelView={isMobile() ? 'outer' : 'inner'}\nsize={isMobile() ? 48 : 56}\nbreakpoint={BREAKPOINT}\nrightAddons={\n\n}\n/>\n\n setValueTwo(e.target.value)}\nlabel='Label'\nplaceholder='Placeholder'\nlabelView={isMobile() ? 'outer' : 'inner'}\nsize={isMobile() ? 48 : 56}\nbreakpoint={BREAKPOINT}\nrightAddons={\n
\n\n\n
\n}\n/>\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/international-phone-input.json b/packages/mcp/src/data/v50.16.0/international-phone-input.json new file mode 100644 index 0000000000..34347e77fb --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/international-phone-input.json @@ -0,0 +1,829 @@ +{ + "packageName": "international-phone-input", + "displayName": "InternationalPhoneInput", + "description": "Используется для ввода телефонного номера в международном формате.", + "props": { + "country": { + "defaultValue": null, + "description": "Выбранная страна", + "name": "country", + "required": false, + "type": { + "name": "Country | undefined" + } + }, + "countries": { + "defaultValue": null, + "description": "Список необходимых iso2 стран", + "name": "countries", + "required": false, + "type": { + "name": "string[] | undefined" + } + }, + "defaultIso2": { + "defaultValue": null, + "description": "Дефолтный код страны", + "name": "defaultIso2", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "customCountriesList": { + "defaultValue": null, + "description": "Список правил парсинга номеров телефонов по странам (для переопределения дефолтного)", + "name": "customCountriesList", + "required": false, + "type": { + "name": "CountriesData[] | undefined" + } + }, + "clearableCountryCode": { + "defaultValue": { + "value": "true" + }, + "description": "Возможность стереть код страны\n@description Используйте `'preserve'` для сохранения кода страны при автозаполнении (актуально для Safari). При этом код страны можно удалить в случае использования `true`", + "name": "clearableCountryCode", + "required": false, + "type": { + "name": "boolean | \"preserve\" | undefined" + } + }, + "countrySelectProps": { + "defaultValue": null, + "description": "Свойства селекта выбора стран", + "name": "countrySelectProps", + "required": false, + "type": { + "name": "SharedCountrySelectProps | undefined" + } + }, + "clear": { + "defaultValue": null, + "description": "Показывать крестик очистки\nФлаг, показать крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "filterFn": { + "defaultValue": null, + "description": "Функция фильтрации номеров для автокомплита", + "name": "filterFn", + "required": false, + "type": { + "name": "((value: string | undefined, option: OptionShape) => boolean) | undefined" + } + }, + "onCountryChange": { + "defaultValue": null, + "description": "Обработчик события изменения страны", + "name": "onCountryChange", + "required": false, + "type": { + "name": "((country?: Country | undefined) => void) | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик изменения номера", + "name": "onChange", + "required": false, + "type": { + "name": "((phone: string) => void) | undefined" + } + }, + "onBlur": { + "defaultValue": null, + "description": "Обработчик блюра поля", + "name": "onBlur", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | (((event: FocusEvent) => void) & ((event: FocusEvent<...>) => void)) | undefined" + } + }, + "onFocus": { + "defaultValue": null, + "description": "Обработчик фокуса поля", + "name": "onFocus", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | (((event: FocusEvent) => void) & ((event: FocusEvent<...>) => void)) | undefined" + } + }, + "autoFill": { + "defaultValue": { + "value": "true" + }, + "description": "Включить автозаполнение номера\n@deprecated Автозаполнение активно всегда. Проп будет удален в следующей мажорной версии", + "name": "autoFill", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля FormControl используется модификатор -form-control\nИдентификатор для систем автоматизированного тестирования.\nДля пункта меню используется модификатор -option, компонента поиска -search,\nкомпонента выпадающего меню -options-list, компонента BottomSheet -bottom-sheet,\nкомпонента поля -field, компонета FormControl -field-form-control", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "type": { + "defaultValue": null, + "description": "Атрибут type", + "name": "type", + "required": false, + "type": { + "name": "\"number\" | \"text\" | \"tel\" | \"email\" | \"password\" | \"money\" | undefined" + } + }, + "defaultValue": { + "defaultValue": null, + "description": "Начальное значение поля", + "name": "defaultValue", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClick": { + "defaultValue": null, + "description": "Обработчик клика по полю", + "name": "onClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseDown": { + "defaultValue": null, + "description": "Обработчик MouseDown по полю", + "name": "onMouseDown", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseUp": { + "defaultValue": null, + "description": "Обработчик MouseUp по полю", + "name": "onMouseUp", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "size": { + "defaultValue": { + "value": "48\n48" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "colors": { + "defaultValue": null, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Значение поля ввода", + "name": "value", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "bold": { + "defaultValue": null, + "description": "Жирный текст\n@deprecated Используйте {@link BaseInputProps.fontWeight }", + "name": "bold", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "fontWeight": { + "defaultValue": null, + "description": "Вес шрифта инпута, в том числе плейсхолдера", + "name": "fontWeight", + "required": false, + "type": { + "name": "\"bold\" | \"medium\" | \"regular\" | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "success": { + "defaultValue": null, + "description": "Отображение иконки успеха", + "name": "success", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки\nПодсказка под полем", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл компонента\nЛейбл поля", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "wrapperRef": { + "defaultValue": null, + "description": "Ref для обертки input", + "name": "wrapperRef", + "required": false, + "type": { + "name": "Ref | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки левых аддонов", + "name": "leftAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "rightAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки правых аддонов", + "name": "rightAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "bottomAddons": { + "defaultValue": null, + "description": "Слот под инпутом", + "name": "bottomAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "inputClassName": { + "defaultValue": null, + "description": "Дополнительный класс инпута", + "name": "inputClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "labelClassName": { + "defaultValue": null, + "description": "Дополнительный класс для лейбла", + "name": "labelClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "addonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для аддонов", + "name": "addonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "focusedClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен при фокусе", + "name": "focusedClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "filledClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен, если в поле есть значение", + "name": "filledClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "disableUserInput": { + "defaultValue": null, + "description": "Запрещает ввод с клавиатуры", + "name": "disableUserInput", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + }, + "options": { + "defaultValue": null, + "description": "Список вариантов выбора", + "name": "options", + "required": true, + "type": { + "name": "(OptionShape | GroupShape)[]" + } + }, + "environment": { + "defaultValue": { + "value": "window" + }, + "description": "Контекст окружения для downshift.js", + "name": "environment", + "required": false, + "type": { + "name": "Environment | undefined" + } + }, + "open": { + "defaultValue": null, + "description": "Управление открытием", + "name": "open", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "transitionProps": { + "defaultValue": null, + "description": "Пропсы анимации контента (CSSTransition)", + "name": "transitionProps", + "required": false, + "type": { + "name": "Partial | undefined" + } + }, + "virtualKeyboard": { + "defaultValue": { + "value": "false" + }, + "description": "Учитывать высоту виртуальной клавиатуры в BottomSheet", + "name": "virtualKeyboard", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onApply": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку «Продолжить» в BottomSheet или модальном окне", + "name": "onApply", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "defaultOpen": { + "defaultValue": null, + "description": "Начальное состояние селекта", + "name": "defaultOpen", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "preventFlip": { + "defaultValue": null, + "description": "Запрещает поповеру менять свою позицию.\nНапример, если места снизу недостаточно,то он все равно будет показан снизу", + "name": "preventFlip", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "popoverPosition": { + "defaultValue": null, + "description": "Позиционирование выпадающего списка", + "name": "popoverPosition", + "required": false, + "type": { + "name": "Position | undefined" + } + }, + "zIndexPopover": { + "defaultValue": null, + "description": "z-index поповера", + "name": "zIndexPopover", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "Arrow": { + "defaultValue": null, + "description": "Компонент стрелки", + "name": "Arrow", + "required": false, + "type": { + "name": "false | ComponentType | null | undefined" + } + }, + "selected": { + "defaultValue": null, + "description": "Список value выбранных пунктов (controlled-селект)", + "name": "selected", + "required": false, + "type": { + "name": "string | OptionShape | (string | OptionShape)[] | null | undefined" + } + }, + "closeOnSelect": { + "defaultValue": null, + "description": "Закрывать меню после выбора?", + "name": "closeOnSelect", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "allowUnselect": { + "defaultValue": null, + "description": "Позволяет снять выбранное значение", + "name": "allowUnselect", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "searchProps": { + "defaultValue": null, + "description": "Настройки поиска", + "name": "searchProps", + "required": false, + "type": { + "name": "{ componentProps?: SearchProps | undefined; accessor?: ((option: OptionShape) => string) | undefined; filterFn?: ((optionText: string, search: string) => boolean) | undefined; value?: string | undefined; onChange?: ((value: string) => void) | undefined; filterGroup?: boolean | undefined; groupAccessor?: ((group: Gro..." + } + }, + "Search": { + "defaultValue": null, + "description": "Компонент поиска", + "name": "Search", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "optionsListClassName": { + "defaultValue": null, + "description": "Дополнительный класс выпадающего меню", + "name": "optionsListClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionClassName": { + "defaultValue": null, + "description": "Дополнительный класс для пункта меню", + "name": "optionClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionGroupClassName": { + "defaultValue": null, + "description": "Дополнительный класс для компонента группы пунктов", + "name": "optionGroupClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "popperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поповера", + "name": "popperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionsSize": { + "defaultValue": null, + "description": "Размер пунктов меню", + "name": "optionsSize", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "optionsListWidth": { + "defaultValue": null, + "description": "Управляет шириной выпадающего меню.\nШирину определяет контент, либо ширина равна ширине поля", + "name": "optionsListWidth", + "required": false, + "type": { + "name": "\"content\" | \"field\" | undefined" + } + }, + "circularNavigation": { + "defaultValue": null, + "description": "При навигации с клавиатуры переходить от последнего пункта меню к первому и наоборот.", + "name": "circularNavigation", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "visibleOptions": { + "defaultValue": null, + "description": "Количество видимых пунктов меню (5 = 5.5)", + "name": "visibleOptions", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "valueSeparator": { + "defaultValue": null, + "description": "Кастомный разделитель выбранных пунктов (Работает когда не прокинут valueRenderer)", + "name": "valueSeparator", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "Field": { + "defaultValue": null, + "description": "Компонент поля", + "name": "Field", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "fieldProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент поля", + "name": "fieldProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "optionsListProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент списка", + "name": "optionsListProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "optionProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент пункта меню", + "name": "optionProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "groupOptionProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент группового пункта меню", + "name": "groupOptionProps", + "required": false, + "type": { + "name": "AnyObject | undefined" + } + }, + "OptionsList": { + "defaultValue": null, + "description": "Компонент выпадающего меню", + "name": "OptionsList", + "required": false, + "type": { + "name": "ComponentType & { className?: string | undefined; optionGroupClassName?: string | undefined; scrollbarClassName?: string | undefined; ... 28 more ...; limitDynamicOptionGroupSize?: boolean | undefined; } & RefAttributes<...>> | undefined" + } + }, + "Optgroup": { + "defaultValue": null, + "description": "Компонент группы", + "name": "Optgroup", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "Option": { + "defaultValue": null, + "description": "Компонент пункта меню", + "name": "Option", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "onOpen": { + "defaultValue": null, + "description": "Обработчик открытия\\закрытия селекта", + "name": "onOpen", + "required": false, + "type": { + "name": "((payload: { open?: boolean | undefined; name?: string | undefined; }) => void) | undefined" + } + }, + "updatePopover": { + "defaultValue": null, + "description": "Хранит функцию, с помощью которой можно обновить положение поповера", + "name": "updatePopover", + "required": false, + "type": { + "name": "MutableRefObject<(() => void) | undefined> | undefined" + } + }, + "showEmptyOptionsList": { + "defaultValue": null, + "description": "Показывать OptionsList, если он пустой", + "name": "showEmptyOptionsList", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "popoverProps": { + "defaultValue": null, + "description": "Дополнительные пропсы для Popover", + "name": "popoverProps", + "required": false, + "type": { + "name": "Omit | undefined" + } + }, + "limitDynamicOptionGroupSize": { + "defaultValue": null, + "description": "Ограничение динамического размера группы вариантов выбора", + "name": "limitDynamicOptionGroupSize", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "Input": { + "defaultValue": null, + "description": "Компонент ввода значения", + "name": "Input", + "required": false, + "type": { + "name": "ComponentType & { breakpoint?: number | undefined; client?: \"desktop\" | \"mobile\" | undefined; defaultMatchMediaValue?: boolean | ... 1 more ... | undefined; } & RefAttributes<...>> | undefined" + } + }, + "inputProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в инпут", + "name": "inputProps", + "required": false, + "type": { + "name": "(Omit & { breakpoint?: number | undefined; client?: \"desktop\" | \"mobile\" | undefined; defaultMatchMediaValue?: boolean | ... 1 more ... | undefined; } & Record<...>) | undefined" + } + }, + "isBottomSheet": { + "defaultValue": null, + "description": "Открывать в bottom-sheet", + "name": "isBottomSheet", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onCancel": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку «Отмена» в BottomSheet или модальном окне", + "name": "onCancel", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Стандартный вид компонента — поле с пикером страны и предопределённым кодом страны. При автозаполнении поля на iOS-устройствах номер вставляется без кода страны. Вставляемый номер можно обогатить заранее введённым кодом страны.", + "desktop": "const OPTIONS = [\n{ key: '+7 921 681 53 98' },\n{ key: '+7 921 681 52 97' },\n{ key: '+7 921 681 52 96' },\n{ key: '+7 921 681 52 95' },\n{ key: '8 921 681 52 94' },\n];\n\nrender(() => {\nconst [value, setValue] = React.useState('');\nconst [selectedCountry, setSelectedCountry] = React.useState();\nconst [clearableCountryCode, setClearableCountryCode] = React.useState(true);\nconst [autocomplete, setAutocomplete] = React.useState(false);\n\nconst handleChange = (phone) => setValue(phone);\n\nreturn (\n\n
\n\n
\n\n
\n\nКод выбранной страны: {selectedCountry && selectedCountry.iso2}\n\n\n\nsetClearableCountryCode(value === 'preserve' ? value : value === 'true')\n}\nvalue={`${clearableCountryCode}`}\n>\n\n\n\n\n\n {\nsetAutocomplete((prevState) => !prevState);\n}}\n/>\n
\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/keyboard-focusable.json b/packages/mcp/src/data/v50.16.0/keyboard-focusable.json new file mode 100644 index 0000000000..c3850c174f --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/keyboard-focusable.json @@ -0,0 +1,23 @@ +{ + "packageName": "keyboard-focusable", + "displayName": "KeyboardFocusable", + "description": "Используется для подсветки элемента при фокусе.", + "props": { + "children": { + "defaultValue": null, + "description": "Рендер-проп, в который передается состояние фокуса и реф.\n\nРеф нужно установить на интерактивный элемент или на одного из его родителей.", + "name": "children", + "required": true, + "type": { + "name": "(ref: RefObject, focused: boolean) => Element" + } + } + }, + "demos": [ + { + "title": "Пример", + "description": "Все интерактивные элементы должны иметь определенную обводку при фокусе, полученном при переходе к элементу при помощи клавиатуры.\nПри клике мышкой или тапе обводки быть не должно.\nВ примере ниже кликните на первую кнопку мышкой, а затем нажмите tab, чтобы выбрать правую кнопку.", + "desktop": "\n{(ref, focused) => {\nconst focusOutlineStyles = {\noutline: '2px solid var(--focus-color)',\noutlineOffset: '2px',\n};\n\nreturn (\n\n\n\n\n\n);\n}}\n" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/link.json b/packages/mcp/src/data/v50.16.0/link.json new file mode 100644 index 0000000000..09f9a55ab0 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/link.json @@ -0,0 +1,116 @@ +{ + "packageName": "link", + "displayName": "Link", + "description": "Ссылка — элемент навигации, который обозначает возможность перехода на другую страницу или вызова нового информационного слоя.", + "props": { + "view": { + "defaultValue": { + "value": "primary" + }, + "description": "Тип ссылки", + "name": "view", + "required": false, + "type": { + "name": "\"primary\" | \"secondary\" | \"default\" | undefined" + } + }, + "pseudo": { + "defaultValue": { + "value": false + }, + "description": "Пунктирное подчеркивание", + "name": "pseudo", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "underline": { + "defaultValue": { + "value": true + }, + "description": "Включает / отключает подчеркивание", + "name": "underline", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "Component": { + "defaultValue": { + "value": "pseudo ? 'button' : 'a'" + }, + "description": "Позволяет использовать кастомный компонент для кнопки (например Link из роутера)", + "name": "Component", + "required": false, + "type": { + "name": "ElementType | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + } + }, + "demos": [ + { + "title": "Обычная ссылка", + "description": "Нестареющая классика. Ссылка может вести как на страницу внутри системы, так и на внешний ресурс.", + "desktop": "\n\n\nDefault\n\n\n\n\nPrimary\n\n\n\n\nSecondary\n\n\n" + }, + { + "title": "Псевдоссылка", + "description": "Вызывает информационный слой (collapse, dropdown, popup) без перехода на другую страницу.", + "desktop": "\n\n\nDefault\n\n\n\n\nPrimary\n\n\n\n\nSecondary\n\n\n" + }, + { + "title": "Подчёркивание ссылок", + "description": "Подчёркивание ссылок не является обязательным, но помогает пользователю определить их тип.", + "desktop": "\n\nDefault link\n\n\n\nPseudo link\n\n\n\n\nLink without underline\n\n\n" + }, + { + "title": "Анатомия", + "description": "С помощью слотов `leftAddons` и `rightAddons` можно кастомизировать ссылку. Например, добавить иконку.\nПереданный контент будет отрисован слева или справа от текста ссылки.", + "desktop": "\n\n}>\nDefault link\n\n\n\n}>\nDefault link\n\n\n\n} rightAddons={}>\nDefault link\n\n\n" + }, + { + "title": "Размеры", + "description": "Cсылка наследует текстовый стиль от родителя.", + "desktop": "\n\nParagraph primary large\n\n\nParagraph primary medium\n\n\nParagraph primary small\n\n" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/list-header.json b/packages/mcp/src/data/v50.16.0/list-header.json new file mode 100644 index 0000000000..10acff743d --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/list-header.json @@ -0,0 +1,61 @@ +{ + "packageName": "list-header", + "displayName": "ListHeader", + "description": "Используется для разделения ячеек списка по смысловым группам.", + "props": { + "title": { + "defaultValue": null, + "description": "Заголовок", + "name": "title", + "required": true, + "type": { + "name": "string" + } + }, + "description": { + "defaultValue": null, + "description": "Дополнительное описание", + "name": "description", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "filled": { + "defaultValue": { + "value": true + }, + "description": "Наличие фоновой подложки", + "name": "filled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Компонент с серой подложкой используется для «бесконечных списков». Например, для истории операций или списка писем.", + "desktop": "
\n\n
\nВ Санкт-Петербурге ожидаются дожди, ливни с грозой, градом и шквалистым ветром до 20 м/с.\n
\n\n
Ясно, без осадков.
\n
" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/list.json b/packages/mcp/src/data/v50.16.0/list.json new file mode 100644 index 0000000000..1dc5da00c6 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/list.json @@ -0,0 +1,18 @@ +{ + "packageName": "list", + "displayName": "Context", + "description": "", + "props": {}, + "demos": [ + { + "title": "Анатомия", + "description": "Компонент состоит из кастомизируемого слота под маркер и текстовой части.", + "desktop": "render(() => {\nconst styleContent = {\nwidth: '24px',\nheight: '24px',\nborderRadius: '8px',\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\n};\n\nreturn (\n\n\n
\nПример текстовой части\n\n\n);\n});" + }, + { + "title": "Примеры", + "description": "Доступны нумерованные и маркированные виды списков.\nПри необходимости, цвет маркера можно изменить. Каждому пункту можно добавить подпись.", + "desktop": "\nПример маркированного списка:\n\nПример элемента списка\nПример элемента списка\nПример элемента списка\nПример элемента списка\nПример элемента списка\n\nПример нумерованного списка:\n\n\nПример элемента списка\nПример элемента списка\nПример элемента списка\nПример элемента списка\nПример элемента списка\n\n" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/markdown.json b/packages/mcp/src/data/v50.16.0/markdown.json new file mode 100644 index 0000000000..0057229e9f --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/markdown.json @@ -0,0 +1,83 @@ +{ + "packageName": "markdown", + "displayName": "MarkdownResponsiveComponent", + "description": "Используется для отображения и форматирования текстового контента.", + "props": { + "className": { + "defaultValue": null, + "description": "Css класс для обертки разметки", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "font": { + "defaultValue": null, + "description": "Шрифт разметки", + "name": "font", + "required": false, + "type": { + "name": "FontType" + } + }, + "overrides": { + "defaultValue": null, + "description": "Переопределение компонентов для тегов разметки", + "name": "overrides", + "required": false, + "type": { + "name": "Components | undefined" + } + }, + "transformLinkUri": { + "defaultValue": { + "value": "true" + }, + "description": "Трансформация ссылок неизвестных форматов\nhttps://github.com/remarkjs/react-markdown/issues/537", + "name": "transformLinkUri", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "render(() => {\nconst css = `\n:root {\n--list-item-margin: 0;\n}\n`;\nreturn (\n<>\n\n\n{`\n# Герой нашего времени\n\n«Герой нашего времени» — первый в русской прозе социально-психологический роман,\nнаписанный Михаилом Юрьевичем Лермонтовым в 1837—1839 годах. Классика русской литературы." + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/masked-input.json b/packages/mcp/src/data/v50.16.0/masked-input.json new file mode 100644 index 0000000000..992f4d3827 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/masked-input.json @@ -0,0 +1,380 @@ +{ + "packageName": "masked-input", + "displayName": "MaskedInput", + "description": "Используется для ввода текста по указанной маске.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля FormControl используется модификатор -form-control", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "type": { + "defaultValue": null, + "description": "Атрибут type", + "name": "type", + "required": false, + "type": { + "name": "\"number\" | \"text\" | \"tel\" | \"email\" | \"password\" | \"money\" | undefined" + } + }, + "defaultValue": { + "defaultValue": null, + "description": "Начальное значение поля", + "name": "defaultValue", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик поля ввода", + "name": "onChange", + "required": false, + "type": { + "name": "((event: ChangeEvent, payload: { value: string; }) => void) | undefined" + } + }, + "onClick": { + "defaultValue": null, + "description": "Обработчик клика по полю", + "name": "onClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseDown": { + "defaultValue": null, + "description": "Обработчик MouseDown по полю", + "name": "onMouseDown", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseUp": { + "defaultValue": null, + "description": "Обработчик MouseUp по полю", + "name": "onMouseUp", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "size": { + "defaultValue": { + "value": "48" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "colors": { + "defaultValue": null, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Значение поля ввода", + "name": "value", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "bold": { + "defaultValue": null, + "description": "Жирный текст\n@deprecated Используйте {@link BaseInputProps.fontWeight }", + "name": "bold", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "fontWeight": { + "defaultValue": null, + "description": "Вес шрифта инпута, в том числе плейсхолдера", + "name": "fontWeight", + "required": false, + "type": { + "name": "\"bold\" | \"medium\" | \"regular\" | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clear": { + "defaultValue": null, + "description": "Крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "success": { + "defaultValue": null, + "description": "Отображение иконки успеха", + "name": "success", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл компонента", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "wrapperRef": { + "defaultValue": null, + "description": "Ref для обертки input", + "name": "wrapperRef", + "required": false, + "type": { + "name": "Ref | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки левых аддонов", + "name": "leftAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "rightAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки правых аддонов", + "name": "rightAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "bottomAddons": { + "defaultValue": null, + "description": "Слот под инпутом", + "name": "bottomAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "inputClassName": { + "defaultValue": null, + "description": "Дополнительный класс инпута", + "name": "inputClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "labelClassName": { + "defaultValue": null, + "description": "Дополнительный класс для лейбла", + "name": "labelClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "addonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для аддонов", + "name": "addonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "focusedClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен при фокусе", + "name": "focusedClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "filledClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен, если в поле есть значение", + "name": "filledClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку очистки", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "disableUserInput": { + "defaultValue": null, + "description": "Запрещает ввод с клавиатуры", + "name": "disableUserInput", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": null, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + }, + "mask": { + "defaultValue": null, + "description": "Маска для поля ввода\nhttps://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#mask-array", + "name": "mask", + "required": false, + "type": { + "name": "Mask | ((rawValue: string) => Mask) | undefined" + } + }, + "keepCharPositions": { + "defaultValue": { + "value": false + }, + "description": "Управляет поведением компонента при удалении символов", + "name": "keepCharPositions", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onBeforeDisplay": { + "defaultValue": null, + "description": "Дает возможность изменить значение поля перед рендером", + "name": "onBeforeDisplay", + "required": false, + "type": { + "name": "((conformedValue: string, config: TextMaskConfig) => string | false | { value: string; indexesOfPipedChars: number[]; }) | undefined" + } + } + }, + "demos": [ + { + "title": "Пример", + "description": "", + "desktop": "const masksCard = [\n/\\d/,\n/\\d/,\n/\\d/,\n/\\d/,\n' ',\n/\\d/,\n/\\d/,\n/\\d/,\n/\\d/,\n' ',\n/\\d/,\n/\\d/,\n/\\d/,\n/\\d/,\n' ',\n/\\d/,\n/\\d/,\n/\\d/,\n/\\d/,\n];\n\nrender(\n
\n\n
\n);" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/modal.json b/packages/mcp/src/data/v50.16.0/modal.json new file mode 100644 index 0000000000..268de8bffe --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/modal.json @@ -0,0 +1,403 @@ +{ + "packageName": "modal", + "displayName": "ModalResponsiveComponent", + "description": "", + "props": { + "children": { + "defaultValue": null, + "description": "Контент", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "Backdrop": { + "defaultValue": null, + "description": "Компонент бэкдропа", + "name": "Backdrop", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "backdropProps": { + "defaultValue": null, + "description": "Свойства для Бэкдропа", + "name": "backdropProps", + "required": false, + "type": { + "name": "(Partial & Record) | undefined" + } + }, + "container": { + "defaultValue": null, + "description": "Нода, компонент или функция возвращающая их\n\nКонтейнер к которому будут добавляться порталы", + "name": "container", + "required": false, + "type": { + "name": "(() => Element | null | undefined) | undefined" + } + }, + "disableAutoFocus": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает автоматический перевод фокуса на модалку при открытии", + "name": "disableAutoFocus", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableFocusLock": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает ловушку фокуса", + "name": "disableFocusLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableRestoreFocus": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает восстановление фокуса на предыдущем элементе после закрытия модалки", + "name": "disableRestoreFocus", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableEscapeKeyDown": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает вызов `callback` при нажатии Escape", + "name": "disableEscapeKeyDown", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableBackdropClick": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает вызов `callback` при клике на бэкдроп", + "name": "disableBackdropClick", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableBlockingScroll": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает блокировку скролла при открытии модального окна\n@deprecated Используйте `scrollLock={true}`.", + "name": "disableBlockingScroll", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "scrollLock": { + "defaultValue": { + "value": "false" + }, + "description": "Управляет блокировкой скролла/overscroll фона при открытой модалке.", + "name": "scrollLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "keepMounted": { + "defaultValue": { + "value": "false" + }, + "description": "Содержимое модалки всегда в DOM", + "name": "keepMounted", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "open": { + "defaultValue": null, + "description": "Управление видимостью модалки", + "name": "open", + "required": true, + "type": { + "name": "boolean" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "wrapperProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на dialog wrapper", + "name": "wrapperProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "contentProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на обертку контента", + "name": "contentProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "componentDivProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на компонентную обертку контента", + "name": "componentDivProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "wrapperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для обертки (Modal)", + "name": "wrapperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "scrollHandler": { + "defaultValue": null, + "description": "Обработчик скролла контента", + "name": "scrollHandler", + "required": false, + "type": { + "name": "\"content\" | \"wrapper\" | MutableRefObject | undefined" + } + }, + "transitionProps": { + "defaultValue": null, + "description": "Пропсы для анимации (CSSTransition)", + "name": "transitionProps", + "required": false, + "type": { + "name": "Partial | undefined" + } + }, + "usePortal": { + "defaultValue": { + "value": "true" + }, + "description": "Рендерить ли в контейнер через портал.", + "name": "usePortal", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onBackdropClick": { + "defaultValue": null, + "description": "Обработчик события нажатия на бэкдроп", + "name": "onBackdropClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onEscapeKeyDown": { + "defaultValue": null, + "description": "Обработчик события нажатия на Escape\n\nЕсли `disableEscapeKeyDown` - false и модальное окно в фокусе", + "name": "onEscapeKeyDown", + "required": false, + "type": { + "name": "((event: KeyboardEvent) => void) | undefined" + } + }, + "onClose": { + "defaultValue": null, + "description": "Обработчик закрытия", + "name": "onClose", + "required": false, + "type": { + "name": "((event: MouseEvent | KeyboardEvent, reason?: \"backdropClick\" | \"escapeKeyDown\" | \"closerClick\" | undefined) => void) | undefined" + } + }, + "onMount": { + "defaultValue": null, + "description": "Обработчик события onEntered компонента Transition", + "name": "onMount", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "onUnmount": { + "defaultValue": null, + "description": "Обработчик события onExited компонента Transition", + "name": "onUnmount", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "zIndex": { + "defaultValue": null, + "description": "z-index компонента", + "name": "zIndex", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "componentRef": { + "defaultValue": null, + "description": "Реф, который должен быть установлен компонентной области", + "name": "componentRef", + "required": false, + "type": { + "name": "MutableRefObject | undefined" + } + }, + "contentElementRef": { + "defaultValue": null, + "description": "Реф контентной области", + "name": "contentElementRef", + "required": false, + "type": { + "name": "MutableRefObject | undefined" + } + }, + "iOSLock": { + "defaultValue": null, + "description": "Блокирует скролл когда модальное окно открыто. Работает только на iOS.\n@deprecated Используйте `scrollLock={true}`.", + "name": "iOSLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onWheel": { + "defaultValue": null, + "description": "Хэндлер события прокрутки колесиком", + "name": "onWheel", + "required": false, + "type": { + "name": "((e: WheelEvent) => void) | undefined" + } + }, + "size": { + "defaultValue": { + "value": "600" + }, + "description": "Ширина модального окна", + "name": "size", + "required": false, + "type": { + "name": "600 | \"fullscreen\" | 500 | 800 | 1140 | undefined" + } + }, + "fixedPosition": { + "defaultValue": null, + "description": "Фиксирует позицию модального окна после открытия,\nпредотвращая скачки, если контент внутри будет меняться", + "name": "fixedPosition", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hasCloser": { + "defaultValue": { + "value": "false" + }, + "description": "Управление наличием закрывающего крестика", + "name": "hasCloser", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Анатомия", + "description": "Modal построен как Compound Components. Состоит из Header, Content, Footer, содержащих в себе кастомизируемые слоты.\nЧтобы во время скролла заголовок и кнопки оставались неподвижны, их нужно расположить в `header` и `footer`.\nТекст и изображения всегда располагаются в `content` части.\n\nТакже есть атомарные импорты.", + "desktop": "const Header = () => {\nconst { setHasHeader } = React.useContext(ModalContext);\n\nReact.useEffect(() => setHasHeader(true), [setHasHeader]);\n\nconst commonStyles = {\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\nborderRadius: '8px',\nheight: '48px',\n};\n\nconst addonsStyles = {\n...commonStyles,\nwidth: '48px',\n};\n\nconst innerAddonsStyles = {\n...addonsStyles,\nbackgroundColor: 'rgba(207, 112, 255, 0.1)',\n};\n\nconst bottomAddonsStyles = {\n...commonStyles,\nwidth: '100%',\n};\n\nconst wrapperStyles = {\ndisplay: 'flex',\njustifyContent: 'center',\n};\n\nconst titleStyles = {\n...commonStyles,\nflexGrow: 1,\n};\n\nreturn (\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n);\n};\n\nrender(() => {\nconst [modalAnatomy, setModalAnatomy] = React.useState(false);\nconst handleModalAnatomy = () => setModalAnatomy(!modalAnatomy);\n\nconst styleContent = {\nwidth: '100%',\nheight: '600px',\nborderRadius: '8px',\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\n};\n\nconst styleFooter = {\nwidth: '100%',\nheight: '48px',\nborderRadius: '8px',\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\n};\n\nreturn (\n\n\n\n
\n\n
\n\n\n
\n\n\n\n);\n});", + "mobile": "const Header = () => {\nconst { setHasHeader, onClose } = React.useContext(ModalContext);\n\nReact.useEffect(() => setHasHeader(true), [setHasHeader]);\n\nconst commonStyles = {\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\nborderRadius: '8px',\nheight: '48px',\n};\n\nconst addonsStyles = {\n...commonStyles,\nwidth: '48px',\n};\n\nconst innerAddonsStyles = {\n...addonsStyles,\nbackgroundColor: 'rgba(207, 112, 255, 0.1)',\n};\n\nconst bottomAddonsStyles = {\n...commonStyles,\nwidth: '100%',\n};\n\nconst wrapperStyles = {\ndisplay: 'flex',\njustifyContent: 'center',\n};\n\nconst titleStyles = {\n...commonStyles,\nflexGrow: 1,\n};\n\nreturn (\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n);\n};\n\nrender(() => {\nconst [open, setOpen] = React.useState(false);\nconst handleOpen = () => setOpen(true);\nconst handleClose = () => setOpen(false);\n\nconst commonStyle = {\nwidth: '100%',\nborderRadius: '8px',\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\n};\n\nconst contentStyle = {\n...commonStyle,\nheight: '100%',\n};\n\nconst footerStyle = {\n...commonStyle,\nheight: '48px',\n};\n\nreturn (\n\n\n\n
\n\n
\n\n\n
\n\n\n\n);\n});" + }, + { + "title": "Пресеты", + "description": "Ниже представлены самые популярные кейсы настройки модальных окон.", + "desktop": "const Text = () => (\n<>\n\nВ 2001 году в России начал действовать Федеральный закон №115 «О противодействии\nлегализации доходов, полученных преступным путём, и финансированию терроризма». В рамках\nзакона банки могут блокировать карты, отказывать в проведении сомнительных операций,\nограничить доступ в интернет-банк или запрашивать документы, если по операции клиента\nвозникли подозрения.\n\n
\n\nТребования 115-ФЗ и связанных с ним документов Банка России часто меняются,\nпредприниматели не всегда успевают за ними следить. Последствия нарушений\n«антиотмывочного» законодательства всегда неприятны: приходится остановить\nбизнес-процессы и доказать банку законность операций. Специалисты «Альфа-банка» собрали\nпонятные рекомендации, как сэкономить время на объяснения и предотвратить блокировки\n\n\n\n115-ФЗ Касается всех предпринимателей, фирм и физлиц, а также тех, кто пользуется\nбанковским счётом для бизнеса, крупных денежных переводов или личных расчётов.\nОграничения интернет-банка, блокировка карт добросовестных компаний могут произойти\nиз-за неправильно оформленных документов, ошибок в платёжке или попыток снизить\nналоги.\n\n
\n\nКлиенты воспринимают ограничения как атаку со стороны банка, но чаще всего сами\nдопускают ошибки или нарушения, которых можно избежать. Банки не преследуют цели\nдоставить неудобства клиентам — они обязаны соблюдать законодательство и следовать\nинструкциям и рекомендациям ЦБ, а в противном случае рискуют лишиться лицензии.\n\n
\n\nОбналичивание — сомнительные операции, когда юрлицо или предприниматель снимает со\nсчёта более 80% от оборота или переводит деньги на счета физлиц, которые затем\nснимают в наличной форме.\n\n
\n\nВывод капитала за границу — это переводы нерезидентам по договорам об импорте\nработ/услуг и результатов интеллектуальной деятельности, по которым проведение\nрасчётов осуществляется без одновременной уплаты НДС; по сделкам купли-продажи\nценных бумаг, а также товаров, которые не пересекают границу России.\n\n
\n\nТранзитные операции — операции, в процессе которых деньги поступают на счёт компании\nот других резидентов и списываются в короткие сроки. При этом, как правило, в этих\nслучаях по счёту нет начислений зарплат, уплаты налогов, и они не соответствуют\nзаявленному компанией виду деятельности.\n\n
\n\nЗапрашивать могут любые документы и устанавливать разные сроки их предоставления —\nэто зависит от службы контроля конкретного банка. Обычно банки запрашивают чеки,\nсчета или договора с контрагентами. В некоторых случаях бывает достаточно устных\nобъяснений. Для проверки информации и пересмотра уровня риска банк может пригласить\nклиента в банк для устного разъяснения или выехать по месту ведения бизнеса клиента.\n\n\n\n);\n\nconst SIZES = [\n{ value: '500', label: 'Small (500рх)' },\n{ value: '600', label: 'Medium (600рх)' },\n{ value: '800', label: 'Large (800рх)' },\n{ value: '1140', label: 'xLarge (1140рх)' },\n{ value: 'fullscreen', label: 'FullScreen' },\n];\n\nconst HEADER_SETTINGS = [\n{ label: 'Заголовок', name: 'hasTitle' },\n{ label: 'Крестик', name: 'hasCloser' },\n{ label: 'Стрелка назад', name: 'hasBackButton' },\n{ label: 'Фиксация шапки при скролле', name: 'sticky' },\n];\n\nconst FOOTER_SETTINGS = [\n{ label: 'Primary Button', name: 'hasPrimaryButton' },\n{ label: 'Secondary Button', name: 'hasSecondaryButton' },\n{ label: 'Фиксация футера при скролле', name: 'sticky' },\n];\n\nrender(() => {\nconst [open, setOpen] = React.useState(false);\nconst [size, setSize] = React.useState('500');\nconst [headerSettings, setHeaderSettings] = React.useState(() => ({\n...HEADER_SETTINGS.reduce((res, item) => ({ ...res, [item.name]: false }), {}),\ntitleInContent: false,\n}));\nconst [footerSettings, setFooterSettings] = React.useState(() =>\nFOOTER_SETTINGS.reduce((res, item) => ({ ...res, [item.name]: false }), {}),\n);\n\nconst showHeader =\nheaderSettings.hasTitle || headerSettings.hasCloser || headerSettings.hasBackButton;\n\nconst showFooter = footerSettings.hasPrimaryButton || footerSettings.hasSecondaryButton;\n\nconst getKey = () => JSON.stringify(headerSettings);\n\nconst handleOpen = () => setOpen(true);\n\nconst handleClose = () => setOpen(false);\n\nconst handleSizeChange = (_, { value }) => {\nsetSize(value);\n};\n\nconst handleHeaderSettingsChange = (_, { name, checked }) => {\nsetHeaderSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nconst handleFooterSettingsChange = (_, { name, checked }) => {\nsetFooterSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nreturn (\n\n\n\n\n\n\n{SIZES.map((item) => (\n\n))}\n\n\n\n\n\n{HEADER_SETTINGS.map((item) => (\n\n))}\n\n\n\n\n\n\n\n\n\n\n\n{FOOTER_SETTINGS.map((item) => (\n\n))}\n\n\n\n{showHeader && (\n\n)}\n\n{headerSettings.titleInContent ? (\n<>\n\n{`Почему банк проверяет мои операции?`}\n\n\n\n) : undefined}\n\n\n{showFooter && (\n\n\nPrimary\n\n) : null\n}\nsecondary={\nfooterSettings.hasSecondaryButton ? (\n\n) : null\n}\n/>\n\n)}\n\n\n);\n});", + "mobile": "const Text = ({ onClose }) => (\n<>\n\nВ 2001 году в России начал действовать Федеральный закон №115 «О противодействии\nлегализации доходов, полученных преступным путём, и финансированию терроризма». В рамках\nзакона банки могут блокировать карты, отказывать в проведении сомнительных операций,\nограничить доступ в интернет-банк или запрашивать документы, если по операции клиента\nвозникли подозрения.{' '}\nНажмите сюда, чтобы закрыть модалку без крестика\n\n
\n\nТребования 115-ФЗ и связанных с ним документов Банка России часто меняются,\nпредприниматели не всегда успевают за ними следить. Последствия нарушений\n«антиотмывочного» законодательства всегда неприятны: приходится остановить\nбизнес-процессы и доказать банку законность операций. Специалисты «Альфа-банка» собрали\nпонятные рекомендации, как сэкономить время на объяснения и предотвратить блокировки\n\n\n\n115-ФЗ Касается всех предпринимателей, фирм и физлиц, а также тех, кто пользуется\nбанковским счётом для бизнеса, крупных денежных переводов или личных расчётов.\nОграничения интернет-банка, блокировка карт добросовестных компаний могут произойти\nиз-за неправильно оформленных документов, ошибок в платёжке или попыток снизить\nналоги.\n\n
\n\nКлиенты воспринимают ограничения как атаку со стороны банка, но чаще всего сами\nдопускают ошибки или нарушения, которых можно избежать. Банки не преследуют цели\nдоставить неудобства клиентам — они обязаны соблюдать законодательство и следовать\nинструкциям и рекомендациям ЦБ, а в противном случае рискуют лишиться лицензии.\n\n
\n\nОбналичивание — сомнительные операции, когда юрлицо или предприниматель снимает со\nсчёта более 80% от оборота или переводит деньги на счета физлиц, которые затем\nснимают в наличной форме.\n\n
\n\nВывод капитала за границу — это переводы нерезидентам по договорам об импорте\nработ/услуг и результатов интеллектуальной деятельности, по которым проведение\nрасчётов осуществляется без одновременной уплаты НДС; по сделкам купли-продажи\nценных бумаг, а также товаров, которые не пересекают границу России.\n\n
\n\nТранзитные операции — операции, в процессе которых деньги поступают на счёт компании\nот других резидентов и списываются в короткие сроки. При этом, как правило, в этих\nслучаях по счёту нет начислений зарплат, уплаты налогов, и они не соответствуют\nзаявленному компанией виду деятельности.\n\n
\n\nЗапрашивать могут любые документы и устанавливать разные сроки их предоставления —\nэто зависит от службы контроля конкретного банка. Обычно банки запрашивают чеки,\nсчета или договора с контрагентами. В некоторых случаях бывает достаточно устных\nобъяснений. Для проверки информации и пересмотра уровня риска банк может пригласить\nклиента в банк для устного разъяснения или выехать по месту ведения бизнеса клиента.\n\n\n\n);\n\nconst HEADER_SELECT_OPTIONS = [\n{ key: 'withoutTitle', content: 'Нет заголовка' },\n{ key: 'defaultTitle', content: 'Стандартный' },\n{ key: 'compactTitle', content: 'Компактный' },\n{ key: 'compactTitleWithSubtitle', content: 'Компактный с подписью' },\n{ key: 'compactTitleWithCenterAlign', content: 'Компактный центрированный' },\n{\nkey: 'compactTitleWithSubtitleAndCenterAlign',\ncontent: 'Компактный центрированный с подписью',\n},\n];\n\nconst FOOTER_SELECT_OPTIONS = [\n{ key: 'vertical', content: 'Вертикальный' },\n{ key: 'horizontal', content: 'Горизонтальный' },\n];\n\nconst HEADER_SETTINGS = [\n{ label: 'Крестик', name: 'hasCloser' },\n{ label: 'Стрелка назад', name: 'hasBackButton' },\n{ label: 'Фиксация шапки при скролле', name: 'sticky' },\n];\n\nconst FOOTER_SETTINGS = [\n{ label: 'Primary Button', name: 'hasPrimaryButton' },\n{ label: 'Secondary Button', name: 'hasSecondaryButton' },\n{ label: 'Фиксация футера при скролле', name: 'sticky' },\n];\n\nrender(() => {\nconst [open, setOpen] = React.useState(false);\nconst [headerViewSelected, setHeaderView] = React.useState(HEADER_SELECT_OPTIONS[0].key);\nconst [footerViewSelected, setFooterView] = React.useState(FOOTER_SELECT_OPTIONS[0].key);\nconst [headerSettings, setHeaderSettings] = React.useState(() => ({\n...HEADER_SETTINGS.reduce((res, item) => ({ ...res, [item.name]: false }), {}),\ntitleInContent: false,\n}));\nconst [footerSettings, setFooterSettings] = React.useState(() =>\nFOOTER_SETTINGS.reduce((res, item) => ({ ...res, [item.name]: false }), {}),\n);\n\nconst showHeader =\nheaderViewSelected !== HEADER_SELECT_OPTIONS[0].key ||\nheaderSettings.hasCloser ||\nheaderSettings.hasBackButton;\n\nconst showFooter = footerSettings.hasPrimaryButton || footerSettings.hasSecondaryButton;\n\nconst getKey = () =>\n`${JSON.stringify(headerSettings)}-${headerViewSelected}-${footerViewSelected}`;\n\nconst handleOpen = () => setOpen(true);\n\nconst handleClose = () => setOpen(false);\n\nconst handleHeaderSettingsChange = (_, { name, checked }) => {\nsetHeaderSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nconst handleFooterSettingsChange = (_, { name, checked }) => {\nsetFooterSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nreturn (\n\n\n\n\n\n

Настройки шапки

\n\n setHeaderView(selected.key)}\nOption={BaseOption}\n/>\n\n\n\n\n{HEADER_SETTINGS.map((item) => (\n\n))}\n\n\n\n\n\n\n\n\n\n\n

Настройки футера

\n\n setFooterView(selected.key)}\nOption={BaseOption}\n/>\n\n\n\n\n{FOOTER_SETTINGS.map((item) => (\n\n))}\n\n\n\n{showHeader && (\n\n)}\n\n{headerSettings.titleInContent ? (\n<>\n\n{`Почему банк проверяет мои операции?`}\n\n\n\n) : undefined}\n\n\n\n{showFooter && (\n\n\nPrimary\n\n) : null\n}\nsecondary={\nfooterSettings.hasSecondaryButton ? (\n\nSecondary\n\n) : null\n}\n/>\n\n)}\n\n\n);\n});" + }, + { + "title": "Последовательность шагов", + "description": "Компонент можно настроить для реализации многошаговых сценариев.\nВ этом случае верхний край должен быть зафиксирован, чтобы избежать неприятных скачков.", + "desktop": "const DATA = {\n1: {\ntitle: 'Первый уровень',\nbtnText: 'Дальше',\nbg: 'rgba(55, 120, 251, 0.1)',\ncolor: '#3778FB',\n},\n2: {\ntitle: 'Второй уровень',\nbtnText: 'Дальше',\nbg: 'rgba(207, 112, 255, 0.1)',\ncolor: '#CF70FF',\n},\n3: {\ntitle: 'Третий уровень',\nbtnText: 'Готово',\nbg: 'rgba(112, 255, 126, 0.1)',\ncolor: '#058102',\n},\n};\n\nrender(() => {\nconst [step, setStep] = React.useState(1);\nconst [open, setOpen] = React.useState(false);\n\nconst handleOpen = () => {\nsetOpen(true);\nsetStep(1);\n};\nconst handleClose = () => setOpen(false);\n\nconst item = DATA[step];\n\nconst commonStyles = {\ndisplay: 'flex',\nalignItems: 'center',\njustifyContent: 'center',\ntransition: 'background 0.2s ease-in, border 0.2s ease-in',\nborderRadius: '8px',\nbackground: item.bg,\nborder: `1px dashed ${item.color}`,\ncolor: item.color,\nwidth: '100%',\nboxSizing: 'border-box',\n};\n\nreturn (\n\n\n\n\n setStep(step - 1)}\n/>\n\n\n{step}\n
\n\n\n setStep(step + 1) : handleClose\n}\n>\n{item.btnText}\n\n\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/mq.json b/packages/mcp/src/data/v50.16.0/mq.json new file mode 100644 index 0000000000..cf676d5355 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/mq.json @@ -0,0 +1,61 @@ +{ + "packageName": "mq", + "displayName": "Mq", + "description": "Используется для имплементации поддержки медиа запросов.", + "props": { + "query": { + "defaultValue": { + "value": "" + }, + "description": "Media выражение или кастомный запрос из `mq.json`, например `--mobile`.", + "name": "query", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "touch": { + "defaultValue": null, + "description": "Запрос на поддержку тач-событий", + "name": "touch", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": null, + "description": "Значение по-умолчанию для хука useMatchMedia", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние элементы.", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "onMatchChange": { + "defaultValue": null, + "description": "Обработчик изменений в совпадении запросов", + "name": "onMatchChange", + "required": false, + "type": { + "name": "((isMatched: boolean) => void) | undefined" + } + } + }, + "demos": [ + { + "title": "Пример", + "description": "В этом примере при изменении ширины окна браузера кнопка будет переключаться между мобильной и десктопной версией.", + "desktop": "
\n\n\n\n\n\n\n
" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/navigation-bar.json b/packages/mcp/src/data/v50.16.0/navigation-bar.json new file mode 100644 index 0000000000..c2eeb72bad --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/navigation-bar.json @@ -0,0 +1,176 @@ +{ + "packageName": "navigation-bar", + "displayName": "NavigationBar", + "description": "Используется для навигации между страницами.", + "props": { + "title": { + "defaultValue": null, + "description": "Заголовок", + "name": "title", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "subtitle": { + "defaultValue": null, + "description": "Подзаголовок", + "name": "subtitle", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Контент шапки", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "align": { + "defaultValue": { + "value": "center" + }, + "description": "Выравнивание заголовка", + "name": "align", + "required": false, + "type": { + "name": "\"center\" | \"left\" | undefined" + } + }, + "backgroundColor": { + "defaultValue": { + "value": "var(--color-light-base-bg-primary)" + }, + "description": "Цвет фона", + "name": "backgroundColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "border": { + "defaultValue": null, + "description": "Наличие бордера", + "name": "border", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "sticky": { + "defaultValue": null, + "description": "Фиксирует шапку", + "name": "sticky", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "bottomAddons": { + "defaultValue": null, + "description": "Слот снизу", + "name": "bottomAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Дополнительный класс для контента", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "contentWrapperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для обертки контента", + "name": "contentWrapperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "rightAddonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для правого аддона", + "name": "rightAddonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "leftAddonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для левого аддона", + "name": "leftAddonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "bottomAddonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для нижнего аддона", + "name": "bottomAddonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Анатомия", + "description": "Компонент содержит основной, левый, правый, и нижний слоты.\nПоддерживается два вида выравнивания: левое и центральное.\nПри левом выравнивании недоступен левый слот.", + "desktop": "const ALIGN_SELECT_OPTIONS = [\n{ key: 'left', content: 'Левое' },\n{ key: 'center', content: 'Центральное' },\n];\n\nrender(() => {\nconst [alignViewSelected, setAlignView] = React.useState(ALIGN_SELECT_OPTIONS[0].key);\n\nconst wrapperStyles = {\nwidth: 360,\nmargin: 'var(--gap-20-neg)',\n};\n\nconst commonStyles = {\nbackgroundColor: 'var(--color-light-status-muted-alt-attention)',\nborder: '1px dashed var(--color-light-status-attention)',\nboxSizing: 'border-box',\nborderRadius: '8px',\nheight: '40px',\n...(alignViewSelected === 'left' && {\nbackgroundColor: 'var(--color-light-status-muted-alt-negative)',\n}),\n};\n\nconst addonsStyles = {\n...commonStyles,\nbackgroundColor: 'var(--color-light-status-muted-alt-positive)',\nborderColor: 'var(--color-light-status-positive)',\nwidth: '48px',\n};\n\nconst bottomAddonsStyles = {\n...commonStyles,\nbackgroundColor: 'var(--color-light-status-muted-alt-info)',\nborderColor: 'var(--color-light-status-info)',\nwidth: '100%',\n};\nreturn (\n
\n
\n}\nrightAddons={
}\nbottomAddons={
}\nbackgroundColor='var(--color-light-base-bg-secondary)'\nalign={alignViewSelected}\n>\n
\n\n
\n\n
\n setAlignView(selected.key)}\nOption={BaseOption}\nsize={48}\n/>\n
\n
\n);\n});" + }, + { + "title": "Конструктор", + "description": "В качестве контента для слотов можно передавать как дефолтные варианты, так и кастомную вёрстку. Кастомные варианты контента отмечены в списках астериском.", + "desktop": "const ALIGN_SELECT_OPTIONS = [\n{ key: 'center', content: 'Центральное' },\n{ key: 'left', content: 'Левое' },\n];\nconst BACKGROUND_SELECT_OPTIONS = [\n{ key: 'var(--color-light-base-bg-primary)', content: 'base-bg-primary' },\n{ key: 'var(--color-light-base-bg-secondary)', content: 'base-bg-secondary' },\n{ key: 'transparent', content: 'transparent-default' },\n];\nconst BORDER_SELECT_OPTIONS = [\n{ key: 'scroll', content: '*Только при скролле' },\n{ key: 'no', content: 'Без бордера' },\n{ key: 'yes', content: 'Всегда есть' },\n];\nconst STICKY_SELECT_OPTIONS = [\n{ key: 'yes', content: 'Фиксированное' },\n{ key: 'no', content: 'Скроллится с контентом' },\n];\nconst MAIN_SELECT_OPTIONS = [\n{ key: 'title', content: 'Заголовок' },\n{ key: 'titleWithSubtitle', content: 'Заголовок и подпись' },\n{ key: 'no', content: 'Пустой' },\n];\nconst LEFT_SELECT_OPTIONS = [\n{ key: 'back', content: 'Стрелка назад' },\n{ key: 'floatingBack', content: 'Плавающая стрелка назад' },\n{ key: 'primary', content: 'Основное действие' },\n{ key: 'secondary', content: 'Второстепенное действие' },\n{ key: 'no', content: 'Пустой' },\n];\nconst RIGHT_SELECT_OPTIONS = [\n{ key: 'close', content: 'Плавающий крестик' },\n{ key: 'primary', content: 'Основное действие' },\n{ key: 'secondary', content: 'Второстепенное действие' },\n{ key: 'oneIcon', content: 'Одна иконка' },\n{ key: 'twoIcons', content: 'Две иконки' },\n{ key: 'threeIcons', content: 'Три иконки' },\n{ key: 'no', content: 'Пустой' },\n];\nconst BOTTOM_SELECT_OPTIONS = [\n{ key: 'no', content: 'Пустой' },\n{ key: 'input', content: '*Input' },\n{ key: 'segmentedControl', content: '*SegmentedControl' }, \n];\n\nconst ShowIcontAddons = ({ quantity }) => (\n
\n{Array(quantity)\n.fill('')\n.map((_, key) => (\n
\n\n
\n))}\n
\n);\n\nrender(() => {\nconst [alignViewSelected, setAlignView] = React.useState(ALIGN_SELECT_OPTIONS[0].key);\nconst [backgroundViewSelected, setBackgroundView] = React.useState(\nBACKGROUND_SELECT_OPTIONS[0].key,\n);\nconst [borderViewSelected, setBorderView] = React.useState(BORDER_SELECT_OPTIONS[0].key);\nconst [stickyViewSelected, setStickyView] = React.useState(STICKY_SELECT_OPTIONS[0].key);\n\nconst [mainSelected, setMainView] = React.useState(MAIN_SELECT_OPTIONS[0].key);\nconst [leftSelected, setLeftView] = React.useState(LEFT_SELECT_OPTIONS[0].key);\nconst [rightSelected, setRightView] = React.useState(RIGHT_SELECT_OPTIONS[0].key);\nconst [bottomSelected, setBottomView] = React.useState(BOTTOM_SELECT_OPTIONS[0].key);\n\nconst [selectedId, setSelectedId] = React.useState(1);\nconst [scrollTop, setScrollTop] = React.useState(false);\n\nconst mainContent = {\ntitle: { title: 'Название экрана', subtitle: undefined },\ntitleWithSubtitle: { title: 'Название экрана', subtitle: 'Подпись экрана' },\nno: { title: undefined, subtitle: undefined },\n};\n\nconst leftContent = {\nback: ,\nfloatingBack: ,\nprimary: ,\nsecondary: ,\nno: undefined,\n};\n\nconst rightContent = {\nclose: ,\nprimary: ,\nsecondary: ,\noneIcon: ,\ntwoIcons: ,\nthreeIcons: ,\nno: undefined,\n};\n\nconst border = {\nyes: true,\nno: false,\nscroll: scrollTop,\n};\n\nconst wrapperBottomStyles = {\npadding: '8px 12px 0px',\n};\n\nconst input = (\n
\n} placeholder='Поиск' />\n
\n);\n\nconst segmentedControl = (\n
\n setSelectedId(id)} selectedId={selectedId}>\n\n\n\n
\n);\n\nconst bottomContent = {\ninput,\nsegmentedControl: segmentedControl,\nno: undefined,\n};\n\nconst wrapperStyles = {\nheight: 635,\noverflowY: 'scroll',\nwidth: 360,\nmargin: 'var(--gap-20-neg)',\n};\n\nconst handleScroll = (event) => {\nconst scrolledToHeader = event.currentTarget.scrollTop > 0;\nsetScrollTop(scrolledToHeader);\n};\n\nconst css = `\ndiv[data-test-id='title'] {\npadding: 0 var(--gap-4);\n}\n`;\n\nreturn (\n
\n\n\n\n
\n\n\nОсновные настройки\n\n setBackgroundView(selected.key)}\nOption={BaseOption}\nsize={48}\n/>\n setBorderView(selected.key)}\nOption={BaseOption}\nsize={48}\n/>\n setAlignView(selected.key)}\nOption={BaseOption}\nsize={48}\n/>\n setStickyView(selected.key)}\nOption={BaseOption}\nsize={48}\n/>\n\n\n\n\nКонтент\n\n setMainView(selected.key)}\nOption={BaseOption}\nsize={48}\n/>\n{alignViewSelected === 'center' && (\n setLeftView(selected.key)}\nOption={BaseOption}\nsize={48}\n/>\n)}\n setRightView(selected.key)}\nOption={BaseOption}\nsize={48}\n/>\n setBottomView(selected.key)}\nOption={BaseOption}\nsize={48}\n/>\n\n
\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/notification-manager.json b/packages/mcp/src/data/v50.16.0/notification-manager.json new file mode 100644 index 0000000000..242e3bb953 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/notification-manager.json @@ -0,0 +1,79 @@ +{ + "packageName": "notification-manager", + "displayName": "NotificationManager", + "description": "Используется для одновременного вывода нескольких уведомлений.", + "props": { + "notifications": { + "defaultValue": null, + "description": "Массив нотификаций.\nВ нотификации обязательно передавайте id.", + "name": "notifications", + "required": true, + "type": { + "name": "NotificationElement[]" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс (native prop)", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "zIndex": { + "defaultValue": { + "value": 1000 + }, + "description": "z-index компонента", + "name": "zIndex", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "offset": { + "defaultValue": null, + "description": "Отступ от верхнего края", + "name": "offset", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "onRemoveNotification": { + "defaultValue": null, + "description": "Удаление нотификации", + "name": "onRemoveNotification", + "required": true, + "type": { + "name": "(id: string) => void" + } + }, + "container": { + "defaultValue": null, + "description": "Нода, компонент или функция возвращающая их\n\nКонтейнер к которому будут добавляться порталы", + "name": "container", + "required": false, + "type": { + "name": "(() => Element | null | undefined) | undefined" + } + } + }, + "demos": [ + { + "title": "Пример", + "description": "В этом примере можно вызвать сразу несколько уведомлений.", + "desktop": "render(() => {\nconst [notifications, setNotifications] = React.useState([]);\n\nconst [count, setCount] = React.useState(1);\n\nconst getColorBadge = (num) => {\nif (num % 3 === 1) {\nreturn 'positive-checkmark';\n}\nif (num % 3 === 2) {\nreturn 'attention-alert';\n}\nreturn 'negative-cross';\n};\n\nconst addNotification = () => {\nconst newNotification = (\n\nОписание уведомления\n\n);\n\nsetNotifications([...notifications, newNotification]);\nsetCount((val) => val + 1);\n};\n\nconst removeNotification = React.useCallback((id) => {\n/**\n* Обратите внимание, что актуальный массив нотификаций\n* нужно брать из аргументов функции обновления состояния.\n*/\nsetNotifications((actualNotifications) =>\nactualNotifications.filter((notification) => notification.props.id !== id),\n);\n}, []);\n\nreturn (\n
\n\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/notification.json b/packages/mcp/src/data/v50.16.0/notification.json new file mode 100644 index 0000000000..04195b5f88 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/notification.json @@ -0,0 +1,251 @@ +{ + "packageName": "notification", + "displayName": "Notification", + "description": "Информирует пользователя о текущем состоянии операций или сообщает пользователю о результате выполнения его команды. Не имеет мобильной версии.", + "props": { + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "colors": { + "defaultValue": null, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева, заменяет стандартную иконку", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "onClose": { + "defaultValue": null, + "description": "Обработчик клика по крестику", + "name": "onClose", + "required": false, + "type": { + "name": "((event?: MouseEvent | undefined) => void) | undefined" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Дополнительный класс для контентной области", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "actionButton": { + "defaultValue": null, + "description": "Кнопка действия", + "name": "actionButton", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "closerClassName": { + "defaultValue": null, + "description": "Доп. класс кнопки \"закрыть\".\n@deprecated Используйте пропс `closerProps`", + "name": "closerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "hasCloser": { + "defaultValue": null, + "description": "Управляет отображением кнопки закрытия уведомления\n@deprecated Используйте пропс `closerProps`", + "name": "hasCloser", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "closerProps": { + "defaultValue": { + "value": "{ hasCloser: true }" + }, + "description": "Параметры кнопки закрытия\n@property {boolean} [hasCloser] - Управляет отображением кнопки закрытия уведомления\n@property {string} [closerWrapperClassName] - Дополнительный класс враппера кнопки \"закрыть\"\n@property {string} [closerClassName] - Дополнительный класс кнопки \"закрыть\"\n@property {boolean} [divider] - Показывать разделитель\n@property {import('@alfalab/core-components-icon-button').IconButtonProps['view']} [view] - Вид кнопки закрытия", + "name": "closerProps", + "required": false, + "type": { + "name": "{Object}" + } + }, + "titleClassName": { + "defaultValue": null, + "description": "Дополнительный класс для заголовка", + "name": "titleClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "actionSectionClassName": { + "defaultValue": null, + "description": "Дополнительный класс для области с кнопкой действия", + "name": "actionSectionClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "boldTitle": { + "defaultValue": null, + "description": "Жирный заголовок", + "name": "boldTitle", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "badge": { + "defaultValue": null, + "description": "Вид бэйджа", + "name": "badge", + "required": false, + "type": { + "name": "StatusBadgeViews | undefined" + } + }, + "closerWrapperClassName": { + "defaultValue": null, + "description": "Доп. класс враппера кнопки \"закрыть\".\n@deprecated Используйте пропс `closerProps`", + "name": "closerWrapperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "getBadgeIcons": { + "defaultValue": null, + "description": "Функция, с помощью которой можно переопределить иконки в StatusBadge", + "name": "getBadgeIcons", + "required": false, + "type": { + "name": "Partial>>> | undefined" + } + }, + "visible": { + "defaultValue": null, + "description": "Управление видимостью компонента", + "name": "visible", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "offset": { + "defaultValue": { + "value": 108 + }, + "description": "Отступ от верхнего края", + "name": "offset", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "autoCloseDelay": { + "defaultValue": { + "value": 5000 + }, + "description": "Время до закрытия компонента", + "name": "autoCloseDelay", + "required": false, + "type": { + "name": "number | null | undefined" + } + }, + "usePortal": { + "defaultValue": { + "value": true + }, + "description": "Использовать портал", + "name": "usePortal", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "zIndex": { + "defaultValue": { + "value": 1000 + }, + "description": "z-index компонента", + "name": "zIndex", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "position": { + "defaultValue": { + "value": "top" + }, + "description": "Позиционирование компонента от верхнего или нижнего края экрана", + "name": "position", + "required": false, + "type": { + "name": "\"top\" | \"bottom\" | undefined" + } + }, + "onCloseTimeout": { + "defaultValue": null, + "description": "Обработчик события истечения времени до закрытия компонента", + "name": "onCloseTimeout", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "onClickOutside": { + "defaultValue": null, + "description": "Обработчик клика вне компонента", + "name": "onClickOutside", + "required": false, + "type": { + "name": "((event?: MouseEvent | undefined) => void) | undefined" + } + }, + "containerRef": { + "defaultValue": null, + "description": "Ссылка на контейнер компонента, к которому применяется анимация", + "name": "containerRef", + "required": false, + "type": { + "name": "RefObject | undefined" + } + } + }, + "demos": [ + { + "title": "Пример", + "description": "", + "desktop": "render(() => {\nconst [isVisible, setIsVisible] = React.useState(false);\n\nconst toggleVisibility = React.useCallback(() => setIsVisible((prev) => !prev), []);\nconst hideNotification = React.useCallback(() => setIsVisible(false), []);\n\nreturn (\n
\n\nОписание уведомления\n\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/number-input.json b/packages/mcp/src/data/v50.16.0/number-input.json new file mode 100644 index 0000000000..c73fb27d36 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/number-input.json @@ -0,0 +1,393 @@ +{ + "packageName": "number-input", + "displayName": "NumberInputResponsive", + "description": "Поле для ввода чисел.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля кнопки инкремента используется модификатор -increment-button, декремента -decrement-button", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "defaultValue": { + "defaultValue": null, + "description": "Значение по-умолчанию", + "name": "defaultValue", + "required": false, + "type": { + "name": "string | number | null | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик события изменения значения", + "name": "onChange", + "required": false, + "type": { + "name": "((e: ChangeEvent | null, payload: { value: number | null; }) => void) | undefined" + } + }, + "onClick": { + "defaultValue": null, + "description": "Обработчик клика по полю", + "name": "onClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseDown": { + "defaultValue": null, + "description": "Обработчик MouseDown по полю", + "name": "onMouseDown", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseUp": { + "defaultValue": null, + "description": "Обработчик MouseUp по полю", + "name": "onMouseUp", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "separator": { + "defaultValue": null, + "description": "Разделитель ',' или '.'", + "name": "separator", + "required": false, + "type": { + "name": "\".\" | \",\" | undefined" + } + }, + "step": { + "defaultValue": null, + "description": "Шаг инкремента/декремента. Используйте только целочисленные значения", + "name": "step", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "size": { + "defaultValue": { + "value": "48" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "colors": { + "defaultValue": null, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Значение поля ввода", + "name": "value", + "required": false, + "type": { + "name": "string | number | null | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "bold": { + "defaultValue": null, + "description": "Жирный текст\n@deprecated Используйте {@link BaseInputProps.fontWeight }", + "name": "bold", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "fontWeight": { + "defaultValue": null, + "description": "Вес шрифта инпута, в том числе плейсхолдера", + "name": "fontWeight", + "required": false, + "type": { + "name": "\"bold\" | \"medium\" | \"regular\" | undefined" + } + }, + "max": { + "defaultValue": { + "value": "Number.MAX_SAFE_INTEGER" + }, + "description": "Максимальное значение", + "name": "max", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "min": { + "defaultValue": { + "value": "Number.MIN_SAFE_INTEGER" + }, + "description": "Минимальное значение", + "name": "min", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clear": { + "defaultValue": null, + "description": "Крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "success": { + "defaultValue": null, + "description": "Отображение иконки успеха", + "name": "success", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл компонента", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "wrapperRef": { + "defaultValue": null, + "description": "Ref для обертки input", + "name": "wrapperRef", + "required": false, + "type": { + "name": "Ref | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки левых аддонов", + "name": "leftAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "rightAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки правых аддонов", + "name": "rightAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "bottomAddons": { + "defaultValue": null, + "description": "Слот под инпутом", + "name": "bottomAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "inputClassName": { + "defaultValue": null, + "description": "Дополнительный класс инпута", + "name": "inputClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "labelClassName": { + "defaultValue": null, + "description": "Дополнительный класс для лейбла", + "name": "labelClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "addonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для аддонов", + "name": "addonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "focusedClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен при фокусе", + "name": "focusedClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "filledClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен, если в поле есть значение", + "name": "filledClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку очистки", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "disableUserInput": { + "defaultValue": null, + "description": "Запрещает ввод с клавиатуры", + "name": "disableUserInput", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + }, + "fractionLength": { + "defaultValue": null, + "description": "Количество символов после разделителя\nЕсли указан проп step, то всегда 0", + "name": "fractionLength", + "required": false, + "type": { + "name": "number | undefined" + } + } + }, + "demos": [ + { + "title": "Стандартный вид компонента", + "description": "Компонент умеет принимать только целые и дробные числа с разным знаком.\nВид разделителя и количество знаков в дробной части можно настраивать.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState(null);\n\nconst [separator, setSeparator] = React.useState(',');\nconst [fractionLengthRadioValue, setFractionLengthRadioValue] = React.useState('notLimited');\n\nconst handleChange = (_, payload) => {\nsetValue(payload.value);\n};\n\nconst handleSeparatorChange = (_, payload) => {\nsetSeparator(payload.value);\nsetValue(null);\n};\n\nconst handleFractionLengthRadioChange = (_, payload) => {\nsetFractionLengthRadioValue(payload.value);\nsetValue(null);\n};\n\nreturn (\n
\n setValue(null)}\nbreakpoint={BREAKPOINT}\n/>\n\n\n\n\n\n\n\n\n\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/page-indicator.json b/packages/mcp/src/data/v50.16.0/page-indicator.json new file mode 100644 index 0000000000..ef995caab4 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/page-indicator.json @@ -0,0 +1,91 @@ +{ + "packageName": "page-indicator", + "displayName": "PageIndicatorBullet", + "description": "", + "props": { + "size": { + "defaultValue": { + "value": 8 + }, + "description": "Высота компонента", + "name": "size", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "gap": { + "defaultValue": { + "value": 8 + }, + "description": "Расстояние между элементами", + "name": "gap", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | \"static\" | \"static-inverted\" | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Имя класса", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "activeElement": { + "defaultValue": null, + "description": "Индекс выбранного элемента", + "name": "activeElement", + "required": true, + "type": { + "name": "number" + } + }, + "elements": { + "defaultValue": { + "value": 10 + }, + "description": "Количество элементов (минимум 2)", + "name": "elements", + "required": false, + "type": { + "name": "number | undefined" + } + } + }, + "demos": [ + { + "title": "PageIndicatorDynamic", + "description": "Доступен в двух размерах: 6 и 8 рх.", + "desktop": "render(() => {\nconst elements = 7;\nconst [active, setActive] = React.useState(true);\nconst toggleActive = () => setActive((active) => !active);\nconst [activeElement, setActiveElement] = React.useState(0);\nconst handlePrevClick = () => setActiveElement((prev) => Math.max(--prev, 0));\nconst handleNextClick = () => setActiveElement((prev) => Math.min(++prev, elements - 1));\nconst duration = (index) => (index % 2 === 0 ? 2000 : 4000);\n\nreturn (\n
\n\n\n\n\n\n\n
\n);\n});" + }, + { + "title": "PageIndicatorBullet", + "description": "Доступен в двух размерах, 6 и 8 рх. В зависимости от количества элементов, меняется анимация и внешний вид индикатора.\n\nМеньше шести элементов.", + "desktop": "render(() => {\nconst elements = 5;\nconst [activeElement, setActiveElement] = React.useState(0);\nconst handlePrevClick = () => setActiveElement((prev) => Math.max(--prev, 0));\nconst handleNextClick = () => setActiveElement((prev) => Math.min(++prev, elements - 1));\n\nreturn (\n
\n\n\n\n\n\n\n
\n);\n});" + }, + { + "title": "PageIndicatorStep", + "description": "Доступен в одном размере. Ширина подстраивается под ширину контейнера.", + "desktop": "render(() => {\nconst elements = 5;\nconst [activeElement, setActiveElement] = React.useState(0);\nconst handlePrevClick = () => setActiveElement((prev) => Math.max(--prev, 0));\nconst handleNextClick = () => setActiveElement((prev) => Math.min(++prev, elements - 1));\n\nreturn (\n
\n
\n\n
\n\n
\n);\n});" + }, + { + "title": "PageIndicatorRunner", + "description": "Доступен в одном размере. Ширина подстраивается под ширину контейнера.", + "desktop": "render(() => {\nconst elements = 5;\nconst [activeElement, setActiveElement] = React.useState(0);\nconst handlePrevClick = () => setActiveElement((prev) => Math.max(--prev, 0));\nconst handleNextClick = () => setActiveElement((prev) => Math.min(++prev, elements - 1));\n\nreturn (\n
\n
\n\n
\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/pagination.json b/packages/mcp/src/data/v50.16.0/pagination.json new file mode 100644 index 0000000000..7ad4c539ca --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/pagination.json @@ -0,0 +1,107 @@ +{ + "packageName": "pagination", + "displayName": "Pagination", + "description": "Используется для переключения между страницами.", + "props": { + "currentPageIndex": { + "defaultValue": { + "value": 0 + }, + "description": "Текущая страница (с нуля)", + "name": "currentPageIndex", + "required": false, + "type": { + "name": "number" + } + }, + "pagesCount": { + "defaultValue": null, + "description": "Количество страниц", + "name": "pagesCount", + "required": true, + "type": { + "name": "number" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "hideArrows": { + "defaultValue": { + "value": true + }, + "description": "Скрывает стрелки, если выбрана первая или последняя страница", + "name": "hideArrows", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "sidePadding": { + "defaultValue": { + "value": 1 + }, + "description": "Количество видимых страниц по бокам", + "name": "sidePadding", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "activePadding": { + "defaultValue": { + "value": 2 + }, + "description": "Количество видимых страниц вокруг выбранной", + "name": "activePadding", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "view": { + "defaultValue": { + "value": "default" + }, + "description": "Режим пагинации", + "name": "view", + "required": false, + "type": { + "name": "\"default\" | \"per-page\" | undefined" + } + }, + "onPageChange": { + "defaultValue": { + "value": "() => null" + }, + "description": "Обработчик переключения страницы", + "name": "onPageChange", + "required": false, + "type": { + "name": "((pageIndex: number) => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Пагинация с возможностью быстрого доступа к крайним страницам.", + "desktop": "render(() => {\nconst DATA_SIZE = isMobile() ? 5 : 20;\nconst PER_PAGE = 1;\n\nconst [page, setPage] = React.useState(0);\n\nconst handlePageChange = pageIndex => setPage(pageIndex);\n\nconst pagesCount = Math.ceil(DATA_SIZE / PER_PAGE);\n\nreturn (\n\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/pass-code.json b/packages/mcp/src/data/v50.16.0/pass-code.json new file mode 100644 index 0000000000..d171a59ab4 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/pass-code.json @@ -0,0 +1,155 @@ +{ + "packageName": "pass-code", + "displayName": "PassCode", + "description": "Компонент для авторизации пользователя с помощью цифрового ключа.", + "props": { + "value": { + "defaultValue": null, + "description": "Код", + "name": "value", + "required": true, + "type": { + "name": "string" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик изменения кода", + "name": "onChange", + "required": true, + "type": { + "name": "(code: string) => void" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки ввода", + "name": "error", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "success": { + "defaultValue": null, + "description": "Отображение успешного ввода", + "name": "success", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "rightAddonsTitle": { + "defaultValue": null, + "description": "Заголовок для правого слота", + "name": "rightAddonsTitle", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля враппера используется модификатор -wrapper, ошибки -error,\nсообщения над клавиатурой -message, блока с кодом -input-progress,\nблока с цифрами -keypad", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Отключает ввод и удаление кода", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "maxCodeLength": { + "defaultValue": { + "value": "10" + }, + "description": "Максимально возможная длина кода", + "name": "maxCodeLength", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "codeLength": { + "defaultValue": null, + "description": "Длина кода", + "name": "codeLength", + "required": false, + "type": { + "name": "number | undefined" + } + } + }, + "demos": [ + { + "title": "Пример", + "description": "Компоненту можно передать длину кода, в этом случае он сразу отобразит нужное количество точек над пин-падом.\nЕсли длина неизвестна, после каждого нажатия на пин-пад будет добавляться новая точка.\nКнопка удаления появляется после ввода первого символа.\nПосле валидации компонент может отобразить состоянии ошибки.\nКорректная комбинация для примера `0451`.", + "desktop": "const VALID_CODE = '0451';\nconst MAX_LENGTH = VALID_CODE.length;\nconst SCREENS = {\nINITIAL: 'initial',\nENTER_CODE: 'ENTER_CODE',\nSUCCESS: 'success',\n};\n\nrender(() => {\nconst [screen, setScreen] = React.useState(SCREENS.INITIAL);\nconst [error, setError] = React.useState(false);\nconst [errorMessage, setErrorMessage] = React.useState(false);\nconst [code, setCode] = React.useState('');\nconst [passCodeParams, setPassCodeParams] = React.useState();\nconst passCodeRef = React.useRef(null);\nconst containerRef = React.useRef(null);\nconst [isSuccess, setSuccess] = React.useState(false);\n\nconst validate = (codeToValidate) => {\nconst isMaxCodeLength = 'maxCodeLength' in passCodeParams;\n\nif (codeToValidate !== VALID_CODE) {\nsetTimeout(() => {\nsetError(true);\nsetErrorMessage(true);\n}, 300);\nsetTimeout(() => {\nif (!isMaxCodeLength) {\nsetError(false);\n}\nsetCode('');\nsetErrorMessage(false);\n}, 1300);\n\nreturn;\n}\nsetTimeout(() => {\nsetSuccess(true);\n}, 700);\n\nif (isMaxCodeLength) {\nsetTimeout(() => {\nsetCode('');\n}, 1300);\n}\n\nsetTimeout(\n() => {\nsetScreen(SCREENS.SUCCESS);\n\nsetTimeout(() => {\nsetSuccess(false);\nsetCode('');\n}, 200);\n},\nisMaxCodeLength ? 2100 : 1500,\n);\n};\n\nconst handleChange = (value) => {\nsetCode(value);\nsetError(false);\nsetSuccess(false);\nsetErrorMessage(false);\n\nif (passCodeParams.codeLength > 0 && value.length === MAX_LENGTH) {\nvalidate(value);\n}\n};\n\nconst renderMessage = () => {\nif ('codeLength' in passCodeParams) {\nreturn (\n
\n\nВведите код из четырёх цифр\n\n
\n);\n}\n\nreturn null;\n};\n\nif (screen === SCREENS.INITIAL) {\nreturn (\n\n
\n {\nsetPassCodeParams({\ncodeLength: MAX_LENGTH,\nmessage: 'Введите код из четырёх цифр',\n});\nsetScreen(SCREENS.ENTER_CODE);\n}}\n>\nКод из четырех цифр\n\n\n {\nsetPassCodeParams({ maxCodeLength: 12 });\nsetScreen(SCREENS.ENTER_CODE);\n}}\n>\nДлина кода неизвестна заранее\n\n
\n
\n);\n}\n\nif (screen === SCREENS.SUCCESS) {\nreturn (\n
\n\n\n\n
\n\n\n\n\n\n\n\nВведён корректный пароль\n\n\n\n\n\nЭто пример экрана, на который попадает пользователь после ввода\nкорректного пароля\n\n
\n\n\n\n {\nsetScreen(SCREENS.INITIAL);\nsetError(false);\nsetSuccess(false);\nsetCode('');\n}}\nstyle={{\n...(isMobile() && { width: 320 }),\n}}\n>\nПопробовать ещё раз\n\n
\n
\n);\n}\n\nif (isMobile()) {\nreturn (\n 0 ? '60px' : '34px',\n}}\nref={containerRef}\n>\n
0 ? 464 : 504 }}>\n {}}\n/>\n{renderMessage()}\n\nЗабыли код?\n\n}\nrightAddons={\n\n\n\n}\nrightAddonsTitle='Вход по лицу'\n/>\n\n{passCodeParams.maxCodeLength > 0 && (\n\n\n validate(code)}\n>\nПродолжить\n\n\n)}\n
\n
\n);\n}\n\nreturn (\n\n {}}\n/>\n{renderMessage()}\n\nЗабыли код?\n\n}\nrightAddons={\n\n\n\n}\nrightAddonsTitle='Вход по лицу'\n/>\n\n{passCodeParams.maxCodeLength > 0 && (\n validate(code)}\n>\nПродолжить\n\n)}\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/password-input.json b/packages/mcp/src/data/v50.16.0/password-input.json new file mode 100644 index 0000000000..ced6c8afd7 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/password-input.json @@ -0,0 +1,380 @@ +{ + "packageName": "password-input", + "displayName": "PasswordInput", + "description": "Используется для ввода паролей.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля FormControl используется модификатор -form-control", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "type": { + "defaultValue": null, + "description": "Атрибут type", + "name": "type", + "required": false, + "type": { + "name": "\"number\" | \"text\" | \"tel\" | \"email\" | \"password\" | \"money\" | undefined" + } + }, + "defaultValue": { + "defaultValue": null, + "description": "Начальное значение поля", + "name": "defaultValue", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик поля ввода", + "name": "onChange", + "required": false, + "type": { + "name": "((event: ChangeEvent, payload: { value: string; }) => void) | undefined" + } + }, + "onClick": { + "defaultValue": null, + "description": "Обработчик клика по полю", + "name": "onClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseDown": { + "defaultValue": null, + "description": "Обработчик MouseDown по полю", + "name": "onMouseDown", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseUp": { + "defaultValue": null, + "description": "Обработчик MouseUp по полю", + "name": "onMouseUp", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "colors": { + "defaultValue": null, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Значение поля ввода", + "name": "value", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "bold": { + "defaultValue": null, + "description": "Жирный текст\n@deprecated Используйте {@link BaseInputProps.fontWeight }", + "name": "bold", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "fontWeight": { + "defaultValue": null, + "description": "Вес шрифта инпута, в том числе плейсхолдера", + "name": "fontWeight", + "required": false, + "type": { + "name": "\"bold\" | \"medium\" | \"regular\" | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clear": { + "defaultValue": null, + "description": "Крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "success": { + "defaultValue": null, + "description": "Отображение иконки успеха", + "name": "success", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл компонента", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "wrapperRef": { + "defaultValue": null, + "description": "Ref для обертки input", + "name": "wrapperRef", + "required": false, + "type": { + "name": "Ref | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки левых аддонов", + "name": "leftAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "rightAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки правых аддонов", + "name": "rightAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "bottomAddons": { + "defaultValue": null, + "description": "Слот под инпутом", + "name": "bottomAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "inputClassName": { + "defaultValue": null, + "description": "Дополнительный класс инпута", + "name": "inputClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "labelClassName": { + "defaultValue": null, + "description": "Дополнительный класс для лейбла", + "name": "labelClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "addonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для аддонов", + "name": "addonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "focusedClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен при фокусе", + "name": "focusedClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "filledClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен, если в поле есть значение", + "name": "filledClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку очистки", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "disableUserInput": { + "defaultValue": null, + "description": "Запрещает ввод с клавиатуры", + "name": "disableUserInput", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": null, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + }, + "size": { + "defaultValue": { + "value": 48 + }, + "description": "Размер компонента\n@description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно", + "name": "size", + "required": false, + "type": { + "name": "48 | 56 | 64 | 72 | undefined" + } + }, + "passwordVisible": { + "defaultValue": null, + "description": "Управление видимостью пароля (controlled)", + "name": "passwordVisible", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "passwordHint": { + "defaultValue": { + "value": "{\n visible: 'Скрыть',\n hidden: 'Показать',\n }" + }, + "description": "Управление текстом подсказки", + "name": "passwordHint", + "required": false, + "type": { + "name": "{ visible: string; hidden: string; } | undefined" + } + }, + "onPasswordVisibleChange": { + "defaultValue": null, + "description": "Коллбэк при изменении видимости пароля", + "name": "onPasswordVisibleChange", + "required": false, + "type": { + "name": "((visible: boolean) => void) | undefined" + } + } + }, + "demos": [ + { + "title": "Пример", + "description": "", + "desktop": "render(() => {\nconst [passwordVisible, setPasswordVisible] = React.useState(false);\n\nreturn (\n
\n {\nsetPasswordVisible(visible);\n}}\nlabel='Пароль'\nlabelView={isMobile() ? 'outer' : 'inner'}\nsize={isMobile() ? 48 : 56}\nbreakpoint={BREAKPOINT}\nblock={true}\n/>\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/pattern-lock.json b/packages/mcp/src/data/v50.16.0/pattern-lock.json new file mode 100644 index 0000000000..00e6bbbb42 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/pattern-lock.json @@ -0,0 +1,170 @@ +{ + "packageName": "pattern-lock", + "displayName": "PatternLock", + "description": "Компонент для авторизации пользователя с помощью графического ключа.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля сообщения используется модификатор -message, ошибки -error,\nкнопки \"забыли код\" -forgot-code-btn", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "observeTokens": { + "defaultValue": { + "value": "false" + }, + "description": "Следить ли за изменениями значений цветовых токенов", + "name": "observeTokens", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "observerParams": { + "defaultValue": null, + "description": "Параметры MutationObserver для наблюдения за изменениями режима(css custom properties)", + "name": "observerParams", + "required": false, + "type": { + "name": "{ getTarget?: (() => Node) | undefined; options?: MutationObserverInit | undefined; } | undefined" + } + }, + "messageClassName": { + "defaultValue": null, + "description": "Дополнительный класс для message/errorMessage", + "name": "messageClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "disabled": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает ввод паттерна", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onDragStart": { + "defaultValue": null, + "description": "Коллбек, вызываемый при начале ввода кода.", + "name": "onDragStart", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "onComplete": { + "defaultValue": null, + "description": "Коллбек, вызываемый после завершения ввода кода.", + "name": "onComplete", + "required": false, + "type": { + "name": "((code: number[], nodes: TNodes) => void) | undefined" + } + }, + "themeState": { + "defaultValue": null, + "description": "Состояние темы.", + "name": "themeState", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "extraBounds": { + "defaultValue": null, + "description": "Дополнительные границы в пикселях.\nСвойство позволяет расширить область прослушивания touch события.\nПо-умолчанию область ограничена размерами canvas.", + "name": "extraBounds", + "required": false, + "type": { + "name": "[number, number, number, number] | undefined" + } + }, + "showForgotCodeBtn": { + "defaultValue": { + "value": "\"Забыли код?\"" + }, + "description": "Показать кнопку \"забыли код\"", + "name": "showForgotCodeBtn", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "forgotCodeBtnText": { + "defaultValue": { + "value": "\"Забыли код?\"" + }, + "description": "Текст кнопки \"забыли код\"", + "name": "forgotCodeBtnText", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onForgotBtnClick": { + "defaultValue": null, + "description": "Коллбэк, вызываемый при клике на кнопку \"Забыли код\"", + "name": "onForgotBtnClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Пример", + "description": "Компонент не знает сколько символов в ключе пользователя,\nпоэтому ждет пока пользователь отпустит палец и только после этого проверяет ключ.\nПосле валидации компонент может отобразить состоянии ошибки с еррор месседжем или состояние успеха.\nКорректная комбинация для примера `698751`.", + "desktop": "const SCREENS = {\nINITIAL: 'initial',\nENTER_CODE: 'ENTER_CODE',\nSUCCESS: 'success',\n};\nrender(() => {\nconst shouldBeCode = [6, 9, 8, 7, 5, 1];\nconst [currentState, setCurrentState] = React.useState(THEME_STATE.INITIAL);\nconst [screen, setScreen] = React.useState(SCREENS.INITIAL);\nconst [passCodeParams, setPassCodeParams] = React.useState();\nconst patternLockInstance = React.useRef();\nconst timerId = React.useRef();\nconst containerRef = React.useRef(null);\n\nconst handleComplete = (code) => {\nif (shouldBeCode.join() === code.join()) {\nsetCurrentState(THEME_STATE.SUCCESS);\nsetTimeout(() => setScreen(SCREENS.SUCCESS), 700);\n} else {\nsetCurrentState(THEME_STATE.FAILURE);\n}\n};\n\nconst handleDragStart = () => {\nsetCurrentState(THEME_STATE.INITIAL);\n};\n\nReact.useEffect(() => {\nif (currentState !== THEME_STATE.INITIAL) {\n// Сбрасываем стейт через сек.\ntimerId.current = setTimeout(() => {\nsetCurrentState(THEME_STATE.INITIAL);\npatternLockInstance.current.setInitialState();\n}, 1000);\n}\n\nreturn () => clearTimeout(timerId.current);\n}, [currentState]);\n\nconst renderMessage = () => {\nif (passCodeParams === 'codeLength') {\nreturn (\n
\n\nВведите код из шести знаков\n\n\n
\n);\n}\n\nreturn null;\n};\n\nif (screen === SCREENS.INITIAL) {\nreturn (\n\n
\n {\nsetPassCodeParams('codeLength');\nsetScreen(SCREENS.ENTER_CODE);\n}}\n>\nКод длинной 6 знаков\n\n\n {\nsetPassCodeParams('maxCodeLength');\nsetScreen(SCREENS.ENTER_CODE);\n}}\n>\nДлина кода неизвестна заранее\n\n
\n
\n);\n}\n\nif (screen === SCREENS.SUCCESS) {\nreturn (\n
\n\n\n\n
\n\n\n\n\n\n\n\nВведён корректный пароль\n\n\n\n\n\nЭто пример экрана, на который попадает пользователь после ввода\nкорректного пароля\n\n
\n\n\n\n {\nsetScreen(SCREENS.INITIAL);\n}}\nstyle={{\n...(isMobile() && { width: 320 }),\n}}\n>\nПопробовать ещё раз\n\n
\n
\n);\n}\n\nif (isMobile()) {\nreturn (\n\n\n{renderMessage()}\n\n {}}\n/>\n\n
\n
\n\n);\n}\n\nreturn (\n\n\n {}}\n/>\n{renderMessage()}\n\n
\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/phone-input.json b/packages/mcp/src/data/v50.16.0/phone-input.json new file mode 100644 index 0000000000..6a00709fe8 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/phone-input.json @@ -0,0 +1,362 @@ +{ + "packageName": "phone-input", + "displayName": "PhoneInputs", + "description": "Используется для ввода мобильного номера в заданном формате.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля FormControl используется модификатор -form-control", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "defaultValue": { + "defaultValue": null, + "description": "Начальное значение поля", + "name": "defaultValue", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик поля ввода", + "name": "onChange", + "required": false, + "type": { + "name": "((event: ChangeEvent, payload: { value: string; }) => void) | undefined" + } + }, + "onClick": { + "defaultValue": null, + "description": "Обработчик клика по полю", + "name": "onClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseDown": { + "defaultValue": null, + "description": "Обработчик MouseDown по полю", + "name": "onMouseDown", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseUp": { + "defaultValue": null, + "description": "Обработчик MouseUp по полю", + "name": "onMouseUp", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "size": { + "defaultValue": { + "value": "48" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "colors": { + "defaultValue": null, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Значение поля ввода", + "name": "value", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "bold": { + "defaultValue": null, + "description": "Жирный текст\n@deprecated Используйте {@link BaseInputProps.fontWeight }", + "name": "bold", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "fontWeight": { + "defaultValue": null, + "description": "Вес шрифта инпута, в том числе плейсхолдера", + "name": "fontWeight", + "required": false, + "type": { + "name": "\"bold\" | \"medium\" | \"regular\" | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clear": { + "defaultValue": null, + "description": "Крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "success": { + "defaultValue": null, + "description": "Отображение иконки успеха", + "name": "success", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл компонента", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "wrapperRef": { + "defaultValue": null, + "description": "Ref для обертки input", + "name": "wrapperRef", + "required": false, + "type": { + "name": "Ref | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки левых аддонов", + "name": "leftAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "rightAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки правых аддонов", + "name": "rightAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "bottomAddons": { + "defaultValue": null, + "description": "Слот под инпутом", + "name": "bottomAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "inputClassName": { + "defaultValue": null, + "description": "Дополнительный класс инпута", + "name": "inputClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "labelClassName": { + "defaultValue": null, + "description": "Дополнительный класс для лейбла", + "name": "labelClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "addonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для аддонов", + "name": "addonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "focusedClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен при фокусе", + "name": "focusedClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "filledClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен, если в поле есть значение", + "name": "filledClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку очистки", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "disableUserInput": { + "defaultValue": null, + "description": "Запрещает ввод с клавиатуры", + "name": "disableUserInput", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": null, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + }, + "keepCharPositions": { + "defaultValue": null, + "description": "Управляет поведением компонента при удалении символов", + "name": "keepCharPositions", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clearableCountryCode": { + "defaultValue": { + "value": true + }, + "description": "", + "name": "clearableCountryCode", + "required": false, + "type": { + "name": "boolean | undefined" + } + } + }, + "demos": [ + { + "title": "Пример", + "description": "", + "desktop": "
\n\n
" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/picker-button.json b/packages/mcp/src/data/v50.16.0/picker-button.json new file mode 100644 index 0000000000..a88ec1549f --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/picker-button.json @@ -0,0 +1,605 @@ +{ + "packageName": "picker-button", + "displayName": "PickerButtonResponsive", + "description": "", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля пункта меню используется модификатор -option, компонента поиска -search,\nкомпонента выпадающего меню -options-list, компонента BottomSheet -bottom-sheet,\nкомпонента поля -field, компонета FormControl -field-form-control", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "id": { + "defaultValue": null, + "description": "Атрибут id", + "name": "id", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onBlur": { + "defaultValue": null, + "description": "Обработчик блюра поля", + "name": "onBlur", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик выбора", + "name": "onChange", + "required": false, + "type": { + "name": "((payload: BaseSelectChangePayload) => void) | undefined" + } + }, + "onScroll": { + "defaultValue": null, + "description": "Обработчик скрола", + "name": "onScroll", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Управление возможностью выбора значения", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "name": { + "defaultValue": null, + "description": "Атрибут name", + "name": "name", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clear": { + "defaultValue": null, + "description": "Флаг, показать крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл поля", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на крестик для очистки поля", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "environment": { + "defaultValue": { + "value": "window" + }, + "description": "Контекст окружения для downshift.js", + "name": "environment", + "required": false, + "type": { + "name": "Environment | undefined" + } + }, + "open": { + "defaultValue": null, + "description": "Управление открытием", + "name": "open", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "defaultOpen": { + "defaultValue": null, + "description": "Начальное состояние селекта", + "name": "defaultOpen", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "preventFlip": { + "defaultValue": null, + "description": "Запрещает поповеру менять свою позицию.\nНапример, если места снизу недостаточно,то он все равно будет показан снизу", + "name": "preventFlip", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "popoverPosition": { + "defaultValue": null, + "description": "Позиционирование выпадающего списка", + "name": "popoverPosition", + "required": false, + "type": { + "name": "Position | undefined" + } + }, + "zIndexPopover": { + "defaultValue": null, + "description": "z-index поповера", + "name": "zIndexPopover", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "optionsListClassName": { + "defaultValue": null, + "description": "Дополнительный класс выпадающего меню", + "name": "optionsListClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionClassName": { + "defaultValue": null, + "description": "Дополнительный класс для пункта меню", + "name": "optionClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionGroupClassName": { + "defaultValue": null, + "description": "Дополнительный класс для компонента группы пунктов", + "name": "optionGroupClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "popperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поповера", + "name": "popperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionsSize": { + "defaultValue": null, + "description": "Размер пунктов меню", + "name": "optionsSize", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "optionsListWidth": { + "defaultValue": null, + "description": "Управляет шириной выпадающего меню.\nШирину определяет контент, либо ширина равна ширине поля", + "name": "optionsListWidth", + "required": false, + "type": { + "name": "\"content\" | \"field\" | undefined" + } + }, + "circularNavigation": { + "defaultValue": null, + "description": "При навигации с клавиатуры переходить от последнего пункта меню к первому и наоборот.", + "name": "circularNavigation", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "nativeSelect": { + "defaultValue": null, + "description": "Рендерит нативный селект вместо выпадающего меню. (на десктопе использовать только с multiple=false)", + "name": "nativeSelect", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "visibleOptions": { + "defaultValue": null, + "description": "Количество видимых пунктов меню (5 = 5.5)", + "name": "visibleOptions", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "valueRenderer": { + "defaultValue": null, + "description": "Кастомный рендер выбранного пункта", + "name": "valueRenderer", + "required": false, + "type": { + "name": "(({ selected, selectedMultiple, }: { selected?: OptionShape | undefined; selectedMultiple: OptionShape[]; valueSeparator?: string | undefined; }) => ReactNode) | undefined" + } + }, + "valueSeparator": { + "defaultValue": null, + "description": "Кастомный разделитель выбранных пунктов (Работает когда не прокинут valueRenderer)", + "name": "valueSeparator", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "Field": { + "defaultValue": null, + "description": "Компонент поля", + "name": "Field", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "fieldProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент поля", + "name": "fieldProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "optionsListProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент списка", + "name": "optionsListProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "optionProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент пункта меню", + "name": "optionProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "groupOptionProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент группового пункта меню", + "name": "groupOptionProps", + "required": false, + "type": { + "name": "AnyObject | undefined" + } + }, + "OptionsList": { + "defaultValue": null, + "description": "Компонент выпадающего меню", + "name": "OptionsList", + "required": false, + "type": { + "name": "ComponentType & { className?: string | undefined; optionGroupClassName?: string | undefined; scrollbarClassName?: string | undefined; ... 28 more ...; limitDynamicOptionGroupSize?: boolean | undefined; } & RefAttributes<...>> | undefined" + } + }, + "Optgroup": { + "defaultValue": null, + "description": "Компонент группы", + "name": "Optgroup", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "Option": { + "defaultValue": null, + "description": "Компонент пункта меню", + "name": "Option", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "onOpen": { + "defaultValue": null, + "description": "Обработчик открытия\\закрытия селекта", + "name": "onOpen", + "required": false, + "type": { + "name": "((payload: { open?: boolean | undefined; name?: string | undefined; }) => void) | undefined" + } + }, + "updatePopover": { + "defaultValue": null, + "description": "Хранит функцию, с помощью которой можно обновить положение поповера", + "name": "updatePopover", + "required": false, + "type": { + "name": "MutableRefObject<(() => void) | undefined> | undefined" + } + }, + "showEmptyOptionsList": { + "defaultValue": null, + "description": "Показывать OptionsList, если он пустой", + "name": "showEmptyOptionsList", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "popoverProps": { + "defaultValue": null, + "description": "Дополнительные пропсы для Popover", + "name": "popoverProps", + "required": false, + "type": { + "name": "Omit | undefined" + } + }, + "limitDynamicOptionGroupSize": { + "defaultValue": null, + "description": "Ограничение динамического размера группы вариантов выбора", + "name": "limitDynamicOptionGroupSize", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "view": { + "defaultValue": { + "value": "secondary" + }, + "description": "Тип кнопки", + "name": "view", + "required": false, + "type": { + "name": "\"text\" | \"primary\" | \"secondary\" | \"accent\" | \"outlined\" | \"transparent\" | undefined" + } + }, + "loading": { + "defaultValue": { + "value": "false" + }, + "description": "Показать лоадер", + "name": "loading", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "options": { + "defaultValue": null, + "description": "", + "name": "options", + "required": true, + "type": { + "name": "((OptionShape | GroupShape) & { icon?: ComponentType> | undefined; })[]" + } + }, + "size": { + "defaultValue": { + "value": "56" + }, + "description": "Размер кнопки", + "name": "size", + "required": false, + "type": { + "name": "PickerButtonSize | undefined" + } + }, + "variant": { + "defaultValue": null, + "description": "Тип кнопки", + "name": "variant", + "required": false, + "type": { + "name": "PickerButtonVariant | undefined" + } + }, + "showArrow": { + "defaultValue": { + "value": "true" + }, + "description": "Показывать стрелку", + "name": "showArrow", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "icon": { + "defaultValue": null, + "description": "Кастомная иконка при variant = compact", + "name": "icon", + "required": false, + "type": { + "name": "ComponentType> | undefined" + } + }, + "showClear": { + "defaultValue": null, + "description": "Показывать кнопку 'Сбросить' в футере мобильного компонента", + "name": "showClear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "showSelectAll": { + "defaultValue": null, + "description": "Показывать пункт \"Выбрать все\"", + "name": "showSelectAll", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "showHeaderWithSelectAll": { + "defaultValue": null, + "description": "Показывать пункт \"Выбрать все\" в заголовке списка у мобильного компонента", + "name": "showHeaderWithSelectAll", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "useWithApplyHook": { + "defaultValue": null, + "description": "Использовать ли хук useSelectWithApply в мобильном компоненте", + "name": "useWithApplyHook", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "checkmarkPosition": { + "defaultValue": { + "value": "'before'" + }, + "description": "Позиция чекбокса \"Выбрать все\" в Header", + "name": "checkmarkPosition", + "required": false, + "type": { + "name": "\"before\" | \"after\" | undefined" + } + }, + "footer": { + "defaultValue": null, + "description": "Футер\n@deprecated Используйте bottomSheetProps.actionButton", + "name": "footer", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "swipeable": { + "defaultValue": null, + "description": "Будет ли свайпаться шторка\n@deprecated Используйте bottomSheetProps.swipeable", + "name": "swipeable", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "bottomSheetProps": { + "defaultValue": null, + "description": "Дополнительные пропсы шторки", + "name": "bottomSheetProps", + "required": false, + "type": { + "name": "(Omit, \"bottomAddons\"> & { bottomAddons?: ReactNode | ((flatOptions: OptionShape[]) => ReactNode); }) | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "const options = [{ key: 'Car' }, { key: 'Star' }, { key: 'Flower' }, { key: 'Banknote' }];\n\nconst optionsWithIcons = [\n{ key: 'Car', icon: CarMIcon },\n{ key: 'Star', icon: StarMIcon },\n{ key: 'Flower', icon: FlowerMMIcon },\n{ key: 'Banknote', icon: BanknoteMIcon },\n];\n\nrender(\n\n\n\n,\n);", + "mobile": "const options = [{ key: 'Car' }, { key: 'Star' }, { key: 'Flower' }, { key: 'Banknote' }];\n\nconst optionsWithIcons = [\n{ key: 'Car', icon: CarMIcon },\n{ key: 'Star', icon: StarMIcon },\n{ key: 'Flower', icon: FlowerMMIcon },\n{ key: 'Banknote', icon: BanknoteMIcon },\n];\n\nrender(\n\n\n\n,\n);" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/plate.json b/packages/mcp/src/data/v50.16.0/plate.json new file mode 100644 index 0000000000..7b3e455fcf --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/plate.json @@ -0,0 +1,308 @@ +{ + "packageName": "plate", + "displayName": "Plate", + "description": "Информирует пользователя о текущем состоянии системы или сообщает какую-либо важную информацию.", + "props": { + "children": { + "defaultValue": null, + "description": "Дочерние элементы", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "title": { + "defaultValue": null, + "description": "Заголовок компонента", + "name": "title", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "onClick": { + "defaultValue": null, + "description": "Обработчик клика по плашке", + "name": "onClick", + "required": false, + "type": { + "name": "((event?: MouseEvent | undefined) => void) | undefined" + } + }, + "view": { + "defaultValue": null, + "description": "Вид компонента", + "name": "view", + "required": false, + "type": { + "name": "\"positive\" | \"negative\" | \"attention\" | \"common\" | \"custom\" | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "rounded": { + "defaultValue": null, + "description": "Включить/выключить скругление", + "name": "rounded", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onClose": { + "defaultValue": null, + "description": "Обработчик клика по крестику", + "name": "onClose", + "required": false, + "type": { + "name": "((event?: MouseEvent | undefined) => void) | undefined" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Дополнительный класс для контента", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "hasCloser": { + "defaultValue": null, + "description": "Управление наличием закрывающего крестика", + "name": "hasCloser", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "rowLimit": { + "defaultValue": null, + "description": "Количество строк", + "name": "rowLimit", + "required": false, + "type": { + "name": "2 | 1 | 3 | undefined" + } + }, + "border": { + "defaultValue": null, + "description": "Включить/Выключить обводку", + "name": "border", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "closerAriaLabel": { + "defaultValue": { + "value": "закрыть" + }, + "description": "Лейбл доступности для закрывающего крестика", + "name": "closerAriaLabel", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "foldable": { + "defaultValue": null, + "description": "Управление наличием стрелки скрытия контента", + "name": "foldable", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "folded": { + "defaultValue": null, + "description": "Управление видимостью контента (controlled)", + "name": "folded", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "defaultFolded": { + "defaultValue": null, + "description": "Начальное состояние контента при foldable={ true }", + "name": "defaultFolded", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "subAddons": { + "defaultValue": null, + "description": "Слот для субаддонов (слева от крестика)", + "name": "subAddons", + "required": false, + "type": { + "name": "ReactNode | ReactElement>[]" + } + }, + "shadow": { + "defaultValue": null, + "description": "Включить/выключить тени", + "name": "shadow", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "limitContentWidth": { + "defaultValue": null, + "description": "Включить/выключить ограничение максимальной ширины контента в 560px", + "name": "limitContentWidth", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "titleView": { + "defaultValue": null, + "description": "Вид заголовка", + "name": "titleView", + "required": false, + "type": { + "name": "\"bold\" | \"light\" | undefined" + } + }, + "background": { + "defaultValue": null, + "description": "Фон компонента при view=custom", + "name": "background", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "borderColor": { + "defaultValue": null, + "description": "Цвет бордера у компонента при view=custom", + "name": "borderColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "buttons": { + "defaultValue": null, + "description": "Набор действий", + "name": "buttons", + "required": false, + "type": { + "name": "ReactNode | ReactElement>[]" + } + }, + "buttonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для кнопок", + "name": "buttonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "buttonsContainerClassName": { + "defaultValue": null, + "description": "Дополнительный класс для контейнера кнопок", + "name": "buttonsContainerClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "subAddonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для субаддонов", + "name": "subAddonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onToggle": { + "defaultValue": null, + "description": "Обработчик сворачивания", + "name": "onToggle", + "required": false, + "type": { + "name": "((event: MouseEvent | KeyboardEvent, payload: { folded: boolean; }) => void) | undefined" + } + }, + "borderRadius": { + "defaultValue": null, + "description": "Кастомный радиус скругления (px, rem, em и т.д.)", + "name": "borderRadius", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Для плашки можно включить скругление и обводку. Наличие скругления влияет на формат обводки.", + "desktop": "render(() => {\nconst [border, setBorder] = React.useState(true);\nconst [rounded, setRounded] = React.useState(true);\nreturn (\n
\nПодробнее]}\nbuttons={isMobile() && []}\nleftAddons={\n\n}\nbreakpoint={BREAKPOINT}\n/>\n\n setRounded(!rounded)}\n/>\n\n setBorder(!border)}\n/>\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/popover.json b/packages/mcp/src/data/v50.16.0/popover.json new file mode 100644 index 0000000000..6f453fb43c --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/popover.json @@ -0,0 +1,242 @@ +{ + "packageName": "popover", + "displayName": "Popover", + "description": "", + "props": { + "open": { + "defaultValue": null, + "description": "Управление состоянием поповера (открыт/закрыт)", + "name": "open", + "required": true, + "type": { + "name": "boolean" + } + }, + "anchorElement": { + "defaultValue": null, + "description": "Элемент, относительного которого появляется поповер", + "name": "anchorElement", + "required": true, + "type": { + "name": "RefElement" + } + }, + "useAnchorWidth": { + "defaultValue": null, + "description": "Использовать ширину родительского элемента", + "name": "useAnchorWidth", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "position": { + "defaultValue": { + "value": "left" + }, + "description": "Позиционирование поповера", + "name": "position", + "required": false, + "type": { + "name": "Position | undefined" + } + }, + "preventFlip": { + "defaultValue": null, + "description": "Запрещает поповеру менять свою позицию.\nНапример, если места снизу недостаточно, то он все равно будет показан снизу", + "name": "preventFlip", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "preventOverflow": { + "defaultValue": { + "value": true + }, + "description": "Запрещает поповеру менять свою позицию, если он не влезает в видимую область.", + "name": "preventOverflow", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "availableHeight": { + "defaultValue": { + "value": false + }, + "description": "Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента", + "name": "availableHeight", + "required": false, + "type": { + "name": "boolean | (() => Element | null | undefined) | undefined" + } + }, + "withArrow": { + "defaultValue": { + "value": false + }, + "description": "Если `true`, будет отрисована стрелочка", + "name": "withArrow", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "offset": { + "defaultValue": { + "value": "[0, 0]" + }, + "description": "Смещение поповера.\nЕсли позиционирование top, bottom, то [x, y].\nЕсли позиционирование left, right то [y, x].", + "name": "offset", + "required": false, + "type": { + "name": "[number, number] | undefined" + } + }, + "popperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поповера", + "name": "popperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "arrowClassName": { + "defaultValue": null, + "description": "Дополнительный класс для стрелочки", + "name": "arrowClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "getPortalContainer": { + "defaultValue": null, + "description": "Функция, возвращающая контейнер, в который будет рендериться поповер", + "name": "getPortalContainer", + "required": false, + "type": { + "name": "(() => HTMLElement) | undefined" + } + }, + "transition": { + "defaultValue": { + "value": "{\n timeout: 150,\n}" + }, + "description": "CSSTransitionProps, прокидываются в компонент CSSTransitionProps.", + "name": "transition", + "required": false, + "type": { + "name": "CSSTransitionProps | undefined" + } + }, + "transitionDuration": { + "defaultValue": { + "value": "`${transition.timeout}ms`" + }, + "description": "Выставляет кастомное свойство transition-duration", + "name": "transitionDuration", + "required": false, + "type": { + "name": "TransitionDuration | undefined" + } + }, + "withTransition": { + "defaultValue": { + "value": true + }, + "description": "Рендерит компонент, обернутый в Transition", + "name": "withTransition", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "update": { + "defaultValue": null, + "description": "Хранит функцию, с помощью которой можно обновить положение компонента", + "name": "update", + "required": false, + "type": { + "name": "MutableRefObject<(() => void) | undefined> | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "zIndex": { + "defaultValue": { + "value": 50 + }, + "description": "z-index компонента", + "name": "zIndex", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "fallbackPlacements": { + "defaultValue": null, + "description": "Если поповер не помещается в переданной позиции (position), он попробует открыться в другой позиции,\nпо очереди для каждой позиции из этого списка.\nЕсли не передавать, то поповер открывается в противоположном направлении от переданного position.", + "name": "fallbackPlacements", + "required": false, + "type": { + "name": "Position[] | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Контент", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "scrollableContentClassName": { + "defaultValue": null, + "description": "Класс для скролл контейнера", + "name": "scrollableContentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "arrowToEdgeMinDistance": { + "defaultValue": { + "value": 24 + }, + "description": "Минимальное расстояние стрелки до края поповера", + "name": "arrowToEdgeMinDistance", + "required": false, + "type": { + "name": "number | undefined" + } + } + }, + "demos": [ + { + "title": "Пример", + "description": "Под капотом использует popper.js и react-transition-group.\nЕсли положение поповера не пересчитывается (например, при измененнии размера элемента-якоря), то можно воспользоваться методом update:", + "desktop": "render(() => {\nconst [count, setCount] = React.useState(0);\nconst [buttonElement, setButtonElement] = React.useState(null);\n\nconst label = {\n0: 'Показать поповер снизу',\n1: 'Показать поповер сверху',\n2: 'Показать слева',\n3: 'Показать справа',\n4: 'Скрыть',\n};\n\nconst position = {\n1: 'bottom',\n2: 'top',\n3: 'left',\n4: 'right',\n};\n\n// updatePopover - ref, который хранит функцию, с помощью которой можно обновить положение поповера\nconst updatePopover = React.useRef();\n\nconst onClick = () => {\nsetCount((count) => count + 1);\n\nif (updatePopover.current) {\n// Обновляем положение поповера\nupdatePopover.current();\n}\nif (count === 4) {\nsetCount(0);\n}\n};\n\nconst handleButtonRef = (node) => {\nif (count !== 0) {\nsetButtonElement(node);\n}\n};\nconst popoverChildren = (\n<>{count !== 0 &&
Popover
}\n);\n\nreturn (\n\n\n{popoverChildren}\n\n\n\n
\n);\n});", + "mobile": "render(() => {\nconst [count, setCount] = React.useState(0);\nconst [buttonElement, setButtonElement] = React.useState(null);\n\nconst label = {\n0: 'Показать поповер снизу',\n1: 'Показать поповер сверху',\n2: 'Показать слева',\n3: 'Показать справа',\n4: 'Скрыть',\n};\n\nconst position = {\n1: 'bottom',\n2: 'top',\n3: 'left',\n4: 'right',\n};\n\n// updatePopover - ref, который хранит функцию, с помощью которой можно обновить положение поповера\nconst updatePopover = React.useRef();\n\nconst onClick = () => {\nsetCount((count) => count + 1);\n\nif (updatePopover.current) {\n// Обновляем положение поповера\nupdatePopover.current();\n}\nif (count === 4) {\nsetCount(0);\n}\n};\n\nconst handleButtonRef = (node) => {\nif (count !== 0) {\nsetButtonElement(node);\n}\n};\nconst popoverChildren = (\n<>{count !== 0 &&
Popover
}\n);\n\nreturn (\n\n\n{popoverChildren}\n\n\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/popup-sheet.json b/packages/mcp/src/data/v50.16.0/popup-sheet.json new file mode 100644 index 0000000000..285a24bac7 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/popup-sheet.json @@ -0,0 +1,369 @@ +{ + "packageName": "popup-sheet", + "displayName": "PopupSheet", + "description": "Используется для отображения контента в модальном слое.", + "props": { + "children": { + "defaultValue": null, + "description": "Контент", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onWheel": { + "defaultValue": null, + "description": "Хэндлер события прокрутки колесиком", + "name": "onWheel", + "required": false, + "type": { + "name": "((e: WheelEvent) => void) | undefined" + } + }, + "open": { + "defaultValue": null, + "description": "Управление видимостью модалки", + "name": "open", + "required": true, + "type": { + "name": "boolean" + } + }, + "Backdrop": { + "defaultValue": null, + "description": "Компонент бэкдропа", + "name": "Backdrop", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "backdropProps": { + "defaultValue": null, + "description": "Свойства для Бэкдропа", + "name": "backdropProps", + "required": false, + "type": { + "name": "(Partial & Record) | undefined" + } + }, + "container": { + "defaultValue": null, + "description": "Нода, компонент или функция возвращающая их\n\nКонтейнер к которому будут добавляться порталы", + "name": "container", + "required": false, + "type": { + "name": "(() => Element | null | undefined) | undefined" + } + }, + "disableAutoFocus": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает автоматический перевод фокуса на модалку при открытии", + "name": "disableAutoFocus", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableFocusLock": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает ловушку фокуса", + "name": "disableFocusLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableRestoreFocus": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает восстановление фокуса на предыдущем элементе после закрытия модалки", + "name": "disableRestoreFocus", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableEscapeKeyDown": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает вызов `callback` при нажатии Escape", + "name": "disableEscapeKeyDown", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableBackdropClick": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает вызов `callback` при клике на бэкдроп", + "name": "disableBackdropClick", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableBlockingScroll": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает блокировку скролла при открытии модального окна\n@deprecated Используйте `scrollLock={true}`.", + "name": "disableBlockingScroll", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "scrollLock": { + "defaultValue": { + "value": "false" + }, + "description": "Управляет блокировкой скролла/overscroll фона при открытой модалке.", + "name": "scrollLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "keepMounted": { + "defaultValue": { + "value": "false" + }, + "description": "Содержимое модалки всегда в DOM", + "name": "keepMounted", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "wrapperProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на dialog wrapper", + "name": "wrapperProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "contentProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на обертку контента", + "name": "contentProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "componentDivProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на компонентную обертку контента", + "name": "componentDivProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "wrapperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для обертки (Modal)", + "name": "wrapperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "scrollHandler": { + "defaultValue": null, + "description": "Обработчик скролла контента", + "name": "scrollHandler", + "required": false, + "type": { + "name": "\"content\" | \"wrapper\" | MutableRefObject | undefined" + } + }, + "transitionProps": { + "defaultValue": null, + "description": "Пропсы для анимации (CSSTransition)", + "name": "transitionProps", + "required": false, + "type": { + "name": "Partial | undefined" + } + }, + "usePortal": { + "defaultValue": { + "value": "true" + }, + "description": "Рендерить ли в контейнер через портал.", + "name": "usePortal", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onBackdropClick": { + "defaultValue": null, + "description": "Обработчик события нажатия на бэкдроп", + "name": "onBackdropClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onEscapeKeyDown": { + "defaultValue": null, + "description": "Обработчик события нажатия на Escape\n\nЕсли `disableEscapeKeyDown` - false и модальное окно в фокусе", + "name": "onEscapeKeyDown", + "required": false, + "type": { + "name": "((event: KeyboardEvent) => void) | undefined" + } + }, + "onMount": { + "defaultValue": null, + "description": "Обработчик события onEntered компонента Transition", + "name": "onMount", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "onUnmount": { + "defaultValue": null, + "description": "Обработчик события onExited компонента Transition", + "name": "onUnmount", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "zIndex": { + "defaultValue": null, + "description": "z-index компонента", + "name": "zIndex", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "componentRef": { + "defaultValue": null, + "description": "Реф, который должен быть установлен компонентной области", + "name": "componentRef", + "required": false, + "type": { + "name": "MutableRefObject | undefined" + } + }, + "contentElementRef": { + "defaultValue": null, + "description": "Реф контентной области", + "name": "contentElementRef", + "required": false, + "type": { + "name": "MutableRefObject | undefined" + } + }, + "iOSLock": { + "defaultValue": null, + "description": "Блокирует скролл когда модальное окно открыто. Работает только на iOS.\n@deprecated Используйте `scrollLock={true}`.", + "name": "iOSLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hasCloser": { + "defaultValue": null, + "description": "Наличие кнопки закрытия", + "name": "hasCloser", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "swipeable": { + "defaultValue": null, + "description": "Будет ли свайпаться шторка", + "name": "swipeable", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "padding": { + "defaultValue": { + "value": 32 + }, + "description": "Отступы", + "name": "padding", + "required": false, + "type": { + "name": "PaddingType | undefined" + } + }, + "onClose": { + "defaultValue": null, + "description": "Обработчик закрытия", + "name": "onClose", + "required": false, + "type": { + "name": "((event: MouseEvent | KeyboardEvent, reason?: \"backdropClick\" | \"escapeKeyDown\" | \"closerClick\" | \"swipe\" | undefined) => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля кнопки закрытия используется модификатор -closer", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "closerProps": { + "defaultValue": { + "value": "{}" + }, + "description": "Дополнительные пропсы для компонента Closer.", + "name": "closerProps", + "required": false, + "type": { + "name": "Omit | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Компонент состоит из кастомизируемого слота и контрола для управления закрытием. Скролл внутри компонента не предусмотрен.\nКомпонент не имеет десктопной версии.", + "desktop": "const SETTINGS = [\n{ label: 'Крестик', name: 'hasCloser' },\n{ label: 'Закрытие свайпом', name: 'swipeable' },\n{ label: 'Кастомный контент', name: 'customContent' },\n];\n\nrender(() => {\nconst [open, setOpen] = React.useState(false);\nconst [settings, setSettings] = React.useState(() =>\nSETTINGS.reduce((res, item) => ({ ...res, [item.name]: false }), {}),\n);\n\nconst handleSettingsChange = (_, { name, checked }) => {\nsetSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nreturn (\n
\n setOpen(true)} block={true}>\nПоказать шторку\n\n\n\n\n\n{SETTINGS.map((item) => (\n\n))}\n\n\n setOpen(false)}\npadding={0}\n>\n{settings.customContent ? (\n\n\n\n\n\n\n\n\nПодтвердите подключение кодом из смс\n\n\n\n{`Проверили вашу заявку — всё в порядке. Осталось подтвердить подключение`}\n\n\n\n setOpen(false)}>\nПолучить код\n\n\n\n) : (\n\n\nCustom\n\n
\n)}\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/portal.json b/packages/mcp/src/data/v50.16.0/portal.json new file mode 100644 index 0000000000..a35d5acd30 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/portal.json @@ -0,0 +1,41 @@ +{ + "packageName": "portal", + "displayName": "Portal", + "description": "Используется для рендера дочерних элементов в DOM-узел, который находится вне DOM-иерархии родительского компонента.", + "props": { + "children": { + "defaultValue": null, + "description": "Контент", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "getPortalContainer": { + "defaultValue": null, + "description": "Функция, возвращающая контейнер, в который будут рендериться дочерние элементы", + "name": "getPortalContainer", + "required": false, + "type": { + "name": "(() => Element | null | undefined) | undefined" + } + }, + "immediateMount": { + "defaultValue": null, + "description": "Немедленно отрендерить дочерние элементы (false - контент будет отрендерен на след. рендер).", + "name": "immediateMount", + "required": false, + "type": { + "name": "boolean | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "render(() => {\nconst [show, setShow] = React.useState(false);\nconst containerRef = React.useRef();\n\nconst handleClick = () => setShow(!show);\n\nconst styles = {\ndisplay: 'flex',\nflexDirection: 'column',\nalignItems: 'center',\njustifyContent: 'center',\nwidth: 240,\nheight: 95,\nborder: '1px solid var(--color-light-neutral-300)',\nborderRadius: 8,\nmarginTop: 6,\n};\n\nconst styleText = {\ncolor: 'var(--color-light-text-secondary)',\nfontSize: '14px',\nlineHeight: '18px',\n}\n\nreturn (\n\n\n
\n{show && (\n containerRef.current}>\n\n\n)}\n
\n\n
Контейнер для контента портала
\n
\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/product-cover.json b/packages/mcp/src/data/v50.16.0/product-cover.json new file mode 100644 index 0000000000..9c96aa411e --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/product-cover.json @@ -0,0 +1,215 @@ +{ + "packageName": "product-cover", + "displayName": "Single", + "description": "Используется для отображения банковских карт.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "icon": { + "defaultValue": null, + "description": "Слот для иконки с оверлеем", + "name": "icon", + "required": false, + "type": { + "name": "ElementType | undefined" + } + }, + "size": { + "defaultValue": null, + "description": "Размер", + "name": "size", + "required": false, + "type": { + "name": "Size | undefined" + } + }, + "backgroundColor": { + "defaultValue": null, + "description": "Фон для компонента", + "name": "backgroundColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "cardId": { + "defaultValue": null, + "description": "Идентификатор карты\n(например: RM,SQ,SR)", + "name": "cardId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "layers": { + "defaultValue": null, + "description": "Какие слои показывать, через запятую без пробелов\n(полный набор: BACKGROUND,CARD_NUMBER,CARD_HOLDER,PAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE)", + "name": "layers", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "baseUrl": { + "defaultValue": null, + "description": "Базовый URL сервиса с изображениями\n(например: https://online.alfabank.ru/cards-images/cards/)", + "name": "baseUrl", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "stateType": { + "defaultValue": { + "value": "false" + }, + "description": "Задает различные эффекты при наведении на компонент (затемнение, осветление)", + "name": "stateType", + "required": false, + "type": { + "name": "false | \"darkening\" | \"lightening\" | \"static-darkening\" | \"static-lightening\" | undefined" + } + }, + "shadow": { + "defaultValue": null, + "description": "Тень для компонента", + "name": "shadow", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "borderColor": { + "defaultValue": null, + "description": "Бордер для компонента", + "name": "borderColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "iconColor": { + "defaultValue": null, + "description": "Цвет иконки", + "name": "iconColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "textColor": { + "defaultValue": null, + "description": "Цвет текстового контента", + "name": "textColor", + "required": false, + "type": { + "name": "Color | undefined" + } + }, + "overlayProps": { + "defaultValue": null, + "description": "Настройки оверлея", + "name": "overlayProps", + "required": false, + "type": { + "name": "OverlayProps | undefined" + } + }, + "eyeButton": { + "defaultValue": null, + "description": "Кнопка показать номер карты", + "name": "eyeButton", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "cardholderNameUppercase": { + "defaultValue": null, + "description": "Имя владельца карты в верхнем регистре", + "name": "cardholderNameUppercase", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "cardholderName": { + "defaultValue": null, + "description": "Имя владельца карты", + "name": "cardholderName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "cardNumber": { + "defaultValue": null, + "description": "Номер карты", + "name": "cardNumber", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "contentAddons": { + "defaultValue": null, + "description": "Слот для кастомного контента компонента", + "name": "contentAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "contentAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки кастомного контента", + "name": "contentAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "onEyeIconClick": { + "defaultValue": null, + "description": "Обработчик клика по кнопке 'показать номер карты'", + "name": "onEyeIconClick", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + } + }, + "demos": [ + { + "title": "Размеры", + "description": "Карточка используется в следующих размерах: 16×24, 32×51, 40×65, 48×76, 96×152, 128×205, 164×264.", + "desktop": "render(() => {\nconst BIG_SIZES = [164, 128, 96, 48];\nconst SMALL_SIZES = [40, 32, 16];\n\nreturn (\n<>\n\n{BIG_SIZES.map((size) => (\n\n))}\n\n\n\n{SMALL_SIZES.map((size) => (\n\n))}\n\n\n);\n});" + }, + { + "title": "Примеры", + "description": "Компонент позволяет настроить внешний вид банковской карты или продукта.\nНастраивается цвет фона, наличие обводки, тени, оверлея.\nВ качестве контента можно передать ссылку на рубашку карты и иконку.\nВ нижний слот можно положить кастомный контент.", + "desktop": "const VIEW_SELECT_OPTIONS = [\n{ key: 'card', content: 'Карта' },\n{ key: 'defaultCard', content: 'Карта без рубашки' },\n{ key: 'lightCard', content: 'Заблокированная светлая карта' },\n{ key: 'darkCard', content: 'Заблокированная тёмная карта' },\n{ key: 'product', content: 'Продукт' },\n];\n\nrender(() => {\nconst [viewSelected, setViewSelected] = React.useState(VIEW_SELECT_OPTIONS[0].key);\n\nconst baseCard = {\ncardNumber: 1234000000001234,\nbaseUrl: 'https://online.alfabank.ru/cards-images/cards/',\nlayers: 'BACKGROUND,LOGO,PAYMENT_SYSTEM',\ncardId: 'RM',\n};\n\nconst singleView = {\ncard: baseCard,\ndefaultCard: {},\nlightCard: {\n...baseCard,\nicon: LockClosedMIcon,\noverlayProps: {\ncolors: 'inverted',\nvisible: true,\n},\niconColor: 'var(--color-static-text-primary-inverted)',\n},\ndarkCard: {\n...baseCard,\nicon: LockClosedMIcon,\ncardId: 'VV',\noverlayProps: {\nvisible: true,\n},\n},\nproduct: {\nicon: SafeBoxMIcon,\nborderColor: 'var(--color-light-neutral-translucent-300)',\niconColor: 'var(--color-light-text-secondary)',\n},\n};\n\nreturn (\n
\n setViewSelected(selected.key)}\nOption={BaseOption}\n/>\n\n\n
\n);\n});" + }, + { + "title": "ProductCover.Stack", + "description": "Стопка доступна только для некоторых размеров карточек.\nЕсли карт больше двух, то в качестве контента для нижней карты рекомендуется передавать их количество, а вместо рубашки карты — заглушку.\nСмещение карт относительно друг-друга и размеры самой стопки предустановлены для конкретных размеров карточек.", + "desktop": "render(() => {\nconst [numberOfCards, setNumberOfCards] = React.useState('2');\nconst [sizeAndAlignCard, setSizeAndAlignCard] = React.useState('128-default');\n\nconst onChangeNumberOfCards = (_, payload) => {\nsetNumberOfCards(payload.value);\n};\n\nconst onChangeSizeCard = (_, payload) => {\nsetSizeAndAlignCard(payload.value);\n};\n\nconst SIZE_AND_ALIGN = {\n'128-default': {\nsize: 128,\nalign: 'default',\nshadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.16)',\n},\n'40-default': { size: 40, align: 'default', shadow: '2px 2px 2px 0px rgba(0, 0, 0, 0.10)' },\n'40-bottom': { size: 40, align: 'bottom', shadow: '0px 2px 2px 0px rgba(0, 0, 0, 0.10)' },\n'32-default': { size: 32, align: 'default', shadow: '2px 2px 2px 0px rgba(0, 0, 0, 0.10)' },\n'16-default': { size: 16, align: 'default', shadow: 'none' },\n};\n\nconst CARD_COUNT = {\n2: undefined,\n3: 3,\n};\n\nconst sizeCard = SIZE_AND_ALIGN[sizeAndAlignCard].size;\nconst alignCard = SIZE_AND_ALIGN[sizeAndAlignCard].align;\nconst shadow = SIZE_AND_ALIGN[sizeAndAlignCard].shadow;\n\nconst firstCard = {\ncardNumber: 1234000000001234,\nshadow: '2px 2px 2px 0px rgba(0, 0, 0, 0.20)',\nbaseUrl: 'https://online.alfabank.ru/cards-images/cards/',\nlayers: 'BACKGROUND,LOGO,PAYMENT_SYSTEM',\ncardId: 'RM',\nshadow,\n};\n\nconst secondCard = {\n...(numberOfCards === '2' && {\nbaseUrl: 'https://online.alfabank.ru/cards-images/cards/',\nlayers: 'BACKGROUND,LOGO,PAYMENT_SYSTEM',\ncardId: 'RM',\n}),\n...(sizeAndAlignCard === '40-default' && {\ncardNumber: 1234000000001234,\n}),\n};\n\nreturn (\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/progress-bar.json b/packages/mcp/src/data/v50.16.0/progress-bar.json new file mode 100644 index 0000000000..badd0ff22e --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/progress-bar.json @@ -0,0 +1,74 @@ +{ + "packageName": "progress-bar", + "displayName": "ProgressBar", + "description": "Используется для отображения прогресса.", + "props": { + "value": { + "defaultValue": null, + "description": "Значение заполненной части 0-100", + "name": "value", + "required": true, + "type": { + "name": "number" + } + }, + "className": { + "defaultValue": null, + "description": "Css-класс для стилизации", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "view": { + "defaultValue": { + "value": "positive" + }, + "description": "Цвет заполнения", + "name": "view", + "required": false, + "type": { + "name": "\"link\" | \"primary\" | \"secondary\" | \"accent\" | \"tertiary\" | \"positive\" | \"negative\" | \"attention\" | undefined" + } + }, + "size": { + "defaultValue": { + "value": 8 + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "4 | 8 | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Id компонента для тестов", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "\n\n\n" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/pure-cell.json b/packages/mcp/src/data/v50.16.0/pure-cell.json new file mode 100644 index 0000000000..4741a118b7 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/pure-cell.json @@ -0,0 +1,38 @@ +{ + "packageName": "pure-cell", + "displayName": "Context", + "description": "", + "props": {}, + "demos": [ + { + "title": "Лейаут", + "description": "Компонент представляет из себя структуру с двумя вертикально или горизонтально расположенными слотами: Graphic и Content.\nГоризонтальные и вертикальные отступы могут принимать предустановленные значения.", + "desktop": "render(() => {\nconst [graphics, setGraphicsRadioValue] = React.useState('left');\n\nconst onGraphicsRadioChange = React.useCallback((_, payload) => {\nsetGraphicsRadioValue(payload.value);\n}, []);\n\nconst styleAddons = {\nwidth: '40px',\nheight: '40px',\nborderRadius: '8px',\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\n};\n\nconst styleFooter = {\nwidth: '263px',\nheight: '16px',\nborderRadius: '8px',\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\n};\n\nconst styleContent = {\nwidth: '207px',\nheight: '20px',\nborderRadius: '8px',\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\n};\n\nconst styleGraphics = {\nwidth: '64px',\nheight: '64px',\nborderRadius: '8px',\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\n};\n\nreturn (\n\n\n\n{graphics !== 'right' && (\n\n
\n\n)}\n\n\n
\n
\n\n\n
\n\n\n
\n\n\n{graphics === 'right' && (\n\n
\n\n)}\n\n
\n\n\n\n\n\n\n\n);\n});" + }, + { + "title": "Примеры", + "description": "На базе компонента могут быть собраны готовые для использования в продукте пресеты ячеек.", + "desktop": "render(() => (\n
\n\n\n\n\n\n\n\n\n\n}\n>\nTitle\n\n\nSubtitle\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTitle\n\n\nSubtitle\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n}\n>\nTitle\n\n\nПополнение\n\n\n\nКоплю на мечту\n\n\n\n\n\n\n\n\nProduct Name ··0000\n\n\n\n\n\nСтатус продукта\n\nAction\n\n\n\n
\n\n\n\n\nAccount Name ··0000\n\n\n\n\n
\n\n\n
\n\n\n\n
\n\n
\n\n\n\n\n\n\n\n\n\n{'Новый\\r\\nперевод'}\n\n\n\n\n
\n
\n));" + }, + { + "title": ".Content", + "description": "Компонент является внутренней структурой PureCell. Состоит из слотов main (зеленый), addon (фиолетовый) и footer (желтый).\nКаждый из слотов является опциональным.\nОтступы до аддона и футера могут иметь дефолтное значение или отсутствовать.", + "desktop": "render(() => {\nconst styleWrapper = {\ndisplay: 'flex',\njustifyContent: 'space-between',\n};\nconst styleFooter = {\nwidth: '263px',\nheight: '16px',\nborderRadius: '8px',\nbackgroundColor: 'rgba(255, 168, 0, 0.1)',\nborder: '1px dashed rgba(255, 168, 0, 1)',\nboxSizing: 'border-box',\n};\n\nconst styleContent = {\nwidth: '263px',\nheight: '20px',\nborderRadius: '8px',\nbackgroundColor: 'rgba(0, 255, 85, 0.1)',\nborder: '1px dashed rgba(0, 255, 85, 1)',\nboxSizing: 'border-box',\n};\n\nconst styleAddon = {\nwidth: '40px',\nheight: '40px',\nborderRadius: '8px',\nbackgroundColor: 'rgba(0, 0, 255, 0.1)',\nborder: '1px dashed rgba(0, 0, 255, 1)',\nboxSizing: 'border-box',\n};\n\nreturn (\n\n
\n\n\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n\n\n
\n\n\n
\n\n\n\n
\n\n
\n\n\n\n
\n
\n\n\n
\n\n\n\n
\n\n
\n\n\n\n
\n
\n
\n
\n
\n\n\n
\n\n\n\n
\n\n);\n});" + }, + { + "title": ".Main", + "description": "", + "desktop": "render(() => {\nconst styleContent = {\nwidth: '159px',\nheight: '20px',\nborderRadius: '8px',\nbackgroundColor: 'rgba(0, 255, 85, 0.1)',\nborder: '1px dashed rgba(0, 255, 85, 1)',\nboxSizing: 'border-box',\n};\n\nreturn (\n
\n\n\n\n\nПример отсечения контента в одну строку\n\n\n\n\n\n\n\n\n\nПример отсечения текста в несколько строк. Пример отсечения текста в\nнесколько строк\n\n\n\n\n\n\n\n\n\nПоведение правой части при многострочной левой\n\n\n\n\n\n\n\n\n\nText\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n
\n
\n);\n});" + }, + { + "title": ".Addon", + "description": "", + "desktop": "render(() => (\n\n
\n\n\n\n\n\nText\n\n\n\n\n
\n
\n\n\n\n
\n\n\n
\n
\n\n\n
\n\n\n\n
\n\n
\n\n\n\n
\n\n\n
\n\n\n\n
\n\n
\n\n\n\n\n\n\n\n
\n\n));" + }, + { + "title": ".Footer", + "description": "", + "desktop": "render(() => (\n\n\n\n\nButton Text\n\n\n\n\n\n\n\n\nNeutral Status\n\nButton Text\n\n\n\n\n));" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/radio-group.json b/packages/mcp/src/data/v50.16.0/radio-group.json new file mode 100644 index 0000000000..a04445e384 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/radio-group.json @@ -0,0 +1,193 @@ +{ + "packageName": "radio-group", + "displayName": "RadioGroup", + "description": "Используется для выбора одного значения из нескольких доступных.", + "props": { + "children": { + "defaultValue": null, + "description": "Дочерние элементы. Ожидаются компоненты `Radio` или `Tag`", + "name": "children", + "required": true, + "type": { + "name": "ReactNode" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "type": { + "defaultValue": null, + "description": "Тип компонента", + "name": "type", + "required": false, + "type": { + "name": "RadioGroupType | undefined" + } + }, + "onFocus": { + "defaultValue": null, + "description": "Обработчик фокуса.", + "name": "onFocus", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | undefined" + } + }, + "onBlur": { + "defaultValue": null, + "description": "Обработчик блюра.", + "name": "onBlur", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик изменения значения 'checked' одного из дочерних компонентов", + "name": "onChange", + "required": false, + "type": { + "name": "((event: MouseEvent | ChangeEvent, payload: { value: string; name?: string | undefined; }) => void) | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Управление возможностью изменения состояния 'checked' дочерних компонентов Radio | Tag", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "name": { + "defaultValue": null, + "description": "Атрибут name для всех дочерних компонентов", + "name": "name", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Value выбранного дочернего элемента", + "name": "value", + "required": false, + "type": { + "name": "string | null | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки снизу", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Заголовок группы", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "direction": { + "defaultValue": null, + "description": "Направление", + "name": "direction", + "required": false, + "type": { + "name": "Direction | undefined" + } + }, + "radioListClassName": { + "defaultValue": null, + "description": "Дополнительный класс для списка радио элементов", + "name": "radioListClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Горизонтальная группа", + "description": "Горизонтальное расположение используется при коротких названиях пунктов и малом количестве вариантов — от двух до трех.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState('one');\nconst [error, setError] = React.useState(false);\n\nconst onChange = (_, payload) => {\nsetValue(payload.value);\n};\n\nreturn (\n
\n\n\n\n\n\n\n\n\n\n\n\n\n
\n);\n});", + "mobile": "render(() => {\nconst [value, setValue] = React.useState('one');\nconst [error, setError] = React.useState(false);\n\nconst onChange = (_, payload) => {\nsetValue(payload.value);\n};\n\nreturn (\n
\n\n\n\n\n\n\n\n\n\n\n\n\n
\n);\n});" + }, + { + "title": "Вертикальная группа", + "description": "Вертикальное расположение используется при длинных названиях пунктов. Рекомендуемое количество вариантов от двух до пяти.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState('one');\nconst [error, setError] = React.useState(false);\n\nconst onChange = (_, payload) => {\nsetValue(payload.value);\n};\n\nreturn (\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n);\n});", + "mobile": "render(() => {\nconst [value, setValue] = React.useState('one');\nconst [error, setError] = React.useState(false);\n\nconst onChange = (_, payload) => {\nsetValue(payload.value);\n};\n\nreturn (\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n);\n});" + }, + { + "title": "Группа тегов", + "description": "Теги могут использоваться в качестве радиокнопок в составе группы.\nГруппа тегов используется при коротких названиях пунктов и малом количестве вариантов — от двух до трех.\nЕсли варианты не помещаются в одну строку они могут перенестись на следующую.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState('one');\nconst [error, setError] = React.useState(false);\n\nconst onChange = (_, payload) => {\nsetValue(payload.value);\n};\n\nreturn (\n
\n\nВариант 1\nВариант 2\nВариант 3\nВариант 4\n\n\n\n\n\n\n\n\n
\n);\n});", + "mobile": "render(() => {\nconst [value, setValue] = React.useState('one');\nconst [error, setError] = React.useState(false);\n\nconst onChange = (_, payload) => {\nsetValue(payload.value);\n};\n\nreturn (\n
\n\nВариант 1\nВариант 2\nВариант 3\nВариант 4\n\n\n\n\n\n\n\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/radio.json b/packages/mcp/src/data/v50.16.0/radio.json new file mode 100644 index 0000000000..4935547acb --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/radio.json @@ -0,0 +1,169 @@ +{ + "packageName": "radio", + "displayName": "Radio", + "description": "", + "props": { + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки снизу", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Текст подписи", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "size": { + "defaultValue": { + "value": 20 + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "24 | 20 | undefined" + } + }, + "checked": { + "defaultValue": null, + "description": "Управление состоянием отмечен/не отмечен", + "name": "checked", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Управление состоянием включен / выключен", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "name": { + "defaultValue": null, + "description": "Html аттрибут name инпута", + "name": "name", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Класс компонента", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "circleClassName": { + "defaultValue": null, + "description": "Доп. класс радио кнопки", + "name": "circleClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Доп. класс контента", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "align": { + "defaultValue": { + "value": "start" + }, + "description": "Выравнивание", + "name": "align", + "required": false, + "type": { + "name": "Align | undefined" + } + }, + "addons": { + "defaultValue": null, + "description": "Дополнительный слот", + "name": "addons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивать ли компонент на всю ширину", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "labelProps": { + "defaultValue": null, + "description": "Пропсы для label", + "name": "labelProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLLabelElement> | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик на выбор элемента", + "name": "onChange", + "required": false, + "type": { + "name": "((event: ChangeEvent, payload: { checked: boolean; name?: string | undefined; }) => void) | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + } + }, + "demos": [ + { + "title": "Размеры", + "description": "Компонент поддерживате два размера, 24 и 20 px", + "desktop": "render(() => {\nconst [selectedOptions, setSelectedOptions] = React.useState({\ngroup_1: 'checkbox24_1',\ngroup_2: 'checkbox20_1',\n});\nconst [switchChecked, setSwitchChecked] = React.useState(true);\nconst [disabled, setDisabled] = React.useState(false);\n\nconst handleChange = (group, name) => () => {\nsetSelectedOptions((prevOptions) => ({\n...prevOptions,\n[group]: name,\n}));\n};\n\nreturn (\n\n\n
\n\n
\n\n\n
\n\n
\n\n\n
\n
\n\n
\n\n
\n\n
\n
\n
\n\n\n\n setSwitchChecked((prevState) => !prevState)}\n/>\n\n setDisabled((prevState) => !prevState)}\n/>\n\n);\n});" + }, + { + "title": "Состояния", + "description": "Радиокнопка может находиться в выбранном и невыбранном состоянии.\nЕсли радиокнопка заблокирована, используется состояние «недоступна».", + "desktop": "render(() => {\nreturn (\n
\n\n\n\n\n\n\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/scrollbar.json b/packages/mcp/src/data/v50.16.0/scrollbar.json new file mode 100644 index 0000000000..9887f3b9a0 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/scrollbar.json @@ -0,0 +1,176 @@ +{ + "packageName": "scrollbar", + "displayName": "Scrollbar", + "description": "Используется для управления контентм с помощью полосы прокрутки.", + "props": { + "children": { + "defaultValue": null, + "description": "Оборачиваемый элемент.", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс на корневой элемент.", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "horizontalAutoStretch": { + "defaultValue": { + "value": false + }, + "description": "Растягивать контент по горизонтали по ширине содержимого.", + "name": "horizontalAutoStretch", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "widthPropName": { + "defaultValue": { + "value": "minWidth" + }, + "description": "Название css свойства, которое устанавливается на контейнер при horizontalAutoStretch.", + "name": "widthPropName", + "required": false, + "type": { + "name": "\"width\" | \"maxWidth\" | \"minWidth\" | undefined" + } + }, + "autoHide": { + "defaultValue": { + "value": true + }, + "description": "Включает автоскрытие ползунка.", + "name": "autoHide", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "autoHideTimeout": { + "defaultValue": { + "value": 1000 + }, + "description": "Время в мс, определяющее задержку до исчезновения полосы прокрутки (при включенной опции autoHide).", + "name": "autoHideTimeout", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "forceVisible": { + "defaultValue": { + "value": false + }, + "description": "Принудительное отображение полосы прокрутки.", + "name": "forceVisible", + "required": false, + "type": { + "name": "boolean | \"x\" | \"y\" | undefined" + } + }, + "clickOnTrack": { + "defaultValue": { + "value": true + }, + "description": "Управление поведением клика по треку.\nЕсли true, то будет выполняться прокрутка к месту клика.", + "name": "clickOnTrack", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "scrollableNodeProps": { + "defaultValue": { + "value": "{ ref: null }" + }, + "description": "HTML-aтрибуты на прокручиваемый узел.", + "name": "scrollableNodeProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "contentNodeProps": { + "defaultValue": { + "value": "{ ref: null }" + }, + "description": "HTML-aтрибуты на узел с контентом.", + "name": "contentNodeProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "maskProps": { + "defaultValue": null, + "description": "HTML-aтрибуты маски.", + "name": "maskProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "verticalBarClassName": { + "defaultValue": null, + "description": "Дополнительный класс контейнера вертикальной полосы прокрутки", + "name": "verticalBarClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "horizontalBarClassName": { + "defaultValue": null, + "description": "Дополнительный класс контейнера горизонтальной полосы прокрутки", + "name": "horizontalBarClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onContentScroll": { + "defaultValue": null, + "description": "Обработчик изменения скролла", + "name": "onContentScroll", + "required": false, + "type": { + "name": "((e: Event) => void) | undefined" + } + }, + "verticalBarRef": { + "defaultValue": null, + "description": "Ref для вертикальной полосы прокрутки", + "name": "verticalBarRef", + "required": false, + "type": { + "name": "RefObject | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "", + "desktop": "render(() => {\nconst getChildStyle = (bgColor) => ({\nheight: 80,\ntextAlign: 'center',\nlineHeight: '80px',\nfontSize: 40,\nfontWeight: 700,\ncolor: 'var(--color-light-text-tertiary)',\nbackground: `var(${bgColor})`,\n});\nreturn (\n
\n\n{new Array(51).fill(null).map((_, idx) => {\nconst style = getChildStyle(\nidx % 2 === 0 ? '--color-light-neutral-200' : '--color-light-base-bg-secondary',\n);\nreturn (\n
\n{idx + 1}\n
\n);\n})}\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/segmented-control.json b/packages/mcp/src/data/v50.16.0/segmented-control.json new file mode 100644 index 0000000000..4b1fd0dd39 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/segmented-control.json @@ -0,0 +1,134 @@ +{ + "packageName": "segmented-control", + "displayName": "SegmentedControl", + "description": "Используется для переключения или фильтрации контента.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный className", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик смены выбранного сегмента", + "name": "onChange", + "required": true, + "type": { + "name": "(id: IDType) => void" + } + }, + "selectedId": { + "defaultValue": null, + "description": "ID выбранного сегмента", + "name": "selectedId", + "required": true, + "type": { + "name": "IDType" + } + }, + "size": { + "defaultValue": { + "value": 32 + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "40 | 32 | undefined" + } + }, + "shape": { + "defaultValue": { + "value": "rectangular" + }, + "description": "Форма компонента", + "name": "shape", + "required": false, + "type": { + "name": "\"rounded\" | \"rectangular\" | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние элементы", + "name": "children", + "required": true, + "type": { + "name": "ReactElement>[]" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "style": { + "defaultValue": null, + "description": "Дополнительные инлайн стили для враппера", + "name": "style", + "required": false, + "type": { + "name": "CSSProperties | undefined" + } + }, + "disabled": { + "defaultValue": { + "value": false + }, + "description": "Отключает пользовательский ввод", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "skeleton": { + "defaultValue": null, + "description": "Настройки скелетона", + "name": "skeleton", + "required": false, + "type": { + "name": "SkeletonProps | undefined" + } + } + }, + "demos": [ + { + "title": "Размеры и стили", + "description": "Для контрола доступно два размера и два вида скруглений.", + "desktop": "render(() => {\nconst [selectedId, setSelectedId] = React.useState({\n'1': 1,\n'2': 1,\n'3': 1,\n'4': 1,\n});\nconst handleChange = (pos, id) => setSelectedId({ ...selectedId, [pos]: id });\nreturn (\n
\n\n handleChange('1', id)} selectedId={selectedId[\"1\"]}>\n\n\n\n handleChange('2', id)} selectedId={selectedId[\"2\"]}>\n\n\n\n handleChange('3', id)} selectedId={selectedId[\"3\"]}>\n\n\n\n handleChange('4', id)} selectedId={selectedId[\"4\"]}>\n\n\n\n\n
\n)\n})", + "mobile": "render(() => {\nconst [selectedId, setSelectedId] = React.useState({\n'1': 1,\n'2': 1,\n'3': 1,\n'4': 1,\n});\nconst handleChange = (pos, id) => setSelectedId({ ...selectedId, [pos]: id });\nreturn (\n\n handleChange('1', id)} selectedId={selectedId[\"1\"]}>\n\n\n\n handleChange('2', id)} selectedId={selectedId[\"2\"]}>\n\n\n\n handleChange('3', id)} selectedId={selectedId[\"3\"]}>\n\n\n\n handleChange('4', id)} selectedId={selectedId[\"4\"]}>\n\n\n\n\n)\n})" + }, + { + "title": "Количество сегментов", + "description": "Контрол может содержать от двух до пяти сегментов.", + "desktop": "render(() => {\nconst [selectedId, setSelectedId] = React.useState({\n'1': 1,\n'2': 1,\n'3': 1,\n'4': 1,\n'5': 1,\n});\nconst handleChange = (pos, id) => setSelectedId({ ...selectedId, [pos]: id });\nreturn (\n
\n\n handleChange('1', id)}>\n\n\n\n handleChange('2', id)}>\n\n\n\n\n handleChange('3', id)}>\n\n\n\n\n\n handleChange('4', id)}>\n\n\n\n\n\n\n\n
\n)\n})", + "mobile": "render(() => {\nconst [selectedId, setSelectedId] = React.useState({\n'1': 1,\n'2': 1,\n'3': 1,\n'4': 1,\n'5': 1,\n});\nconst handleChange = (pos, id) => setSelectedId({ ...selectedId, [pos]: id });\nreturn (\n\n handleChange('1', id)}>\n\n\n\n handleChange('2', id)}>\n\n\n\n\n handleChange('3', id)}>\n\n\n\n\n\n handleChange('4', id)}>\n\n\n\n\n\n\n\n)\n})" + }, + { + "title": "Заголовки сегментов", + "description": "Сегменты могут содержать как строковые значения, так и React компоненты", + "desktop": "render(() => {\nconst [selectedId, setSelectedId] = React.useState({\n'1': 1,\n'2': 1,\n});\nconst handleChange = (pos, id) => setSelectedId({ ...selectedId, [pos]: id });\nreturn (\n
\n\n handleChange('1', id)}>\n\n\n\n handleChange('2', id)}>\n} />\n} />\n\n\n
\n)\n})", + "mobile": "render(() => {\nconst [selectedId, setSelectedId] = React.useState({\n'1': 1,\n'2': 1,\n});\nconst handleChange = (pos, id) => setSelectedId({ ...selectedId, [pos]: id });\nreturn (\n\n handleChange('1', id)}>\n\n\n\n handleChange('2', id)}>\n} />\n} />\n\n\n)\n})" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/select-with-tags.json b/packages/mcp/src/data/v50.16.0/select-with-tags.json new file mode 100644 index 0000000000..e497ced071 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/select-with-tags.json @@ -0,0 +1,625 @@ +{ + "packageName": "select-with-tags", + "displayName": "SelectWithTags", + "description": "Используется для разделения сложной формы или анкеты на последовательные шаги.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля пункта меню используется модификатор -option, компонента поиска -search,\nкомпонента выпадающего меню -options-list, компонента BottomSheet -bottom-sheet,\nкомпонента поля -field, компонета FormControl -field-form-control", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "id": { + "defaultValue": null, + "description": "Атрибут id", + "name": "id", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onFocus": { + "defaultValue": null, + "description": "Обработчик фокуса поля", + "name": "onFocus", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | undefined" + } + }, + "onBlur": { + "defaultValue": null, + "description": "Обработчик блюра поля", + "name": "onBlur", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | undefined" + } + }, + "onScroll": { + "defaultValue": null, + "description": "Обработчик скрола", + "name": "onScroll", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "size": { + "defaultValue": { + "value": "48" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Управление возможностью выбора значения", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "name": { + "defaultValue": null, + "description": "Атрибут name", + "name": "name", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "placeholder": { + "defaultValue": null, + "description": "Плейсхолдер поля", + "name": "placeholder", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clear": { + "defaultValue": null, + "description": "Флаг, показать крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "hint": { + "defaultValue": null, + "description": "Подсказка под полем", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл поля", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на крестик для очистки поля", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "environment": { + "defaultValue": { + "value": "window" + }, + "description": "Контекст окружения для downshift.js", + "name": "environment", + "required": false, + "type": { + "name": "Environment | undefined" + } + }, + "open": { + "defaultValue": null, + "description": "Управление открытием", + "name": "open", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "defaultOpen": { + "defaultValue": null, + "description": "Начальное состояние селекта", + "name": "defaultOpen", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "preventFlip": { + "defaultValue": null, + "description": "Запрещает поповеру менять свою позицию.\nНапример, если места снизу недостаточно,то он все равно будет показан снизу", + "name": "preventFlip", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "popoverPosition": { + "defaultValue": null, + "description": "Позиционирование выпадающего списка", + "name": "popoverPosition", + "required": false, + "type": { + "name": "Position | undefined" + } + }, + "zIndexPopover": { + "defaultValue": null, + "description": "z-index поповера", + "name": "zIndexPopover", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "Arrow": { + "defaultValue": null, + "description": "Компонент стрелки", + "name": "Arrow", + "required": false, + "type": { + "name": "false | ComponentType | null | undefined" + } + }, + "closeOnSelect": { + "defaultValue": null, + "description": "Закрывать меню после выбора?", + "name": "closeOnSelect", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "allowUnselect": { + "defaultValue": null, + "description": "Позволяет снять выбранное значение", + "name": "allowUnselect", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "options": { + "defaultValue": null, + "description": "Список вариантов выбора", + "name": "options", + "required": true, + "type": { + "name": "(OptionShape | GroupShape)[]" + } + }, + "searchProps": { + "defaultValue": null, + "description": "Настройки поиска", + "name": "searchProps", + "required": false, + "type": { + "name": "{ componentProps?: SearchProps | undefined; accessor?: ((option: OptionShape) => string) | undefined; filterFn?: ((optionText: string, search: string) => boolean) | undefined; value?: string | undefined; onChange?: ((value: string) => void) | undefined; filterGroup?: boolean | undefined; groupAccessor?: ((group: Gro..." + } + }, + "showSearch": { + "defaultValue": null, + "description": "Включает отображение поиска", + "name": "showSearch", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "Search": { + "defaultValue": null, + "description": "Компонент поиска", + "name": "Search", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "optionsListClassName": { + "defaultValue": null, + "description": "Дополнительный класс выпадающего меню", + "name": "optionsListClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionClassName": { + "defaultValue": null, + "description": "Дополнительный класс для пункта меню", + "name": "optionClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionGroupClassName": { + "defaultValue": null, + "description": "Дополнительный класс для компонента группы пунктов", + "name": "optionGroupClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "popperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поповера", + "name": "popperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionsSize": { + "defaultValue": null, + "description": "Размер пунктов меню", + "name": "optionsSize", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "optionsListWidth": { + "defaultValue": null, + "description": "Управляет шириной выпадающего меню.\nШирину определяет контент, либо ширина равна ширине поля", + "name": "optionsListWidth", + "required": false, + "type": { + "name": "\"content\" | \"field\" | undefined" + } + }, + "circularNavigation": { + "defaultValue": null, + "description": "При навигации с клавиатуры переходить от последнего пункта меню к первому и наоборот.", + "name": "circularNavigation", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "visibleOptions": { + "defaultValue": null, + "description": "Количество видимых пунктов меню (5 = 5.5)", + "name": "visibleOptions", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "valueRenderer": { + "defaultValue": null, + "description": "Кастомный рендер выбранного пункта", + "name": "valueRenderer", + "required": false, + "type": { + "name": "(({ selected, selectedMultiple, }: { selected?: OptionShape | undefined; selectedMultiple: OptionShape[]; valueSeparator?: string | undefined; }) => ReactNode) | undefined" + } + }, + "valueSeparator": { + "defaultValue": null, + "description": "Кастомный разделитель выбранных пунктов (Работает когда не прокинут valueRenderer)", + "name": "valueSeparator", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "fieldProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент поля", + "name": "fieldProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "optionsListProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент списка", + "name": "optionsListProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "optionProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент пункта меню", + "name": "optionProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "groupOptionProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент группового пункта меню", + "name": "groupOptionProps", + "required": false, + "type": { + "name": "AnyObject | undefined" + } + }, + "OptionsList": { + "defaultValue": null, + "description": "Компонент выпадающего меню", + "name": "OptionsList", + "required": false, + "type": { + "name": "ComponentType & { className?: string | undefined; optionGroupClassName?: string | undefined; scrollbarClassName?: string | undefined; ... 28 more ...; limitDynamicOptionGroupSize?: boolean | undefined; } & RefAttributes<...>> | undefined" + } + }, + "Optgroup": { + "defaultValue": null, + "description": "Компонент группы", + "name": "Optgroup", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "Option": { + "defaultValue": null, + "description": "Компонент пункта меню", + "name": "Option", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "onOpen": { + "defaultValue": null, + "description": "Обработчик открытия\\закрытия селекта", + "name": "onOpen", + "required": false, + "type": { + "name": "((payload: { open?: boolean | undefined; name?: string | undefined; }) => void) | undefined" + } + }, + "updatePopover": { + "defaultValue": null, + "description": "Хранит функцию, с помощью которой можно обновить положение поповера", + "name": "updatePopover", + "required": false, + "type": { + "name": "MutableRefObject<(() => void) | undefined> | undefined" + } + }, + "showEmptyOptionsList": { + "defaultValue": null, + "description": "Показывать OptionsList, если он пустой", + "name": "showEmptyOptionsList", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "popoverProps": { + "defaultValue": null, + "description": "Дополнительные пропсы для Popover", + "name": "popoverProps", + "required": false, + "type": { + "name": "Omit | undefined" + } + }, + "limitDynamicOptionGroupSize": { + "defaultValue": null, + "description": "Ограничение динамического размера группы вариантов выбора", + "name": "limitDynamicOptionGroupSize", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "value": { + "defaultValue": null, + "description": "Значение поля ввода", + "name": "value", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onInput": { + "defaultValue": null, + "description": "Обработчик ввода", + "name": "onInput", + "required": false, + "type": { + "name": "((event: ChangeEvent) => void) | undefined" + } + }, + "selected": { + "defaultValue": null, + "description": "Список выбранных пунктов (controlled-селект)", + "name": "selected", + "required": false, + "type": { + "name": "(string | OptionShape)[] | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик выбора", + "name": "onChange", + "required": false, + "type": { + "name": "((payload: { selectedMultiple: (string | OptionShape)[]; initiator?: OptionShape | null | undefined; name?: string | undefined; }) => void) | undefined" + } + }, + "autocomplete": { + "defaultValue": null, + "description": "Режим автокомплита", + "name": "autocomplete", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "match": { + "defaultValue": null, + "description": "Функция сравнения при поиске", + "name": "match", + "required": false, + "type": { + "name": "OptionMatcher | undefined" + } + }, + "Tag": { + "defaultValue": null, + "description": "Компонент Тэг", + "name": "Tag", + "required": false, + "type": { + "name": "TagComponent | undefined" + } + }, + "collapseTagList": { + "defaultValue": null, + "description": "Показывать тэги только в одном ряду, а если не помещаются в один ряд - схлопнуть в одну кнопку", + "name": "collapseTagList", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "moveInputToNewLine": { + "defaultValue": null, + "description": "Если текст не помещается в инпут, то нужно перенести инпут на новую строку.", + "name": "moveInputToNewLine", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "transformCollapsedTagText": { + "defaultValue": null, + "description": "Трансформировать текст компонента Тэг который отображает общее количество выбранных элементов", + "name": "transformCollapsedTagText", + "required": false, + "type": { + "name": "((collapsedCount: number) => string) | undefined" + } + }, + "transformTagText": { + "defaultValue": null, + "description": "Трансформировать текст компонента Тэг", + "name": "transformTagText", + "required": false, + "type": { + "name": "((tagText?: ReactNode) => ReactNode) | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Чтобы упростить выбор значений из выпадающего списка можно включить режим автокомплита.\nДля экономии места можно разрешить скрывать теги, которые не поместились в одну строку.", + "desktop": "const options = [\n{ key: '1', content: 'H', value: 'H' },\n{ key: '2', content: 'Li', value: 'Li' },\n{ key: '3', content: 'Na', value: 'Na' },\n{ key: '4', content: 'Curium', value: 'Curium' },\n{ key: '5', content: 'Berkelium', value: 'Berkelium' },\n{ key: '6', content: 'Californium', value: 'Californium' },\n{ key: '7', content: 'Einsteinium', value: 'Einsteinium' },\n{ key: '8', content: 'Fermium', value: 'Fermium' },\n];\n\nrender(() => {\nconst [autocomplete, setAutocomplete] = React.useState(false);\nconst [collapseTagList, setCollapseTagList] = React.useState(false);\nconst [value, setValue] = React.useState('');\nconst [selected, setSelected] = React.useState([]);\n\nconst handleChange = ({ selectedMultiple }) => {\nsetSelected(selectedMultiple);\n};\n\nconst handleInput = (event) => {\nsetValue(event.target.value);\n};\n\nreturn (\n<>\n
\n\n\nНичего не нашлось\n\n
\n),\n}}\n/>\n
\n\n\n\n {\nsetCollapseTagList((prevState) => !prevState);\nsetSelected([]);\n}}\nlabel='Скрывать теги при переполнении'\n/>\n\n\n\n {\nsetAutocomplete((prevState) => !prevState);\nsetSelected([]);\n}}\nlabel='Режим автокомплита'\n/>\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/select.json b/packages/mcp/src/data/v50.16.0/select.json new file mode 100644 index 0000000000..30b6b11be0 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/select.json @@ -0,0 +1,752 @@ +{ + "packageName": "select", + "displayName": "SelectResponsive", + "description": "Поле ввода с выпадающим списком.", + "props": { + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля пункта меню используется модификатор -option, компонента поиска -search,\nкомпонента выпадающего меню -options-list, компонента BottomSheet -bottom-sheet,\nкомпонента поля -field, компонета FormControl -field-form-control", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionsListClassName": { + "defaultValue": null, + "description": "Дополнительный класс выпадающего меню", + "name": "optionsListClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionClassName": { + "defaultValue": null, + "description": "Дополнительный класс для пункта меню", + "name": "optionClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "optionGroupClassName": { + "defaultValue": null, + "description": "Дополнительный класс для компонента группы пунктов", + "name": "optionGroupClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "popperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поповера", + "name": "popperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "options": { + "defaultValue": null, + "description": "Список вариантов выбора", + "name": "options", + "required": true, + "type": { + "name": "(OptionShape | GroupShape)[]" + } + }, + "id": { + "defaultValue": null, + "description": "Атрибут id", + "name": "id", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "name": { + "defaultValue": null, + "description": "Атрибут name", + "name": "name", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Управление возможностью выбора значения", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "defaultOpen": { + "defaultValue": null, + "description": "Начальное состояние селекта", + "name": "defaultOpen", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "open": { + "defaultValue": null, + "description": "Управление открытием", + "name": "open", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "multiple": { + "defaultValue": null, + "description": "Возможность выбрать несколько значений", + "name": "multiple", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "size": { + "defaultValue": { + "value": "48" + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "optionsSize": { + "defaultValue": null, + "description": "Размер пунктов меню", + "name": "optionsSize", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "optionsListWidth": { + "defaultValue": null, + "description": "Управляет шириной выпадающего меню.\nШирину определяет контент, либо ширина равна ширине поля", + "name": "optionsListWidth", + "required": false, + "type": { + "name": "\"content\" | \"field\" | undefined" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл поля", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "placeholder": { + "defaultValue": null, + "description": "Плейсхолдер поля", + "name": "placeholder", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "hint": { + "defaultValue": null, + "description": "Подсказка под полем", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "autocomplete": { + "defaultValue": null, + "description": "Возможность использовать селект как input-autocomplete", + "name": "autocomplete", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "allowUnselect": { + "defaultValue": null, + "description": "Позволяет снять выбранное значение", + "name": "allowUnselect", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "closeOnSelect": { + "defaultValue": null, + "description": "Закрывать меню после выбора?", + "name": "closeOnSelect", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "circularNavigation": { + "defaultValue": null, + "description": "При навигации с клавиатуры переходить от последнего пункта меню к первому и наоборот.", + "name": "circularNavigation", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "preventFlip": { + "defaultValue": null, + "description": "Запрещает поповеру менять свою позицию.\nНапример, если места снизу недостаточно,то он все равно будет показан снизу", + "name": "preventFlip", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "selected": { + "defaultValue": null, + "description": "Список value выбранных пунктов (controlled-селект)", + "name": "selected", + "required": false, + "type": { + "name": "string | OptionShape | (string | OptionShape)[] | null | undefined" + } + }, + "nativeSelect": { + "defaultValue": null, + "description": "Рендерит нативный селект вместо выпадающего меню. (на десктопе использовать только с multiple=false)", + "name": "nativeSelect", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "popoverPosition": { + "defaultValue": null, + "description": "Позиционирование выпадающего списка", + "name": "popoverPosition", + "required": false, + "type": { + "name": "Position | undefined" + } + }, + "visibleOptions": { + "defaultValue": null, + "description": "Количество видимых пунктов меню (5 = 5.5)", + "name": "visibleOptions", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "valueRenderer": { + "defaultValue": null, + "description": "Кастомный рендер выбранного пункта", + "name": "valueRenderer", + "required": false, + "type": { + "name": "(({ selected, selectedMultiple, }: { selected?: OptionShape | undefined; selectedMultiple: OptionShape[]; valueSeparator?: string | undefined; }) => ReactNode) | undefined" + } + }, + "valueSeparator": { + "defaultValue": null, + "description": "Кастомный разделитель выбранных пунктов (Работает когда не прокинут valueRenderer)", + "name": "valueSeparator", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "Arrow": { + "defaultValue": null, + "description": "Компонент стрелки", + "name": "Arrow", + "required": false, + "type": { + "name": "false | ComponentType | null | undefined" + } + }, + "Field": { + "defaultValue": null, + "description": "Компонент поля", + "name": "Field", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "fieldProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент поля", + "name": "fieldProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "optionsListProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент списка", + "name": "optionsListProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "optionProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент пункта меню", + "name": "optionProps", + "required": false, + "type": { + "name": "unknown" + } + }, + "groupOptionProps": { + "defaultValue": null, + "description": "Пропсы, которые будут прокинуты в компонент группового пункта меню", + "name": "groupOptionProps", + "required": false, + "type": { + "name": "AnyObject | undefined" + } + }, + "OptionsList": { + "defaultValue": null, + "description": "Компонент выпадающего меню", + "name": "OptionsList", + "required": false, + "type": { + "name": "ComponentType & { className?: string | undefined; optionGroupClassName?: string | undefined; scrollbarClassName?: string | undefined; ... 28 more ...; limitDynamicOptionGroupSize?: boolean | undefined; } & RefAttributes<...>> | undefined" + } + }, + "Optgroup": { + "defaultValue": null, + "description": "Компонент группы", + "name": "Optgroup", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "Option": { + "defaultValue": null, + "description": "Компонент пункта меню", + "name": "Option", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "showSearch": { + "defaultValue": null, + "description": "Включает отображение поиска", + "name": "showSearch", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "Search": { + "defaultValue": null, + "description": "Компонент поиска", + "name": "Search", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "searchProps": { + "defaultValue": null, + "description": "Настройки поиска", + "name": "searchProps", + "required": false, + "type": { + "name": "{ componentProps?: SearchProps | undefined; accessor?: ((option: OptionShape) => string) | undefined; filterFn?: ((optionText: string, search: string) => boolean) | undefined; value?: string | undefined; onChange?: ((value: string) => void) | undefined; filterGroup?: boolean | undefined; groupAccessor?: ((group: Gro..." + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик выбора", + "name": "onChange", + "required": false, + "type": { + "name": "((payload: BaseSelectChangePayload) => void) | undefined" + } + }, + "onOpen": { + "defaultValue": null, + "description": "Обработчик открытия\\закрытия селекта", + "name": "onOpen", + "required": false, + "type": { + "name": "((payload: { open?: boolean | undefined; name?: string | undefined; }) => void) | undefined" + } + }, + "onBlur": { + "defaultValue": null, + "description": "Обработчик блюра поля", + "name": "onBlur", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | undefined" + } + }, + "onFocus": { + "defaultValue": null, + "description": "Обработчик фокуса поля", + "name": "onFocus", + "required": false, + "type": { + "name": "((event: FocusEvent) => void) | undefined" + } + }, + "onScroll": { + "defaultValue": null, + "description": "Обработчик скрола", + "name": "onScroll", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на крестик для очистки поля", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "clear": { + "defaultValue": null, + "description": "Флаг, показать крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "updatePopover": { + "defaultValue": null, + "description": "Хранит функцию, с помощью которой можно обновить положение поповера", + "name": "updatePopover", + "required": false, + "type": { + "name": "MutableRefObject<(() => void) | undefined> | undefined" + } + }, + "zIndexPopover": { + "defaultValue": null, + "description": "z-index поповера", + "name": "zIndexPopover", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "showEmptyOptionsList": { + "defaultValue": null, + "description": "Показывать OptionsList, если он пустой", + "name": "showEmptyOptionsList", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "popoverProps": { + "defaultValue": null, + "description": "Дополнительные пропсы для Popover", + "name": "popoverProps", + "required": false, + "type": { + "name": "Omit | undefined" + } + }, + "limitDynamicOptionGroupSize": { + "defaultValue": null, + "description": "Ограничение динамического размера группы вариантов выбора", + "name": "limitDynamicOptionGroupSize", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "environment": { + "defaultValue": { + "value": "window" + }, + "description": "Контекст окружения для downshift.js", + "name": "environment", + "required": false, + "type": { + "name": "Environment | undefined" + } + }, + "showClear": { + "defaultValue": null, + "description": "Показывать кнопку 'Сбросить' в футере мобильного компонента", + "name": "showClear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "showSelectAll": { + "defaultValue": null, + "description": "Показывать пункт \"Выбрать все\"", + "name": "showSelectAll", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "showHeaderWithSelectAll": { + "defaultValue": null, + "description": "Показывать пункт \"Выбрать все\" в заголовке списка у мобильного компонента", + "name": "showHeaderWithSelectAll", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "useWithApplyHook": { + "defaultValue": null, + "description": "Использовать ли хук useSelectWithApply в мобильном компоненте", + "name": "useWithApplyHook", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "checkmarkPosition": { + "defaultValue": { + "value": "'before'" + }, + "description": "Позиция чекбокса \"Выбрать все\" в Header", + "name": "checkmarkPosition", + "required": false, + "type": { + "name": "\"before\" | \"after\" | undefined" + } + }, + "isBottomSheet": { + "defaultValue": null, + "description": "", + "name": "isBottomSheet", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "footer": { + "defaultValue": null, + "description": "Футер\n@deprecated Используйте bottomSheetProps.actionButton", + "name": "footer", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "swipeable": { + "defaultValue": null, + "description": "Будет ли свайпаться шторка\n@deprecated Используйте bottomSheetProps.swipeable", + "name": "swipeable", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "bottomSheetProps": { + "defaultValue": null, + "description": "Дополнительные пропсы шторки", + "name": "bottomSheetProps", + "required": false, + "type": { + "name": "(Omit, \"bottomAddons\"> & { bottomAddons?: ReactNode | ((flatOptions: OptionShape[]) => ReactNode); }) | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + }, + "originalProps": { + "defaultValue": null, + "description": "", + "name": "originalProps", + "required": false, + "type": { + "name": "SelectProps | undefined" + } + }, + "modalHeaderProps": { + "defaultValue": null, + "description": "Дополнительные пропсы шапки модалки", + "name": "modalHeaderProps", + "required": false, + "type": { + "name": "(Omit, \"bottomAddons\"> & { bottomAddons?: ReactNode | ((flatOptions: OptionShape[]) => ReactNode); }) | undefined" + } + }, + "modalProps": { + "defaultValue": null, + "description": "Дополнительные пропсы модалки", + "name": "modalProps", + "required": false, + "type": { + "name": "Partial> | undefined" + } + }, + "modalFooterProps": { + "defaultValue": null, + "description": "Дополнительные пропсы футера модалки", + "name": "modalFooterProps", + "required": false, + "type": { + "name": "Partial | undefined" + } + } + }, + "demos": [ + { + "title": "Одиночный выбор", + "description": "Список селекта с единичным выбором закрывается сразу после выбора одного из значений.", + "desktop": "const OPTIONS = [\n{ key: '1', content: 'Neptunium' },\n{ key: '2', content: 'Plutonium' },\n{ key: '3', content: 'Americium' },\n{ key: '4', content: 'Curium' },\n{ key: '5', content: 'Berkelium' },\n{ key: '6', content: 'Californium' },\n{ key: '7', content: 'Einsteinium' },\n{ key: '8', content: 'Fermium' },\n];\n\nrender(() => {\nreturn (\n
\n\n
\n);\n});", + "mobile": "const OPTIONS = [\n{ key: '1', content: 'Neptunium' },\n{ key: '2', content: 'Plutonium' },\n{ key: '3', content: 'Americium' },\n{ key: '4', content: 'Curium' },\n{ key: '5', content: 'Berkelium' },\n{ key: '6', content: 'Californium' },\n{ key: '7', content: 'Einsteinium' },\n{ key: '8', content: 'Fermium' },\n];\n\nrender(() => {\nconst [selected, setSelected] = React.useState();\n\nconst handleChange = ({ selected }) => {\nsetSelected(selected);\n};\n\nreturn (\n
\n\n
\n);\n});" + }, + { + "title": "Множественный выбор", + "description": "В мультиселекте допустимы два паттерна:\n\n1. С подтверждением — изменения будут приняты только после нажатия на кнопку подтверждения.\n2. Без подтверждения — изменения принимаются в момент выбора.\n\n
\nНа мобильных устройствах рекомендуется использовать только паттерн с подтверждением выбора.", + "desktop": "const OPTIONS = [\n{ key: '1', content: 'Neptunium' },\n{ key: '2', content: 'Plutonium' },\n{ key: '3', content: 'Americium' },\n{ key: '4', content: 'Curium' },\n{ key: '5', content: 'Berkelium' },\n{ key: '6', content: 'Californium' },\n{ key: '7', content: 'Einsteinium' },\n{ key: '8', content: 'Fermium' },\n];\n\nrender(() => {\nconst [selectedFirst, setSelectedFirst] = React.useState([]);\nconst [selectedSecond, setSelectedSecond] = React.useState([]);\n\nreturn (\n
\n {\nsetSelectedFirst(selectedMultiple.map((option) => option.key));\n},\n})}\n/>\n
\n {\nsetSelectedSecond(selectedMultiple.map((option) => option.key));\n}}\n/>\n
\n);\n});", + "mobile": "const OPTIONS = [\n{ key: '1', content: 'Neptunium' },\n{ key: '2', content: 'Plutonium' },\n{ key: '3', content: 'Americium' },\n{ key: '4', content: 'Curium' },\n{ key: '5', content: 'Berkelium' },\n{ key: '6', content: 'Californium' },\n{ key: '7', content: 'Einsteinium' },\n{ key: '8', content: 'Fermium' },\n];\n\nrender(() => {\nconst [selectedFirst, setSelectedFirst] = React.useState([]);\n\nreturn (\n
\n {\nsetSelectedFirst(selectedMultiple.map((option) => option.key));\n}}\n/>\n
\n);\n});" + }, + { + "title": "Группировка", + "description": "Пункты списка можно группировать.", + "desktop": "const OPTIONS = [\n{\nlabel: 'nonmetals',\noptions: [\n{ key: '1', content: 'Hydrogen' },\n{ key: '2', content: 'Helium' },\n],\n},\n{\nlabel: 'metals',\noptions: [\n{ key: '3', content: 'Aurum' },\n{ key: '4', content: 'Platinum' },\n],\n},\n];\nrender(() => {\nreturn (\n
\n\n
\n);\n});", + "mobile": "const OPTIONS = [\n{\nlabel: 'nonmetals',\noptions: [\n{ key: '1', content: 'Hydrogen' },\n{ key: '2', content: 'Helium' },\n],\n},\n{\nlabel: 'metals',\noptions: [\n{ key: '3', content: 'Aurum' },\n{ key: '4', content: 'Platinum' },\n],\n},\n];\nrender(() => {\nconst [selected, setSelected] = React.useState();\n\nconst handleChange = ({ selected }) => {\nsetSelected(selected);\n};\n\nreturn (\n
\n\n
\n);\n});" + }, + { + "title": "Поиск среди элементов списка", + "description": "Если список содержит большое количество пунктов, можно добавить в шапку дропдауна поиск `showSearch`, с помощью которого пользователь сможет отфильтровать элементы списка. Можно искать по названиям групп пунктов c помощью `searchProps.filterGroup`.", + "desktop": "const OPTIONS = [\n{ key: '1', content: 'Neptunium' },\n{ key: '2', content: 'Plutonium' },\n{ key: '3', content: 'Americium' },\n{ key: '4', content: 'Curium' },\n{ key: '5', content: 'Berkelium' },\n{ key: '6', content: 'Californium' },\n{ key: '7', content: 'Einsteinium' },\n{ key: '8', content: 'Fermium' },\n];\n\nconst GROUP_OPTIONS = [\n{\nlabel: 'nonmetals',\noptions: [\n{ key: '1', content: 'Argon' },\n{ key: '2', content: 'Helium' },\n],\n},\n{\nlabel: 'metals',\noptions: [\n{ key: '3', content: 'Aurum' },\n{ key: '4', content: 'Platinum' },\n],\n},\n];\n\nrender(() => {\nconst [selectedFirst, setSelectedFirst] = React.useState([]);\nconst [selectedSecond, setSelectedSecond] = React.useState([]);\n\nreturn (\n
\n {\nsetSelectedFirst(selected);\n}}\n/>\n\n {\nsetSelectedSecond(selectedMultiple.map((option) => option.key));\n},\n})}\n/>\n\n\n
\n);\n});", + "mobile": "const OPTIONS = [\n{ key: '1', content: 'Neptunium' },\n{ key: '2', content: 'Plutonium' },\n{ key: '3', content: 'Americium' },\n{ key: '4', content: 'Curium' },\n{ key: '5', content: 'Berkelium' },\n{ key: '6', content: 'Californium' },\n{ key: '7', content: 'Einsteinium' },\n{ key: '8', content: 'Fermium' },\n];\n\nconst GROUP_OPTIONS = [\n{\nlabel: 'nonmetals',\noptions: [\n{ key: '1', content: 'Argon' },\n{ key: '2', content: 'Helium' },\n],\n},\n{\nlabel: 'metals',\noptions: [\n{ key: '3', content: 'Aurum' },\n{ key: '4', content: 'Platinum' },\n],\n},\n];\n\nrender(() => {\nconst [selected, setSelected] = React.useState([]);\n\nreturn (\n
\n {\nsetSelected(selectedMultiple.map((option) => option.key));\n}}\n/>\n\n\n
\n);\n});" + }, + { + "title": "Подписи у пунктов", + "description": "Элементы списка могут содержать лейбл или подпись. В данных примерах подпись, расположенная над значением,\nзамещает лейбл селекта, а подпись, расположенная под значением, не влияет на отображение селекта.\nПодобное поведение является рекомендуемым и может потребовать кастомизации элементов выпадающего списка и самого поля селекта.", + "desktop": "const renderOptionWithAmountOnTop = ({ amount, padding, text }) => {\nreturn (\n\n\n\n\n\n\n{text}\n\n\n\n);\n};\n\nconst renderOption = ({ amount, padding, text }) => (\n\n\n\n{text}\n\n\n\n\n\n\n);\n\nconst DATA = [\n{\namount: 3405116,\ntext: 'Зарплатный счёт',\n},\n{\namount: 600024,\ntext: 'Накопительный счёт',\n},\n];\n\nconst OPTIONS = DATA.map(({ amount, text }, idx) => ({\nkey: idx,\ncontent: renderOption({ text, amount, padding: { top: 8, bottom: 8, left: 12 } }),\n}));\n\nconst OPTIONS_WITH_AMOUNT_ON_TOP = DATA.map(({ amount, text }, idx) => ({\nkey: idx,\ncontent: renderOptionWithAmountOnTop({\ntext,\namount,\npadding: { top: 8, bottom: 8, left: 12 },\n}),\n}));\n\nrender(() => {\nconst [selectedFirst, setSelectedFirst] = React.useState([]);\nconst [selectedSecond, setSelectedSecond] = React.useState([]);\n\nreturn (\n
\n {\nif (!selected) return '';\n\nconst { amount } = DATA[selected.key];\n\nreturn (\n\n);\n}}\nonChange={({ selected }) => setSelectedFirst(selected)}\n/>\n
\n {\nif (!selected) return '';\n\nconst { text, amount } = DATA[selected.key];\n\nreturn renderOption({\ntext,\namount,\npadding: { top: 8, bottom: 8 },\n});\n}}\nonChange={({ selected }) => {\nsetSelectedSecond(selected);\n}}\n/>\n
\n);\n});", + "mobile": "const renderOptionWithAmountOnTop = ({ amount, padding, text }) => {\nreturn (\n\n\n\n\n\n\n{text}\n\n\n\n);\n};\n\nconst renderOption = ({ amount, padding, text }) => (\n\n\n\n{text}\n\n\n\n\n\n\n);\n\nconst DATA = [\n{\namount: 3405116,\ntext: 'Зарплатный счёт',\n},\n{\namount: 600024,\ntext: 'Накопительный счёт',\n},\n];\n\nconst OPTIONS = DATA.map(({ amount, text }, idx) => ({\nkey: idx,\ncontent: renderOption({ text, amount, padding: { top: 12, bottom: 12, left: 16 } }),\n}));\n\nconst OPTIONS_WITH_AMOUNT_ON_TOP = DATA.map(({ amount, text }, idx) => ({\nkey: idx,\ncontent: renderOptionWithAmountOnTop({\ntext,\namount,\npadding: { top: 12, bottom: 12, left: 16 },\n}),\n}));\n\nrender(() => {\nconst [selectedFirst, setSelectedFirst] = React.useState([]);\nconst [selectedSecond, setSelectedSecond] = React.useState([]);\n\nreturn (\n
\n setSelectedFirst(selected)}\nvalueRenderer={({ selected }) => {\nif (!selected) return '';\n\nconst { amount } = DATA[selected.key];\n\nreturn (\n\n);\n}}\n/>\n
\n setSelectedSecond(selected)}\nvalueRenderer={({ selected }) => {\nif (!selected) return '';\n\nconst { text, amount } = DATA[selected.key];\n\nreturn renderOption({\ntext,\namount,\npadding: { top: 8, bottom: 8 },\n});\n}}\n/>\n
\n);\n});" + }, + { + "title": "Другие примеры кастомизации", + "description": "Примеры ниже содержат кастомную вёрстку пунктов выпадающего списка и кастомную шапку выпадающего списка.", + "desktop": "render(() => {\nconst options = React.useMemo(\n() => [\n{ key: '1', content: 'Neptunium' },\n{ key: '2', content: 'Plutonium' },\n{ key: '3', content: 'Americium' },\n{ key: '4', content: 'Curium' },\n{ key: '5', content: 'Berkelium' },\n{ key: '6', content: 'Californium' },\n{ key: '7', content: 'Einsteinium' },\n{ key: '8', content: 'Fermium' },\n],\n[],\n);\n\nconst [selected, setSelected] = React.useState([]);\n\nconst handleChange = ({ selectedMultiple }) => {\nsetSelected(selectedMultiple.map((option) => option.key));\n};\n\nconst selectWithHeader = (\n\n);\n\nconst renderOption = ({ text, amount, icon, iconSize = 48, padding }) => {\nreturn (\n\n\n{icon}\n\n\n\n\n\n{text}\n\n\n\n\n\n\n\n\n);\n};\n\nconst renderSelected = ({ selected }) => {\nreturn selected\n? renderOption({\n...selected.value,\npadding: undefined,\niconSize: 40,\n})\n: undefined;\n};\n\nconst data = [\n{\nkey: 'Account1',\nvalue: {\ntext: 'Зарплатный счёт',\namount: 3405161,\nicon: ,\npadding: { top: 12, bottom: 12, left: 16 },\n},\n},\n{\nkey: 'Account2',\nvalue: {\ntext: 'Накопительный счёт',\namount: 6000024,\nicon: ,\npadding: { top: 12, bottom: 12, left: 16 },\n},\n},\n];\n\nconst pureCellOptions = data.map((item) => ({\n...item,\ncontent: renderOption(item.value),\n}));\n\nconst selectWithPureCell = (\n\n);\n\nreturn (\n
\n{selectWithHeader}\n
\n{selectWithPureCell}\n
\n);\n});", + "mobile": "const OPTIONS = [\n{ key: '1', content: 'Neptunium' },\n{ key: '2', content: 'Plutonium' },\n{ key: '3', content: 'Americium' },\n{ key: '4', content: 'Curium' },\n{ key: '5', content: 'Berkelium' },\n{ key: '6', content: 'Californium' },\n{ key: '7', content: 'Einsteinium' },\n{ key: '8', content: 'Fermium' },\n];\n\nrender(() => {\nconst [selectedFirst, setSelectedFirst] = React.useState();\nconst [selected, setSelected] = React.useState();\n\nconst handleChange = ({ selected }) => {\nsetSelected(selected);\n};\n\nconst renderOption = ({ text, amount, icon, iconSize = 48, padding }) => {\nreturn (\n\n\n{icon}\n\n\n\n\n\n{text}\n\n\n\n\n\n\n\n\n);\n};\n\nconst renderSelected = ({ selected }) => {\nreturn selected\n? renderOption({\n...selected.value,\npadding: undefined,\niconSize: 40,\n})\n: undefined;\n};\n\nconst data = [\n{\nkey: 'Account1',\nvalue: {\ntext: 'Зарплатный счёт',\namount: 3405161,\nicon: ,\npadding: { top: 12, bottom: 12, left: 16 },\n},\n},\n{\nkey: 'Account2',\nvalue: {\ntext: 'Накопительный счёт',\namount: 6000024,\nicon: ,\npadding: { top: 12, bottom: 12, left: 16 },\n},\n},\n];\n\nconst pureCellOptions = data.map((item) => ({\n...item,\ncontent: renderOption(item.value),\n}));\n\nreturn (\n
\n\nsetSelectedFirst(selectedMultiple.map((option) => option.key))\n}\n/>\n\n\n
\n);\n});" + }, + { + "title": "Формат отображения списков", + "description": "В редких кейсах может потребоваться использовать селект с нативным выпадающим списком или\nоткрывать его в [Modal](?path=/docs/modal--docs)\nвместо [BottomSheet](?path=/docs/bottomsheet--docs).", + "desktop": "const groups = [\n{\nlabel: 'Группа №1',\noptions: [\n{ key: '1', content: 'Neptunium' },\n{ key: '2', content: 'Plutonium' },\n],\n},\n{\nlabel: 'Группа №2',\noptions: [\n{ key: '3', content: 'Berkelium' },\n{ key: '4', content: 'Californium' },\n],\n},\n];\n\nconst options = [\n{ key: '1', content: 'Neptunium' },\n{ key: '2', content: 'Plutonium' },\n{ key: '3', content: 'Americium' },\n{ key: '4', content: 'Curium' },\n{ key: '5', content: 'Berkelium' },\n{ key: '6', content: 'Californium' },\n{ key: '7', content: 'Einsteinium' },\n{ key: '8', content: 'Fermium' },\n];\n\nrender(() => {\nconst [selectedNative, setSelectedNative] = React.useState();\nconst [selectedModal, setSelectedModal] = React.useState();\n\nconst handleChangeNative = ({ selected }) => {\nsetSelectedNative(selected);\n};\n\nconst handleChangeModal = ({ selected }) => {\nsetSelectedModal(selected);\n};\n\nconst isMobile = document.body.clientWidth < 450;\n\nconst MobileSelect = isMobile ? SelectModalMobile : Select;\n\nreturn (\n
\n\n
\n\n
\n);\n});" + }, + { + "title": "Длинные списки и ленивая загрузка", + "description": "Для рендера большого количества данных используйте `OptionsList={VirtualOptionsList}`. На время подгрузки можно использовать скелетон.", + "desktop": "render(() => {\nconst optionsForVirtualList = React.useMemo(\n() =>\nnew Array(1000).fill().map((_, index) => {\nconst variableSizeText = `Вы восхитительны!`;\n\nreturn {\nkey: index.toString(),\ncontent: `${index}. ${variableSizeText}`,\n};\n}),\n[],\n);\n\nconst [loading, setLoading] = React.useState(true);\n\nconst loadingProps = useSelectWithLoading({\nloading,\nOption: (props) => (\n{props.option.content}
,\n}}\n/>\n),\n});\n\nconst handleOpen = () => {\nsetLoading(true);\nsetTimeout(() => setLoading(false), 2000);\n};\n\nreturn (\n
\n\n
\n);\n});", + "mobile": "render(() => {\nconst [selected, setSelected] = React.useState();\n\nconst handleChange = ({ selected }) => {\nsetSelected(selected);\n};\n\nconst optionsForVirtualList = React.useMemo(\n() =>\nnew Array(1000).fill().map((_, index) => {\nconst variableSizeText = `Вы восхитительны!`;\n\nreturn {\nkey: index.toString(),\ncontent: `${index}. ${variableSizeText}`,\n};\n}),\n[],\n);\n\nconst [loading, setLoading] = React.useState(true);\n\nconst loadingProps = useSelectWithLoading({\nvisibleOptions: 15,\nloading,\nOption: (props) => (\n\n{props.option.content}\n
\n),\n}}\n/>\n),\n});\n\nconst handleOpen = () => {\nsetLoading(true);\nsetTimeout(() => setLoading(false), 2000);\n};\n\nreturn (\n
\n\n\n
\n);\n});" + }, + { + "title": "OptionShape вместо ключей для выбранных пунктов", + "description": "Иногда может быть удобнее использовать в качестве выбранных значений не ключи, а сами объекты.\nВ этом случае просто передавайте их через свойство `selected`.", + "desktop": "render(() => {\nconst options = React.useMemo(\n() => [\n{ key: '1', content: 'Neptunium' },\n{ key: '2', content: 'Plutonium' },\n{ key: '3', content: 'Americium' },\n{ key: '4', content: 'Curium' },\n{ key: '5', content: 'Berkelium' },\n{ key: '6', content: 'Californium' },\n{ key: '7', content: 'Einsteinium' },\n{ key: '8', content: 'Fermium' },\n],\n[],\n);\n\nconst [selected, setSelected] = React.useState([]);\n\nconst handleChange = ({ selectedMultiple }) => {\nsetSelected(selectedMultiple);\n};\n\nreturn (\n
\n\n
\n);\n});", + "mobile": "render(() => {\nconst options = React.useMemo(\n() => [\n{ key: '1', content: 'Neptunium' },\n{ key: '2', content: 'Plutonium' },\n{ key: '3', content: 'Americium' },\n{ key: '4', content: 'Curium' },\n{ key: '5', content: 'Berkelium' },\n{ key: '6', content: 'Californium' },\n{ key: '7', content: 'Einsteinium' },\n{ key: '8', content: 'Fermium' },\n],\n[],\n);\n\nconst [selected, setSelected] = React.useState([]);\n\nconst handleChange = ({ selectedMultiple }) => {\nsetSelected(selectedMultiple);\n};\n\nreturn (\n
\n\n
\n);\n});" + }, + { + "title": "Строение списка", + "description": "Список состоит из трех частей: `Header`, `Body`, `Footer`. Каждая часть содержит слот в который можно передать кастомный контент.", + "desktop": "render(() => {\nconst options = React.useMemo(\n() => [\n{ key: '1', content: 'Neptunium' },\n{ key: '2', content: 'Plutonium' },\n{ key: '3', content: 'Americium' },\n{ key: '4', content: 'Curium' },\n{ key: '5', content: 'Berkelium' },\n],\n[],\n);\n\nreturn (\n\n ({\nindex,\noption,\ninnerProps: {\nstyle: {\nbackground: 'var(--color-light-status-muted-positive)',\nborderBottom:\nindex + 1 !== options.length\n? '1px solid var(--color-light-status-info)'\n: 'none',\n},\n},\n})}\noptions={options}\nheader={\n
\n}\nfooter={\n
\n}\n/>\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/side-panel.json b/packages/mcp/src/data/v50.16.0/side-panel.json new file mode 100644 index 0000000000..365247bad0 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/side-panel.json @@ -0,0 +1,425 @@ +{ + "packageName": "side-panel", + "displayName": "SidePanelResponsiveComponent", + "description": "", + "props": { + "children": { + "defaultValue": null, + "description": "Контент", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "Backdrop": { + "defaultValue": null, + "description": "Компонент бэкдропа", + "name": "Backdrop", + "required": false, + "type": { + "name": "ComponentType | undefined" + } + }, + "backdropProps": { + "defaultValue": null, + "description": "Свойства для Бэкдропа", + "name": "backdropProps", + "required": false, + "type": { + "name": "(Partial & Record) | undefined" + } + }, + "container": { + "defaultValue": null, + "description": "Нода, компонент или функция возвращающая их\n\nКонтейнер к которому будут добавляться порталы", + "name": "container", + "required": false, + "type": { + "name": "(() => Element | null | undefined) | undefined" + } + }, + "disableAutoFocus": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает автоматический перевод фокуса на модалку при открытии", + "name": "disableAutoFocus", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableFocusLock": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает ловушку фокуса", + "name": "disableFocusLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableRestoreFocus": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает восстановление фокуса на предыдущем элементе после закрытия модалки", + "name": "disableRestoreFocus", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableEscapeKeyDown": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает вызов `callback` при нажатии Escape", + "name": "disableEscapeKeyDown", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableBackdropClick": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает вызов `callback` при клике на бэкдроп", + "name": "disableBackdropClick", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disableBlockingScroll": { + "defaultValue": { + "value": "false" + }, + "description": "Отключает блокировку скролла при открытии модального окна\n@deprecated Используйте `scrollLock={true}`.", + "name": "disableBlockingScroll", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "scrollLock": { + "defaultValue": { + "value": "false" + }, + "description": "Управляет блокировкой скролла/overscroll фона при открытой модалке.", + "name": "scrollLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "keepMounted": { + "defaultValue": { + "value": "false" + }, + "description": "Содержимое модалки всегда в DOM", + "name": "keepMounted", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "open": { + "defaultValue": null, + "description": "Управление видимостью модалки", + "name": "open", + "required": true, + "type": { + "name": "boolean" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "contentClassName": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "contentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "wrapperProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на dialog wrapper", + "name": "wrapperProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "contentProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на обертку контента", + "name": "contentProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "componentDivProps": { + "defaultValue": null, + "description": "Дополнительные пропсы на компонентную обертку контента", + "name": "componentDivProps", + "required": false, + "type": { + "name": "DetailedHTMLProps, HTMLDivElement> | undefined" + } + }, + "wrapperClassName": { + "defaultValue": null, + "description": "Дополнительный класс для обертки (Modal)", + "name": "wrapperClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "scrollHandler": { + "defaultValue": null, + "description": "Обработчик скролла контента", + "name": "scrollHandler", + "required": false, + "type": { + "name": "\"content\" | \"wrapper\" | MutableRefObject | undefined" + } + }, + "transitionProps": { + "defaultValue": null, + "description": "Пропсы для анимации (CSSTransition)", + "name": "transitionProps", + "required": false, + "type": { + "name": "Partial | undefined" + } + }, + "usePortal": { + "defaultValue": { + "value": "true" + }, + "description": "Рендерить ли в контейнер через портал.", + "name": "usePortal", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onBackdropClick": { + "defaultValue": null, + "description": "Обработчик события нажатия на бэкдроп", + "name": "onBackdropClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onEscapeKeyDown": { + "defaultValue": null, + "description": "Обработчик события нажатия на Escape\n\nЕсли `disableEscapeKeyDown` - false и модальное окно в фокусе", + "name": "onEscapeKeyDown", + "required": false, + "type": { + "name": "((event: KeyboardEvent) => void) | undefined" + } + }, + "onClose": { + "defaultValue": null, + "description": "Обработчик закрытия", + "name": "onClose", + "required": false, + "type": { + "name": "((event: MouseEvent | KeyboardEvent, reason?: \"backdropClick\" | \"escapeKeyDown\" | \"closerClick\" | undefined) => void) | undefined" + } + }, + "onMount": { + "defaultValue": null, + "description": "Обработчик события onEntered компонента Transition", + "name": "onMount", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "onUnmount": { + "defaultValue": null, + "description": "Обработчик события onExited компонента Transition", + "name": "onUnmount", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "zIndex": { + "defaultValue": null, + "description": "z-index компонента", + "name": "zIndex", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "componentRef": { + "defaultValue": null, + "description": "Реф, который должен быть установлен компонентной области", + "name": "componentRef", + "required": false, + "type": { + "name": "MutableRefObject | undefined" + } + }, + "contentElementRef": { + "defaultValue": null, + "description": "Реф контентной области", + "name": "contentElementRef", + "required": false, + "type": { + "name": "MutableRefObject | undefined" + } + }, + "iOSLock": { + "defaultValue": null, + "description": "Блокирует скролл когда модальное окно открыто. Работает только на iOS.\n@deprecated Используйте `scrollLock={true}`.", + "name": "iOSLock", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onWheel": { + "defaultValue": null, + "description": "Хэндлер события прокрутки колесиком", + "name": "onWheel", + "required": false, + "type": { + "name": "((e: WheelEvent) => void) | undefined" + } + }, + "placement": { + "defaultValue": { + "value": "\"right\"" + }, + "description": "Край экрана, с которого может появиться Drawer.", + "name": "placement", + "required": false, + "type": { + "name": "\"left\" | \"right\" | undefined" + } + }, + "nativeScrollbar": { + "defaultValue": { + "value": "true" + }, + "description": "Нужно ли использовать нативный скроллбар", + "name": "nativeScrollbar", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "contentTransitionProps": { + "defaultValue": null, + "description": "Пропсы для анимации контента (CSSTransition)", + "name": "contentTransitionProps", + "required": false, + "type": { + "name": "Partial | undefined" + } + }, + "size": { + "defaultValue": { + "value": 500 + }, + "description": "Ширина модального окна", + "name": "size", + "required": false, + "type": { + "name": "\"s\" | 500 | undefined" + } + }, + "hasCloser": { + "defaultValue": { + "value": "false" + }, + "description": "Управление наличием закрывающего крестика", + "name": "hasCloser", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Анатомия", + "description": "SidePanel построен как Compound Components. Состоит из Header, Content, Footer, содержащих в себе кастомизируемые слоты.\nЧтобы во время скролла заголовок и кнопки оставались неподвижны, их нужно расположить в `header` и `footer`.\nТекст и изображения всегда располагаются в `content` части.", + "desktop": "const Header = () => {\nconst { setHasHeader, onClose } = React.useContext(ModalContext);\n\nReact.useEffect(() => setHasHeader(true), [setHasHeader]);\n\nconst commonStyles = {\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\nborderRadius: '8px',\nheight: '48px',\n};\n\nconst addonsStyles = {\n...commonStyles,\nwidth: '48px',\n};\n\nconst innerAddonsStyles = {\n...addonsStyles,\nbackgroundColor: 'rgba(207, 112, 255, 0.1)',\n};\n\nconst bottomAddonsStyles = {\n...commonStyles,\nwidth: '100%',\n};\n\nconst wrapperStyles = {\ndisplay: 'flex',\njustifyContent: 'center',\n};\n\nconst titleStyles = {\n...commonStyles,\nflexGrow: 1,\n};\n\nreturn (\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n);\n};\n\nrender(() => {\nconst [open, setOpen] = React.useState(false);\nconst handleOpen = () => setOpen(true);\nconst handleClose = () => setOpen(false);\n\nconst commonStyle = {\nborderRadius: '8px',\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\nwidth: '100%',\n};\n\nconst contentStyle = {\n...commonStyle,\nheight: '100%',\n};\n\nconst footerStyle = {\n...commonStyle,\nheight: '48px',\n};\n\nreturn (\n\n\n\n
\n\n
\n\n\n
\n\n\n\n);\n});", + "mobile": "const Header = () => {\nconst { setHasHeader, onClose } = React.useContext(ModalContext);\n\nReact.useEffect(() => setHasHeader(true), [setHasHeader]);\n\nconst commonStyles = {\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\nborderRadius: '8px',\nheight: '48px',\n};\n\nconst addonsStyles = {\n...commonStyles,\nwidth: '48px',\n};\n\nconst innerAddonsStyles = {\n...addonsStyles,\nbackgroundColor: 'rgba(207, 112, 255, 0.1)',\n};\n\nconst bottomAddonsStyles = {\n...commonStyles,\nwidth: '100%',\n};\n\nconst wrapperStyles = {\ndisplay: 'flex',\njustifyContent: 'center',\n};\n\nconst titleStyles = {\n...commonStyles,\nflexGrow: 1,\n};\n\nreturn (\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n);\n};\n\nrender(() => {\nconst [open, setOpen] = React.useState(false);\nconst handleOpen = () => setOpen(true);\nconst handleClose = () => setOpen(false);\n\nconst commonStyle = {\nborderRadius: '8px',\nbackgroundColor: 'rgba(55, 120, 251, 0.1)',\nborder: '1px dashed rgb(55, 120, 251)',\nboxSizing: 'border-box',\nwidth: '100%',\n};\n\nconst contentStyle = {\n...commonStyle,\nheight: '100%',\n};\n\nconst footerStyle = {\n...commonStyle,\nheight: '48px',\n};\n\nreturn (\n\n\n\n
\n\n
\n\n\n
\n\n\n\n);\n});" + }, + { + "title": "Пресеты", + "description": "Ниже представлены самые популярные кейсы настройки сайд-панели.", + "desktop": "const Text = () => (\n<>\n\nВ 2001 году в России начал действовать Федеральный закон №115 «О противодействии\nлегализации доходов, полученных преступным путём, и финансированию терроризма». В рамках\nзакона банки могут блокировать карты, отказывать в проведении сомнительных операций,\nограничить доступ в интернет-банк или запрашивать документы, если по операции клиента\nвозникли подозрения.\n\n
\n\nТребования 115-ФЗ и связанных с ним документов Банка России часто меняются,\nпредприниматели не всегда успевают за ними следить. Последствия нарушений\n«антиотмывочного» законодательства всегда неприятны: приходится остановить\nбизнес-процессы и доказать банку законность операций. Специалисты «Альфа-банка» собрали\nпонятные рекомендации, как сэкономить время на объяснения и предотвратить блокировки\n\n\n\n115-ФЗ Касается всех предпринимателей, фирм и физлиц, а также тех, кто пользуется\nбанковским счётом для бизнеса, крупных денежных переводов или личных расчётов.\nОграничения интернет-банка, блокировка карт добросовестных компаний могут произойти\nиз-за неправильно оформленных документов, ошибок в платёжке или попыток снизить\nналоги.\n\n
\n\nКлиенты воспринимают ограничения как атаку со стороны банка, но чаще всего сами\nдопускают ошибки или нарушения, которых можно избежать. Банки не преследуют цели\nдоставить неудобства клиентам — они обязаны соблюдать законодательство и следовать\nинструкциям и рекомендациям ЦБ, а в противном случае рискуют лишиться лицензии.\n\n
\n\nОбналичивание — сомнительные операции, когда юрлицо или предприниматель снимает со\nсчёта более 80% от оборота или переводит деньги на счета физлиц, которые затем\nснимают в наличной форме.\n\n
\n\nВывод капитала за границу — это переводы нерезидентам по договорам об импорте\nработ/услуг и результатов интеллектуальной деятельности, по которым проведение\nрасчётов осуществляется без одновременной уплаты НДС; по сделкам купли-продажи\nценных бумаг, а также товаров, которые не пересекают границу России.\n\n
\n\nТранзитные операции — операции, в процессе которых деньги поступают на счёт компании\nот других резидентов и списываются в короткие сроки. При этом, как правило, в этих\nслучаях по счёту нет начислений зарплат, уплаты налогов, и они не соответствуют\nзаявленному компанией виду деятельности.\n\n
\n\nЗапрашивать могут любые документы и устанавливать разные сроки их предоставления —\nэто зависит от службы контроля конкретного банка. Обычно банки запрашивают чеки,\nсчета или договора с контрагентами. В некоторых случаях бывает достаточно устных\nобъяснений. Для проверки информации и пересмотра уровня риска банк может пригласить\nклиента в банк для устного разъяснения или выехать по месту ведения бизнеса клиента.\n\n\n\n);\n\nconst HEADER_SETTINGS = [\n{ label: 'Заголовок', name: 'hasTitle' },\n{ label: 'Крестик', name: 'hasCloser' },\n{ label: 'Стрелка назад', name: 'hasBackButton' },\n{ label: 'Фиксация шапки при скролле', name: 'sticky' },\n];\n\nconst FOOTER_SETTINGS = [\n{ label: 'Primary Button', name: 'hasPrimaryButton' },\n{ label: 'Secondary Button', name: 'hasSecondaryButton' },\n{ label: 'Фиксация футера при скролле', name: 'sticky' },\n];\n\nrender(() => {\nconst [open, setOpen] = React.useState(false);\n\nconst [radioState, setRadioState] = React.useState({\nplacement: 'right',\nscrollbar: 'native',\n});\n\nconst [headerSettings, setHeaderSettings] = React.useState(() => ({\n...HEADER_SETTINGS.reduce((res, item) => ({ ...res, [item.name]: false }), {}),\ntitleInContent: false,\n}));\n\nconst [footerSettings, setFooterSettings] = React.useState(() =>\nFOOTER_SETTINGS.reduce((res, item) => ({ ...res, [item.name]: false }), {}),\n);\n\nconst getKey = () => JSON.stringify(headerSettings);\n\nconst handleRadioStateChange = (key, _, payload) => {\nsetRadioState((state) => ({ ...state, [key]: payload.value }));\n};\n\nconst handleOpen = () => setOpen(true);\n\nconst handleClose = () => setOpen(false);\n\nconst handleHeaderSettingsChange = (_, { name, checked }) => {\nsetHeaderSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nconst handleFooterSettingsChange = (_, { name, checked }) => {\nsetFooterSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nconst showHeader =\nheaderSettings.hasTitle || headerSettings.hasCloser || headerSettings.hasBackButton;\n\nconst showFooter = footerSettings.hasPrimaryButton || footerSettings.hasSecondaryButton;\n\nreturn (\n\n\n\n\n\n\n{showHeader && (\n\n)}\n\n
\n{headerSettings.titleInContent ? (\n<>\n\n{`Почему банк проверяет мои операции?`}\n\n\n\n) : undefined}\n\n
\n\n{showFooter && (\n\n\nPrimary\n\n) : null\n}\nsecondary={\nfooterSettings.hasSecondaryButton ? (\n\n) : null\n}\n/>\n\n)}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n{HEADER_SETTINGS.map((item) => (\n\n))}\n\n\n\n\n\n\n\n\n\n\n\n{FOOTER_SETTINGS.map((item) => (\n\n))}\n\n\n);\n});", + "mobile": "const Text = ({ onClose }) => (\n<>\n\nВ 2001 году в России начал действовать Федеральный закон №115 «О противодействии\nлегализации доходов, полученных преступным путём, и финансированию терроризма». В рамках\nзакона банки могут блокировать карты, отказывать в проведении сомнительных операций,\nограничить доступ в интернет-банк или запрашивать документы, если по операции клиента\nвозникли подозрения.{' '}\nНажмите сюда, чтобы закрыть модалку без крестика\n\n
\n\nТребования 115-ФЗ и связанных с ним документов Банка России часто меняются,\nпредприниматели не всегда успевают за ними следить. Последствия нарушений\n«антиотмывочного» законодательства всегда неприятны: приходится остановить\nбизнес-процессы и доказать банку законность операций. Специалисты «Альфа-банка» собрали\nпонятные рекомендации, как сэкономить время на объяснения и предотвратить блокировки\n\n\n\n115-ФЗ Касается всех предпринимателей, фирм и физлиц, а также тех, кто пользуется\nбанковским счётом для бизнеса, крупных денежных переводов или личных расчётов.\nОграничения интернет-банка, блокировка карт добросовестных компаний могут произойти\nиз-за неправильно оформленных документов, ошибок в платёжке или попыток снизить\nналоги.\n\n
\n\nКлиенты воспринимают ограничения как атаку со стороны банка, но чаще всего сами\nдопускают ошибки или нарушения, которых можно избежать. Банки не преследуют цели\nдоставить неудобства клиентам — они обязаны соблюдать законодательство и следовать\nинструкциям и рекомендациям ЦБ, а в противном случае рискуют лишиться лицензии.\n\n
\n\nОбналичивание — сомнительные операции, когда юрлицо или предприниматель снимает со\nсчёта более 80% от оборота или переводит деньги на счета физлиц, которые затем\nснимают в наличной форме.\n\n
\n\nВывод капитала за границу — это переводы нерезидентам по договорам об импорте\nработ/услуг и результатов интеллектуальной деятельности, по которым проведение\nрасчётов осуществляется без одновременной уплаты НДС; по сделкам купли-продажи\nценных бумаг, а также товаров, которые не пересекают границу России.\n\n
\n\nТранзитные операции — операции, в процессе которых деньги поступают на счёт компании\nот других резидентов и списываются в короткие сроки. При этом, как правило, в этих\nслучаях по счёту нет начислений зарплат, уплаты налогов, и они не соответствуют\nзаявленному компанией виду деятельности.\n\n
\n\nЗапрашивать могут любые документы и устанавливать разные сроки их предоставления —\nэто зависит от службы контроля конкретного банка. Обычно банки запрашивают чеки,\nсчета или договора с контрагентами. В некоторых случаях бывает достаточно устных\nобъяснений. Для проверки информации и пересмотра уровня риска банк может пригласить\nклиента в банк для устного разъяснения или выехать по месту ведения бизнеса клиента.\n\n\n\n);\n\nconst HEADER_SELECT_OPTIONS = [\n{ key: 'withoutTitle', content: 'Нет заголовка' },\n{ key: 'defaultTitle', content: 'Стандартный' },\n{ key: 'compactTitle', content: 'Компактный' },\n{ key: 'compactTitleWithSubtitle', content: 'Компактный с подписью' },\n{ key: 'compactTitleWithCenterAlign', content: 'Компактный центрированный' },\n{\nkey: 'compactTitleWithSubtitleAndCenterAlign',\ncontent: 'Компактный центрированный с подписью',\n},\n];\n\nconst FOOTER_SELECT_OPTIONS = [\n{ key: 'vertical', content: 'Вертикальный' },\n{ key: 'horizontal', content: 'Горизонтальный' },\n];\n\nconst HEADER_SETTINGS = [\n{ label: 'Крестик', name: 'hasCloser' },\n{ label: 'Стрелка назад', name: 'hasBackButton' },\n{ label: 'Фиксация шапки при скролле', name: 'sticky' },\n];\n\nconst FOOTER_SETTINGS = [\n{ label: 'Primary Button', name: 'hasPrimaryButton' },\n{ label: 'Secondary Button', name: 'hasSecondaryButton' },\n{ label: 'Фиксация футера при скролле', name: 'sticky' },\n];\n\nrender(() => {\nconst [open, setOpen] = React.useState(false);\nconst [headerViewSelected, setHeaderView] = React.useState(HEADER_SELECT_OPTIONS[0].key);\nconst [footerViewSelected, setFooterView] = React.useState(FOOTER_SELECT_OPTIONS[0].key);\nconst [headerSettings, setHeaderSettings] = React.useState(() => ({\n...HEADER_SETTINGS.reduce((res, item) => ({ ...res, [item.name]: false }), {}),\ntitleInContent: false,\n}));\nconst [footerSettings, setFooterSettings] = React.useState(() =>\nFOOTER_SETTINGS.reduce((res, item) => ({ ...res, [item.name]: false }), {}),\n);\n\nconst showHeader =\nheaderViewSelected !== HEADER_SELECT_OPTIONS[0].key ||\nheaderSettings.hasCloser ||\nheaderSettings.hasBackButton;\n\nconst showFooter = footerSettings.hasPrimaryButton || footerSettings.hasSecondaryButton;\n\nconst getKey = () =>\n`${JSON.stringify(headerSettings)}-${headerViewSelected}-${footerViewSelected}`;\n\nconst handleOpen = () => setOpen(true);\n\nconst handleClose = () => setOpen(false);\n\nconst handleHeaderSettingsChange = (_, { name, checked }) => {\nsetHeaderSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nconst handleFooterSettingsChange = (_, { name, checked }) => {\nsetFooterSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nreturn (\n\n\n\n\n\n

Настройки шапки

\n\n setHeaderView(selected.key)}\nOption={BaseOption}\n/>\n\n\n\n\n{HEADER_SETTINGS.map((item) => (\n\n))}\n\n\n\n\n\n\n\n\n\n\n

Настройки футера

\n\n setFooterView(selected.key)}\nOption={BaseOption}\n/>\n\n\n\n\n{FOOTER_SETTINGS.map((item) => (\n\n))}\n\n\n\n{showHeader && (\n\n)}\n\n{headerSettings.titleInContent ? (\n<>\n\n{`Почему банк проверяет мои операции?`}\n\n\n\n) : undefined}\n\n\n\n{showFooter && (\n\n\nPrimary\n\n) : null\n}\nsecondary={\nfooterSettings.hasSecondaryButton ? (\n\nSecondary\n\n) : null\n}\n/>\n\n)}\n\n\n);\n});" + }, + { + "title": "Последовательность шагов", + "description": "Компонент можно настроить для реализации многошаговых сценариев.", + "desktop": "const DATA = {\n1: {\ntitle: 'Первый уровень',\nbtnText: 'Дальше',\nbg: 'rgba(55, 120, 251, 0.1)',\ncolor: '#3778FB',\n},\n2: {\ntitle: 'Второй уровень',\nbtnText: 'Дальше',\nbg: 'rgba(207, 112, 255, 0.1)',\ncolor: '#CF70FF',\n},\n3: {\ntitle: 'Третий уровень',\nbtnText: 'Готово',\nbg: 'rgba(112, 255, 126, 0.1)',\ncolor: '#058102',\n},\n};\n\nrender(() => {\nconst [step, setStep] = React.useState(1);\nconst [open, setOpen] = React.useState(false);\n\nconst handleOpen = () => {\nsetOpen(true);\nsetStep(1);\n};\nconst handleClose = () => setOpen(false);\n\nconst item = DATA[step];\n\nconst commonStyles = {\ndisplay: 'flex',\nalignItems: 'center',\njustifyContent: 'center',\ntransition: 'background 0.2s ease-in, border 0.2s ease-in',\nborderRadius: '8px',\nbackground: item.bg,\nborder: `1px dashed ${item.color}`,\ncolor: item.color,\nwidth: '100%',\nboxSizing: 'border-box',\n};\n\nreturn (\n\n\n\n\n setStep(step - 1)}\n/>\n\n\n{step}\n
\n\n\n setStep(step + 1) : handleClose\n}\n>\n{item.btnText}\n\n\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/skeleton.json b/packages/mcp/src/data/v50.16.0/skeleton.json new file mode 100644 index 0000000000..c65b0121a7 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/skeleton.json @@ -0,0 +1,106 @@ +{ + "packageName": "skeleton", + "displayName": "Skeleton", + "description": "Используется как индикатор загрузки контента.", + "props": { + "visible": { + "defaultValue": null, + "description": "Флаг, явно задающий состояние, при котором контент закрывается прелоадером", + "name": "visible", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "animate": { + "defaultValue": { + "value": true + }, + "description": "Флаг явного включения анимации скелета", + "name": "animate", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "style": { + "defaultValue": null, + "description": "Дополнительные инлайн стили", + "name": "style", + "required": false, + "type": { + "name": "CSSProperties | undefined" + } + }, + "allowBackdropBlur": { + "defaultValue": null, + "description": "Включает размытие фона", + "name": "allowBackdropBlur", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние элементы.", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "borderRadius": { + "defaultValue": { + "value": 8 + }, + "description": "Скругление углов", + "name": "borderRadius", + "required": false, + "type": { + "name": "BorderRadiusSize | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Скелетон должен максимально точно повторять форму ожидаемого контента.", + "desktop": "const SHAPRE_STYLE = {\nwidth: 40,\nheight: 40,\nborderRadius: 8,\nbackgroundImage: 'url(./images/imgBg.png)',\nbackgroundSize: 'cover',\n};\n\nrender(() => {\nconst [visible, setVisible] = React.useState(false);\n\nreturn (\n<>\n setVisible((p) => !p)}\n/>\n\n\n\n
\n\n
\n\n\n\n\n\nThis is fine\n\n
\n\n);\n});" + }, + { + "title": "Скелетонизация текста", + "description": "Скелетон умеет подстраиваться под заданный фрагмент текста, для этого тексту должны быть заданы fontSize и lineHeight.", + "desktop": "render(() => {\nconst [visible, setVisible] = React.useState(false);\n\nconst { renderSkeleton: renderTitleSkeleton, textRef: titleRef } = useSkeleton(visible, {});\nconst titleSkeleton = renderTitleSkeleton({});\n\nconst { renderSkeleton, textRef } = useSkeleton(visible, {});\nconst textSkeleton = renderSkeleton({});\n\nconst TitleComponent = isMobile() ? Typography.TitleMobile : Typography.Title;\n\nreturn (\n<>\n setVisible((prev) => !prev)}\n/>\n\n\n{titleSkeleton ? (\ntitleSkeleton\n) : (\n\nПочему банк проверяет мои операции?\n\n)}\n\n\n\n{textSkeleton ? (\ntextSkeleton\n) : (\n\nВ 2001 году в России начал действовать Федеральный закон №115\n
«О противодействии легализации доходов, полученных преступным\n
путём, и финансированию терроризма».\n
В рамках закона банки могут блокировать карты, отказывать\n
в проведении сомнительных операций, ограничить доступ\n
в интернет-банк или запрашивать документы, если по операции\n
клиента возникли подозрения.\n\n)}\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/slider-input.json b/packages/mcp/src/data/v50.16.0/slider-input.json new file mode 100644 index 0000000000..d9a0cadf5b --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/slider-input.json @@ -0,0 +1,558 @@ +{ + "packageName": "slider-input", + "displayName": "SliderInput", + "description": "Используется для указания значения из заданного диапазона.", + "props": { + "size": { + "defaultValue": { + "value": 48 + }, + "description": "Размер компонента\n@description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно", + "name": "size", + "required": false, + "type": { + "name": "48 | 56 | 64 | 72 | undefined" + } + }, + "min": { + "defaultValue": { + "value": 0 + }, + "description": "Мин. допустимое число", + "name": "min", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "max": { + "defaultValue": { + "value": 100 + }, + "description": "Макс. допустимое число", + "name": "max", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "steps": { + "defaultValue": { + "value": "[]" + }, + "description": "Массив подписей к слайдеру", + "name": "steps", + "required": false, + "type": { + "name": "ReactNode[] | undefined" + } + }, + "step": { + "defaultValue": { + "value": 1 + }, + "description": "Шаг (должен нацело делить отрезок между мин и макс)", + "name": "step", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "pips": { + "defaultValue": null, + "description": "Отображение подписей\nhttps://refreshless.com/nouislider/pips/", + "name": "pips", + "required": false, + "type": { + "name": "Pips | undefined" + } + }, + "range": { + "defaultValue": null, + "description": "Настройка шагов\nhttps://refreshless.com/nouislider/pips/#section-range", + "name": "range", + "required": false, + "type": { + "name": "RangeOptions | undefined" + } + }, + "value": { + "defaultValue": { + "value": "" + }, + "description": "Значение инпута", + "name": "value", + "required": false, + "type": { + "name": "string | number | undefined" + } + }, + "sliderValue": { + "defaultValue": { + "value": null + }, + "description": "Значение слайдера", + "name": "sliderValue", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "info": { + "defaultValue": null, + "description": "Дополнительная информация в правой части поля", + "name": "info", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "Input": { + "defaultValue": { + "value": "forwardRef(\n (\n {\n breakpoint,\n client,\n defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n ...restProps\n },\n ref,\n ) => {\n const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n const Component = isDesktop ? InputDesktop : InputMobile;\n\n return ;\n },\n)" + }, + "description": "Компонент поля ввода", + "name": "Input", + "required": false, + "type": { + "name": "ComponentType> | undefined" + } + }, + "customInputProps": { + "defaultValue": { + "value": "{}" + }, + "description": "Кастомные пропсы для поля ввода", + "name": "customInputProps", + "required": false, + "type": { + "name": "Record | undefined" + } + }, + "inputClassName": { + "defaultValue": null, + "description": "Класс для инпута", + "name": "inputClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "sliderClassName": { + "defaultValue": null, + "description": "Класс для слайдера", + "name": "sliderClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "stepsClassName": { + "defaultValue": null, + "description": "Класс для шагов", + "name": "stepsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик изменения значения через слайдер или поле ввода", + "name": "onChange", + "required": false, + "type": { + "name": "OnChangeType | undefined" + } + }, + "onInputChange": { + "defaultValue": null, + "description": "Обработчик ввода", + "name": "onInputChange", + "required": false, + "type": { + "name": "OnInputChangeType | undefined" + } + }, + "onSliderChange": { + "defaultValue": null, + "description": "Обработчик изменения слайдера", + "name": "onSliderChange", + "required": false, + "type": { + "name": "((payload: { value: number; }) => void) | undefined" + } + }, + "onSliderStart": { + "defaultValue": null, + "description": "Обработчик начала перетаскивания ползунка", + "name": "onSliderStart", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "onSliderEnd": { + "defaultValue": null, + "description": "Обработчик окончания перетаскивания ползунка", + "name": "onSliderEnd", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "dots": { + "defaultValue": { + "value": "false" + }, + "description": "Включение/отключение отображения точек на слайдере", + "name": "dots", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "dotsSlider": { + "defaultValue": { + "value": "'step'" + }, + "description": "Тип отображения точек на слайдере: 'step' - по шагу, 'custom' - произвольные", + "name": "dotsSlider", + "required": false, + "type": { + "name": "\"step\" | \"custom\" | undefined" + } + }, + "customDots": { + "defaultValue": null, + "description": "Массив значений для произвольного размещения точек", + "name": "customDots", + "required": false, + "type": { + "name": "number[] | undefined" + } + }, + "showPipsDots": { + "defaultValue": { + "value": "false" + }, + "description": "Показывать точки для pips-значений вместе с customDots в режиме dotsSlider='custom'", + "name": "showPipsDots", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "pipsLabel": { + "defaultValue": { + "value": "'all'" + }, + "description": "Отображение подписи под точками:\n- all: подпись для всех точек\n- pipsOnly: подпись только для pips-значений\n- customPipsOnly: подпись только для customDots\n- none: подписи отключены", + "name": "pipsLabel", + "required": false, + "type": { + "name": "PipsLabelMode | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "bold": { + "defaultValue": { + "value": true + }, + "description": "Жирность текста", + "name": "bold", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "defaultValue": { + "defaultValue": null, + "description": "Начальное значение поля", + "name": "defaultValue", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClick": { + "defaultValue": null, + "description": "Обработчик клика по полю", + "name": "onClick", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseDown": { + "defaultValue": null, + "description": "Обработчик MouseDown по полю", + "name": "onMouseDown", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "onMouseUp": { + "defaultValue": null, + "description": "Обработчик MouseUp по полю", + "name": "onMouseUp", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "colors": { + "defaultValue": null, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "fontWeight": { + "defaultValue": null, + "description": "Вес шрифта инпута, в том числе плейсхолдера", + "name": "fontWeight", + "required": false, + "type": { + "name": "\"bold\" | \"medium\" | \"regular\" | undefined" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "clear": { + "defaultValue": null, + "description": "Крестик для очистки поля", + "name": "clear", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "success": { + "defaultValue": null, + "description": "Отображение иконки успеха", + "name": "success", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл компонента", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": null, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "wrapperRef": { + "defaultValue": null, + "description": "Ref для обертки input", + "name": "wrapperRef", + "required": false, + "type": { + "name": "Ref | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "leftAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки левых аддонов", + "name": "leftAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "rightAddonsProps": { + "defaultValue": null, + "description": "Свойства для обертки правых аддонов", + "name": "rightAddonsProps", + "required": false, + "type": { + "name": "HTMLAttributes | undefined" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "labelClassName": { + "defaultValue": null, + "description": "Дополнительный класс для лейбла", + "name": "labelClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "addonsClassName": { + "defaultValue": null, + "description": "Дополнительный класс для аддонов", + "name": "addonsClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "focusedClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен при фокусе", + "name": "focusedClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "filledClassName": { + "defaultValue": null, + "description": "Класс, который будет установлен, если в поле есть значение", + "name": "filledClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClear": { + "defaultValue": null, + "description": "Обработчик нажатия на кнопку очистки", + "name": "onClear", + "required": false, + "type": { + "name": "((event: MouseEvent) => void) | undefined" + } + }, + "disableUserInput": { + "defaultValue": null, + "description": "Запрещает ввод с клавиатуры", + "name": "disableUserInput", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": null, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Стандартный вид компонента", + "description": "Можно настроить количество сегментов и шаг внутри сегмента.", + "desktop": "const min = 1;\n\nrender(() => {\nconst [value1, setValue1] = React.useState(3);\nconst [value2, setValue2] = React.useState(5);\n\nreturn (\n
\n setValue1(value)}\nbreakpoint={BREAKPOINT}\n/>\n\n setValue2(value)}\nbreakpoint={BREAKPOINT}\n/>\n
\n);\n});" + }, + { + "title": "Состояния", + "description": "В состоянии ошибки шкала заменяется на сообщение об ошибке, а в задисейбленном состоянии может превращаться в подпись.", + "desktop": "const formatAmountSimple = (() => {\nconst formatter = new Intl.NumberFormat('ru-RU', {\nstyle: 'currency',\ncurrency: 'RUB',\n});\n\nreturn (value) => (value ? formatter.format(value).slice(0, -5) : '');\n})();\n\nconst min = 100000;\nconst max = 300000;\nconst pips = {\nmode: 'values',\nvalues: [min, max - min, max],\nformat: {\nto: (value) => formatAmountSimple(value),\n},\n};\n\nrender(() => {\nconst [value, setValue] = React.useState(150000);\nconst [props, setProps] = React.useState({});\n\nreturn (\n
\n
\n setValue(value)}\nbreakpoint={BREAKPOINT}\n{...props}\n/>\n
\n\n\n\n\n\n setProps({ disabled: true, hint: 'Hint' })}\nsize={32}\nview='secondary'\n>\nЗаблокирован\n\n\n
\n);\n});" + }, + { + "title": "Amount", + "description": "Используйте Amount для деления введенных значений на разряды.", + "desktop": "const min = 50000;\nconst max = 10000000;\nconst step = 1000;\nconst range = {\nmin: [min],\n'25%': [100000, 10000],\n'75%': [1000000, 100000],\nmax: [max],\n};\nconst pips = {\nmode: 'values',\nvalues: [min, max],\nformat: {\nto: (value) => {\nif (value < 1000000) return `${value / 1000} тыс`;\nreturn `${value / 1000000} млн`;\n},\n},\n};\n\nrender(() => {\nconst [value, setValue] = React.useState(120000);\n\nconst handleInputChange = (event, { value }) => {\nsetValue(value !== '' ? (value / 100).toString() : '');\n};\n\nconst handleSliderChange = ({ value }) => {\nsetValue(value);\n};\n\nconst handleBlur = () => {\nif (value !== '') {\nsetValue(Math.max(min, Math.min(max, parseFloat(value.toString()))));\n}\n};\n\nreturn (\n
\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/slider.json b/packages/mcp/src/data/v50.16.0/slider.json new file mode 100644 index 0000000000..643d81af70 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/slider.json @@ -0,0 +1,245 @@ +{ + "packageName": "slider", + "displayName": "Slider", + "description": "", + "props": { + "min": { + "defaultValue": { + "value": 0 + }, + "description": "Мин. допустимое число", + "name": "min", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "max": { + "defaultValue": { + "value": 100 + }, + "description": "Макс. допустимое число", + "name": "max", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "step": { + "defaultValue": { + "value": 1 + }, + "description": "Шаг (должен нацело делить отрезок между мин и макс)", + "name": "step", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "pips": { + "defaultValue": null, + "description": "Отображение подписей\nhttps://refreshless.com/nouislider/pips/", + "name": "pips", + "required": false, + "type": { + "name": "Pips | undefined" + } + }, + "range": { + "defaultValue": { + "value": "{ min, max }" + }, + "description": "Настройка шагов\nhttps://refreshless.com/nouislider/pips/#section-range", + "name": "range", + "required": false, + "type": { + "name": "RangeOptions | undefined" + } + }, + "snap": { + "defaultValue": { + "value": false + }, + "description": "Флаг точной привязки к range\nhttps://refreshless.com/nouislider/examples/#section-skipping", + "name": "snap", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "value": { + "defaultValue": { + "value": 0 + }, + "description": "Значение слайдера", + "name": "value", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "valueTo": { + "defaultValue": null, + "description": "Второе значение слайдера (значение второго ползунка)\nесли передать ValueTo, то слайдер будет работать как range", + "name": "valueTo", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Заблокированное состояние", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "behaviour": { + "defaultValue": { + "value": "tap" + }, + "description": "Поведение ползунка", + "name": "behaviour", + "required": false, + "type": { + "name": "\"unconstrained-tap\" | \"tap\" | undefined" + } + }, + "size": { + "defaultValue": { + "value": 2 + }, + "description": "Размер\n@description s, m deprecated, используйте вместо них 2, 4 соответственно", + "name": "size", + "required": false, + "type": { + "name": "\"s\" | 2 | 4 | \"m\" | undefined" + } + }, + "dots": { + "defaultValue": { + "value": false + }, + "description": "Включение/отключение отображения точек на слайдере", + "name": "dots", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "dotsSlider": { + "defaultValue": { + "value": "step" + }, + "description": "Тип отображения точек на слайдере: 'step' - по шагу, 'custom' - произвольные", + "name": "dotsSlider", + "required": false, + "type": { + "name": "\"step\" | \"custom\" | undefined" + } + }, + "showPipsDots": { + "defaultValue": { + "value": false + }, + "description": "Показывать точки для pips-значений вместе с customDots в режиме dotsSlider='custom'", + "name": "showPipsDots", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "customDots": { + "defaultValue": { + "value": "[]" + }, + "description": "Массив значений для произвольного размещения точек", + "name": "customDots", + "required": false, + "type": { + "name": "number[] | undefined" + } + }, + "pipsLabel": { + "defaultValue": { + "value": "all" + }, + "description": "Отображение подписи под точками:\n- all: подпись для всех точек\n- pipsOnly: подпись только для pips-значений\n- customPipsOnly: подпись только для customDots\n- none: подписи отключены", + "name": "pipsLabel", + "required": false, + "type": { + "name": "PipsLabelMode | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик поля ввода", + "name": "onChange", + "required": false, + "type": { + "name": "((payload: { value: number; valueTo?: number | undefined; }) => void) | undefined" + } + }, + "onStart": { + "defaultValue": null, + "description": "@deprecated Обработчик начала перетаскивания ползунка", + "name": "onStart", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "onEnd": { + "defaultValue": null, + "description": "Обработчик окончания перетаскивания ползунка\n@description https://refreshless.com/nouislider/events-callbacks/#section-change", + "name": "onEnd", + "required": false, + "type": { + "name": "(() => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Сегменты и шаг слайдера", + "description": "Можно настроить количество сегментов и шаг внутри сегмента.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState(0);\nconst [slider, setSlider] = React.useState(1);\n\nconst handleChange = ({ value }) => setValue(value);\nconst handleChangeSlider = ({ value }) => setSlider(value);\n\nreturn (\n<>\n
Value:{value}
\n
\n\n
\n
\n
Value:{slider}
\n
\n\n\n);\n});" + }, + { + "title": "Диапазон", + "description": "С помощью слайдера можно указывать диапазон значений. Чтобы позволить ползункам пересекать друг друга установите `behaviour=unconstrained-tap`.", + "desktop": "render(() => {\nconst [sliderTap, setSliderTap] = React.useState({\nvalue: 4,\nvalueTo: 6,\n});\n\nconst [slider, setSlider] = React.useState({\nvalue: 4,\nvalueTo: 6,\n});\n\nconst handleChangeSliderTap = (payload) => {\nsetSliderTap(payload);\n};\n\nconst handleChangeSlider = (payload) => {\nsetSlider(payload);\n};\n\nreturn (\n<>\n
\nmin: {sliderTap.value}\nmax: {sliderTap.valueTo}\n
\n\n\n\n
\nmin: {slider.value}\nmax: {slider.valueTo}\n
\n\n\n\n);\n});" + }, + { + "title": "Подписи", + "description": "Слайдер может использоваться с подписями и без.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState(0);\nconst [slider, setSlider] = React.useState(0);\n\nconst handleChange = ({ value }) => setValue(value);\nconst handleChangeSlider = ({ value }) => setSlider(value);\n\nreturn (\n<>\n
Value: {value}
\n
\n\n
\n
\n
Value: {slider}
\n
\n\n\n);\n});" + }, + { + "title": "Размеры", + "description": "Доступны две высоты желоба: 2 и 4рх.", + "desktop": "render(() => {\nconst [value, setValue] = React.useState(0);\nconst [slider, setSlider] = React.useState(0);\n\nconst handleChange = ({ value }) => setValue(value);\nconst handleChangeSlider = ({ value }) => setSlider(value);\n\nreturn (\n<>\n\n
\n
\n\n\n);\n});", + "mobile": "render(() => {\nconst [value, setValue] = React.useState(0);\nconst [slider, setSlider] = React.useState(0);\n\nconst handleChange = ({ value }) => setValue(value);\nconst handleChangeSlider = ({ value }) => setSlider(value);\n\nreturn (\n<>\n
\n\n
\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/sortable-list.json b/packages/mcp/src/data/v50.16.0/sortable-list.json new file mode 100644 index 0000000000..b13cfcc9c8 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/sortable-list.json @@ -0,0 +1,191 @@ +{ + "packageName": "sortable-list", + "displayName": "SortableList", + "description": "", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс на контейнер", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "itemClassName": { + "defaultValue": null, + "description": "Дополнительный класс на элемент списка", + "name": "itemClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "itemContentClassName": { + "defaultValue": null, + "description": "Дополнительный класс на обертку контента у элемента списка", + "name": "itemContentClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "portalProps": { + "defaultValue": null, + "description": "Пропсы портала, в котором отображается draggable элемент", + "name": "portalProps", + "required": false, + "type": { + "name": "PortalProps | undefined" + } + }, + "dragOverlayProps": { + "defaultValue": null, + "description": "Пропсы DragOverlay элемента", + "name": "dragOverlayProps", + "required": false, + "type": { + "name": "{ className?: string | undefined; style?: CSSProperties | undefined; zIndex?: number | undefined; } | undefined" + } + }, + "controlPadding": { + "defaultValue": null, + "description": "Отступ контрола от края", + "name": "controlPadding", + "required": false, + "type": { + "name": "PaddingSize | undefined" + } + }, + "controlPosition": { + "defaultValue": { + "value": "right" + }, + "description": "Позиция контрола", + "name": "controlPosition", + "required": false, + "type": { + "name": "ControlPosition | undefined" + } + }, + "renderItem": { + "defaultValue": null, + "description": "Рендер-функция элемента", + "name": "renderItem", + "required": true, + "type": { + "name": "(item: { id: UniqueIdentifier; disabled?: boolean | undefined; }) => Element" + } + }, + "items": { + "defaultValue": null, + "description": "Список сортируемых идентификаторов", + "name": "items", + "required": true, + "type": { + "name": "Items" + } + }, + "padding": { + "defaultValue": null, + "description": "Отступы.", + "name": "padding", + "required": false, + "type": { + "name": "PaddingSize | PaddingObj | undefined" + } + }, + "borderRadius": { + "defaultValue": null, + "description": "BorderRadius элементов списка", + "name": "borderRadius", + "required": false, + "type": { + "name": "BorderRadius | undefined" + } + }, + "view": { + "defaultValue": { + "value": "primary" + }, + "description": "Вид", + "name": "view", + "required": false, + "type": { + "name": "View | undefined" + } + }, + "activatorNode": { + "defaultValue": { + "value": "cell" + }, + "description": "Активатор события перетаскивания. Либо элемент целиком, либо только контрол", + "name": "activatorNode", + "required": false, + "type": { + "name": "ActivatorNode | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля враппера используется модификатор -container, для ячейки -item_${id}", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "announcements": { + "defaultValue": { + "value": "{\n onDragStart({ active }: DragStartEvent) {\n return `Выбран элемент ${active.id}.`;\n },\n onDragOver({ active, over }: DragOverEvent) {\n if (over) {\n return `Выбранный элемент ${active.id} находится над элементом ${over.id}.`;\n }\n\n return `Выбранный элемент ${active.id} находится за пределами droppable зоны.`;\n },\n onDragEnd({ active, over }: DragEndEvent) {\n if (over) {\n return `Выбранный элемент ${active.id} был перемещен на место ${over.id}`;\n }\n\n return `Выбранный элемент ${active.id} не был перемещен.`;\n },\n onDragCancel() {\n return 'Перемещение было отменено';\n },\n}" + }, + "description": "Тексты объявления для screen reader", + "name": "announcements", + "required": false, + "type": { + "name": "Announcements | undefined" + } + }, + "screenReaderInstructions": { + "defaultValue": { + "value": "'Чтобы выбрать перетаскиваемый элемент, нажмите пробел.\\n' +\n 'При перетаскивании используйте клавиши со стрелками для перемещения элемента.\\n' +\n 'Снова нажмите пробел, чтобы переместить элемент в его новое положение или нажмите escape для отмены.'" + }, + "description": "Инструкция для screen reader", + "name": "screenReaderInstructions", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onDragStart": { + "defaultValue": null, + "description": "Коллбэк, вызываемый при начале процесса перетаскивания", + "name": "onDragStart", + "required": false, + "type": { + "name": "((event: DragStartEvent) => void) | undefined" + } + }, + "onDragEnd": { + "defaultValue": null, + "description": "Коллбэк, вызываемый по окончании перетаскивания", + "name": "onDragEnd", + "required": false, + "type": { + "name": "((event: DragEndEvent, items: Items) => void) | undefined" + } + } + }, + "demos": [ + { + "title": "Анатомия", + "description": "Ячейка состоит из кастомизируемого слота и контрола. У ячейки можно настроить фон, скругление и отступ от контрола.", + "desktop": "render(() => {\nconst renderItem = () => {\nreturn (\n\n);\n};\n\nreturn (\n
\n\n
\n);\n});" + }, + { + "title": "Примеры", + "description": "Для враппера можно настроить внутренние отступы и фон.", + "desktop": "render(() => {\nconst [items, setItems] = React.useState(() =>\n[1, 2, 3, 4, 5, 6].map((item) => ({ id: item })),\n);\n\nconst renderItem = (item) => {\nreturn (\n\n\n\n\n\n\n\n\n\n{`Элемент списка ${item.id}`}\n\n\nПеретащи меня\n\n\n\n\n);\n};\n\nreturn (\n
\n setItems(newIds)}\npadding={8}\nborderRadius={8}\ncontrolPadding={12}\nrenderItem={renderItem}\n/>\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/space.json b/packages/mcp/src/data/v50.16.0/space.json new file mode 100644 index 0000000000..45a9ee5b9d --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/space.json @@ -0,0 +1,104 @@ +{ + "packageName": "space", + "displayName": "Space", + "description": "Используется для создания отступов между блоками.", + "props": { + "align": { + "defaultValue": null, + "description": "Выравнивание", + "name": "align", + "required": false, + "type": { + "name": "Align | undefined" + } + }, + "direction": { + "defaultValue": null, + "description": "Направление", + "name": "direction", + "required": false, + "type": { + "name": "Direction | undefined" + } + }, + "size": { + "defaultValue": null, + "description": "Размер отступов", + "name": "size", + "required": false, + "type": { + "name": "Size | [Size, Size] | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние компоненты", + "name": "children", + "required": true, + "type": { + "name": "ReactNode" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "wrap": { + "defaultValue": null, + "description": "Автоматический перенос строк, полезно при direction = 'horizontal'", + "name": "wrap", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "divider": { + "defaultValue": null, + "description": "Компонент разделителя", + "name": "divider", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "fullWidth": { + "defaultValue": null, + "description": "Растягивать ли компонент на всю ширину", + "name": "fullWidth", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "useCssGaps": { + "defaultValue": null, + "description": "Использовать css gap\n@description Поддержка ограничена. см https://caniuse.com/?search=gap", + "name": "useCssGaps", + "required": false, + "type": { + "name": "boolean | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Фиксированное расстояние между блоками.", + "desktop": "render(() => {\nconst styleBlock = {\nwidth: '64px',\nheight: '64px',\nborderRadius: '8px',\nbackgroundColor: 'var(--color-light-neutral-translucent-200)',\n};\nreturn (\n\n{new Array(3).fill(null).map((_, idx) => (\n
\n))}\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/spinner.json b/packages/mcp/src/data/v50.16.0/spinner.json new file mode 100644 index 0000000000..efb923c146 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/spinner.json @@ -0,0 +1,110 @@ +{ + "packageName": "spinner", + "displayName": "Spinner", + "description": "", + "props": { + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Палитра, в контексте которой используется спиннер", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "visible": { + "defaultValue": { + "value": "false" + }, + "description": "Управление видимостью компонента", + "name": "visible", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "id": { + "defaultValue": null, + "description": "Идентификатор компонента в DOM", + "name": "id", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "style": { + "defaultValue": null, + "description": "Дополнительные инлайн стили для cпиннера", + "name": "style", + "required": false, + "type": { + "name": "CSSProperties | undefined" + } + }, + "size": { + "defaultValue": null, + "description": "Размер спиннера (кольца)", + "name": "size", + "required": true, + "type": { + "name": "number" + } + }, + "lineWidth": { + "defaultValue": null, + "description": "Толщина линии спинера (кольца)", + "name": "lineWidth", + "required": true, + "type": { + "name": "number" + } + }, + "preset": { + "defaultValue": null, + "description": "Преднастроенный вариант", + "name": "preset", + "required": true, + "type": { + "name": "48 | 24 | 16" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "У компонента есть стандартные размеры: 16, 24 и 48px.", + "desktop": "const PRESETS = [16, 24, 48];\n\nrender(\n\n\n{PRESETS.map((preset) => (\n
\n\n
\n))}\n\n,\n);" + }, + { + "title": "Кастомизация", + "description": "Спиннеру можно задать кастомную высоту, цвет, толщину линии и отступы внутри контейнера.", + "desktop": "render(\n\n\n
\n\n
\n
\n\n
\n\n,\n);" + }, + { + "title": "Использование в других компонентах", + "description": "Часто используется в [Button](?path=/docs/button--docs).", + "desktop": "\n
\n\n
\n
\n\n
\n", + "mobile": "\n\n
\n\n" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/stack.json b/packages/mcp/src/data/v50.16.0/stack.json new file mode 100644 index 0000000000..8321a920ee --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/stack.json @@ -0,0 +1,34 @@ +{ + "packageName": "stack", + "displayName": "Stack", + "description": "", + "props": { + "children": { + "defaultValue": null, + "description": "Render prop, в который передается функция.\nФункция принимает аргумент со значением z-index из текущего контекста.", + "name": "children", + "required": true, + "type": { + "name": "(value: number) => ReactNode" + } + }, + "value": { + "defaultValue": { + "value": 10 + }, + "description": "Исходное значение для z-index.", + "name": "value", + "required": false, + "type": { + "name": "number | undefined" + } + } + }, + "demos": [ + { + "title": "Пример", + "description": "Расположение модального окна и тултипа при помощи stack.", + "desktop": "render(() => {\nconst [modalOpen, setModalOpen] = React.useState(false);\n\nreturn (\n
\n\n\n\n{(zIndex) => (\n setModalOpen(false)}\n>\n\n\n\n{(nextZIndex) => (\nTooltip
}\ntrigger='click'\ntargetClassName='target'\n>\n\n\n)}\n\n\n\n)}\n\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/status-badge.json b/packages/mcp/src/data/v50.16.0/status-badge.json new file mode 100644 index 0000000000..3bd658e304 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/status-badge.json @@ -0,0 +1,77 @@ +{ + "packageName": "status-badge", + "displayName": "StatusBadge", + "description": "Используется как индикатор состояния.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "size": { + "defaultValue": { + "value": 24 + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "StatusBadgeSizes | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "view": { + "defaultValue": null, + "description": "Вид бейджа.", + "name": "view", + "required": true, + "type": { + "name": "StatusBadgeViews" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "customIcons": { + "defaultValue": null, + "description": "Кастомные иконки", + "name": "customIcons", + "required": false, + "type": { + "name": "Partial>>> | undefined" + } + } + }, + "demos": [ + { + "title": "Виды статусов", + "description": "Компонент доступен в пяти размерах. Представленный ниже набор комбинаций иконки и цвета является единым для всех продуктов.\nЕсли нужной конфигурации нет, её придётся собрать на основе компонента [IconView](?path=/docs/iconview--docs).", + "desktop": "
\n{[\n'negative-cross',\n'negative-block',\n'negative-alert',\n'attention-alert',\n'positive-checkmark',\n'neutral-information',\n'neutral-cross',\n'neutral-operation',\n].map((view) => (\n\n\n{[40, 32, 24, 20, 16].map((size) => (\n\n))}\n\n\n\n))}\n
" + }, + { + "title": "Кастомные иконки", + "description": "Статусы могут содержать кастомные иконки", + "desktop": "render(() => {\nconst sizes = [16, 20, 24, 32, 40];\nconst customIcons = {\n'positive-checkmark': {\n16: AScoresCircleMIcon,\n20: AScoresCircleMIcon,\n24: AScoresCircleMIcon,\n32: AScoresCircleMIcon,\n40: AScoresCircleMIcon,\n},\n};\nreturn (\n\n\n{sizes.reverse().map((size) => {\nreturn (\n\n);\n})}\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/status.json b/packages/mcp/src/data/v50.16.0/status.json new file mode 100644 index 0000000000..b9daba9a61 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/status.json @@ -0,0 +1,130 @@ +{ + "packageName": "status", + "displayName": "Status", + "description": "Используется для цветового кодирования статусов.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "view": { + "defaultValue": { + "value": "muted-alt" + }, + "description": "Вид компонента\n@description soft deprecated, используйте вместо него muted-alt", + "name": "view", + "required": false, + "type": { + "name": "\"contrast\" | \"soft\" | \"muted\" | \"muted-alt\" | undefined" + } + }, + "color": { + "defaultValue": { + "value": "green" + }, + "description": "Цветовое оформление компонента", + "name": "color", + "required": false, + "type": { + "name": "\"red\" | \"grey\" | \"blue\" | \"green\" | \"orange\" | \"purple\" | \"teal\" | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние элементы.", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "size": { + "defaultValue": { + "value": 20 + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "40 | 32 | 24 | 20 | undefined" + } + }, + "shape": { + "defaultValue": { + "value": "rectangular" + }, + "description": "Форма компонента", + "name": "shape", + "required": false, + "type": { + "name": "\"rounded\" | \"rectangular\" | undefined" + } + }, + "uppercase": { + "defaultValue": { + "value": true + }, + "description": "Текст компонента в верхнем регистре", + "name": "uppercase", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + } + }, + "demos": [ + { + "title": "Размеры", + "description": "Кнопка доступна в размерах 40, 32, 24, 20.", + "desktop": "\n
\n\nВсё в порядке\n\n\n\nВсё в порядке\n\n\n\nВсё в порядке\n\n\n\nВсё в порядке\n\n
\n" + }, + { + "title": "Форма", + "description": "Для статуса доступно два варианта скругления углов.", + "desktop": "\n
\n\nВсё в порядке\n\n\n\nВсё в порядке\n\n
\n" + }, + { + "title": "Стиль лейбла", + "description": "Для лейбла можно включить опцию `uppercase`.", + "desktop": "\n
\n\nВсё в порядке\n\n\nВсё в порядке\n
\n" + }, + { + "title": "Аддон", + "description": "В левый аддон можно передать иконку или другой контент.", + "desktop": "render(() => {\nreturn (\n\n\nБез аддона\n\n}\n>\nС аддоном\n\n\n);\n});" + }, + { + "title": "Цвета", + "description": "", + "desktop": "\n
\n
\n{COLORS.map((color) => (\n\n\nLabel\n\n\n\n))}\n
\n\n
\n{COLORS.map((color) => (\n\n\nLabel\n\n\n\n))}\n
\n\n
\n{COLORS.map((color) => (\n\n\nLabel\n\n\n\n))}\n
\n
\n" + }, + { + "title": "Кастомизация", + "description": "Статусу можно задать кастомный цвет текста и фона.", + "desktop": "render(() => {\nreturn (\n\n\n\nКастом\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/stepped-progress-bar.json b/packages/mcp/src/data/v50.16.0/stepped-progress-bar.json new file mode 100644 index 0000000000..a44500eb56 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/stepped-progress-bar.json @@ -0,0 +1,86 @@ +{ + "packageName": "stepped-progress-bar", + "displayName": "SteppedProgressBar", + "description": "", + "props": { + "maxStep": { + "defaultValue": null, + "description": "Общее количество шагов", + "name": "maxStep", + "required": true, + "type": { + "name": "number" + } + }, + "description": { + "defaultValue": null, + "description": "Постфикс описание под прогрессбаром", + "name": "description", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "step": { + "defaultValue": { + "value": 0 + }, + "description": "Количество пройденных шагов", + "name": "step", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "view": { + "defaultValue": null, + "description": "Цвет заполнения", + "name": "view", + "required": false, + "type": { + "name": "SteppedProgressBarViewValue | SteppedProgressBarViewValue[] | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Пошаговый прогрессбар с описанием под шкалой", + "description": "", + "desktop": "" + }, + { + "title": "Пошаговый прогрессбар с выбором цветов отдельных сегментов", + "description": "", + "desktop": "" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/steps.json b/packages/mcp/src/data/v50.16.0/steps.json new file mode 100644 index 0000000000..881b086c55 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/steps.json @@ -0,0 +1,208 @@ +{ + "packageName": "steps", + "displayName": "Steps", + "description": "Используется для разделения сложной формы или анкеты на последовательные шаги.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "defaultActiveStep": { + "defaultValue": { + "value": 1 + }, + "description": "Активный шаг, указанный по умолчанию", + "name": "defaultActiveStep", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "activeStep": { + "defaultValue": null, + "description": "Активный шаг", + "name": "activeStep", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "isMarkCompletedSteps": { + "defaultValue": { + "value": true + }, + "description": "Управление возможностью отключения пометки пройденного шага", + "name": "isMarkCompletedSteps", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "checkIsStepDisabled": { + "defaultValue": null, + "description": "Кастомный метод для управления состоянием disabled шага и\nвозможностью перехода на этот шаг\n@param stepNumber - номер шага\n@return Флаг состояния disabled", + "name": "checkIsStepDisabled", + "required": false, + "type": { + "name": "((stepNumber: number) => boolean) | undefined" + } + }, + "checkIsStepError": { + "defaultValue": null, + "description": "Кастомный метод для управления состоянием шага error\n@param stepNumber - номер шага\n@return Флаг состояния error", + "name": "checkIsStepError", + "required": false, + "type": { + "name": "((stepNumber: number) => boolean) | undefined" + } + }, + "checkIsStepCriticalError": { + "defaultValue": null, + "description": "Кастомный метод для управления состоянием шага criticalError\n@param stepNumber - номер шага\n@return Флаг состояния error", + "name": "checkIsStepCriticalError", + "required": false, + "type": { + "name": "((stepNumber: number) => boolean) | undefined" + } + }, + "checkIsStepWarning": { + "defaultValue": null, + "description": "Кастомный метод для управления состоянием шага warning\n@param stepNumber - номер шага\n@return Флаг состояния warning", + "name": "checkIsStepWarning", + "required": false, + "type": { + "name": "((stepNumber: number) => boolean) | undefined" + } + }, + "checkIsStepWaiting": { + "defaultValue": null, + "description": "Кастомный метод для управления состоянием шага waiting\n@param stepNumber - номер шага\n@return Флаг состояния waiting", + "name": "checkIsStepWaiting", + "required": false, + "type": { + "name": "((stepNumber: number) => boolean) | undefined" + } + }, + "checkIsStepPositive": { + "defaultValue": null, + "description": "Кастомный метод для управления состоянием шага positive\n@param stepNumber - номер шага\n@return Флаг состояния positive", + "name": "checkIsStepPositive", + "required": false, + "type": { + "name": "((stepNumber: number) => boolean) | undefined" + } + }, + "checkIsStepCustom": { + "defaultValue": null, + "description": "Кастомный метод для установки кастомного индикатора шага\n@param stepNumber - номер шага\n@return Объект StepIndicatorProps { className, content, iconColor } или null", + "name": "checkIsStepCustom", + "required": false, + "type": { + "name": "((stepNumber: number) => StepIndicatorProps | null) | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик клика на шаг\n@param stepNumber - номер активного шага", + "name": "onChange", + "required": false, + "type": { + "name": "((stepNumber: number) => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние элементы", + "name": "children", + "required": true, + "type": { + "name": "ReactNode" + } + }, + "isVerticalAlign": { + "defaultValue": { + "value": false + }, + "description": "Управление ориентацией компонента", + "name": "isVerticalAlign", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "ordered": { + "defaultValue": { + "value": true + }, + "description": "Управление отображением номера шага", + "name": "ordered", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "interactive": { + "defaultValue": { + "value": true + }, + "description": "Включение / отключение интерактивности шагов", + "name": "interactive", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "fullWidth": { + "defaultValue": { + "value": false + }, + "description": "Растягивание шагов на всю ширину блока для вертикальной ориентации", + "name": "fullWidth", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "minSpaceBetweenSteps": { + "defaultValue": { + "value": 24 + }, + "description": "Минимальное расстояние между шагами для горизонтального расположения компонента\n@description Значение 8 устарело и будет удалено в будущих версиях. Используйте 16, 24 или 32.", + "name": "minSpaceBetweenSteps", + "required": false, + "type": { + "name": "32 | 24 | 8 | 16 | undefined" + } + }, + "completedDashColor": { + "defaultValue": null, + "description": "Цвет тире выполненного шага", + "name": "completedDashColor", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Горизонтальный.", + "desktop": "render(() => {\nconst [ordered, setOrdered] = React.useState(true);\nconst [error, setError] = React.useState(false);\nconst [step, setStep] = React.useState(2);\n\nconst handleStepsChange = (stepNumber) => setStep(stepNumber);\n\nconst handleOrderChange = () => setOrdered((prev) => !prev);\n\nconst handleErrorChange = () => {\nsetError((prev) => {\nif (!prev && step > 3) {\nsetStep(3);\n}\n\nreturn !prev;\n});\n};\n\nconst handleStepDisable = (stepNumber) => {\nif (error) {\nreturn stepNumber === 4 || stepNumber === 5;\n}\n\nreturn stepNumber === 4;\n};\n\nconst handleStepError = (stepNumber) => {\nif (error) {\nreturn stepNumber === 3;\n}\n};\n\nreturn (\n\n\n{[1, 2, 3, 4, 5].map((item, key) => (\n
Шаг {item}
\n))}\n\n\nВыбран шаг {step}\n\n<>\n\n\n\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/switch.json b/packages/mcp/src/data/v50.16.0/switch.json new file mode 100644 index 0000000000..4ef57a4e90 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/switch.json @@ -0,0 +1,135 @@ +{ + "packageName": "switch", + "displayName": "Switch", + "description": "", + "props": { + "label": { + "defaultValue": null, + "description": "Текст подписи к переключателю", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки снизу", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "reversed": { + "defaultValue": { + "value": false + }, + "description": "Переключатель будет отрисован справа от контента", + "name": "reversed", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "align": { + "defaultValue": { + "value": "start" + }, + "description": "Выравнивание", + "name": "align", + "required": false, + "type": { + "name": "Align | undefined" + } + }, + "addons": { + "defaultValue": null, + "description": "Дополнительный слот", + "name": "addons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "block": { + "defaultValue": null, + "description": "Растягивать ли компонент на всю ширину", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "disabled": { + "defaultValue": null, + "description": "Управление состоянием включен / выключен", + "name": "disabled", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик переключения компонента", + "name": "onChange", + "required": false, + "type": { + "name": "((event: ChangeEvent, payload: { checked: boolean; name: string | undefined; }) => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "Colors | undefined" + } + }, + "showSkeleton": { + "defaultValue": { + "value": false + }, + "description": "Показать скелетон", + "name": "showSkeleton", + "required": false, + "type": { + "name": "boolean | undefined" + } + } + }, + "demos": [ + { + "title": "Как использовать", + "description": "Свитч это аналог [Checkbox](?path=/docs/checkbox--docs). Для применения выбранного состояния не нужно совершать дополнительных действий,\nтаких как отправка формы или нажатие кнопки «применить». Свитч может располагаться слева или справа от контента.\n\nЕсли свитч нельзя использовать, его следует заблокировать. Валидация для свитчей не требуется.", + "desktop": "render(() => {\nconst [checked1, setChecked1] = React.useState(false);\nconst [checked2, setChecked2] = React.useState(false);\n\nreturn (\n
\n setChecked1((prevState) => !prevState)}\n/>\n\n setChecked2((prevState) => !prevState)}\n/>\n
\n);\n});" + }, + { + "title": "Состояния", + "description": "Свитч может находиться в выбранном и невыбранном состоянии. В редких кейсах его значение может быть недоступным для редактирования.", + "desktop": "render(() => {\nreturn (\n<>\n\n\n\n\n\n\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/system-message.json b/packages/mcp/src/data/v50.16.0/system-message.json new file mode 100644 index 0000000000..8fd6765715 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/system-message.json @@ -0,0 +1,73 @@ +{ + "packageName": "system-message", + "displayName": "SystemMessage", + "description": "", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "fullHeight": { + "defaultValue": null, + "description": "Растянуть контент на всю доступную высоту.", + "name": "fullHeight", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля слотов используются одноименные модификаторы (-graphic, -title и тд)", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние элементы.", + "name": "children", + "required": true, + "type": { + "name": "ReactNode" + } + }, + "padding": { + "defaultValue": null, + "description": "Отступы.", + "name": "padding", + "required": false, + "type": { + "name": "PaddingType | undefined" + } + }, + "view": { + "defaultValue": null, + "description": "", + "name": "view", + "required": true, + "type": { + "name": "\"desktop\" | \"mobile\"" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Компонент может использоваться как индикатор состояния системы или конкретного интерфейсного элемента,\nдля уведомления пользователя об ошибках и вывода других сообщений системы, адресованных пользователю.", + "desktop": "const IS_MOBILE = document.body.clientWidth < 450;\nconst SETTINGS_KEY = {\nsubtitle: 'subtitle',\ncaption: 'caption',\nprimary: 'primary',\nsecondary: 'secondary',\nbutton_columns: 'button_columns',\ngraphic_icon: 'graphic_icon',\ngraphic_img: 'graphic_img',\ngraphic_none: 'graphic_none',\n};\n\nconst SETTINGS_MAP = {\n[SETTINGS_KEY.subtitle]: 'Subtitle',\n[SETTINGS_KEY.caption]: 'Caption',\n[SETTINGS_KEY.primary]: 'Button primary',\n[SETTINGS_KEY.secondary]: 'Button secondary',\n...(IS_MOBILE ? { [SETTINGS_KEY.button_columns]: 'Buttons vertical layout' } : null),\n};\n\nconst SELECT_OPTIONS = [\n{\nkey: SETTINGS_KEY.graphic_icon,\ncontent: 'IconView',\n},\n{\nkey: SETTINGS_KEY.graphic_img,\ncontent: 'Img',\n},\n{\nkey: SETTINGS_KEY.graphic_none,\ncontent: 'None',\n},\n];\n\nconst sizeButton = IS_MOBILE ? 56 : 48;\n\nrender(() => {\nconst [graphic, setGraphic] = React.useState(SELECT_OPTIONS[0].key);\nconst [settings, setSettings] = React.useState(() =>\nObject.keys(SETTINGS_MAP).reduce((res, name) => ({ ...res, [name]: true }), {}),\n);\n\nconst handleSettingsChange = (_, { name, checked }) => {\nsetSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nconst renderGraphic = () => {\nif (graphic === SETTINGS_KEY.graphic_icon) {\nreturn (\n\n\n\n\n\n);\n}\n\nif (graphic === SETTINGS_KEY.graphic_img) {\nreturn (\n\n\n\n);\n}\n\nreturn null;\n};\n\nreturn (\n\n
\n\n{renderGraphic()}\n\nПодтвердите подключение кодом из смс\n\n{settings[SETTINGS_KEY.subtitle] && (\n\nПроверили вашу заявку — всё в порядке. Осталось подтвердить подключение\n\n)}\n\n{settings[SETTINGS_KEY.caption] && (\n\nДля этого нажмите на кнопочку ниже\n\n)}\n\n{(settings[SETTINGS_KEY.primary] || settings[SETTINGS_KEY.secondary]) && (\n\n{settings[SETTINGS_KEY.primary] && (\n\n)}\n\n{settings[SETTINGS_KEY.secondary] && (\n\n)}\n\n)}\n\n
\n\n
\n\n\n\n\n\n\n
\n setGraphic(selected.key)}\nOption={BaseOption}\n/>\n
\n\n\n\n\n{Object.keys(SETTINGS_MAP).map((name) => (\n\n))}\n\n
\n
\n);\n});" + }, + { + "title": "Использование в модалках", + "description": "При использовании в модалках футер и хедер не фиксируются. В мобильных модалках контентная часть растягивается на всю доступную высоту.", + "desktop": "const IS_MOBILE = document.body.clientWidth < 450;\nconst SETTINGS_KEY = {\nsubtitle: 'subtitle',\ncaption: 'caption',\nprimary: 'primary',\nsecondary: 'secondary',\nbutton_columns: 'button_columns',\ngraphic_icon: 'graphic_icon',\ngraphic_img: 'graphic_img',\ngraphic_none: 'graphic_none',\n};\n\nconst SETTINGS_MAP = {\n[SETTINGS_KEY.subtitle]: 'Subtitle',\n[SETTINGS_KEY.caption]: 'Caption',\n[SETTINGS_KEY.primary]: 'Button primary',\n[SETTINGS_KEY.secondary]: 'Button secondary',\n...(IS_MOBILE ? { [SETTINGS_KEY.button_columns]: 'Buttons vertical layout' } : null),\n};\n\nconst SELECT_OPTIONS = [\n{\nkey: SETTINGS_KEY.graphic_icon,\ncontent: 'IconView',\n},\n{\nkey: SETTINGS_KEY.graphic_img,\ncontent: 'Img',\n},\n{\nkey: SETTINGS_KEY.graphic_none,\ncontent: 'None',\n},\n];\n\nconst sizeButton = IS_MOBILE ? 56 : 48;\n\nrender(() => {\nconst [graphic, setGraphic] = React.useState(SELECT_OPTIONS[0].key);\nconst [open, setOpen] = React.useState(false);\nconst [settings, setSettings] = React.useState(() =>\nObject.keys(SETTINGS_MAP).reduce((res, name) => ({ ...res, [name]: true }), {}),\n);\n\nconst handleSettingsChange = (_, { name, checked }) => {\nsetSettings((prevState) => ({ ...prevState, [name]: checked }));\n};\n\nconst renderGraphic = () => {\nif (graphic === SETTINGS_KEY.graphic_icon) {\nreturn (\n\n\n\n\n\n);\n}\n\nif (graphic === SETTINGS_KEY.graphic_img) {\nreturn (\n\n\n\n);\n}\n\nreturn null;\n};\n\nreturn (\n<>\n setOpen(false)}>\n\n\n\n{renderGraphic()}\n\n\nПодтвердите подключение кодом из смс\n\n\n{settings[SETTINGS_KEY.subtitle] && (\n\nПроверили вашу заявку — всё в порядке. Осталось подтвердить\nподключение\n\n)}\n\n{settings[SETTINGS_KEY.caption] && (\n\nДля этого нажмите на кнопочку ниже\n\n)}\n\n{(settings[SETTINGS_KEY.primary] || settings[SETTINGS_KEY.secondary]) && (\n\n{settings[SETTINGS_KEY.primary] && (\n\n)}\n\n{settings[SETTINGS_KEY.secondary] && (\n\n)}\n\n)}\n\n\n\n\n\n\n\n\n
\n setGraphic(selected.key)}\nOption={BaseOption}\n/>\n
\n\n\n\n\n{Object.keys(SETTINGS_MAP).map((name) => (\n\n))}\n\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/tab-bar.json b/packages/mcp/src/data/v50.16.0/tab-bar.json new file mode 100644 index 0000000000..fdbfa0a690 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/tab-bar.json @@ -0,0 +1,99 @@ +{ + "packageName": "tab-bar", + "displayName": "TabBarComponent", + "description": "Используется для навигации между разделами.", + "props": { + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля таба используется модификатор -tab", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "tabClassNames": { + "defaultValue": null, + "description": "Дополнительные классы для таба.", + "name": "tabClassNames", + "required": false, + "type": { + "name": "{ className?: string | undefined; selectedClassName?: string | undefined; labelClassName?: string | undefined; iconClassName?: string | undefined; } | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Список табов", + "name": "children", + "required": true, + "type": { + "name": "TabElementType[]" + } + }, + "selectedId": { + "defaultValue": null, + "description": "Идентификатор выбранного таба", + "name": "selectedId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "border": { + "defaultValue": null, + "description": "Включает верхний бордер", + "name": "border", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик изменения выбранного таба", + "name": "onChange", + "required": false, + "type": { + "name": "((id: string) => void) | undefined" + } + }, + "accentColor": { + "defaultValue": { + "value": "primary" + }, + "description": "Цвет активного таба", + "name": "accentColor", + "required": false, + "type": { + "name": "\"primary\" | \"secondary\" | undefined" + } + }, + "bgColor": { + "defaultValue": { + "value": "modal-bg-primary" + }, + "description": "Цвет фона", + "name": "bgColor", + "required": false, + "type": { + "name": "\"modal-bg-primary\" | \"modal-bg-alt-primary\" | undefined" + } + } + }, + "demos": [ + { + "title": "Примеры", + "description": "Компонент может отобразить от двух до пяти табов.", + "desktop": "render(() => {\nconst [border, setBorder] = React.useState(false);\nconst [selectedId, setSelectedId] = React.useState('1');\n\nreturn (\n\n setBorder((p) => !p)} />\n\n
\n\n} />\n} />\n\n
\n
\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/tag.json b/packages/mcp/src/data/v50.16.0/tag.json new file mode 100644 index 0000000000..1db02a6426 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/tag.json @@ -0,0 +1,176 @@ +{ + "packageName": "tag", + "displayName": "Tag", + "description": "Многофункциональный контрол. Используется в составе групп и других компонентов.", + "props": { + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "onClick": { + "defaultValue": null, + "description": "Обработчик нажатия", + "name": "onClick", + "required": false, + "type": { + "name": "((event: MouseEvent, payload: { checked: boolean; name?: string | undefined; }) => void) | undefined" + } + }, + "size": { + "defaultValue": null, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | 32 | undefined" + } + }, + "view": { + "defaultValue": { + "value": "outlined" + }, + "description": "Стиль тега", + "name": "view", + "required": false, + "type": { + "name": "\"filled\" | \"outlined\" | \"transparent\" | undefined" + } + }, + "colors": { + "defaultValue": null, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "checked": { + "defaultValue": null, + "description": "Отображение кнопки в отмеченном (зажатом) состоянии", + "name": "checked", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "shape": { + "defaultValue": null, + "description": "Форма тега", + "name": "shape", + "required": false, + "type": { + "name": "\"rounded\" | \"rectangular\" | undefined" + } + }, + "allowBackdropBlur": { + "defaultValue": null, + "description": "Включает размытие фона для некоторых вариантов тега\n@description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.", + "name": "allowBackdropBlur", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "variant": { + "defaultValue": null, + "description": "@deprecated данный проп больше не используется, временно оставлен для обратной совместимости\nИспользуйте props shape и view\nВариант тега", + "name": "variant", + "required": false, + "type": { + "name": "\"default\" | \"alt\" | undefined" + } + }, + "childrenClassName": { + "defaultValue": null, + "description": "Дополнительный класс для обёртки children", + "name": "childrenClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "childrenRef": { + "defaultValue": null, + "description": "ref на children", + "name": "childrenRef", + "required": false, + "type": { + "name": "RefObject | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "defaultMatchMediaValue": { + "defaultValue": { + "value": "client === undefined ? undefined : client === 'desktop'" + }, + "description": "Значение по-умолчанию для хука useMatchMedia\n@deprecated Используйте client", + "name": "defaultMatchMediaValue", + "required": false, + "type": { + "name": "boolean | (() => boolean) | undefined" + } + } + }, + "demos": [ + { + "title": "Размеры", + "description": "Рекомендуется использовать 48, 40 и 32 размеры. Размеры 72, 64, 56 — не рекомендованы к использованию.", + "desktop": "render(() => {\nconst SIZES = [48, 40, 32];\n\nconst [checked, setChecked] = React.useState(\nObject.fromEntries(SIZES.map((key) => [key, false])),\n);\n\nreturn (\n\n\n{SIZES.map((size) => (\n
\n setChecked({ ...checked, [size]: !checked[size] })}\n>\nLabel\n\n
\n))}\n\n\n);\n});" + }, + { + "title": "Анатомия", + "description": "С помощью слотов `leftAddons` и `rightAddons` можно кастомизировать тэг.\nНапример, добавить иконку. Переданный контент будет отрисован слева или справа от текста тэга.", + "desktop": "render(() => {\nconst addon = (\n\n);\n\nconst amountAddon = (\n
\n\n
\n);\n\nreturn (\n\n\n
\nLabel\n
\n
\n\nLabel\n\n
\n
\n}>\nLabel\n\n
\n
\n\nLabel\n\n
\n\n\n);\n});", + "mobile": "render(() => {\nconst addon = (\n\n);\n\nconst amountAddon = (\n
\n\n
\n);\n\nreturn (\n\n\n
\nLabel\n
\n
\n\nLabel\n\n
\n\n
\n
\n}>\nLabel\n\n
\n
\n\nLabel\n\n
\n
\n\n);\n});" + }, + { + "title": "Состояния и стили", + "description": "У тега есть две опции, отвечающие за внешний вид:\n\n- shape (форма) — овальные или прямоугольные.\n- view (стиль) — залитые или бордерные.\n\nТег может находиться в активном и неактивном состоянии.\nВзаимодействие с тегом может быть ограничено с помощью свойства `disabled`.", + "desktop": "render(() => {\nconst [disabled, setDisabled] = React.useState(false);\n\nconst VIEWS = [\n{ key: 'outlinedRounded', view: 'outlined', shape: 'rounded' },\n{ key: 'filledRounded', view: 'filled', shape: 'rounded' },\n{ key: 'outlinedRectangular', view: 'outlined', shape: 'rectangular' },\n{ key: 'filledRectangular', view: 'filled', shape: 'rectangular' },\n];\n\nconst [checked, setChecked] = React.useState(\nObject.fromEntries(VIEWS.map((item) => [item.key, false])),\n);\n\nreturn (\n\n\n{VIEWS.map((item) => (\n
\n\nsetChecked({ ...checked, [item.key]: !checked[item.key] })\n}\n>\nLabel\n\n
\n))}\n\n\n\n\n setDisabled((prevState) => !prevState)}\nlabel='Disabled'\n/>\n\n);\n});", + "mobile": "render(() => {\nconst [disabled, setDisabled] = React.useState(false);\n\nconst ROUNDEDS = [\n{ key: 'outlinedRounded', view: 'outlined', shape: 'rounded' },\n{ key: 'filledRounded', view: 'filled', shape: 'rounded' },\n];\n\nconst RECTANGLES = [\n{ key: 'outlinedRectangular', view: 'outlined', shape: 'rectangular' },\n{ key: 'filledRectangular', view: 'filled', shape: 'rectangular' },\n];\nconst [checkedRounded, setCheckedRounded] = React.useState(\nObject.fromEntries(ROUNDEDS.map((item) => [item.key, false])),\n);\nconst [checkedRectangular, setCheckedRectangular] = React.useState(\nObject.fromEntries(ROUNDEDS.map((item) => [item.key, false])),\n);\n\nreturn (\n\n\n{ROUNDEDS.map((item) => (\n
\n\nsetCheckedRounded({\n...checkedRounded,\n[item.key]: !checkedRounded[item.key],\n})\n}\n>\nLabel\n\n
\n))}\n\n\n{RECTANGLES.map((item) => (\n
\n\nsetCheckedRectangular({\n...checkedRectangular,\n[item.key]: !checkedRectangular[item.key],\n})\n}\n>\nLabel\n\n
\n))}\n\n\n\n\n setDisabled((prevState) => !prevState)}\nlabel='Disabled'\n/>\n\n);\n});" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/text.json b/packages/mcp/src/data/v50.16.0/text.json new file mode 100644 index 0000000000..f48717b481 --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/text.json @@ -0,0 +1,127 @@ +{ + "packageName": "text", + "displayName": "Text", + "description": "Используется для отображения и форматирования текстового контента. Компонент поддерживает все доступные дизайнерам стили текста, но не поддерживает адаптивность.", + "props": { + "tag": { + "defaultValue": { + "value": "span" + }, + "description": "HTML тег", + "name": "tag", + "required": false, + "type": { + "name": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | undefined" + } + }, + "view": { + "defaultValue": { + "value": "paragraph-primary-medium" + }, + "description": "Cтиль типографики", + "name": "view", + "required": false, + "type": { + "name": "TypographyType | undefined" + } + }, + "align": { + "defaultValue": { + "value": "left" + }, + "description": "Выравнивание текста", + "name": "align", + "required": false, + "type": { + "name": "\"center\" | \"left\" | \"right\" | undefined" + } + }, + "color": { + "defaultValue": null, + "description": "Цвет текста", + "name": "color", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "textBackgroundColor": { + "defaultValue": null, + "description": "Цвет фона", + "name": "textBackgroundColor", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "rowLimit": { + "defaultValue": null, + "description": "Количество строк", + "name": "rowLimit", + "required": false, + "type": { + "name": "2 | 1 | 3 | undefined" + } + }, + "monospaceNumbers": { + "defaultValue": { + "value": false + }, + "description": "Делает цифры моноширинными", + "name": "monospaceNumbers", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "className": { + "defaultValue": null, + "description": "Дополнительный класс", + "name": "className", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "children": { + "defaultValue": null, + "description": "Дочерние элементы", + "name": "children", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + } + }, + "demos": [ + { + "title": "Стили текста", + "description": "Компоненту можно задать необходимый стиль текста.", + "desktop": "
\nHeadline-system-small\n\nParagraph-primary-medium\n
" + }, + { + "title": "Цвет текста и фона", + "description": "Тексту и фону под ним можно здать необходимый цвет.", + "desktop": "\nПример с покраской фона\n" + }, + { + "title": "Отсечение текста", + "description": "Можно настроить отсечение текста при переполнении одной, двух или трёх строк.", + "desktop": "
\n\nЯ взял со стола, как теперь помню, червонного туза и бросил кверху: дыхание у всех\nостановилось;\n\n
" + }, + { + "title": "Выравнивание", + "description": "", + "desktop": "
\n\nПо центру\n\n\n\nПо левому краю\n\n\n\nПо правому краю\n\n
" + } + ] +} \ No newline at end of file diff --git a/packages/mcp/src/data/v50.16.0/textarea.json b/packages/mcp/src/data/v50.16.0/textarea.json new file mode 100644 index 0000000000..fbe64618ac --- /dev/null +++ b/packages/mcp/src/data/v50.16.0/textarea.json @@ -0,0 +1,301 @@ +{ + "packageName": "textarea", + "displayName": "Textarea", + "description": "", + "props": { + "value": { + "defaultValue": null, + "description": "Значение поля ввода", + "name": "value", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "defaultValue": { + "defaultValue": null, + "description": "Начальное значение поля", + "name": "defaultValue", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "block": { + "defaultValue": { + "value": false + }, + "description": "Растягивает компонент на ширину контейнера", + "name": "block", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "size": { + "defaultValue": { + "value": 48 + }, + "description": "Размер компонента", + "name": "size", + "required": false, + "type": { + "name": "48 | 40 | 56 | 64 | 72 | undefined" + } + }, + "colors": { + "defaultValue": { + "value": "default" + }, + "description": "Набор цветов для компонента", + "name": "colors", + "required": false, + "type": { + "name": "\"default\" | \"inverted\" | undefined" + } + }, + "error": { + "defaultValue": null, + "description": "Отображение ошибки", + "name": "error", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "hint": { + "defaultValue": null, + "description": "Текст подсказки", + "name": "hint", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "label": { + "defaultValue": null, + "description": "Лейбл компонента", + "name": "label", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "labelView": { + "defaultValue": { + "value": "inner" + }, + "description": "Вид лейбла внутри / снаружи", + "name": "labelView", + "required": false, + "type": { + "name": "\"inner\" | \"outer\" | undefined" + } + }, + "leftAddons": { + "defaultValue": null, + "description": "Слот слева", + "name": "leftAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "rightAddons": { + "defaultValue": null, + "description": "Слот справа", + "name": "rightAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "bottomAddons": { + "defaultValue": null, + "description": "Слот под компонентом", + "name": "bottomAddons", + "required": false, + "type": { + "name": "ReactNode" + } + }, + "fieldClassName": { + "defaultValue": null, + "description": "Дополнительный класс для поля", + "name": "fieldClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "textareaClassName": { + "defaultValue": null, + "description": "Дополнительный класс textarea", + "name": "textareaClassName", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "autosize": { + "defaultValue": { + "value": true + }, + "description": "Управление возможностью подстраивать высоту компонента под высоту текста", + "name": "autosize", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "maxRows": { + "defaultValue": null, + "description": "Максимальное количество отображаемых строк (работает только вместе с autosize)", + "name": "maxRows", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "minRows": { + "defaultValue": null, + "description": "Минимальное количество отображаемых строк (работает только вместе c autosize)", + "name": "minRows", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "maxHeight": { + "defaultValue": null, + "description": "Максимальная высота элемента", + "name": "maxHeight", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "resize": { + "defaultValue": { + "value": "none" + }, + "description": "Управление возможностью изменения размеров компонента (не работает вместе c autosize)", + "name": "resize", + "required": false, + "type": { + "name": "\"none\" | \"vertical\" | undefined" + } + }, + "onChange": { + "defaultValue": null, + "description": "Обработчик ввода", + "name": "onChange", + "required": false, + "type": { + "name": "((event: ChangeEvent, payload: { value: string; }) => void) | undefined" + } + }, + "onHeightChange": { + "defaultValue": null, + "description": "Обработчик события изменения высоты компонента (работает только вместе c autosize)", + "name": "onHeightChange", + "required": false, + "type": { + "name": "((height?: number | undefined) => void) | undefined" + } + }, + "dataTestId": { + "defaultValue": null, + "description": "Идентификатор для систем автоматизированного тестирования.\nДля FormControl используется модификатор -form-control", + "name": "dataTestId", + "required": false, + "type": { + "name": "string | undefined" + } + }, + "showCounter": { + "defaultValue": { + "value": false + }, + "description": "Показывать счетчик введенных символов", + "name": "showCounter", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "getCounterText": { + "defaultValue": { + "value": "(textLength: number, maxLength = 0): string =>\n `${textLength}/${maxLength} символов`" + }, + "description": "Функция, возвращающая текст для счетчика", + "name": "getCounterText", + "required": false, + "type": { + "name": "((textLength: number, maxLength?: number | undefined) => string) | undefined" + } + }, + "nativeScrollbar": { + "defaultValue": null, + "description": "Нужно ли использовать нативный скроллбар.", + "name": "nativeScrollbar", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "allowOverflow": { + "defaultValue": { + "value": true + }, + "description": "Разрешить переполнение, если количество символов превышает maxLength", + "name": "allowOverflow", + "required": false, + "type": { + "name": "boolean | undefined" + } + }, + "breakpoint": { + "defaultValue": { + "value": "1024" + }, + "description": "Контрольная точка, с нее начинается desktop версия", + "name": "breakpoint", + "required": false, + "type": { + "name": "number | undefined" + } + }, + "client": { + "defaultValue": null, + "description": "Версия, которая будет использоваться при серверном рендеринге", + "name": "client", + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | undefined" + } + }, + "wrapperRef": { + "defaultValue": null, + "description": "Ref для обертки textarea", + "name": "wrapperRef", + "required": false, + "type": { + "name": "Ref | undefined" + } + } + }, + "demos": [ + { + "title": "Высота", + "description": "Для компонента можно задать одну из механик изменения высоты:\n\n1. Зафиксировать минимальное и максимальное количество строк.\n2. Задать максимальную высоту.\n3. Сделать изменение высоты автоматическим.\n4. Предоставить пользователю возможность управлять высотой самостоятельно.", + "desktop": "const OPTIONS = [\n{ key: '1', content: 'Нет' },\n{ key: '2', content: 'Внутри' },\n{ key: '3', content: 'Снаружи' },\n];\nrender(() => {\nconst [selected, setSelected] = React.useState(OPTIONS[1]);\nconst handleChange = ({ selected }) => {\nif (selected) {\nsetSelected(selected);\n}\n};\nconst visibleLabel = selected.key !== '1';\nconst positionLabel = visibleLabel && selected.key !== '2' ? 'outer' : 'inner';\nreturn (\n
\n\n\n\n\n\n\n\n
\n);\n});", + "mobile": "const OPTIONS = [\n{ key: '1', content: 'Нет' },\n{ key: '2', content: 'Внутри' },\n{ key: '3', content: 'Снаружи' },\n];\nrender(() => {\nconst [selected, setSelected] = React.useState(OPTIONS[1]);\nconst handleChange = ({ selected }) => {\nif (selected) {\nsetSelected(selected);\n}\n};\nconst visibleLabel = selected.key !== '1';\nconst positionLabel = visibleLabel && selected.key !== '2' ? 'outer' : 'inner';\nreturn (\n
\n\n\n\n\n\n\n\n
\n);\n});" + }, + { + "title": "Максимальное количество символов", + "description": "Можно ограничить количество вводимых символов.", + "desktop": "
\n