Данная библиотека позволяет добавить календарь в Ваше приложение. Функциональность календаря выполнена с помощью паттерна "Декоратор", позволяющего динамически добавлять компоненту необходимый функционал.
Функционал приложения включает в себя возможность отображения дефолтного календаря, возможность включить отображение выходных и праздничных дней, выбрать воскресенье или понеделник в качестве первого дня недели, добавить список задач на день, который будет сохранен в локальном хранилище, а также возможность использовать Range Picker для выбора диапазона значений календаря.
Есть возможность выбора даты вручную либо с использованием ввода даты в input, а также возможность установления максимальной и минимальной даты.
Для корректной работы библиотеки вам нужно установить библиотеки styled-components и react.
yarn add styled-components
npm install styled-components
После этого необходимо установить эту библиотеку.
yarn add modsen-calendar-datepicker-library
npm install modsen-calendar-datepicker-library
- Техническое задание
- Используемые технологии
- Структура проекта
- Тестирование
- Как начать
- Полезные ссылки
Необходимо реализовать библиотеку Javascript - DatePicker, для работы с различными видами календаря. Цель состоит в том, чтобы создать базовую библиотеку, которую можно настраивать и расширять.
- Просмотр календаря;
- Выбор диапазона для календаря;
- Дефолтный календарь с заранее установленным диапазоном;
- Возможность выбора начала недели(с понедельника или воскресенья);
- Выбор вида календаря (по неделям, месяцам и т.д.);
- Реализовать возможность при клике на определенный день добавлять список задач и сохранять их в localStorage;
- Возможность переключения на предыдущий(ую)/следующий(ую) неделю/месяц/год;
- Возможность выбора максимальной даты календаря;
- Возможность выбора минимальной даты для календаря;
- Возможность скрывать/показывать выходные дни и выделять праздничные дни другим цветом;
- Возможность перейти в календаре на введенную пользователем дату;
- Стилизация календаря.
- Развернуть приложение на хостинге (heroku, vercel);
- Настроить CI/CD, используя GitHub Actions;
- Собрать проект с нуля(с настройками всех конфигов: rollup, eslint, prettier, husky).
Ссылка на макет: Макет "DatePicker".
-
Придерживаться требований по написанию и организации кода react приложения. Ссылка на требования: Требования к тестовому заданию;
-
Разделить библиотеку на два основных компонента: представления и логики. Для реализации логики приложения необходимо использовать порождающий паттерн программирования "Декоратор", который позволяет динамически добавлять объектам новую функциональность, оборачивая их в полезные «обёртки» (см. подробнее паттерн Декоратор). При помощи паттерна создать сервисный класс, в котором вы будете задавать конфигурацию и создавать календарь;
-
Настроить конфигурации babel, eslint, prettier;
-
Подключить и настроить бандлер Rollup для сборки проекта в библиотеку;
-
Подключить и настроить Storybook для проверки работоспособности вашей библиотеки;
-
Добавить обработку ошибок через паттерн Error Boundaries;
-
Добавить проверку типов в React компонентах, передаваемых параметров и подобных объектов;
-
Использовать алиасы для импортирования файлов;
-
В приложении допускается использование языка typescript;
-
Нельзя использовать какие-либо сторонние библиотеки.
- node.js - программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код);
- babel - транспайлер, преобразующий код из одного стандарта в другой;
- eslint - линтер для JavaScript кода;
- yarn - менеджер пакетов;
- rollup - сборщик ES-модулей;
- storybook - инструмент, используемый для разработки компонентов пользовательского интерфейса в изоляции;
- react - JavaScript-библиотека для создания пользовательских интерфейсов;
- prop-types - набор валидаторов, которые могут быть использованы для проверки получаемых данных;
- styled-components - система стилизации react компонентов;
- jest — интеграционное тестирование (rtl) + unit-тестирование.
Will be soon...
Реализовать e2e тестирование c полным покрытием функционала приложения:
- Сервис для конфигурации DatePicker-компонента;
- Графическое (компонент модуля и т.д.).