npm package: @fy5tew/modsen-datepicker-library
Description: Modsen DatePicker Library
Author: Fy5tew
Latest version: 1.0.0

# Tестовое задание библиотека Modsen DatePicker

## Содержание

- [Техническое задание](#Техническое-задание)
- [Используемые технологии](#Используемые-технологии)
- [Структура проекта](#Структура-проекта)
- [Тестирование](#Тестирование)
- [Как начать](#Как-начать)
- [Полезные ссылки](#Полезные-ссылки)

## Техническое задание

Необходимо реализовать библиотеку Javascript - **_DatePicker_**, для работы с
различными видами календаря. Цель состоит в том, чтобы создать базовую
библиотеку, которую можно настраивать и расширять.

#### Необходимый функционал:

- Просмотр календаря;
- Выбор диапазона для календаря;
- Дефолтный календарь с заранее установленным диапазоном;
- Возможность выбора начала недели(с понедельника или воскресенья);
- Выбор вида календаря (по неделям, месяцам и т.д.);
- Реализовать возможность при клике на определенный день добавлять список задач
  и сохранять их в localStorage;
- Возможность переключения на предыдущий(ую)/следующий(ую) неделю/месяц/год;
- Возможность выбора максимальной даты календаря;
- Возможность выбора минимальной даты для календаря;
- Возможность скрывать/показывать выходные дни и выделять праздничные дни другим
  цветом;
- Возможность перейти в календаре на введенную пользователем дату;
- Возможность прокидывать определенную дату для установки даты и наоборот,
  использовать в приложении дату, которую ввел пользователь;
- Стилизация календаря.

#### Пример графического представления:

Ссылка на макет:
[Макет "DatePicker"](https://www.figma.com/file/PGg4P38QaPjUzasxC2GSkv/Modsen-Datepicker?node-id=0%3A1&t=dWZj8oM41qBje0bv-0).

#### Также проект предполагает:

- Придерживаться требований по написанию и организации кода react приложения.
  Ссылка на требования:
  [Требования к тестовому заданию](https://github.com/annaprystavka/requirements);

- Разделить библиотеку на два основных компонента: представления и логики. Для
  реализации логики приложения необходимо использовать порождающий паттерн
  программирования **_"Декоратор"_**, который позволяет динамически добавлять
  объектам новую функциональность, оборачивая их в полезные «обёртки» (см.
  подробнее
  [паттерн Декоратор](https://refactoring.guru/ru/design-patterns/decorator)).
  При помощи паттерна создать сервисный класс, в котором вы будете задавать
  конфигурацию и создавать календарь;

- Собрать проект с нуля (с настройками всех конфигов: 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_** — библиотека для интеграционного тестирования.

### Для react native

Will be soon...

## Структура проекта

[Структура проекта](https://github.com/mkrivel/structure)

## Тестирование

Реализовать unit-тестирование и интеграницонное тестирование c полным покрытием
функционала приложения:

- Сервис для конфигурации DatePicker-компонента;
- Графическое (компонент модуля и т.д.).

## Полезные ссылки

[React](https://react.dev/reference/react)

[Rollup](https://rollupjs.org/guide/en/)

[NPM publish package](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages)

[Chromatic](https://www.chromatic.com/storybook)

[Storybook](https://storybook.js.org/docs/basics/introduction/)

[Eslint](https://eslint.org/docs/user-guide/configuring)

[Babel](https://babeljs.io/docs/en/configuration)

[Тестирование Jest](https://jestjs.io/ru/docs/getting-started)

[Тестирование React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)

[Styled-components](https://www.styled-components.com/docs)

[GitHub Actions](https://github.com/features/actions)

[Husky](https://dev.to/ivadyhabimana/setup-eslint-prettier-and-husky-in-a-node-project-a-step-by-step-guide-946)

[Commitlint](https://github.com/conventional-changelog/commitlint)