@memori.ai/memori-react 8.45.1 → 8.45.4

package/src/components/DateSelector/DateSelector.css

@@ -1,158 +0,0 @@
-/* Screen reader only - visually hidden but accessible */
-.sr-only {
-    position: absolute;
-    overflow: hidden;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    border-width: 0;
-    margin: -1px;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-}
-
-/* Base Container */
-.memori--date-selector {
-    width: 100%;
-    /* margin-top: 1.5rem; */
-}
-
-/* Mobile Styles */
-.memori--date-selector--mobile {
-    display: flex;
-    width: 100%;
-    max-width: 100%;
-    box-sizing: border-box;
-    flex-direction: column;
-    padding: 0;
-    margin: 1rem 0;
-}
-
-.memori--date-selector__mobile-label {
-    display: block;
-    width: 100%;
-    margin-bottom: 0.5rem;
-    color: #374151;
-    font-size: 0.95rem;
-    font-weight: 500;
-    text-align: left;
-}
-
-.memori--date-selector__mobile-input {
-    width: 100%;
-    max-width: 100%;
-    min-height: 48px;
-    box-sizing: border-box;
-    padding: 0.875rem 1rem;
-    border: 1px solid #e5e7eb;
-    border-radius: 0.5rem;
-    -webkit-appearance: none;
-    appearance: none;
-    background: #ffffff;
-    /* Touch-friendly */
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    color: #1f2937;
-    font-size: 1rem;
-    transition: all 0.2s ease;
-}
-
-.memori--date-selector__mobile-input:focus {
-    border-color: var(--memori-primary, #9333ea);
-    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
-    outline: none;
-}
-
-.memori--date-selector__mobile-input:active {
-    border-color: var(--memori-primary, #9333ea);
-}
-
-.memori--date-selector__mobile-input:disabled {
-    background-color: #f9fafb;
-    color: #9ca3af;
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-/* Desktop Styles */
-.memori--date-selector--desktop {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 1rem;
-}
-
-.memori--date-selector__input-group {
-    display: flex;
-    min-width: 80px;
-    /* flex: 1; */
-    flex-direction: column;
-}
-
-.memori--date-selector__input-group--year {
-    min-width: 100px;
-}
-
-.memori--date-selector__label {
-    display: inline-block;
-    margin-bottom: 0.5rem;
-    color: #4b5563;
-    font-size: 0.875rem;
-    font-weight: 500;
-    letter-spacing: 0.01em;
-}
-
-.memori--date-selector__input {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border: 2px solid #e5e7eb;
-    border-radius: 0.75rem;
-    -moz-appearance: textfield;
-    appearance: textfield;
-    /* Remove spinner buttons */
-    background: #ffffff;
-    color: #1f2937;
-    font-size: 0.95rem;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.memori--date-selector__input::-webkit-outer-spin-button,
-.memori--date-selector__input::-webkit-inner-spin-button {
-    margin: 0;
-    -webkit-appearance: none;
-}
-
-.memori--date-selector__input:focus {
-    border-color: var(--memori-primary);
-  box-shadow: 0 0 0 4px rgba(var(--memori-primary-rgb), 0.1);
-    outline: none;
-    transform: translateY(-1px);
-}
-
-.memori--date-selector__input:disabled {
-    border-color: #e5e7eb;
-    background: #f9fafb;
-    color: #9ca3af;
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-.memori--date-selector__input::placeholder {
-    color: #9ca3af;
-}
-
-/* Responsive adjustments */
-@media (max-width: 767px) {
-    .memori--date-selector--desktop {
-        display: none;
-        /* Hide desktop version on mobile if both are rendered for some reason */
-    }
-
-    .memori--date-selector--mobile {
-        margin: 0.75rem 0;
-    }
-
-    .memori--date-selector__mobile-input {
-        min-height: 44px;
-        font-size: 16px; /* Prevents zoom on iOS */
-    }
-}

package/src/components/DateSelector/DateSelector.stories.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import DateSelector, { Props } from './DateSelector';
-
-import './DateSelector.css';
-
-const meta: Meta = {
-  title: 'DateSelector',
-  component: DateSelector,
-  parameters: {
-    controls: { expanded: true },
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <DateSelector {...args} />
-  </I18nWrapper>
-);
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  defaultDate: '1990-06-15',
-  minAge: 18,
-  onChange: console.log,
-  disabled: false,
-};
-
-export const MinAge14 = Template.bind({});
-MinAge14.args = {
-  minAge: 14,
-  onChange: console.log,
-  disabled: false,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  defaultDate: '1990-06-15',
-  minAge: 18,
-  onChange: () => {},
-  disabled: true,
-};

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,251 +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 className="memori--date-selector__mobile-label">
-            {t('birthDate') || 'Birth Date'}:
-          </label>
-          <input
-            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 className="memori--date-selector__label">
-            {t('day') || 'Day'}
-          </label>
-          <input
-            ref={dayRef}
-            type="number"
-            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 className="memori--date-selector__label">
-            {t('month') || 'Month'}
-          </label>
-          <input
-            ref={monthRef}
-            type="number"
-            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 className="memori--date-selector__label">
-            {t('year') || 'Year'}
-          </label>
-          <input
-            ref={yearRef}
-            type="number"
-            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;