datepicker-library-savchikoff

v1.0.9

Published

2 months ago

Datepicker library with different variations of calendar

Downloads

0High
0Medium
0Low

savchikoff

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

Описание и гайд по использованию

Данная библиотека — это кастомный календарь с возможностью выбора как одиночной даты, так и диапазона дат. Кроме этого, имеются дополнительные варианты отображение календаря: с выделением выходных дней, праздников, с возможностью добавления списка дел на конкретный день, а также с измененным началом недели (с Понедельника). Данные случаи реализованы с использованием паттерна «Декоратор», который добавляет новую функциональность на базовый календарь. Реализована возможность использования нескольких декораторов.

P.S. декоратор withTodos не может быть использован с компонентом DatePickerWithRange

Гайд

Для работоспособности библиотеки необходимо установить библиотеку styled-components, а также в вашем приложении должен быть установлен react и react-dom с версиями >= 16.8.0

npm install styled-components

Чтобы начать добавление календаря в ваш проект, необходимо импортировать CalendarService и создать экземпляр данного класса, после чего на нем можно использовать различные вариации декораторов с помощью метода addDecorator. Все возможные варианты декораторов:

withTodos - добавляет возможность добавления списка задач на конкретный день. Если день не выбран, выдается ошибка.
withWeekends - позволяет выделять выходные дни в каждом месяце года.
withHolidays - выделяет праздничные дни в 2024 году.
withMondayFirst - изменяет первый день недели каждого месяца на понедельник.

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

Далее созданный компонент можно использовать в одном из вариантов (DatePicker и DateRangePicker) и передавать его в качестве пропса CalendarType. Кроме этого можно задать минимальную и максимальную дату, но обязательно указывать обе и в формате Date.

Пример использования

import './App.css'

import { calendar, DatePicker, withWeekends, withHolidays, DatePickerWithRange } from 'datepicker-library-savchikoff';

calendar.addDecorator(withWeekends);
calendar.addDecorator(withHolidays);
const Calendar = calendar.getCalendar();

function App() {

  return (
    <>
      <DatePickerWithRange CalendarType={Calendar} />
    </>
  )
}

export default App

Содержание

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

Необходимо реализовать библиотеку 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-тестирование.