Показываю самый простой и эффективный способ создания этой базовой инфраструктурной штуки. А выбрал я эту тему для начала по банальной причине: эта штука может сэкономить месяцы разработки.Вот одна показательная история из моего опыта:Нужно было сделать билдер процессов. Что важно: это была подработка, и я не мог потратить на него слишком много времени.Если сделать карту мне помогла библа (https://github.com/projectstorm/react-diagrams). Кстати, не советую её брать — крайне сложная, хотя и гибкая шо пипец
То вот с формами, которые окрываются по клику на каждый блок, встала большая проблема. Их должно было быть 40+ разных штук. Меня вообще не впирало сидеть и делать 40 форм. Плюс я понимал, что эти блоки — точка расширения. И если делать руками формы, то меня будут трясти по этому проекту всю жизнь.И, проанализировав формы, оказалось, что среди них повторяются всего где-то 7 полей.
(Текстовые поля, селекты с поиском, редактор условий, массив с другими полями и еще несколько)В общем, я решил сделать, чтобы конфиг форм приходил с бека, а я подготовлю всего 7 полей и уйду в туман. После часов 40 разработки на mui — билдер был готов. Я сделал в storybook, показал бекеру всё и пошёл отдыхать При визуально большой сложности, проект я разработал достаточно быстро. На самом деле, заказчик прифигел от того, как всё неожиданно дешево повернулось.Более того, проект, хоть им активно и пользовались, не требовал правок на фронте где-то год!!!
Бекеры просто копипастили конфиги форм и вносили небольшие правки. В моём опыте были ещё случаи, когда простое решение — создать билдер, экономило тонну времени, но это самый показательный пример