core: add date picker

ui-core/package.json

@@ -31,7 +31,7 @@
     "clean": "rimraf dist",
     "build": "npm run rollup",
     "watch": "NODE_ENV=development rollup -c -w",
-    "test": "vitest run src",
+    "test": "vitest run",
     "prepublishOnly": "npm run clean && npm run build"
   },
   "peerDependencies": {
@@ -42,7 +42,12 @@
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.17",
+    "jsdom": "^24.0.0",
     "postcss": "^8.4.38",
     "postcss-assets": "^6.0.0",
     "postcss-import": "^16.0.0",

ui-core/src/components/hooks/useModalPosition.tsx

@@ -4,7 +4,7 @@ export const useModalPosition = (
   inputRef: React.RefObject<HTMLInputElement>,
   modalRef: React.RefObject<HTMLDivElement>,
   offset: number = 3, // Default offset below the input
-  padding: number = 10 // Default padding to ensure the modal stays within the viewport
+  horizontalOffset: number = 0 // Default horizental offset to center the modal
 ) => {
   const [modalPosition, setModalPosition] = useState<{ top: number; left: number }>({
     top: 0,
@@ -20,21 +20,22 @@ export const useModalPosition = (
       let left = inputRect.left + inputRect.width / 2 - modalRect.width / 2;
       // Set the top position directly below the input element with a slight offset
       let top = inputRect.bottom + window.scrollY - offset; // Apply the offset below the input
+      left = left - horizontalOffset; // Apply the offset below the input
 
       // Adjust if modal goes beyond viewport
       if (left + modalRect.width > window.innerWidth) {
-        left = window.innerWidth - modalRect.width - padding; // Apply padding to position modal inside viewport
+        left = window.innerWidth - modalRect.width;
       } else if (left < 0) {
-        left = padding; // Apply padding
+        left = 10; // Apply a slight padding
       }
 
       if (top + modalRect.height > window.innerHeight) {
-        top = window.innerHeight - modalRect.height - padding; // Apply padding to position modal inside viewport
+        top = window.innerHeight - modalRect.height - horizontalOffset;
       }
 
       setModalPosition({ top, left });
     }
-  }, [inputRef, modalRef, offset, padding]);
+  }, [inputRef, modalRef, offset, horizontalOffset]);
 
   useEffect(() => {
     calculatePosition();

ui-core/src/components/inputs/Input.tsx

@@ -42,7 +42,7 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
   Omit<FieldWrapperProps, 'children'> & {
     leadingContent?: InputAffixContent | InputAffixContentWithCallback;
     trailingContent?: InputAffixContent | InputAffixContentWithCallback;
-    inputWrapperClassname?: string;
+    inputFieldWrapperClassname?: string;
   };
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -58,7 +58,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       disabled = false,
       readOnly = false,
       statusWithMessage,
-      inputWrapperClassname,
+      inputFieldWrapperClassname = '',
       small = false,
       onKeyUp,
       onBlur,
@@ -77,9 +77,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         disabled={disabled}
         required={required}
         small={small}
+        className={cx('input-field-wrapper', inputFieldWrapperClassname)}
       >
         <div
-          className={cx('input-wrapper', inputWrapperClassname, {
+          className={cx('input-wrapper', {
             small,
             'focused-by-tab': isFocusByTab,
           })}

ui-core/src/components/inputs/PasswordInput.tsx

@@ -2,22 +2,22 @@ import React, { useState } from 'react';
 import { Eye, EyeClosed } from '@osrd-project/ui-icons';
 
 import Input, { InputProps } from './Input';
+import cx from 'classnames';
 
 export type PasswordInputProps = InputProps;
-
-export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
-  (props, ref) => {
+export const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ inputFieldWrapperClassname, ...otherProps }, ref) => {
     const [showPassword, toggleShowPassword] = useState(false);
 
     return (
       <Input
-        {...props}
+        {...otherProps}
         type={showPassword ? 'text' : 'password'}
         trailingContent={{
           content: showPassword ? <EyeClosed /> : <Eye />,
           onClickCallback: () => toggleShowPassword(!showPassword),
         }}
-        inputWrapperClassname="password-input"
+        inputFieldWrapperClassname={cx('password-input', inputFieldWrapperClassname)}
         ref={ref}
       />
     );

ui-core/src/components/inputs/datePicker/Calendar.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { CalendarSlot } from './type';
+import useCalendar from './useCalendar';
+
+const WEEKDAY_LABELS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+
+export type CalendarProps = {
+  selectedSlot?: CalendarSlot;
+  selectableSlot?: CalendarSlot;
+  displayedMonthStartDate: Date;
+  onDayClick: (date: Date) => void;
+};
+
+type DayProps = {
+  date: Date;
+  isSelectable: boolean;
+  isToday: boolean;
+  dayWrapperClassName: string;
+  onClick: (date: Date) => void;
+};
+
+const Day: React.FC<DayProps> = ({ date, isToday, isSelectable, dayWrapperClassName, onClick }) => (
+  <div
+    onClick={() => {
+      if (isSelectable) onClick(date);
+    }}
+    className="day-background"
+  >
+    <div className={dayWrapperClassName}>
+      <span className="day">{date.getDate()}</span>
+      {isToday && <span className="current-date-highlight" />}
+    </div>
+  </div>
+);
+
+const Calendar: React.FC<CalendarProps> = (props) => {
+  const { displayedMonthStartDate, onDayClick } = props;
+  const { days, isToday, isDateSelectable, buildDayWrapperClassName } = useCalendar(props);
+  return (
+    <div className="calendar-wrapper">
+      <div className="calendar-anatomy">
+        <p className="calendar-month-label">
+          {displayedMonthStartDate.toLocaleString('en-GB', { month: 'short' })}
+        </p>
+        <div className="calendar-grid-wrapper">
+          <div className="calendar-weekday-labels">
+            {WEEKDAY_LABELS.map((label, index) => (
+              <p key={index}>{label}</p>
+            ))}
+          </div>
+          <div className="calendar-days-grid">
+            {days.map((date, index) => {
+              return (
+                <Day
+                  key={index}
+                  date={date}
+                  isToday={isToday(date)}
+                  isSelectable={isDateSelectable(date)}
+                  dayWrapperClassName={buildDayWrapperClassName(date)}
+                  onClick={onDayClick}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Calendar;

ui-core/src/components/inputs/datePicker/CalendarPicker.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import cx from 'classnames';
+import { ChevronLeft, ChevronRight } from '@osrd-project/ui-icons';
+import Calendar from './Calendar';
+import { CalendarSlot } from './type';
+import useCalendarPicker from './useCalendarPicker';
+
+export type CalendarPickerPrivateProps = {
+  selectedSlot?: CalendarSlot;
+  onDayClick: (day: Date) => void;
+  modalPosition: {
+    top: number;
+    left: number;
+  };
+  calendarPickerRef: React.RefObject<HTMLDivElement>;
+};
+
+export type CalendarPickerPublicProps = {
+  initialDate?: Date;
+  numberOfMonths?: 1 | 2 | 3;
+  selectableSlot?: CalendarSlot;
+};
+
+export type CalendarPickerProps = CalendarPickerPrivateProps & CalendarPickerPublicProps;
+
+const CalendarPicker: React.FC<CalendarPickerProps> = ({
+  initialDate,
+  selectedSlot,
+  selectableSlot,
+  numberOfMonths = 1,
+  onDayClick,
+  modalPosition,
+  calendarPickerRef,
+}) => {
+  const {
+    displayedMonthsStartDates,
+    showNavigationBtn,
+    canGoToNextMonth,
+    canGoToPreviousMonth,
+    handleGoToNextMonth,
+    handleGoToPreviousMonth,
+  } = useCalendarPicker({
+    initialDate,
+    selectedSlot,
+    selectableSlot,
+    numberOfMonths,
+  });
+
+  return (
+    <div ref={calendarPickerRef} className="calendar-picker" style={modalPosition}>
+      {showNavigationBtn && (
+        <span
+          className={cx('calendar-navigation-btn', 'previous', {
+            disabled: !canGoToPreviousMonth,
+          })}
+          onClick={handleGoToPreviousMonth}
+        >
+          <ChevronLeft size="lg" />
+        </span>
+      )}
+      <div className={cx('calendar-list', { 'navigation-btn-hidden': !showNavigationBtn })}>
+        {displayedMonthsStartDates.map((date, index) => {
+          return (
+            <Calendar
+              key={index}
+              displayedMonthStartDate={date}
+              selectableSlot={selectableSlot}
+              selectedSlot={selectedSlot}
+              onDayClick={onDayClick}
+            />
+          );
+        })}
+      </div>
+      {showNavigationBtn && (
+        <span
+          className={cx('calendar-navigation-btn', 'next', {
+            disabled: !canGoToNextMonth,
+          })}
+          onClick={handleGoToNextMonth}
+        >
+          <ChevronRight size="lg" />
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default CalendarPicker;

ui-core/src/components/inputs/datePicker/DatePicker.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import cx from 'classnames';
+import { Calendar as CalendarIcon } from '@osrd-project/ui-icons';
+import Input, { InputProps } from '../Input';
+import CalendarPicker, { CalendarPickerPublicProps } from './CalendarPicker';
+import useDatePicker from './useDatePicker';
+import { CalendarSlot } from '.';
+
+type BaseDatePickerProps = {
+  inputProps: InputProps;
+  calendarPickerProps?: CalendarPickerPublicProps;
+};
+
+export type SingleDatePickerProps = BaseDatePickerProps & {
+  isRangeMode?: false;
+  onDateChange: (nextDate: Date) => void;
+  value?: Date;
+};
+
+export type RangeDatePickerProps = BaseDatePickerProps & {
+  isRangeMode: true;
+  onDateChange: (clickedDate: Date, nextSelectedSlot?: CalendarSlot) => void;
+  value?: CalendarSlot;
+};
+
+export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
+
+export const DatePicker: React.FC<DatePickerProps> = (props) => {
+  const {
+    inputValue,
+    selectedSlot,
+    showPicker,
+    modalPosition,
+    inputRef,
+    calendarPickerRef,
+    setShowPicker,
+    handleDayClick,
+    handleInputClick,
+  } = useDatePicker(props);
+  const { inputFieldWrapperClassname, ...otherInputProps } = props.inputProps;
+  return (
+    <div className="date-picker">
+      <div>
+        <Input
+          {...otherInputProps}
+          ref={inputRef}
+          value={inputValue}
+          onClick={handleInputClick}
+          type="text"
+          trailingContent={{
+            content: <CalendarIcon />,
+            onClickCallback: () => setShowPicker(!showPicker),
+          }}
+          inputFieldWrapperClassname={cx('date-picker-input', inputFieldWrapperClassname)}
+          autoComplete="off"
+        />
+      </div>
+      {showPicker && (
+        <div className="calendar-picker-wrapper">
+          <CalendarPicker
+            {...props.calendarPickerProps}
+            selectedSlot={selectedSlot}
+            onDayClick={handleDayClick}
+            modalPosition={modalPosition}
+            calendarPickerRef={calendarPickerRef}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DatePicker;