[ui] Datepicker (#508)

* [ui] Datepicker: initial commit

* [ui] Datepicker: add flatpickr

* [ui] Datepicker: remove react-datepicker, add react-flatpickr

* [ui] Datepicker: add some props, comments

* [ui] Datepicker: add more props, add commented out option for custom input

* [ui] Datepicker: add some styles

* [ui| Datepicker: render label, add more styles

* [ui] Datepicker: add more props

* [ui] Datepicker: add vaslidation-related props and stories

* [ui] Datepicker: more props

* [ui] Datepicker: handle Id prop or autogenerate id

* [ui] Datepicker: add some basic tests

* [ui] Datepicker: add more tests

* [ui] Datepicker: add more handlers, add Clear button

* [ui] Datepicker: Clarify a story

* [ui] Datepicker: render valid and invalid icons, add tests for icons

* [ui] Datepicker: add Flatpickr options defaults

* commented out problematic / tobe discussed props
* TODO: merge explicitly exposed props with options object.

* [ui] Datepicker: remove TODO

* [ui] Datepicker: use explciti options, add some stories

* WIP: expose config option keys as explicit props, overwrite corresponding keys in option object if passed individually
* add with time, two-months, multiple mode, range mode  stories
* in mulitple and range mode, the date is not yet correctly displayed (or stored in state?) yet

* [ui] Datepicker: remove obsolete prop

* [ui] Datepicker: allow direct input

* [ui] Datepicker: add minDate, maxdate

* [ui] Datepicker: add 24hr time, week numbers, seconds

* [ui] Datepicker: Add shorthand current month option

* also add missing PropType for `showMonths` prop

* [ui] Datepicker: add monthSelectorType prop

* [ui] Datepicker: chnage date handling to make range and multiple modes work

the state now always holds an object with a `date` key

* [ui] Datepicker: add `cunjunction` prop

* [ui] Datepicker: fix const name, story controls

* [ui] Datepicker:  add static(Position) prop, options proptypes

* [ui] Datepicker: fix rnage and multiple modes, improve proptypes

* [ui] Datepicker: add TODO calendar icon

* [ui] Datepicker: add hourIncrement prop, show seconds in stories

* [ui] Datepicker: disable story control

* [ui] Datepicker: add disable, enable, locale props

* [ui] Datepicker: update TODOs

* [ui] Datepicker: add some more tests

* [ui] Datepicker: add some more tests, update comments

* [ui] Datepicker: add more story descriptions

* [ui] Datepicker: add defaultDate prop

* [ui] Datepicker: add `ariaDateFormat` prop

* [ui] Datepicker: add `defaultHour`, `defaultMinute` props

* [ui] Datepicker: add `inline`, `noCalendar`  props

* [ui] Datepicker: remove unsopported options, add `allowInvalidPreload` prop

* Actively remove all keys Flatpickr accepts in an options object that we can not or do not want to support
* add `allowInvalidPreload` prop

* [ui] Datepicker: add `position` prop

* [ui] Datepicker: remove comment

* [ui] datepicker: add some comments, add PropTypes for `position` in config object

* [ui] Datepicker: cleanup, formatting

* [ui] Datepicker: cleanup, add comments

* [ui] Datepicker: add `data-mode` attribute

* [ui] Datepicker: add some tests, test stubs

* [ui] Datepicker: add a test, fix a test

* [ui] Datepicker: add `minuteIncrement` prop, story

* [ui] Datepicker: add more tests

* [ui] Datepicker: add more tests

* [ui] Datepicker: filter out `locale` key from config object if not explicitly set

* [ui] Datepicker: add test for timepicker only

* [ui] Datepicker: add `name` prop

* [ui] Datepicker: add `defaultValue` prop for consistency, test updating value

* [ui] Datepicker, Icon: add `CalendarToday` icon, add icon to Datepicker

* [ui] Datepicker: add event handler tests

* [ui] Datepicker: remove `onFocus` for now

* [ui] Datepicker: fix test description

* [ui] Datepicker: export compponent

* [ui] Datepicker: WIP: use styles from scss file

* [ui] Datepicker: add more styles

* [ui] Datepicker: cleanup options before setting ours, fix defaultValue propType

* [ui] DateTimePicker: WIP: add DateTimePicker component

* [ui] DateTimePicker: WIP: add more props

* [ui] DateTimePicker: WIP: add more props

* [ui] DateTimePicker: improve efficiency

Make sure updates of props that require creatign a new flatpickr instance are run only when absoletely necessary, and only once per update, even if multiple of these props were changed.

* [ui] DateTimePicker: add monthSelectorType prop

* [ui] DateTimePicker: remove onValueUpdate prop, add onBlur handler

* [ui] DateTimePicker: add state variable for the selected date

track the currently selected date in our own state to use it for functionality in our scope, however the actually displayed date in the datepicker is handled by flatpickr, we just make sure it is correctly updated when changed

* [ui] DateTimePicker: show clock icon when time picker, add first test

* [ui] DateTimePicker: onBlur, onFocus receive date and dateStr as parameters

* [ui] DateTimePicker: add first test

* [ui] Datepicker: add some tests

* [ui] DateTimePicker: render all props, add width prop, render data-mode attribute

* [ui] DateTimePicker: add ariaDateFormat prop, tests

* [ui] DateTimePicker: add more tests

* [ui] DateTimePicker: add label, required, styles

* [ui] DateTimePicker: add onClear prop, prop descriptions

* [ui] DateTimePicker: create a new flatpickr instance when showMonths is changed

* [ui] Datepicker: add more stories

* [ui] DateTimePicker: remove previous versions of a date picker

* [ui] DateTimePicker: add styles WIP, add locale prop, fix some proptypes

* [ui] DateTimePicker: add useEffect for `disable`

* [ui] DateTimePicker: update stories

* [ui] DateTimePicker: fix typo

* [ui] DateTimePicker: add more story descriptions

* [ui] DateTimePicker: add more stories

* [ui] DateTimePicker: remove obsolete

* [ui] DateTimePicker: remove console.logs

* ignore Nova config

* [ui] DateTimePicker: add comment

* [ui] DateTimePicker: add more tests

* [ui] remove react-flatpickr from dependencies

* [ui] bump version to 2.12.0

* [ui] DateTimePicker: remove comment

.gitignore

@@ -35,3 +35,4 @@ npm-debug.log*
 
 /e2e/cypress/videos
 /e2e/cypress/screenshots
+/.nova

libs/juno-ui-components/lib/variables.scss

@@ -392,6 +392,10 @@ $dark-theme-color-map: (
   --color-topnavigation-item-active: var(--color-black);
   --color-topnavigation-item-bg: var(--color-sap-grey-1);
   --color-topnavigation-item-active-bg: var(--color-sap-grey-3);
+
+  // DT Datepicker
+  --color-datepicker-calendar-bg: var(--color-background-lvl-1);
+
 }
 
 /* ----- LIGHT THEME END -----*/
@@ -610,6 +614,8 @@ $dark-theme-color-map: (
   --color-topnavigation-item-active: var(--color-white);
   --color-topnavigation-item-bg: var(--color-juno-grey-blue-7);
   --color-topnavigation-item-active-bg: var(--color-juno-grey-blue-2);
+  // DT Datepicker
+  --color-datepicker-calendar-bg: var(--color-background-lvl-1);
 }
 
 /* ----- DARK THEME END ----- */

libs/juno-ui-components/package.json

@@ -5,7 +5,7 @@
   "module": "build/index.js",
   "source": "src/index.js",
   "style": "build/lib/variables.css",
-  "version": "2.11.2",
+  "version": "2.12.0",
   "files": [
     "src/colors.css",
     "tailwind.config.js"
@@ -80,7 +80,8 @@
   "peerDependencies": {
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "flatpickr": "^4.6.13"
   },
   "scripts": {
     "storybook": "storybook dev -p $APP_PORT --ci --no-open",