iDeals Solutions - небольшая галера с ЧСВ процессингом

Здравствуйте, ебаная Редакция! Я как и большинство разработчиков постоянно получаю входящие вакансии и предложения в линкеде, как правило сразу содержащие полное описание вакансии и попытку затянуть меня в процессинг на какое-нить собеседование (просто HR или техническое или еще какое-то).

Но тут одни ребята отличились и после пары-тройки стандартных сообщений прислали:
«компания заинтересовалась Вами и попросила сразу передать Вам тестовое задание)
на выполнение 3-4 дня».

И я уже было подумал что они сбросили какую-то дичь, которую я по их мнению должен пилить на празднико-выходных и выслать в течении тех самых 4 дней (что в принципе уже зашквар), но потом открыл его:

Необходимо разработать просмотрщик JSON, который бы выводил контент в виде дерева аналогично тому, как показываются структуры данных в Devtools
Дерево должно выглядеть следующим образом

Узлы-коллекции (array|object) могут отображаться в двух состояниях — свернутом и развернутом (корневой узел развернут всегда). Состояния переключаются по клику на треугольной стрелке слева от узла. При разворачивании раскрывается только сам узел. При сворачивании узла также сворачиваются все его развернутые подузлы.
В свернутом состоянии выводится ограниченный дайджест коллекции (не более трех элементов, далее — … ), также перед элементами массива не указываются индексы, поскольку в этом случае они очевидны. При уровне вложенности больше трех вместо дайджеста элемента выводится …
В развернутом состоянии индексы массивов показываются всегда, аналогично ключам объектов. Для развернутых узлов их дайджесты не выводятся, вместо них обозначения { … } и [ … ].
Счетчик выводится перед каждой коллекцией размером больше 1 элемента.
Атомарные узлы подсвечиваются разными цветами в зависимости от типа. Строки также обрамляются кавычками. Ключи объектов выводятся без кавычек, курсивом.
Поскольку строки могут быть очень длинными, то при их отображении есть несколько ограничений:
● в дайджесте выводится максимум 10 символов, если строка длиннее, то к ним добавляется … , чтобы намекнуть пользователю на большее
● размер блока для вывода строки не может превышать 400px * 200px, если контент не помещается, используется скроллинг
Просмотрщик должен быть написан таким образом, чтобы работать в качестве независимого компонента в разных сценариях с разными источниками данных. Однако для целей задания json-контент будет загружаться через перетаскивание соответствующего файла на вкладку приложения

Приложение без данных показывает Ready for JSON… или аналогичную жизнеутверждающую надпись на белом фоне, надпись Drop file… с затемнением должна появляться, если приложение обнаружит, что пользователь тащит ему свежий файл.
При перетаскивании нового файла на приложение с уже загруженным контентом его состояние сбрасывается, чтобы продемонстрировать новое дерево.
В случае ошибки при парсинге внизу должно выводиться сообщение. Желающие продемонстрировать особый шик могут показать в нем проблемный участок файла.

Дополнительные условия и примечания:
1. Задание должно быть выполнено на чистом React, без использования библиотек управления состоянием (Redux, MobX, RxJS и т.п.) и готовых компонентов. К счастью, они тут не особо нужны.
2. Можно и нужно использовать create-react-app, react-custom-scrollbars, react-dropzone или их аналоги
3. Можно использовать любой метод задания стилей
4. Кое-какие константы для стилей:

Это построение JSON дерева со всей визуальщиной, вложенностями, свистелко-перделками и даже генерацией юзер-френдли ошибок в консоли О_О, и его реально по-хорошему нужно пилить чуть ли не неделю (если конечно не скачивать готовые решения коих чуть больше чем дохуя).

По итогу мы имеем умников, насмотревшихся на процессинг эпла и гугла,
«забывших» при этом самим стать эплом или гуглом.