(fix): ui-toolkit - Calendar functionality and styling

[rohangupta-groww]

What does this PR do?

1. Added date active, disabled and hover states.2
2. Bounded calendar to min and max values
3. Removed un-necessary elements and redundant code.
4. Fixed disabled state in case of hover
5. Added onMonthClick | onDateClickvalidation
6. Extended props from MonthCalendar to DateCalendar
7. Added highlightCurrentDate prop to show the current date
8. Navigation bar has proper disabled state greyed-out in both calendar
9. Changed type prop from string to DATE | MONTH with fallback to DATE
10. Added missing key prop in several places to fix un-necessary re-renders.

These fixes were made specifically to address issues with calendar component across web_apps like

1. Active states are not visible or shown, In second SS even though the above range selector shows the current date but that isn't present everywhere.

2. We are able to navigate across the max | min date value and shows pointer even on disabled state

After:

Notes:

1. There is no validation when max < min, Could have thrown an error if __DEV__ ?
2. Storybook has an issue to validate types properly in controls, refer 4th image in After
3. Props for both MonthCalendar and DateCalendar are now same, however there is no breaking change as props have been extended to additional functionality.
4. highlightCurrentDate prop is true by default and will highlight the current value, Could be false?
5. Have moved utils outside as compareDate function was needed in both
6. Earlier active state was conditionally improperly https://github.com/Groww/webster/blob/37221681d7bb7e9552a5e5d52d27137868caa29a/packages/ui-toolkit/src/components/molecules/Calendar/DateCalendar/index.tsx#L146 this will never work until a re-render is triggered, currently onDateClick doesn't update any state so no re-render will trigger and active states won't be marked
   https://github.com/Groww/webster/blob/37221681d7bb7e9552a5e5d52d27137868caa29a/packages/ui-toolkit/src/components/molecules/Calendar/DateCalendar/index.tsx#L217-L233
   To solve this selectedDate: Date | null; was added in React State which is used in calendar dates and will trigger a re-render to mark the new selection date.
7. An assumption was made for highlightCurrentDate an already existing color --green300 has been set and for selected date --green500

What packages have been affected by this PR?

• ui-toolkit

Types of changes

What types of changes does your code introduce to this project?

Put an x in the boxes that apply

• Bugfix (non-breaking change which fixes an issue)

• New feature (non-breaking change which adds functionality)

• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Package version increase in any of the packages?

• ui-toolkit -> 0.4.6

Checklist before merging

Put an x in the boxes that apply

• These changes have been thoroughly tested.

• Changes need to be immediately published on npm.

[Amit-Groww]

discussed few minor changes