Completed test challenge for review

[agmitron]

В этом PR были доработаны UI/UX перемещения предметов, работа с помощью клавиатуры и мобильная версия.

Чтобы запустить проект, пришлось обновить зависимости для Stylelint, поскольку в последних версиях перестало поддерживаться правило function-calc-no-invalid, присутствовавшее в установленных пресетах.

Также добавлена поддержка клавиатуры. Список шорткатов:

• N - открывает окно добавления предмета (также пометил в UI)
• X - удаляет предметы из Cargo Hold (также пометил в UI)
• Tab смещает фокус между карточками. Порядок фокуса у карточек слева направо. У кнопок порядок фокуса следующий: Add new Cargo, Clear All, Launch. Чтобы переключить фокус с кнопок на первую карточку, нужно его снять с помощью Escape и нажать ↓.
• ←, →, ↑, ↓ смещают фокус между карточками. ↓ выделяет первую карточку, если нет фокуса на кнопках Add new Cargo, Clear All, Launch и ни на одной из карточек.
• Enter перемещает выбранную карточку в соседний столбец
• Escape убирает фокус или закрывает попап, если он открыт.

Для переключения фокуса с помощью Tab я осознанно сделал положительные tabindex, что обычно считается плохой практикой. На мой взгляд, в данном случае это допустимо, потому что нужно было задать порядок фокуса карточек слева-направо, а не сверху-вниз.

Демо-видео:

• Десктоп, работа с клавиатуры
• Мобильная версия

Полный список изменений:

1. Состояние загрузки компонентов (скелетон)
2. Промежуточные состояния компонентов (hover, active, focus, disabled)
3. Вертикальный скролл появляется на странице сразу же при рендере (а не только при появлении карточек, как раньше). Экран перестал дёргаться при появлении карточек, и пользователь сразу понимает, что ему предстоит скроллить.
4. Добавил информацию о наполненности Cargo Hold в шапку. При скролле юзер будет всегда понимать, сколько места еще осталось и насколько ценен груз.
5. На каждой карточке появилась кнопка перемещения в соседний столбец.
6. Карточки, добавление которых превысит допустимый вес, добавить нельзя - кнопка добавления на этих карточках будет блокироваться.
7. На мобильной версии остаётся один столбец, и его можно переключать кнопками-фильтрами, которые появляются только на мобильной версии.
8. Попап добавления нового предмета с валидацией и состоянием загрузки (при отправке формы).
9. Уведомления (ошибки или успех) выводятся в Snackbar слева снизу.
10. Если данные для дашборда по какой-то причине не загружаются, то пользователь увидит ошибку слева снизу и на экране будет выведено сообщение.
11. Добавлена кнопка Launch - она зафиксирована справа внизу.