date-picker-library-shklyar

v1.3.1

Published

2 years ago

Date picker library

0High
0Medium
0Low

fyodor_shklyar

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

О библиотеке

Данная библиотека позволяет добавить поле для выбора даты (date picker) с календарем в Ваше приложение. Функциональность календаря выполнена с помощью паттерна "Декоратор", позволяющего динамически добавлять компоненту необходимый функционал.

Функционал приложения включает в себя возможность отображения стандартного календаря, возможность включить отображение выходных и праздничных дней, выбрать воскресенье или понеделник в качестве первого дня недели, добавить список задач на день (список будет сохранен в локальном хранилище). Также имется возможность выбрать поле для ввода диапазона дат (range picker).

Есть возможность выбора даты с использованием ввода даты в input-поле, с помощью интерсактивного календаря, а также возможность установления максимальной и минимальной даты.

Установка

Для корректной работы библиотеки вам нужно установить библиотеки styled-components и react.

npm install styled-components

После этого необходимо установить эту библиотеку.

npm install date-picker-library-shklyar

Использование

Для создания компонента календаря импортируйте ClaendarManager. Создайте экземпляр календаря с помощью команды const calendar = new ClaendarManager();. Для добавления функционала календарю используйте метод addDecorator([название-декоратора]) на экземпляре календаря.

Список декораторов:

withWeekends - добавляет выделение цветом выходных дней
withHolidays - добавляет выделение цветом праздничных дней
withSundayFirst- первым днем недели становится воскресенье
withTodos - добавляет возможность добавлять задачи для определенного дня (используйте только с обычным Date picker).

После добавления нужных декораторов используйте метод getCalendar() на экземпляре календаря, чтобы получить созданный компонент.

Импортируйте компонент DatePicker или RangePicker. В качестве пропсов передайте в него созданный компонент календаря (CalendarView), а также (при необходимости) минимальную (minDate) и максимальную (maxDate) даты (тип данных Date).

Формат записи: <DatePicker CalendarView={CreatedCalendar} minDate={minDate} maxDate={maxDate}/>

Содержание

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

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

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

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

Дополнительный функционал:

Развернуть приложение на хостинге (heroku, vercel);
Настроить CI/CD, используя GitHub Actions;
Собрать проект с нуля(с настройками всех конфигов: rollup, eslint, prettier, husky).

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

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

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

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

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

Для react

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