Datepicker

app/lib.ts

@@ -30,16 +30,20 @@ export { SubmitButton } from '../src/components/forms/context/SubmitButton/Submi
 
 // Forms > Controls
 export { Checkbox } from '../src/components/forms/controls/Checkbox/Checkbox.tsx';
+export { DatePicker } from '../src/components/forms/controls/DatePicker/DatePicker.tsx';
+export { DatePickerRange } from '../src/components/forms/controls/DatePicker/DatePickerRange.tsx';
 export { Input } from '../src/components/forms/controls/Input/Input.tsx';
 export { Radio } from '../src/components/forms/controls/Radio/Radio.tsx';
 export { SegmentedControl } from '../src/components/forms/controls/SegmentedControl/SegmentedControl.tsx';
 export { Select } from '../src/components/forms/controls/Select/Select.tsx';
 export { Switch } from '../src/components/forms/controls/Switch/Switch.tsx';
+export { TimePicker } from '../src/components/forms/controls/TimePicker/TimePicker.tsx';
 
 // Forms > Fields
 export { CheckboxField } from '../src/components/forms/fields/CheckboxField/CheckboxField.tsx';
 export { CheckboxGroup } from '../src/components/forms/fields/CheckboxGroup/CheckboxGroup.tsx';
 export { InputField } from '../src/components/forms/fields/InputField/InputField.tsx';
+export { InputFieldWithTags } from '../src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.tsx';
 export { RadioField } from '../src/components/forms/fields/RadioField/RadioField.tsx';
 export { RadioGroup } from '../src/components/forms/fields/RadioGroup/RadioGroup.tsx';
 

package.json

@@ -104,7 +104,8 @@
     "react-toastify": "^10.0.6",
     "effect": "^3.11.3",
     "react-hook-form": "^7.54.0",
-    "optics-ts": "^2.4.1"
+    "optics-ts": "^2.4.1",
+    "react-datepicker": "^7.5.0"
   },
   "peerDependencies": {
     "react": ">= 19.0.0",
@@ -119,6 +120,10 @@
     "@storybook/icons": {
       "react": "$react",
       "react-dom": "$react-dom"
+    },
+    "react-datepicker": {
+      "react": "$react",
+      "react-dom": "$react-dom"
     }
   }
 }

package.json.js

@@ -155,6 +155,7 @@ const packageConfig = {
     'react-hook-form': '^7.54.0',
 
     'optics-ts': '^2.4.1',
+    "react-datepicker": "^7.5.0",
   },
   peerDependencies: {
     'react': '>= 19.0.0',
@@ -172,6 +173,11 @@ const packageConfig = {
       'react': '$react',
       'react-dom': '$react-dom',
     },
+    // Issue: https://github.com/Hacker0x01/react-datepicker/issues/5273
+    'react-datepicker': {
+      'react': '$react',
+      'react-dom': '$react-dom',
+    },
   },
 };
 

src/components/forms/controls/DatePicker/DatePicker.module.scss

@@ -0,0 +1,213 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../../styling/defs.scss' as bk;
+
+// TODO: copied manually from old Baklava, where should we put this?
+$z-index-date-picker: 100;
+
+// DATEPICKER override react-datepicker styles
+// Note: Sass do not support using suffixes (i.e. &__suffix) when using global selector
+:global(.react-datepicker-popper) {
+  z-index: $z-index-date-picker;
+}
+
+:global(.react-datepicker) {
+  width: 284px;
+  text-align: center;
+  padding: 22px 26px 30px;
+  background-color: bk.$theme-card-background-default;
+  border-radius: 6px;
+  border: 1px solid bk.$theme-card-border-default;
+  font-family: bk.$font-family-body;
+  font-size: bk.$font-size-m;
+  font-weight: bk.$font-weight-regular;
+}
+
+:global(.react-datepicker__triangle),
+:global(.react-datepicker__triangle::before) {
+  display: none;
+}
+
+:global(.react-datepicker__header) {
+  background: transparent;
+  border: 0;
+  color: #081353; // TODO hardcoded color
+  font-family: bk.$font-family-display;
+  font-weight: bk.$font-weight-regular;
+}
+
+:global(.react-datepicker__month-container) {
+  display: inline-block;
+  width: 100%;
+  float: none;
+}
+
+:global(.react-datepicker__current-month) {
+  color: bk.$theme-text-heading-default;
+  font-family: bk.$font-family-display;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: bk.$font-weight-semibold;
+  text-transform: uppercase;
+}
+
+:global(.react-datepicker__navigation) {
+  position: absolute;
+  width: 3rem;
+  border: none;
+  text-indent: -999em;
+  mask: url('../../../../assets/icons/caret-down.svg') no-repeat center center;
+  mask-size: 32px;
+  background: bk.$theme-date-picker-text-default;
+  top: 1.8rem;
+}
+$navigation-distance: 1rem;
+:global(.react-datepicker__navigation--previous) {
+  left: $navigation-distance;
+  transform: rotate(90deg);
+}
+:global(.react-datepicker__navigation--next) {
+  right: $navigation-distance;
+  transform: rotate(-90deg);
+}
+:global(.react-datepicker__navigation:hover) {
+  opacity: 0.7;
+}
+:global(.react-datepicker__navigation-icon) {
+  // original icon
+  display: none;
+}
+
+:global(.react-datepicker__day-names) {
+  border-bottom: 0.1rem solid bk.$theme-date-picker-rule-default;
+}
+
+:global(.react-datepicker__day-name),
+:global(.react-datepicker__day) {
+  display: inline-block;
+  width: 30px;
+  line-height: 30px;
+  margin: 5px 0;
+  color: bk.$theme-date-picker-text-default;
+}
+
+:global(.react-datepicker__day--today) {
+  font-weight: bk.$font-weight-semibold;
+}
+
+:global(.react-datepicker__day--outside-month),
+:global(.react-datepicker__day--disabled) {
+  color: bk.$theme-date-picker-text-disabled;
+}
+
+:global(.react-datepicker__day--outside-month.react-datepicker__day--disabled) {
+  color: bk.$theme-date-picker-text-unavailable;
+}
+
+:global(.react-datepicker__day--selected),
+:global(.react-datepicker__day--keyboard-selected) {
+  background: bk.$theme-date-picker-background-selected;
+  border-radius: bk.$border-radius-circle;
+  color: bk.$theme-date-picker-text-selected;
+}
+
+:global(.react-datepicker__day:not([aria-disabled="true"]):hover),
+:global(.react-datepicker__day--selected:not([aria-disabled="true"]):hover),
+:global(.react-datepicker__day--keyboard-selected:not([aria-disabled="true"]):hover) {
+  background: bk.$theme-date-picker-background-hover;
+  border-radius: bk.$border-radius-circle;
+  color: bk.$theme-date-picker-text-hover;
+}
+
+:global(.react-datepicker__day--in-range),
+:global(.react-datepicker__day--in-selecting-range:not(
+  .react-datepicker__month-text--in-range,
+  .react-datepicker__quarter-text--in-range,
+  .react-datepicker__year-text--in-range
+)) {
+  background: bk.$theme-date-picker-background-selected;
+  border-radius: 0;
+  color: bk.$theme-date-picker-text-selected;
+}
+:global(.react-datepicker__day--in-range:not([aria-disabled="true"]):hover),
+:global(.react-datepicker__day--in-selecting-range:not([aria-disabled="true"]):hover) {
+  background: bk.$theme-date-picker-background-hover;
+  border-radius: 0;
+  color: bk.$theme-date-picker-text-hover;
+}
+
+:global(.react-datepicker__day--range-start),
+:global(.react-datepicker__day--selecting-range-start),
+:global(.react-datepicker__day--range-start:not([aria-disabled="true"]):hover) {
+  border-radius: bk.$border-radius-circle 0 0 bk.$border-radius-circle;
+}
+
+:global(.react-datepicker__day--range-end),
+:global(.react-datepicker__day--selecting-range-end),
+:global(.react-datepicker__day--range-end:not([aria-disabled="true"]):hover) {
+  border-radius: 0 bk.$border-radius-circle bk.$border-radius-circle 0;
+}
+
+:global(.react-datepicker__day--range-start.react-datepicker__day--range-end),
+:global(.react-datepicker__day--range-start.react-datepicker__day--range-end:not([aria-disabled="true"]):hover) {
+  border-radius: bk.$border-radius-circle;
+}
+
+/* stylelint-disable-next-line */
+:global(.react-datepicker__day:not(&--selected):hover) {
+  background: rgba(bk.$color-blueberry-500, 0.5); // TODO use proper variable
+  border-radius: 50%;
+}
+
+:global(.react-datepicker-popper[data-placement^="bottom"]) {
+  margin-top: 0;
+}
+
+:global(.react-datepicker-popper[data-placement^="top"]) {
+  margin-bottom: 0;
+}
+
+:global(.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range)),
+:global(.react-datepicker__month--selecting-range .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range)) {
+  background: transparent;
+  background-color: transparent;
+  border-radius: 0;
+  color: bk.$theme-date-picker-text-default;
+}
+
+:global(.react-datepicker__input-container .react-datepicker__calendar-icon) {
+  width: 14px;
+  height: 14px;
+  bottom: 4px;
+}
+
+:global(.react-datepicker__view-calendar-icon input) {
+  padding: 6px 10px 0 25px;
+}
+
+@layer baklava.components {
+  $caret-width: 18px;
+
+  .bk-datepicker {
+    @include bk.component-base(bk-datepicker);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-right: -$caret-width;
+  }
+
+  .bk-datepicker--input {
+    width: 121px;
+    color: bk.$theme-form-text-default;
+  }
+
+  .bk-datepicker--caret {
+    width: $caret-width;
+    height: $caret-width;
+    position: relative;
+    left: -$caret-width;
+    top: -1px;
+  }
+}