vadimshidlov-date-picker

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

About the library

Date picker library, that can help you to add calendar with date input in you project. You can change functionality of the calendar using various decorators with class DecoratorService or without it, only with HOC's.

Installation

For the library to work correctly you need:

• install the styled-components package via npm or yarn:

npm install styled-components

yarn add styled-components

• install the package via npm or yarn:

npm install @vadimshidlov/modsen-date-picker

yarn add @vadimshidlov/modsen-date-picker

Usage

import ReactDOM from "react-dom/client";
import {
  DecoratorService,
  withHolidays,
  withMinMaxDate,
  withRange,
  withWeekMode,
  withWeekSunday,
  DatePicker,
} from "vadimshidlov-date-picker";

const root = ReactDOM.createRoot(document.getElementById("root"));

const calendarService = new DecoratorService();

const holidaysList = [{date: new Date(2024, 03, 8), title: "Women's day"}];
const minDate = new Date(2024, 03, 1);
const maxDate = new Date(2028, 03, 31);


calendarService.addDecorator(withHolidays(holidaysList));
calendarService.addDecorator(withMinMaxDate(minDate, maxDate));
calendarService.addDecorator(withWeekends);
calendarService.addDecorator(withRange);
calendarService.addDecorator(withWeekMode);


const DatePickerWithHocs = calendarService.getDatePicker();

const renderApp = () => {
  root.render(
    <>
      <DatePickerWithHocs />
    </>,
  );
};

renderApp();

You can use this package without HOC's:

import ReactDOM from "react-dom/client";
import {
  DatePicker,
} from "vadimshidlov-date-picker";

const root = ReactDOM.createRoot(document.getElementById("root"));

const holidaysList = [{date: new Date(2024, 03, 8), title: "Women's day"}];
const minDate = new Date(2024, 03, 1);
const maxDate = new Date(2028, 03, 31);

const renderApp = () => {
  root.render(
    <>
      <DatePicker
              minDate={minDate}
              maxDate={maxDate}
              withHolidays
              holidaysList={holidaysList}
              withRange={false}
              weekStartsOnSunday={false}
              weekMode={false}
      />
    </>,
  );
};

renderApp();

Содержание

• Техническое задание
• Используемые технологии
• Структура проекта
• Тестирование
• Как начать
• Полезные ссылки

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

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

Для react native

Will be soon...

Структура проекта

Структура проекта

Тестирование

Реализовать e2e тестирование c полным покрытием функционала приложения:

• Сервис для конфигурации DatePicker-компонента;
• Графическое (компонент модуля и т.д.).

Полезные ссылки

React

Rollup

Storybook

Eslint

Babel

Тестирование Jest

Styled-components

Husky