@memori.ai/memori-react 9.0.0-alpha.8 → 9.0.0-rc.0

package/src/components/DateSelector/DateSelector.test.tsx

@@ -1,149 +0,0 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import DateSelector from './DateSelector';
-
-const dateMock = new Date(Date.UTC(2022, 8, 24, 0, 0, 0, 0));
-
-jest.setSystemTime(dateMock);
-Date.now = jest.fn(() => dateMock.valueOf());
-
-jest.spyOn(Date, 'now').mockImplementation(() => dateMock.valueOf());
-
-describe('DateSelector', () => {
-  const mockOnChange = jest.fn();
-
-  beforeEach(() => {
-    mockOnChange.mockClear();
-  });
-
-  it('renders DateSelector with empty inputs when no defaultDate provided', () => {
-    render(<DateSelector onChange={mockOnChange} />);
-
-    const dayInput = screen.getByLabelText(/day/i);
-    const monthInput = screen.getByLabelText(/month/i);
-    const yearInput = screen.getByLabelText(/year/i);
-
-    expect(dayInput).toHaveValue(null); // number input value is null/empty string
-    expect(monthInput).toHaveValue(null);
-    expect(yearInput).toHaveValue(null);
-
-    // Should call onChange with undefined initially or not at all if we want strict behavior
-    // Based on implementation: useEffect triggers on mount. If empty, calls onChange(undefined).
-    expect(mockOnChange).toHaveBeenCalledWith(undefined);
-  });
-
-  it('renders DateSelector with default value correctly', () => {
-    const defaultDate = new Date(Date.now());
-    render(
-      <DateSelector defaultDate={defaultDate} onChange={mockOnChange} />
-    );
-
-    const dayInput = screen.getByLabelText(/day/i);
-    const monthInput = screen.getByLabelText(/month/i);
-    const yearInput = screen.getByLabelText(/year/i);
-
-    expect(dayInput).toHaveValue(defaultDate.getDate());
-    expect(monthInput).toHaveValue(defaultDate.getMonth() + 1);
-    expect(yearInput).toHaveValue(defaultDate.getFullYear());
-  });
-
-  describe('Desktop View', () => {
-    it('updates day and calls onChange with undefined if incomplete', () => {
-      render(<DateSelector onChange={mockOnChange} />);
-      const dayInput = screen.getByLabelText(/day/i);
-
-      fireEvent.change(dayInput, { target: { value: '15' } });
-
-      expect(dayInput).toHaveValue(15);
-      expect(mockOnChange).toHaveBeenCalledWith(undefined);
-    });
-
-    it('calls onChange with valid date when all fields are filled', () => {
-      render(<DateSelector onChange={mockOnChange} />);
-      const dayInput = screen.getByLabelText(/day/i);
-      const monthInput = screen.getByLabelText(/month/i);
-      const yearInput = screen.getByLabelText(/year/i);
-
-      fireEvent.change(dayInput, { target: { value: '15' } });
-      fireEvent.change(monthInput, { target: { value: '5' } });
-      fireEvent.change(yearInput, { target: { value: '1990' } });
-
-      expect(mockOnChange).toHaveBeenCalledWith(
-        expect.objectContaining({
-          year: 1990,
-          month: 5,
-          day: 15,
-        })
-      );
-    });
-
-    it('auto-focuses month after day is filled', () => {
-      render(<DateSelector onChange={mockOnChange} />);
-      const dayInput = screen.getByLabelText(/day/i);
-      const monthInput = screen.getByLabelText(/month/i);
-
-      fireEvent.change(dayInput, { target: { value: '12' } });
-
-      expect(monthInput).toHaveFocus();
-    });
-
-    it('auto-focuses year after month is filled', () => {
-      render(<DateSelector onChange={mockOnChange} />);
-      const monthInput = screen.getByLabelText(/month/i);
-      const yearInput = screen.getByLabelText(/year/i);
-
-      fireEvent.change(monthInput, { target: { value: '12' } });
-
-      expect(yearInput).toHaveFocus();
-    });
-
-    it('disables all inputs when disabled prop is true', () => {
-      render(<DateSelector disabled onChange={mockOnChange} />);
-
-      const dayInput = screen.getByLabelText(/day/i);
-      const monthInput = screen.getByLabelText(/month/i);
-      const yearInput = screen.getByLabelText(/year/i);
-
-      expect(dayInput).toBeDisabled();
-      expect(monthInput).toBeDisabled();
-      expect(yearInput).toBeDisabled();
-    });
-  });
-
-  describe('Mobile View', () => {
-    it('renders native date input on mobile', () => {
-      render(<DateSelector onChange={mockOnChange} />);
-
-      const dateInput = screen.getByLabelText(/date/i);
-      expect(dateInput).toBeInTheDocument();
-      expect(dateInput).toHaveAttribute('type', 'date');
-    });
-
-    it('calls onChange when mobile date input changes', async () => {
-      render(<DateSelector onChange={mockOnChange} />);
-
-      const dateInput = screen.getByLabelText(/date/i);
-      fireEvent.change(dateInput, { target: { value: '1995-06-15' } });
-
-      await waitFor(() => {
-        expect(mockOnChange).toHaveBeenCalledWith(
-          expect.objectContaining({
-            year: 1995,
-            month: 6,
-            day: 15
-          })
-        );
-      });
-    });
-
-    it('calls onChange with undefined when mobile input is cleared', async () => {
-      render(<DateSelector defaultDate="1995-06-15" onChange={mockOnChange} />);
-
-      const dateInput = screen.getByLabelText(/date/i);
-      fireEvent.change(dateInput, { target: { value: '' } });
-
-      await waitFor(() => {
-        expect(mockOnChange).toHaveBeenCalledWith(undefined);
-      });
-    });
-  });
-});

package/src/components/DateSelector/DateSelector.tsx

@@ -1,258 +0,0 @@
-import { useEffect, useState, memo, useMemo, useRef, ChangeEvent } from 'react';
-import { DateTime } from 'luxon';
-import { useTranslation } from 'react-i18next';
-
-export interface Props {
-  defaultDate?: string | Date;
-  disabled?: boolean;
-  /** Minimum age; latest selectable birth date is today minus this many years. */
-  minAge?: number;
-  onChange: (date: DateTime | undefined) => void;
-}
-
-const DateSelector = memo(
-  ({ defaultDate, onChange, disabled = false, minAge = 18 }: Props) => {
-    const { t } = useTranslation();
-
-    const maxDate = useMemo(
-      () => DateTime.now().minus({ years: minAge }).startOf('day'),
-      [minAge]
-    );
-    const minDate = useMemo(
-      () => DateTime.fromObject({ year: 1900, month: 1, day: 1 }),
-      []
-    );
-
-    // State for individual fields as strings to allow empty values
-    const [day, setDay] = useState<string>('');
-    const [month, setMonth] = useState<string>('');
-    const [year, setYear] = useState<string>('');
-
-    // Initialize from defaultDate if provided
-    useEffect(() => {
-      if (defaultDate) {
-        const dt = typeof defaultDate === 'string'
-          ? DateTime.fromISO(defaultDate)
-          : DateTime.fromJSDate(defaultDate);
-
-        if (dt.isValid) {
-          setDay(dt.day.toString());
-          setMonth(dt.month.toString());
-          setYear(dt.year.toString());
-        }
-      }
-    }, [defaultDate]);
-
-    const [isMobile, setIsMobile] = useState(false);
-
-    // Refs for auto-focus
-    const dayRef = useRef<HTMLInputElement>(null);
-    const monthRef = useRef<HTMLInputElement>(null);
-    const yearRef = useRef<HTMLInputElement>(null);
-
-    // Detect mobile viewport
-    useEffect(() => {
-      const checkMobile = () => {
-        setIsMobile(window.innerWidth < 768);
-      };
-
-      checkMobile();
-      window.addEventListener('resize', checkMobile);
-      return () => window.removeEventListener('resize', checkMobile);
-    }, []);
-
-    // Avoid re-running when parent passes an unstable onChange (inline arrow).
-    const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
-    const lastEmittedRef = useRef<string | null | undefined>(undefined);
-
-    // Validate and propagate changes
-    useEffect(() => {
-      const emit = (next: DateTime | undefined) => {
-        const key = next?.isValid ? next.toISODate() : null;
-        if (key === lastEmittedRef.current) return;
-        lastEmittedRef.current = key;
-        onChangeRef.current(next);
-      };
-
-      if (!day || !month || !year) {
-        emit(undefined);
-        return;
-      }
-
-      const d = parseInt(day);
-      const m = parseInt(month);
-      const y = parseInt(year);
-
-      if (isNaN(d) || isNaN(m) || isNaN(y)) {
-        emit(undefined);
-        return;
-      }
-
-      const newDate = DateTime.fromObject({ year: y, month: m, day: d });
-
-      // Basic validation: check if it's a valid date (e.g. not Feb 30)
-      // and within range.
-      if (newDate.isValid && newDate >= minDate && newDate <= maxDate) {
-        emit(newDate);
-      } else {
-        emit(undefined);
-      }
-    }, [day, month, year, minDate, maxDate]);
-
-    // Handle mobile native input change
-    const handleMobileChange = (e: ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value;
-      if (value) {
-        const newDate = DateTime.fromISO(value);
-        if (newDate.isValid) {
-          setDay(newDate.day.toString());
-          setMonth(newDate.month.toString());
-          setYear(newDate.year.toString());
-          // The useEffect will handle calling onChange
-        }
-      } else {
-        setDay('');
-        setMonth('');
-        setYear('');
-      }
-    };
-
-    const handleDayChange = (e: ChangeEvent<HTMLInputElement>) => {
-      const val = e.target.value;
-      // Allow empty or numbers only
-      if (val === '' || /^\d+$/.test(val)) {
-        // Limit length to 2
-        if (val.length > 2) return;
-
-        // Limit value to 31
-        const numVal = parseInt(val);
-        if (numVal > 31) return;
-
-        setDay(val);
-        if (val.length >= 2) {
-          monthRef.current?.focus();
-        }
-      }
-    };
-
-    const handleMonthChange = (e: ChangeEvent<HTMLInputElement>) => {
-      const val = e.target.value;
-      if (val === '' || /^\d+$/.test(val)) {
-        // Limit length to 2
-        if (val.length > 2) return;
-
-        // Limit value to 12
-        const numVal = parseInt(val);
-        if (numVal > 12) return;
-
-        setMonth(val);
-        if (val.length >= 2) {
-          yearRef.current?.focus();
-        }
-      }
-    };
-
-    const handleYearChange = (e: ChangeEvent<HTMLInputElement>) => {
-      const val = e.target.value;
-      if (val === '' || /^\d+$/.test(val)) {
-        // Limit length to 4
-        if (val.length > 4) return;
-
-        setYear(val);
-      }
-    };
-
-    // Mobile native input
-    if (isMobile) {
-      const currentDate = (day && month && year)
-        ? DateTime.fromObject({ year: parseInt(year), month: parseInt(month), day: parseInt(day) })
-        : null;
-
-      return (
-        <div className="memori--date-selector memori--date-selector--mobile">
-          <label htmlFor="birth-date-mobile" className="memori--date-selector__mobile-label">
-            {t('birthDate') || 'Birth Date'}:
-          </label>
-          <input
-            id="birth-date-mobile"
-            type="date"
-            className="memori--date-selector__mobile-input"
-            value={currentDate?.isValid ? currentDate.toISODate() || '' : ''}
-            onChange={handleMobileChange}
-            disabled={disabled}
-            min={minDate.toISODate() || '1900-01-01'}
-            max={maxDate.toISODate() || ''}
-            aria-label={String(t('dateOfBirth') || t('date'))}
-          />
-        </div>
-      );
-    }
-
-    // Desktop simple inputs
-    return (
-      <div className="memori--date-selector memori--date-selector--desktop">
-        <div className="memori--date-selector__input-group">
-          <label htmlFor="birth-day" className="memori--date-selector__label">
-            {t('day') || 'Day'}
-          </label>
-          <input
-            id="birth-day"
-            ref={dayRef}
-            type="number"
-            inputMode="numeric"
-            className="memori--date-selector__input"
-            value={day}
-            onChange={handleDayChange}
-            placeholder={t('dayPlaceholder') || 'DD'}
-            min={1}
-            max={31}
-            disabled={disabled}
-          />
-        </div>
-
-        <div className="memori--date-selector__input-group">
-          <label htmlFor="birth-month" className="memori--date-selector__label">
-            {t('month') || 'Month'}
-          </label>
-          <input
-            id="birth-month"
-            ref={monthRef}
-            type="number"
-            inputMode="numeric"
-            className="memori--date-selector__input"
-            value={month}
-            onChange={handleMonthChange}
-            placeholder={t('monthPlaceholder') || 'MM'}
-            min={1}
-            max={12}
-            disabled={disabled}
-          />
-        </div>
-
-        <div className="memori--date-selector__input-group memori--date-selector__input-group--year">
-          <label htmlFor="birth-year" className="memori--date-selector__label">
-            {t('year') || 'Year'}
-          </label>
-          <input
-            id="birth-year"
-            ref={yearRef}
-            type="number"
-            inputMode="numeric"
-            className="memori--date-selector__input"
-            value={year}
-            onChange={handleYearChange}
-            placeholder={t('yearPlaceholder') || 'YYYY'}
-            min={minDate.year}
-            max={maxDate.year}
-            disabled={disabled}
-          />
-        </div>
-      </div>
-    );
-  }
-);
-
-DateSelector.displayName = 'DateSelector';
-
-export default DateSelector;