Разработка универсальной формы на React.JS и Bootstrap
Задача: необходимо разработать набор связанных компонентов, используя библиотеки React.js и Twitter Bootstrap, отображающие произвольные формы ввода данных.
Структура формы описывается в формате JSON, пример будет приведен ниже.
Форма - это контейнер полей и других контейнеров. Контейнеры, которые используются внутри формы, также могут содержать один и более списка полей/контейнеров. Таким образом, структура формы это дерево состоящее из полей и контейнеров.
Поля- это элементы ввода данных, участвующие в формировании данных формы.
Контейнеры содержат поля и другие контейнеры, предназначенные для визуального/логического оформления формы.
Подробности структуры должны стать понятными из комментариев в самом JSON формате (вложения base_structs.pdf и form_struct_v1.pdf)
Применение:
- Форма отображается пользователю, проверяет, форматирует введенные данные, сообщает об ошибках.
- Форма может быть отправлена обработчику на сервер (это взаимодействие нужно согласовать по удобству протокола).
- Форма может быть использована без отправки на сервер, т.е. другим компонентом или приложением. Для этого нужно предусмотреть удобное использование в коде, нужные callback и т.д. (можно согласовать отдельно).
- Поля формы могут быть использованы отдельно от формы для формирования интерфейсов навигации, фильтрации, как элементы ввода данных.
- Сервер в динамическом варианте может отправить клиенту форму, описанную в нашем JSON формате, а клиент должен её отобразить и корректно выполнить взаимодействие с пользователем.
- Использование формы на мобильном устройстве и на десктопе (адаптивность).
- На одной странице может быть использовано несколько форм одновременно.
- Исходники полей и контейнеров могут и будут находиться в разных файлах.
Код в git репозитории (данные для доступа будут предоставлены), красиво оформленный, снабженный достаточными комментариями на русском языке (кол-во комментариев регулируется здравым смыслом).
Также должны быть предоставлены все необходимые демонстрации.
Для сборки демонстрационного проекта необходимо предоставить все скрипты и документацию по запуску сборки. Документация уровня “для умелого админа“.
Для сборки предположительно использование npm и gulp, но это обсуждаемо.
Красивое оформление кода и демонстраций приветствуется.
Демонстрация результата:
- Интерфейс теста JSON формата всей формы. Слева большое поле ввода для исходника формы, справа отображается готовая форма. Создание формы из JSON можно сделать по кнопке. В форме для тестирования корректности ввода данных должна быть кнопка “Отправить”.
- Интерфейс тестирования создания отдельных полей. Аналогичен первому варианту, только вводим JSON исходник отдельного поля.