feat(): Add new <DateRangePicker> component

[sashachabin]

<DateRangePicker>

Привет! Сделал компонент для выбора периода <DateRangePicker>

Документация

• Компонент состоит из двух <DateInput> и одного общего <Calendar> с диапазоном:
  • <DateRangePicker.Start /> — начало периода, настройки как у <DateInput>
  • <DateRangePicker.End /> — конец периода, настройки как у <DateInput>
  • <DateRangePicker.Separator /> — разделитель
• В календаре диапазон рисуется через <Calendar renderDay={...} />. Проп renderDay так же доступен для настройки в DateRangePicker. Например, можно собрать календарь с ценами
• Опциональные периоды. Добавлены кнопки «Без первой даты», «Без второй даты»
• Поддержка всех пропо <DatePicker />. Например, enableTodayLink, useMobileNativeDatePicker , onMonthChange
• По аналогии с DatePicker добавлен метод для валидации DatePickerRange.validate(startValue, endValue, {options}). В отдельном PR пример работы с библиотекой валидаций
• Тёмная тема
• Мобильная версия
• Доступность. По умолчанию настроены aria-group и aria-label для полей и правки в DateInput
• Локали. Наследуются значения DatePicker с добавлением нескольких новых (опциональные периоды и доступность)

---

Предыдущее API для работы со значениями (устарело после обсуждений)

Работа со значениями

Важная особенность компонента — он не только состоит из нескольких частей, но и в нём сразу 2 input. В процессе разработки выработал 2 принципа:

1. Все значения задаются парами (так сделано в самых популярных библиотеках — ant.design и mui):
   • Период задается в формате value={['dd.mm.yyyy', 'dd.mm.yyyy']} (формат настраивается)
   • Пропы optional, warning, error задаются в формате [true, false]
2. Внутри children подразумевается только кастомизация оберток и <DateInput> без работы со значениями

Ссылки

IF-87 — там ссылки на дизайн, референсы и фидбек от разных команд

Чек-лист перед запросом ревью

1. Добавлены тесты на все изменения
   ✅ unit-тесты для логики
   ✅ скриншоты для верстки и кросс-браузерности
   ⬜ нерелевантно

2. Добавлена (обновлена) документация
   ✅ styleguidist для пропов и примеров использования компонентов
   ✅ jsdoc для утилит и хелперов
   ✅ комментарии для неочевидных мест в коде
   ✅ прочие инструкции (README.md, contributing.md и др.)
   ⬜ нерелевантно

3. Изменения корректно типизированы
   ✅ без использования any (см. PR 2856)
   ⬜ нерелевантно

4. Прочее
   ✅ все тесты и линтеры на CI проходят
   ✅ в коде нет лишних изменений**
   ✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)

[zhzz]

Пока посмотрел только часть, без тестов и мобильного вида.

По поведению заметил такую особенность. Если maxDate меньше выбранной даты в инпуте, то при фокусе на нем Календарь покажет месяц, отличный от того, что выбран. И может быть сложно доскролить до выбранной даты, если она далеко, т.к. выпадашки месяца и года отключены.

Оригинальный DatePicker в этом плане отличается, показывая выбранный месяц.

Так и задумано? Не успел еще со всей аналитикой ознакомиться.

---

@sashachabin: всё так, это ошибка — поправил!