Migration guide (RU)
Что произошло?
Мы сделали критичные изменения, которые затронули все компоненты. Многие компоненты не изменили свой API, но изменилась их внутренняя реализация.
Вот краткий список того, что произошло:
- Мы изменили создание компонентов, теперь они создаются через пакет @semcore/core;
- Мы отказались от встроенного CSS in JS;
- Мы перевели наши стили на новый синтаксис;
- Мы изменили работу с темами;
- Мы сделали API более лаконичным 😎
Дальше будет подробный гайд по обновлению компонентов и инфраструктуры. Мы советуем обновлять все компоненты разом, чтобы уменьшить общий вес сборки.
Если вы встретились с изменениями, которые тут не описаны, или вы не поняли описания, напишите нам, пожалуйста, и мы попытаемся это исправить 🙏
CSS-extract
Ранее для отделения css
от js
было необходимо добавить в ваш сборщик наш плагин @semcore/babel-plugin-react-semcore.
В новых версиях мы отказались от babel плагина в пользу webpack-loader
'a, т.к. это позволяет существенно оптимизировать процесс сборки.
Подробнее о реализации разделения css от js можно узнать в разделе For production.
Server side Render
Ранее компоненты нашей библиотеки использовали 2 механизма вставки стилей на страницу. В новой версии мы отказались от библиотеки для динамических стилей, что решает проблемы с порядком подключения стилей и уменьшает головную боль.
Подробнее о реализации SSR можно узнать в разделе For production.
Themes
Ранее темы разрабатывались командой UI-kit и поставлялись вместе с нашими компонентами, в виде дополнительного css
-файла.
В новой версии мы отказались от такой модели поставки и решили отдать разработку тем командам, которым они нужны.
Common
-
Для всех новых компонентов требуется
peer-dependency
, установите егоnpm install @semcore/core
. -
Все компоненты теперь возвращают DOM-node, если вы использовали instance компонента, обратитесь к нам.
onChange handler
Ранее в наших компонентах handler onChange
везде выглядел по-разному. Где-то возвращался value
из внутреннего стейта, где-то SyntheticEvent
.
В новой версии мы приняли решение унифицировать хэндлер для всех компонентов, теперь он выглядит так:
type ChangeEvent = (
value: ComponentValueType,
event?: React.SyntheticEvent<unknown>,
) => void | boolean;
Первым аргументом возвращается value
, вторым, если это возможно, event
.
Child components as static method
Практически у каждого нашего компонента есть дочерние компоненты, являющиеся static методом родителя.
import Button from '@semcore/ui/button';
export default () => (
<Button>
{' '}
{/* 'Root'-компонент */}
<Button.Addon>Icon</Button.Addon> {/* 'Child'-компонент */}
<Button.Text>Text</Button.Text> {/* 'Child'-компонент */}
</Button>
);
В новой версии, вставляя дочерний компонент, вы не сможете переопределять его render
с помощью рендер-функций.
Render-functions
Следующее изменение коснулось рендер-функций. Ранее в рендер-функции приходили весь контекст компонента, который включал в себя:
- props компонента
- prop-getter функции child-компонентов, возвращающие
props
для корректной работы этого child-компонента - ф-ции для управления внутренним состоянием компонента
<Select>
{(context) => {
const {
size, // св-во 'size' Select'a
getTriggerProps, // prop-getter функция триггера Select'a
changeVisible, // ф-ция для изменения видимости выпадашки Select'a
} = context;
}}
</Select>
Мы немного изменили эту логику вынеся ф-ции управления внутренним состоянием компонента во второй аргумент и назвав их по имени property
, которым они управляют.
<Select>
{(props, handlers) => {
const { size } = props;
const {
visible, // ф-ция изменения видимости выпадашки Select'a
value, // ф-ция изменения value Select'a
} = handlers;
}}
</Select>
Components
Далее список изменений каждого из обновленных компонентов:
Paint
Данный компонент теперь устарел, вместо него используйте функции из утилит от v3.12.0
Пример использования в Design tokens.
UI
Данный компонент теперь устарел, вместо него используйте Box
.
MenuList
Данный компонент теперь устарел, вместо него используйте DropdownMenu
.
RootRef
Данный компонент теперь устарел, вместо него используйте нативный ref
.
FlexBox
npm i @semcore/flex-box
- Свойство
css
, позволяющая делать CSS IN JS с помощью nano-css теперь является устаревшим. Добавлена частичная обратная совместимость с помощью передачи стилей на нативный style, но конструкции видаcss={':hover': {}'}
не будут работать. - Убран экспорт по умолчанию, используйте именованный
import {Box, Flex} from "@semcore/flex-box";
.
Typography
npm i @semcore/typography
- Убрали свойство
interactive
с компонентаText
FormatText
npm i @semcore/format-text
- Изменилась верстка
<li/>
, теперь это неflex
.
Input, InputNumber, InputMask, Radio, Checkbox, Switch
npm i @semcore/input @semcore/input-number @semcore/input-mask @semcore/radio
@semcore/checkbox
@semcore/switch
- Изменились аргументы
onChange
, теперь возвращается(value, event)
.
Pills/TabPanel/TabLine
npm i @semcore/pills @semcore/tab-panel @semcore/tab-line
- Убрали поддержку свойства
getSelected
дляPills
иPills.Item
- Убрали поддержку свойства
trigger
дляPills.Item
Popper
npm i @semcore/popper
- Поднята версия popperJS с v1 до v2.
- У свойство
modifiers
изменилось API согласно Popper v2. - Функция
getTriggerProps/getPopperProps
доступны только на рутовомPopper
, теперьTrigger/Popper
определяются черезtag
. - ObserveResize триггера и поппера пока не доступно(
Tooltip
npm i @semcore/tooltip
- Свойство
closeIcon
удалено, реализация крестика теперь будет за разработчиками.
DropdownMenu
npm i @semcore/dropdown-menu
- Компоненты
Menu
иList
поменялись местами 🤷♂️.
Select
npm i @semcore/select
- Убран именованный экспорт
{ Trigger }
. Его можно достать изimport { ButtonTrigger } from "@semcore/base-trigger"
ScrollArea
npm i @semcore/scroll-area
- Убрано свойство
theme
у<ScrollArea.Bar.Slider/>
- Убрано свойство
eventEmitter
у<ScrollArea/>
, вместо него появилось свойствоcontainer
иinner
в которые можно передать ссылки на dom node. - Убрано свойство
eventEmitter
у<ScrollArea.Bar/>
, вместо него появилось свойствоcontainer
в которое можно передать ссылку на dom node.
Modal
npm i @semcore/modal
<Modal.Close/>
теперь вставляется по умолчанию
DatePicker
npm i @semcore/date-picker
- При передаче в
Trigger
функции, первым аргументом не приходит текущая выбранная дата((value) => {}
), её можно взять из объекта({ value }) => {}
- При передаче в
Title
функции, первым аргументом не приходит текущая отображаемая дата и месяц ((date, month ) => {}
), её можно взять из объекта({ displayPeriod }) => {}
- При передаче в
Calendar
функции, первым аргументом не приходит массив дней((days ) => {}
), его можно взять из объекта({ days }) => {}
- Свойство
periods
больше не принимает false, используйте пустой массив []. - Свойство
onHighlighted
переименовался вonHighlightedChange
- Убран экспорт
Calendar
Flags
npm i @semcore/flags
- Убрали поддержку свойства
name
, используйтеiso2
илиiso3
Breadcrumbs
npm i @semcore/breadcrumbs
- Убрали поддержку свойства
disableSeparator
дляBreadcrumbs.Item
NeighborLocation
npm i @semcore/neighbor-location
- Изменился алгоритм применения
Item
. Теперь он работает только с компонентами созданными с помощью@semcore/core
. Пример можно посмотреть на странице компонента.
InputTags
npm i @semcore/input-tags
- Добавлено свойство
<InputTag.Tag/>
, его стоит использовать вместо обычного<Tag />
для правильной расстановки отступов.
Chart
npm i @semcore/input-tags
- Обновлена версия recharts до 1.8.5
- Обновлена версия @types/recharts до 1.8.13
- Исправлено отображение
Tooltip
вVennChart
- Исправлен проброс
defaultProps
в ф-ции копирования графиков - Убраны статичные методы
Skeleton
у компонентовAreaChart
,BarChart
,HistogramChart
,LineChart
,PieChart
,VennChart
, используйте преднастроенные скелетоны из пакета@react-secmore/skeleton
Accordion
npm i @semcore/accordion
Table
npm i @semcore/table
- Перенесли
Scroll.Bar
внутрьTable.StickyHead
, теперь не надо его передавать
ProjectCreate
npm i @semcore/project-create
- В событии
onSubmit
прикоходят поля как они есть, без присваиванияname = url
еслиname
пуст - Обновили дефолтную фукнцию валидации
validate
, теперь она не пропускает кирилицу @### NoticeBubble
npm i @semcore/notice-bubble
NoticeBubble
- это теперь не просто View-компонент, а JSX-представление нотиса, подписывающийся на жизненный цикл компонента и вызывает соответствующие методы менеджера (NoticeBubbleManager)- Переименовали
type="default"
вtype="info"
дляNoticeBubble