date-picker-drm

v1.0.1

Published

a year ago

0High
0Medium
0Low

d_rmnv

Tестовое задание библиотека Modsen DatePicker

Содержание

Техническое задание

Необходимо реализовать библиотеку Javascript - DatePicker, для работы с различными видами календаря. Цель состоит в том, чтобы создать базовую библиотеку, которую можно настраивать и расширять.

Необходимый функционал:

Просмотр календаря;
Выбор диапазона для календаря;
Дефолтный календарь с заранее установленным диапазоном;
Возможность выбора начала недели(с понедельника или воскресенья);
Выбор вида календаря (по неделям, месяцам и т.д.);
Реализовать возможность при клике на определенный день добавлять список задач и сохранять их в localStorage;
Возможность переключения на предыдущий(ую)/следующий(ую) неделю/месяц/год;
Возможность выбора максимальной даты календаря;
Возможность выбора минимальной даты для календаря;
Возможность скрывать/показывать выходные дни и выделять праздничные дни другим цветом;
Возможность перейти в календаре на введенную пользователем дату;
Возможность прокидывать определенную дату для установки даты и наоборот, использовать в приложении дату, которую ввел пользователь;
Стилизация календаря.

Пример графического представления:

Ссылка на макет: Макет "DatePicker".

Также проект предполагает:

Придерживаться требований по написанию и организации кода react приложения. Ссылка на требования: Требования к тестовому заданию;
Разделить библиотеку на два основных компонента: представления и логики. Для реализации логики приложения необходимо использовать порождающий паттерн программирования "Декоратор", который позволяет динамически добавлять объектам новую функциональность, оборачивая их в полезные «обёртки» (см. подробнее паттерн Декоратор). При помощи паттерна создать сервисный класс, в котором вы будете задавать конфигурацию и создавать календарь;
Собрать проект с нуля (с настройками всех конфигов: rollup, eslint, prettier, husky);
Настроить конфигурации babel, eslint, prettier, husky, commitlint;
Настроить CI/CD, используя GitHub Actions;
Подключить и настроить бандлер Rollup для сборки проекта в библиотеку;
Публикация библиотеки на npm для использования в нескольких проектах;
Подключение и настроика Storybook для проверки работоспособности библиотеки;
Для демонстрации работы библиотеки, необходимо использовать Chromatic;
Добавить обработку ошибок через паттерн Error Boundaries;
Добавить проверку типов в React компонентах, передаваемых параметров и подобных объектов;
Использовать алиасы для импортирования файлов;
Покрытие тестами всего приложения (интеграционное тестирование и unit-тестирование);
В конечном итоге необходимо библотеку использовать в любом другом тестовом проекте для демонстрации работы библиотеки;
Тестовый проект необходимо развернуть на хостинге (heroku, vercel);
Нельзя использовать какие-либо сторонние библиотеки.

Используемые технологии

Для react

node.js - программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код);
babel - транспайлер, преобразующий код из одного стандарта в другой;
eslint - линтер для JavaScript кода;
prettier - инструмент для автоформатирования кода;
husky - современное решение для управления Git хуками;
commitlint - инструмент, который проверяет сообщения commit-ов на соответствие общепринятым стандартам их описаний;
yarn - менеджер пакетов;
rollup - сборщик ES-модулей;
storybook - инструмент, используемый для разработки компонентов пользовательского интерфейса в изоляции;
react - JavaScript-библиотека для создания пользовательских интерфейсов;
typescript - строго типизированный язык для уменьшения количества потенциальных багов;
styled-components - система стилизации react компонентов;
jest — фреймворк для unit-тестирование;
react testing library — библиотека для интеграционного тестирования.