Separates out modifiers from DateRangePicker class and into a DayPickerRangeController class

[majapw]

Hey @moonboots! I made you a present.

We can use this in place of #145. I think this should pull out all non-input/open and close related logic from DateRangePicker and into a wrapper for the DayPicker. Ultimately, we will want to add some documentation for this as well because I think this is something that people have been looking for (a no-input version of the DRP that is also visible). It may also be worthwhile to create a wrapper for the DateRangePickerInput as well that handles all the onChange and onFocus logic, which would leave the DateRangePicker to just be the wiring between the datepicker and the inputs (and would allow folks like @moonboots to more easily override that interaction with their own components).

I think this name is actually bad though because maybe this is the DayPicker wrapper specifically with the range modifiers. There should probably be a different DayPicker wrapper that contains all the single date modifiers. Do y'all have thoughts on a better name? I didn't think DayPickerInstrumented was particularly clear either.

This shouldn't break any current behavior, but we will additionally export this new component with the package.

to: @ljharb @airbnb/webinfra

From the related PR for inputs:

The general idea is that I want to change the structure of the DateRangePicker (and eventually the SingleDatePicker as well) to this:

The motivation behind this is to increase the compose-ability of the library. We have seen a lot of instances where a user might want to swap out the input styles, or might want the DayPicker with all of the styles and rules that we default to in range, but different visibility rules.

As a result, the following will become true:

• DateRangePicker strictly controls the interactions between the inputs and the picker, ie when to show and hide the picker according to a default standard of rules
• DateRangePickerInputWithHandlers (god I cannot name shit for my life) controls any date verification, focus change, and keyboard input logic as related to the inputs.
• DateRangePickerInput renders the inputs to the page with the appropriate styles and has styles applied if you were to pass in a different focus state as a prop. It also has callback for user interaction, but ultimately is a fully controlled component.
• DayPickerWithModifiers contains state for hovering as well as logic for what to do when you click on a start date after an end date, and other date selection scenarios. It contains a modifiers object that applies styles accordingly. Most importantly, it does not contain callbacks for user interactions on the CalendarDay objects.
• DayPicker is a vanilla version of the calendar that renders it to the page, but has no styles or callbacks or state hooked up. It takes in all of these as props and allow you to roll your own implementation basically.

One advantage of this set-up is that it allows us to do the following if you want:

Basically, if you want to add any sort of panel or more information to the DayPicker you can. You can create your own custom show/hide logic, insert your own inputs easily, always show the DayPicker if you want and so on.

P.S. I could really use some help in naming these components.

[coveralls]

Coverage increased (+0.5%) to 86.787% when pulling 5dc3d8f on maja-add-DayPickerWithModifiers into 9ca8a0a on master.

[coveralls]

Coverage increased (+0.4%) to 86.727% when pulling d515eb4 on maja-add-DayPickerWithModifiers into 9ca8a0a on master.

[lencioni]

@majapw can you add a little context on why you are making this change?

[moonboots]

@lencioni, Maja and I have been chatting about how to generalize the current coupling of input/DayPicker. The immediate use case is adding a bottomPanel to DayPicker, which I proposed injecting with a new prop but could be accomplished more generally by separating the two components. Another UI this would allow is using just the DayPicker calendars directly without a triggering input.

[majapw]

@lencioni I added a little bit to the description here with the motivation for this change.

[coveralls]

Coverage increased (+0.6%) to 87.04% when pulling 0d9a410 on maja-add-DayPickerWithModifiers into 283beb6 on master.

[coveralls]

Coverage increased (+0.6%) to 87.04% when pulling 153686f on maja-add-DayPickerWithModifiers into 283beb6 on master.

[coveralls]

Coverage increased (+0.6%) to 87.04% when pulling 1984a74 on maja-add-DayPickerWithModifiers into 283beb6 on master.