@altruist03/ui 0.1.0 → 0.2.1

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,669 @@
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import ReactDatePicker from 'react-datepicker';
+import type { DatePickerProps } from 'react-datepicker';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined';
+import { getDatePickerTokensFromResolved, getTextFieldTokensFromResolved } from '../../tokens';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import { TextField } from '../TextField/TextField';
+import 'react-datepicker/dist/react-datepicker.css';
+// import "firebird-icon-lib/dist/style.css";
+
+export type { DatePickerProps };
+
+/** Props that react-datepicker passes to customInput (value, onClick, etc.) plus our own */
+export interface ExampleCustomInputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'size'
+> {
+  error?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  /** Optional icon name for the trailing adornment (defaults to calendar) */
+  iconName?: string;
+  /** When provided, enables click-to-toggle: skip opening on focus when focus came from click */
+  mouseDownOnFieldRef?: React.MutableRefObject<boolean>;
+  /** When provided, enables click-to-toggle behavior */
+  isOpen?: boolean;
+  onToggleOpen?: () => void;
+  onToggleClose?: () => void;
+  /** Icon at the start (left) of the input, same as TextField startIcon */
+  startIcon?: React.ReactNode;
+}
+
+/**
+ * Custom input for DatePicker that uses TextField styling.
+ * Use with: customInput={<ExampleCustomInput className="example-custom-input" />}
+ */
+export const ExampleCustomInput = forwardRef<HTMLInputElement, ExampleCustomInputProps>(
+  function ExampleCustomInput(props, ref) {
+    const {
+      value,
+      onClick,
+      onChange,
+      onBlur,
+      onFocus,
+      placeholder,
+      disabled,
+      className,
+      id,
+      error = false,
+      size = 'md',
+      mouseDownOnFieldRef,
+      isOpen,
+      onToggleOpen,
+      onToggleClose,
+      ...rest
+    } = props;
+
+    // const resolvedTokens = useTokens();
+    // const dpTokens = getDatePickerTokensFromResolved(resolvedTokens);
+
+    const valueStr =
+      value === undefined || value === null ? ''
+      : typeof value === 'string' ? value
+      : String(value);
+
+    const iconFontSize =
+      size === 'lg' ? 20
+      : size === 'md' ? 18
+      : 16;
+    const LeadingIcon = props.iconName === 'clock' ? AccessTimeOutlinedIcon : CalendarMonthIcon;
+    const inputCursor = disabled ? 'not-allowed' : 'pointer';
+    const scopedInputId = typeof id === 'string' ? id : undefined;
+    const scopedCursorSelector =
+      scopedInputId ?
+        `#${CSS.escape(scopedInputId)}.text-field-input`
+      : `.${className ?? 'example-custom-input'} input.text-field-input`;
+
+    return (
+      <div
+        className={className}
+        style={{
+          position: 'relative',
+          width: '100%',
+          display: 'block',
+          cursor: inputCursor,
+        }}
+      >
+        <style>{`${scopedCursorSelector} { cursor: ${inputCursor}; }`}</style>
+        <TextField
+          id={scopedInputId}
+          label=""
+          helperText=""
+          value={valueStr}
+          placeholder={placeholder}
+          disabled={disabled}
+          error={error}
+          size={size}
+          inputRef={ref}
+          startIcon={<LeadingIcon sx={{ fontSize: iconFontSize }} />}
+          inputProps={{
+            ...rest,
+            readOnly: true,
+            onMouseDown:
+              mouseDownOnFieldRef ?
+                () => {
+                  mouseDownOnFieldRef.current = true;
+                }
+              : undefined,
+            onClick:
+              onToggleClose != null ?
+                (e: React.MouseEvent<HTMLInputElement>) => {
+                  if (mouseDownOnFieldRef) mouseDownOnFieldRef.current = false;
+                  if (disabled) return;
+                  if ((e.target as HTMLElement).closest('button')) return;
+                  if (isOpen) {
+                    onToggleClose();
+                  } else {
+                    onToggleOpen?.();
+                  }
+                }
+              : (onClick as React.MouseEventHandler<HTMLInputElement>),
+          }}
+          onChange={onChange as React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>}
+          onBlur={onBlur as React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>}
+          onFocus={(e) => {
+            (onFocus as React.FocusEventHandler<HTMLInputElement>)?.(
+              e as React.FocusEvent<HTMLInputElement>
+            );
+            if (mouseDownOnFieldRef?.current) return;
+            onToggleOpen?.();
+          }}
+          fullWidth
+        />
+      </div>
+    );
+  }
+);
+
+const headerControlStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 6,
+};
+
+const getHeaderWrapperStyle = (
+  dpTokens: ReturnType<typeof getDatePickerTokensFromResolved>
+): React.CSSProperties => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: dpTokens.header.padding,
+  borderBottom: dpTokens.header.borderBottom,
+  fontFamily: dpTokens.input.fontFamily,
+  fontSize: dpTokens.header.fontSize,
+});
+
+const getHeaderButtonStyle = (
+  dpTokens: ReturnType<typeof getDatePickerTokensFromResolved>
+): React.CSSProperties => ({
+  border: 'none',
+  background: 'transparent',
+  color: dpTokens.input.color,
+  cursor: 'pointer',
+  padding: dpTokens.headerButton.padding,
+  fontSize: dpTokens.headerButton.fontSize,
+  lineHeight: 1,
+});
+
+const getHeaderSelectStyle = (
+  dpTokens: ReturnType<typeof getDatePickerTokensFromResolved>
+): React.CSSProperties => ({
+  padding: dpTokens.headerSelect.padding,
+  borderRadius: dpTokens.headerSelect.borderRadius,
+  border: dpTokens.headerSelect.border,
+  backgroundColor: dpTokens.headerSelect.background,
+  fontSize: dpTokens.headerSelect.fontSize,
+});
+
+const MONTH_NAMES = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+const CURRENT_YEAR = new Date().getFullYear();
+const YEAR_START = CURRENT_YEAR - 50;
+const YEAR_END = CURRENT_YEAR + 20;
+
+const getAvailableYears = (minDate?: Date | null, maxDate?: Date | null): number[] => {
+  const start = minDate ? minDate.getFullYear() : YEAR_START;
+  const end = maxDate ? maxDate.getFullYear() : YEAR_END;
+  const years: number[] = [];
+  for (let y = start; y <= end; y += 1) {
+    years.push(y);
+  }
+  return years;
+};
+
+const isMonthInRange = (
+  monthIndex: number,
+  selectedYear: number,
+  minDate?: Date | null,
+  maxDate?: Date | null
+): boolean => {
+  if (minDate) {
+    const minYear = minDate.getFullYear();
+    if (selectedYear < minYear) return false;
+    if (selectedYear === minYear && monthIndex < minDate.getMonth()) return false;
+  }
+  if (maxDate) {
+    const maxYear = maxDate.getFullYear();
+    if (selectedYear > maxYear) return false;
+    if (selectedYear === maxYear && monthIndex > maxDate.getMonth()) return false;
+  }
+  return true;
+};
+
+const getHelperStyle = (
+  dpTokens: ReturnType<typeof getDatePickerTokensFromResolved>,
+  error?: boolean
+): React.CSSProperties => ({
+  marginTop: 4,
+  fontSize: dpTokens.helper.fontSize,
+  color: error ? dpTokens.helper.errorColor : dpTokens.helper.color,
+  fontFamily: dpTokens.input.fontFamily,
+});
+
+/**
+ * react-datepicker's DatePickerProps is a discriminated union (single | range | multi).
+ * Spreading the union into JSX cannot pick a branch, so we pin the default (single-date) props shape.
+ */
+export type SingleDatePickerProps = Extract<
+  DatePickerProps,
+  { selectsRange?: never; selectsMultiple?: never }
+>;
+
+export type DatePickerWrapperProps = DatePickerProps & {
+  /** Helper text below the input (e.g. date format or error message). */
+  helperText?: React.ReactNode;
+  /** When true, shows error state (red border, red helper text). */
+  error?: boolean;
+  /** Label shown above the input */
+  label?: string;
+  /** When true, marks the field as required */
+  required?: boolean;
+  /** Size variant: sm, md, or lg */
+  size?: 'sm' | 'md' | 'lg';
+  /** Custom input for the DatePicker */
+  customInput?: React.ReactNode;
+};
+
+export function DatePicker({
+  helperText = '(Date Format - YYYY-MM-DD)',
+  placeholderText = 'Valid Upto',
+  dateFormat = 'yyyy-MM-dd',
+  isClearable = false,
+  error = false,
+  label,
+  required = false,
+  disabled = false,
+  size = 'md',
+
+  ...props
+}: DatePickerWrapperProps) {
+  // Only render the helper line when the consumer actually provides a helperText
+  // (e.g. an error message). No automatic date-format hint fallback.
+  const displayHelperText: React.ReactNode = helperText;
+  const { renderCustomHeader, onChange, ...restProps } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const mouseDownOnFieldRef = useRef(false);
+  const suppressOpenOnFocusRef = useRef(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const closeCalendar = () => {
+    // Selecting a value returns focus to the input; skip the focus-open once.
+    suppressOpenOnFocusRef.current = true;
+    setIsOpen(false);
+  };
+
+  const openCalendar = () => {
+    if (suppressOpenOnFocusRef.current) {
+      suppressOpenOnFocusRef.current = false;
+      return;
+    }
+    setIsOpen(true);
+  };
+
+  const handleChange = (date: any, event: any) => {
+    (onChange as any)?.(date, event);
+
+    const showTimeSelect = Boolean((restProps as { showTimeSelect?: boolean }).showTimeSelect);
+
+    if (Array.isArray(date)) {
+      const [start, end] = date;
+      if (start && end && !showTimeSelect) {
+        closeCalendar();
+      }
+      return;
+    }
+
+    if (!date) return;
+
+    if (!showTimeSelect) {
+      // Date-only: close after picking a day.
+      closeCalendar();
+      return;
+    }
+
+    // With showTimeSelect, day clicks pass a click/keyboard event; time clicks call
+    // onChange with no event (react-datepicker handleTimeChange). Stay open for date
+    // so the user can pick a time; close once the time is chosen.
+    // Also: controlled `open` never syncs internal state.open, so onCalendarClose
+    // often does not fire after time select — close explicitly here.
+    const isTimeListClick =
+      event?.target instanceof HTMLElement &&
+      Boolean(event.target.closest('.react-datepicker__time-list-item'));
+    const isTimeSelection = event == null || isTimeListClick;
+
+    if (isTimeSelection) {
+      closeCalendar();
+    }
+  };
+
+  useEffect(() => {
+    const handleMouseUp = () => {
+      mouseDownOnFieldRef.current = false;
+    };
+    document.addEventListener('mouseup', handleMouseUp);
+    return () => document.removeEventListener('mouseup', handleMouseUp);
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (!containerRef.current?.contains(target)) {
+        const isInsideCalendar = (target as HTMLElement).closest?.('.react-datepicker');
+        if (!isInsideCalendar) {
+          setIsOpen(false);
+        }
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const resolvedTokens = useTokens();
+  const dpTokens = getDatePickerTokensFromResolved(resolvedTokens);
+  const tfTokens = getTextFieldTokensFromResolved(resolvedTokens);
+  const datePickerInputHeight =
+    size === 'sm' ? parseInt(tfTokens.heightSm, 10)
+    : size === 'lg' ? parseInt(tfTokens.heightLg, 10)
+    : parseInt(tfTokens.heightMd, 10);
+
+  const defaultRenderHeader = (headerProps: any) => {
+    const {
+      date,
+      changeYear,
+      changeMonth,
+      decreaseMonth,
+      increaseMonth,
+      prevMonthButtonDisabled,
+      nextMonthButtonDisabled,
+    } = headerProps;
+
+    const monthIndex = date.getMonth();
+    const year = date.getFullYear();
+    const { minDate, maxDate } = restProps;
+    const availableYears = getAvailableYears(minDate, maxDate);
+    const availableMonths = MONTH_NAMES.filter((_, index) =>
+      isMonthInRange(index, year, minDate, maxDate)
+    );
+
+    return (
+      <div style={getHeaderWrapperStyle(dpTokens)}>
+        <div style={headerControlStyle}>
+          <button
+            type="button"
+            onClick={decreaseMonth}
+            disabled={prevMonthButtonDisabled}
+            style={getHeaderButtonStyle(dpTokens)}
+            aria-label="Previous month"
+          >
+            ‹
+          </button>
+          <button
+            type="button"
+            onClick={increaseMonth}
+            disabled={nextMonthButtonDisabled}
+            style={getHeaderButtonStyle(dpTokens)}
+            aria-label="Next month"
+          >
+            ›
+          </button>
+        </div>
+        <div style={headerControlStyle}>
+          <select
+            value={MONTH_NAMES[monthIndex]}
+            onChange={(e) => {
+              const newMonthIndex = MONTH_NAMES.indexOf(e.target.value);
+              if (newMonthIndex >= 0) changeMonth(newMonthIndex);
+            }}
+            style={getHeaderSelectStyle(dpTokens)}
+          >
+            {availableMonths.map((name) => (
+              <option key={name} value={name}>
+                {name}
+              </option>
+            ))}
+          </select>
+          <select
+            value={year}
+            onChange={(e) => changeYear(Number(e.target.value))}
+            style={getHeaderSelectStyle(dpTokens)}
+          >
+            {availableYears.map((y) => (
+              <option key={y} value={y}>
+                {y}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    );
+  };
+
+  const labelStyle: React.CSSProperties = {
+    display: 'block',
+    marginBottom: parseInt(String(tfTokens.labelMarginBottom), 10),
+    fontSize: tfTokens.labelFontSize,
+    fontWeight: tfTokens.labelFontWeight,
+    color: tfTokens.labelColor,
+    fontFamily: tfTokens.fontFamily,
+  };
+  const rootStyle: React.CSSProperties = {
+    width: '100%',
+    fontFamily: dpTokens.input.fontFamily,
+    opacity: disabled ? parseFloat(String(tfTokens.disabledOpacity)) : 1,
+  };
+
+  return (
+    <div ref={containerRef} style={rootStyle}>
+      {label != null && label !== '' && (
+        <label
+          onClick={(e) => {
+            if (disabled) return;
+            if (isOpen) {
+              setIsOpen(false);
+            } else {
+              e.preventDefault();
+            }
+          }}
+          style={{
+            ...labelStyle,
+            color: disabled ? 'var(--text-disabled)' : labelStyle.color,
+            cursor: 'default',
+          }}
+        >
+          {label}
+          {required && (
+            <span
+              style={{
+                color: dpTokens.label.requiredColor,
+                marginLeft: 4,
+              }}
+            >
+              *
+            </span>
+          )}
+        </label>
+      )}
+      <ReactDatePicker
+        {...(restProps as SingleDatePickerProps)}
+        dateFormat={dateFormat}
+        placeholderText={placeholderText}
+        isClearable={isClearable}
+        disabled={disabled}
+        open={isOpen}
+        preventOpenOnFocus
+        onChange={handleChange}
+        onCalendarOpen={openCalendar}
+        onCalendarClose={closeCalendar}
+        portalId="react-datepicker-portal"
+        customInput={
+          restProps.customInput ?
+            React.cloneElement(restProps.customInput as React.ReactElement<any>, {
+              isOpen,
+              onToggleOpen: openCalendar,
+              onToggleClose: closeCalendar,
+              mouseDownOnFieldRef,
+            })
+          : <ExampleCustomInput
+              className="example-custom-input"
+              id={restProps.id}
+              error={error}
+              disabled={disabled}
+              size={size}
+              iconName={
+                // When used as a time-only picker, show a clock icon instead of a calendar
+                (restProps as { showTimeSelectOnly?: boolean }).showTimeSelectOnly ?
+                  'clock'
+                : 'calendar'
+              }
+              mouseDownOnFieldRef={mouseDownOnFieldRef}
+              isOpen={isOpen}
+              onToggleOpen={openCalendar}
+              onToggleClose={closeCalendar}
+            />
+        }
+        renderCustomHeader={renderCustomHeader ?? defaultRenderHeader}
+      />
+      {helperText != null && helperText !== '' && (
+        <div
+          style={getHelperStyle(dpTokens, error)}
+          role={error ? 'alert' : undefined}
+          className="d-flex gap-1"
+        >
+          {/* <FirebirdIcon name="info_circle" size={16} /> */}
+          <span>{displayHelperText}</span>
+        </div>
+      )}
+      <style>
+        {`.react-datepicker-wrapper {
+          width: 100%;
+        }
+        .react-datepicker__input-container .example-custom-input input.text-field-input {
+          height: ${datePickerInputHeight}px;
+          min-height: ${datePickerInputHeight}px;
+          padding-top: 0 !important;
+          padding-bottom: 0 !important;
+          padding-left: ${tfTokens.iconPaddingLeft} !important;
+          box-sizing: border-box !important;
+        }
+        .react-datepicker__input-container input::placeholder {
+          color: ${dpTokens.placeholderColor};
+        }
+        .react-datepicker-popper {
+          z-index: 1400;
+        }
+        .react-datepicker {
+          font-family: ${dpTokens.input.fontFamily};
+          border: ${dpTokens.calendar.border};
+          border-radius: ${dpTokens.calendar.borderRadius};
+          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+          background-color: ${dpTokens.calendar.headerBackground};
+          color: ${dpTokens.input.color};
+        }
+        .react-datepicker__month-container {
+          background-color: ${dpTokens.calendar.headerBackground};
+        }
+        .react-datepicker__header {
+          background-color: ${dpTokens.calendar.headerBackground};
+          border-bottom: ${dpTokens.calendar.border};
+          border-top-left-radius: ${dpTokens.calendar.borderRadius};
+          border-top-right-radius: ${dpTokens.calendar.borderRadius};
+          padding-top: 8px;
+          color: ${dpTokens.input.color};
+        }
+        .react-datepicker__header select,
+        .react-datepicker select {
+          background-color: ${dpTokens.headerSelect.background};
+          color: ${dpTokens.input.color};
+          border: ${dpTokens.headerSelect.border};
+        }
+        .react-datepicker__header option,
+        .react-datepicker option {
+          background-color: ${dpTokens.headerSelect.background};
+          color: ${dpTokens.input.color};
+        }
+        .react-datepicker__day-names,
+        .react-datepicker__day-name {
+          color: ${dpTokens.input.color};
+        }
+        .react-datepicker__day--selected,
+        .react-datepicker__day--in-selecting-range,
+        .react-datepicker__day--in-range {
+          background-color: ${dpTokens.calendar.selectedBackground};
+          color: ${dpTokens.calendar.selectedColor} !important;
+        }
+        .react-datepicker__day--selected:hover,
+        .react-datepicker__day--in-selecting-range:hover,
+        .react-datepicker__day--in-range:hover {
+          background-color: ${dpTokens.calendar.selectedBackground};
+        }
+        .react-datepicker__day {
+          color: ${dpTokens.input.color};
+        }
+        .react-datepicker__day:hover {
+          background-color: ${dpTokens.calendar.selectedBackground} !important;
+          color: ${dpTokens.calendar.selectedColor} !important;
+        }
+        .react-datepicker__day--keyboard-selected {
+          background-color: ${dpTokens.calendar.selectedBackground};
+          color: ${dpTokens.calendar.selectedColor};
+        }
+        .react-datepicker__day--today {
+          font-weight: 500;
+        }
+        .react-datepicker__day--disabled {
+          color: ${dpTokens.calendar.disabledColor};
+          cursor: not-allowed;
+        }
+        .react-datepicker__triangle {
+          display: none;
+        }
+        .react-datepicker__time-container,
+        .react-datepicker__time,
+        .react-datepicker__time-box {
+          background-color: ${dpTokens.calendar.headerBackground};
+          color: ${dpTokens.input.color};
+          border-left: ${dpTokens.calendar.border};
+        }
+        .react-datepicker__time-list-item {
+          color: ${dpTokens.input.color};
+        }
+        .react-datepicker__time-list-item:hover {
+          background-color: ${dpTokens.calendar.selectedBackground} !important;
+          color: ${dpTokens.calendar.selectedColor} !important;
+        }
+        .react-datepicker__time-list-item--selected {
+          background-color: ${dpTokens.calendar.selectedBackground} !important;
+          color: ${dpTokens.calendar.selectedColor};
+        }
+        .react-datepicker-time__header,
+        .react-datepicker-time__caption {
+          color: ${dpTokens.input.color};
+        }
+        .react-datepicker__input-time-container,
+        .react-datepicker-time__input input {
+          color: ${dpTokens.input.color};
+          background-color: ${dpTokens.calendar.headerBackground};
+        }
+        .react-datepicker__header button {
+          color: ${dpTokens.input.color};
+        }
+        .react-datepicker__close-icon {
+          right: 30px;
+          padding: 4px;
+        }
+        .react-datepicker__close-icon::after {
+          background-color: ${dpTokens.helper.bgColor};
+          color: ${dpTokens.helper.color};
+          font-size: 18px;
+          padding: 1px;
+          min-width: 20px;
+        }
+        .react-datepicker__close-icon:hover::after {
+          background-color: ${dpTokens.label.color};
+        }
+        .react-datepicker--time-only, .react-datepicker__time-container, .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
+        width: 200px !important;
+        }
+
+        `}
+      </style>
+    </div>
+  );
+}
+
+export default DatePicker;