Code Review fixes + linting

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

@@ -5,18 +5,18 @@
 @use '../../../../styling/defs.scss' as bk;
 
 // TODO: copied manually from old Baklava, where should we put this?
-$z-index--date-picker: 100;
+$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;
+  z-index: $z-index-date-picker;
 }
 
 :global(.react-datepicker) {
   width: 284px;
   text-align: center;
-  padding: 22px 26px 30px 26px;
+  padding: 22px 26px 30px;
   background-color: bk.$theme-card-background-default;
   border-radius: 6px;
   border: 1px solid bk.$theme-card-border-default;
@@ -55,13 +55,9 @@ $z-index--date-picker: 100;
 
 :global(.react-datepicker__navigation) {
   position: absolute;
-  top: 3.3rem;
   width: 3rem;
   border: none;
   text-indent: -999em;
-}
-
-:global(.react-datepicker__navigation) {
   mask: url('../../../../assets/icons/caret-down.svg') no-repeat center center;
   mask-size: 32px;
   background: bk.$theme-date-picker-text-default;
@@ -117,9 +113,9 @@ $navigation-distance: 1rem;
   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) {
+: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;
@@ -135,31 +131,31 @@ $navigation-distance: 1rem;
   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) {
+: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) {
+: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) {
+: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) {
+:global(.react-datepicker__day--range-start.react-datepicker__day--range-end:not([aria-disabled="true"]):hover) {
   border-radius: bk.$border-radius-circle;
 }
 
-:global(.react-datepicker__day:not(&--selected):hover) {
+:global(.react-datepicker__day:not(.react-datepicker__day--selected):hover) {
   background: rgba(bk.$color-blueberry-500, 0.5); // TODO use proper variable
   border-radius: 50%;
 }

src/components/forms/controls/DatePicker/DatePicker.tsx

@@ -13,25 +13,20 @@ import 'react-datepicker/dist/react-datepicker.css';
 import cl from './DatePicker.module.scss';
 
 
-// TODO: eventually move this to a separate file, as this tends to be repeated on every component?
 type GenericProps = {
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
 
   /** An optional class name to be appended to the class list. */
   className?: undefined | ClassNameArgument,
-}
-
-// copying props from react-datepicker and restricting them to specific versions
-// TODO: I would like to reuse this on DatePickerRange.tsx, how can I reuse it there without exporting it?
-type GenericReactDatePickerOmittedProps = Omit<ComponentProps<typeof ReactDatePicker>, 'onChange'>;
+};
 
-type ReactDatePickerProps = GenericReactDatePickerOmittedProps & {
+type ReactDatePickerProps = Omit<ComponentProps<typeof ReactDatePicker>, 'onChange'> & {
   // Note: need to disable the following features in order to use `ReactDatePicker` as a plain date picker.
   selectsRange?: never,
   selectsMultiple?: never,
   showMonthYearDropdown?: never,
-  onChange?: undefined | ((date: Date | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void),
+  onChange: ((date: Date | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void),
 };
 
 export type DatePickerProps = GenericProps & ReactDatePickerProps;
@@ -43,23 +38,17 @@ export const DatePicker = (props: DatePickerProps) => {
     ...propsRest
   } = props;
 
-  const onChangeDefault = React.useCallback(() => {}, []);
-
   return (
     <div className={cx(
       'bk',
       { [cl['bk-datepicker']]: !unstyled },
       className,
     )}>
       <ReactDatePicker
-        className={cx(
-          //cl['bk-date-picker__date'],
-        )}
         dateFormat="MM/dd/yyyy"
         placeholderText="MM/DD/YYYY"
         customInput={<Input />}
         {...propsRest}
-        onChange={props.onChange ?? onChangeDefault}
       />
     </div>
   );

src/components/forms/controls/DatePicker/DatePickerRange.stories.tsx

@@ -26,8 +26,7 @@ export default {
   ],
 } satisfies Meta<DatePickerRangeArgs>;
 
-export const DatePickerRangeStory: Story = {
-  name: 'Date Picker with Dates Range',
+export const Standard: Story = {
   render: (args) => {
     const [startDate, setStartDate] = React.useState(new Date());
     const [endDate, setEndDate] = React.useState(new Date());

src/components/forms/controls/DatePicker/DatePickerRange.tsx

@@ -13,37 +13,25 @@ import cl from './DatePicker.module.scss';
 import { Input } from '../Input/Input.tsx';
 
 
-// TODO: eventually move this to a separate file, as this tends to be repeated on every component?
 type GenericProps = {
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
 
   /** An optional class name to be appended to the class list. */
   className?: ClassNameArgument,
-}
-
-// copying props from react-datepicker and restricting them to specific versions
-// TODO: I would like to reuse this from DatePicker.tsx, how can I reuse it from there without exporting it?
-// Or maybe the solution is to define all variants from the same file?
-type GenericReactDatePickerOmittedProps = Omit<ComponentProps<typeof ReactDatePicker>, 'selectsRange' | 'selectsMultiple' | 'onChange'>;
+};
 
-type ReactDatePickerRangeProps = GenericReactDatePickerOmittedProps & {
-  // not including selectsRange because we will pass that manually to react-datepicker
-  // selectsMultiple?: never,
-  // TODO: it seems like react-datepicker has a bug? the onChange accepts always "Date | null" or variations -
-  // in this case, an array of exactly two elements of Date | null)
-  // but then the startDate and endDate parameters do NOT take null.
-  // therefore I think it'd make sense to handle them as [Date, Date] and
-  // somehow make it accept (as our more strict variant is within what they accept)
-  onChange?: (date: [Date, Date], event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void,
+type ReactDatePickerRangeProps = Omit<ComponentProps<typeof ReactDatePicker>, 'onChange'> & {
+  // Note: need to disable the following features in order to use `ReactDatePicker` as a plain date picker.
+  selectsRange?: never,
+  selectsMultiple?: never,
+  showMonthYearDropdown?: never,
+  onChange: ((date: [Date | null, Date | null], event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | undefined) => void),
 };
 
 export type DatePickerRangeProps = GenericProps & ReactDatePickerRangeProps;
 
 export const DatePickerRange = (props: DatePickerRangeProps) => {
-  // TODO how could I reuse DatePicker component only passing the props that I want? Something as simple as
-  // <DatePicker selectsRange={true} {...propsRest} />
-
   const {
     unstyled = false,
     className,
@@ -57,11 +45,8 @@ export const DatePickerRange = (props: DatePickerRangeProps) => {
       className,
     )}>
       <ReactDatePicker
-        selectsRange={true}
+        selectsRange
         // everything else is the same
-        className={cx(
-          cl['bk-date-picker__date'],
-        )}
         dateFormat="MM/dd/yyyy"
         placeholderText="MM/DD/YYYY"
         customInput={<Input />}

src/components/forms/controls/TimePicker/TimePicker.tsx

@@ -33,7 +33,7 @@ export const TimePicker = ({ unstyled = false, className, date, onUpdate, ...pro
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newTimeString = e.target.value;
     const [newHours, newMinutes] = newTimeString.split(':');
-    let newDate = new Date(date);
+    const newDate = new Date(date);
     newDate.setHours(Number(newHours));
     newDate.setMinutes(Number(newMinutes));
     onUpdate(newDate);