Миграция с Radix

Многие наши компоненты построены на базе Base UI, который предлагает отличный от Radix UI подход к API. Это руководство поможет вам перенести существующие компоненты.

Глобальные изменения

От asChild к render

В Radix UI (и shadcn/ui) для композиции компонентов используется проп asChild. В Oracul DS (через Base UI) мы используем проп render.

Copy- <DialogTrigger asChild>
-   <Button>Открыть</Button>
- </DialogTrigger>
+ <DialogTrigger render={<Button />}>
+   Открыть
+ </DialogTrigger>

Изменения в компонентах

Accordion

Чек-лист:

• Замените asChild → render в AccordionTrigger.
• type="single" теперь является поведением по умолчанию в Base UI.

Dialog / Sheet / Drawer

Чек-лист:

• Замените asChild → render в триггерах.
• Используйте DialogPopup (или SheetPopup, DrawerPopup) вместо Content.
• Оригинальные экспорты *Content сохранены для обратной совместимости.

Select

Чек-лист:

• В Oracul DS используется паттерн "items-first". Передавайте массив items в корневой компонент Select.
• Используйте SelectItem внутри функции-рендерера.

Tabs

Чек-лист:

• Используйте TabsTab (вместо TabsTrigger).
• Используйте TabsPanel (вместо TabsContent).

Toast

API значительно отличается от Sonner. Мы рекомендуем ознакомиться с документацией Base UI Toast перед миграцией. Основное отличие — использование ToastProvider в качестве обертки в layout.tsx вместо простого добавления компонента <Toaster />.

Проверка после миграции

После переноса компонентов выполните быструю проверку:

• Запустите проверку типов (typecheck) для выявления несовпадений имен пропов.
• Проверьте работу с клавиатуры (открытие/закрытие, навигация).
• Убедитесь в наличии доступных имен (aria-label) для кнопок без текста.
• Проверьте работу форм и корректность отображения выбранных значений.