@memori.ai/memori-react 8.10.1 → 8.12.0

package/src/components/DateSelector/DateSelector.tsx

@@ -1,200 +1,226 @@
-import { useEffect, useState, memo, Fragment } from 'react';
-import { Listbox, Transition } from '@headlessui/react';
+import { useEffect, useState, memo, useMemo, useRef, ChangeEvent } from 'react';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
-import SelectIcon from '../icons/SelectIcon';
 
 export interface Props {
   defaultDate?: string | Date;
   disabled?: boolean;
-  onChange: (date: DateTime) => void;
+  onChange: (date: DateTime | undefined) => void;
 }
 
-const months = {
-  en: [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ],
-  it: [
-    'Gennaio',
-    'Febbraio',
-    'Marzo',
-    'Aprile',
-    'Maggio',
-    'Giugno',
-    'Luglio',
-    'Agosto',
-    'Settembre',
-    'Ottobre',
-    'Novembre',
-    'Dicembre',
-  ],
-};
-
 const DateSelector = memo(
   ({ defaultDate, onChange, disabled = false }: Props) => {
-    const { t, i18n } = useTranslation();
-
-    const [date, setDate] = useState(
-      !defaultDate
-        ? DateTime.now()
-        : typeof defaultDate === 'string'
-        ? DateTime.fromISO(defaultDate)
-        : DateTime.fromJSDate(defaultDate)
-    );
+    const { t } = useTranslation();
+
+    // Calculate constraints for birth date (18 years ago to 1900)
+    const maxDate = useMemo(() => DateTime.now().minus({ years: 18 }), []);
+    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(() => {
-      onChange(date);
-    }, [date, onChange]);
+      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);
+    }, []);
+
+    // Validate and propagate changes
+    useEffect(() => {
+      if (!day || !month || !year) {
+        onChange(undefined);
+        return;
+      }
+
+      const d = parseInt(day);
+      const m = parseInt(month);
+      const y = parseInt(year);
+
+      if (isNaN(d) || isNaN(m) || isNaN(y)) {
+        onChange(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) {
+        onChange(newDate);
+      } else {
+        onChange(undefined);
+      }
+    }, [day, month, year, onChange, 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">
-        <div className="memori--date-selector__select">
-          <Listbox
-            value={date}
-            onChange={value => {
-              setDate(value);
-            }}
+      <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}
-            name="day"
-          >
-            <Listbox.Label className="memori--date-selector__select-label">
-              {t('day')}:
-            </Listbox.Label>
-            <Listbox.Button
-              aria-label={t('day')}
-              className="memori--date-selector__select-button"
-            >
-              <span className="memori--date-selector__select--value">
-                {date.day}
-              </span>
-              <span className="memori--date-selector__select--icon">
-                <SelectIcon />
-              </span>
-            </Listbox.Button>
-            <Transition
-              as={Fragment}
-              leave="transition ease-in duration-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Listbox.Options className="memori--date-selector__select-options">
-                {[...Array(31).keys()].map(day => (
-                  <Listbox.Option
-                    key={day}
-                    value={date.set({ day: day + 1 })}
-                    className="memori--date-selector__select-option"
-                  >
-                    {day + 1}
-                  </Listbox.Option>
-                ))}
-              </Listbox.Options>
-            </Transition>
-          </Listbox>
+          />
         </div>
 
-        <div className="memori--date-selector__select">
-          <Listbox
-            value={date}
-            onChange={value => {
-              setDate(value);
-            }}
+        <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}
-            name="month"
-          >
-            <Listbox.Label className="memori--date-selector__select-label">
-              {t('month')}:
-            </Listbox.Label>
-            <Listbox.Button
-              aria-label={t('month')}
-              className="memori--date-selector__select-button"
-            >
-              <span className="memori--date-selector__select--value">
-                {months[i18n.language === 'it' ? 'it' : 'en'][date.month - 1]}
-              </span>
-              <span className="memori--date-selector__select--icon">
-                <SelectIcon />
-              </span>
-            </Listbox.Button>
-            <Transition
-              as={Fragment}
-              leave="transition ease-in duration-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Listbox.Options className="memori--date-selector__select-options">
-                {months[i18n.language === 'it' ? 'it' : 'en'].map(month => (
-                  <Listbox.Option
-                    key={month}
-                    className="memori--date-selector__select-option"
-                    value={date.set({
-                      month:
-                        months[i18n.language === 'it' ? 'it' : 'en'].findIndex(
-                          m => m === month
-                        ) + 1,
-                    })}
-                  >
-                    {month}
-                  </Listbox.Option>
-                ))}
-              </Listbox.Options>
-            </Transition>
-          </Listbox>
+          />
         </div>
 
-        <div className="memori--date-selector__select">
-          <Listbox
-            value={date}
-            onChange={value => {
-              setDate(value);
-            }}
+        <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}
-            name="year"
-          >
-            <Listbox.Label className="memori--date-selector__select-label">
-              {t('year')}:
-            </Listbox.Label>
-            <Listbox.Button
-              aria-label={t('year')}
-              className="memori--date-selector__select-button"
-            >
-              <span className="memori--date-selector__select--value">
-                {date.year}
-              </span>
-              <span className="memori--date-selector__select--icon">
-                <SelectIcon />
-              </span>
-            </Listbox.Button>
-            <Transition
-              as={Fragment}
-              leave="transition ease-in duration-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Listbox.Options className="memori--date-selector__select-options">
-                {[...Array(DateTime.now().year - 1899).keys()]
-                  .sort((a, b) => b - a)
-                  .map(year => (
-                    <Listbox.Option
-                      key={year}
-                      value={date.set({ year: year + 1900 })}
-                      className="memori--date-selector__select-option"
-                    >
-                      {year + 1900}
-                    </Listbox.Option>
-                  ))}
-              </Listbox.Options>
-            </Transition>
-          </Listbox>
+          />
         </div>
       </div>
     );

package/src/components/Header/Header.stories.tsx

@@ -4,7 +4,8 @@ import { memori, tenant, history } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
 import Header, { Props } from './Header';
 import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
-import LoginDrawer from '../LoginDrawer/LoginDrawer';
+import LoginDrawer from '../LoginDrawer/LoginDrawer'; 
+import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
 
 import './Header.css';
 
@@ -37,6 +38,7 @@ const Template: Story<Props> = args => {
 
   return (
     <I18nWrapper>
+      <ArtifactProvider>
       <Header
         {...args}
         speakerMuted={speakerMuted}
@@ -62,6 +64,7 @@ const Template: Story<Props> = args => {
         setEnablePositionControls={() => {}}
       />
       <LoginDrawer
+        setUser={() => {}}
         tenant={tenant}
         open={!!showLoginDrawer}
         onClose={() => setShowLoginDrawer(false)}
@@ -76,6 +79,7 @@ const Template: Story<Props> = args => {
           } as any
         }
       />
+      </ArtifactProvider>
     </I18nWrapper>
   );
 };

package/src/components/Header/Header.tsx

@@ -290,7 +290,7 @@ const Header: React.FC<Props> = ({
         <Button
           primary
           shape="circle"
-          className="memori-header--button memori-header--button--speaker"
+          className={cx('memori-header--button memori-header--button--speaker', { 'memori-header--button--speaker-muted': speakerMuted })}
           icon={speakerMuted ? <SoundDeactivated /> : <Sound />}
           onClick={() => setSpeakerMuted(!speakerMuted)}
           title={t('widget.sound') || 'Sound'}

package/src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -869,7 +869,7 @@ exports[`renders Header with speaker muted unchanged 1`] = `
     class="memori-header"
   >
     <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker memori-header--button--speaker-muted"
       title="widget.sound"
     >
       <span

package/src/components/LoginDrawer/LoginDrawer.css

@@ -134,10 +134,12 @@ p.memori--login-drawer--inline-error {
 }
 
 @keyframes float {
+
     0%,
     100% {
         transform: translateY(0px);
     }
+
     50% {
         transform: translateY(-10px);
     }
@@ -219,10 +221,12 @@ p.memori--login-drawer--inline-error {
 }
 
 @keyframes pulse {
+
     0%,
     100% {
         transform: scale(1);
     }
+
     50% {
         transform: scale(1.05);
     }
@@ -336,10 +340,12 @@ p.memori--login-drawer--inline-error {
 }
 
 @keyframes rocket {
+
     0%,
     100% {
         transform: translateY(0) rotate(0deg);
     }
+
     50% {
         transform: translateY(-3px) rotate(5deg);
     }
@@ -372,9 +378,11 @@ p.memori--login-drawer--inline-error {
     0% {
         background-position: 0% 50%;
     }
+
     50% {
         background-position: 100% 50%;
     }
+
     100% {
         background-position: 0% 50%;
     }
@@ -393,6 +401,7 @@ p.memori--login-drawer--inline-error {
 }
 
 @keyframes bounce {
+
     0%,
     20%,
     50%,
@@ -400,9 +409,11 @@ p.memori--login-drawer--inline-error {
     100% {
         transform: translateY(0);
     }
+
     40% {
         transform: translateY(-10px);
     }
+
     60% {
         transform: translateY(-5px);
     }
@@ -479,7 +490,7 @@ p.memori--login-drawer--inline-error {
 .memori--login-drawer--otp-input:focus {
     border-color: var(--memori-primary);
     background: white;
-    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+    box-shadow: 0 0 0 4px rgba(var(--memori-primary-rgb), 0.1);
     transform: scale(1.02);
 }
 
@@ -512,7 +523,7 @@ p.memori--login-drawer--inline-error {
 .memori--login-drawer--otp-email-input:focus {
     border-color: var(--memori-primary);
     background: white;
-    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+    box-shadow: 0 0 0 4px rgba(var(--memori-primary-rgb), 0.1);
     transform: translateY(-1px);
 }
 
@@ -540,9 +551,11 @@ p.memori--login-drawer--inline-error {
     0% {
         transform: scale(0) rotate(0deg);
     }
+
     50% {
         transform: scale(1.2) rotate(180deg);
     }
+
     100% {
         transform: scale(1) rotate(360deg);
     }
@@ -569,6 +582,7 @@ p.memori--login-drawer--inline-error {
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }
@@ -597,6 +611,7 @@ p.memori--login-drawer--inline-error {
         opacity: 0;
         transform: translateY(20px);
     }
+
     to {
         opacity: 1;
         transform: translateY(0);
@@ -611,13 +626,16 @@ p.memori--login-drawer--inline-error {
 }
 
 @keyframes celebration {
+
     0%,
     100% {
         transform: scale(1) rotate(0deg);
     }
+
     25% {
         transform: scale(1.1) rotate(-5deg);
     }
+
     75% {
         transform: scale(1.1) rotate(5deg);
     }
@@ -648,10 +666,12 @@ p.memori--login-drawer--inline-error {
 }
 
 @keyframes timerPulse {
+
     0%,
     100% {
         transform: scale(1);
     }
+
     50% {
         transform: scale(1.02);
     }
@@ -663,13 +683,16 @@ p.memori--login-drawer--inline-error {
 }
 
 @keyframes tick {
+
     0%,
     100% {
         transform: rotate(0deg);
     }
+
     25% {
         transform: rotate(-10deg);
     }
+
     75% {
         transform: rotate(10deg);
     }
@@ -721,6 +744,7 @@ p.memori--login-drawer--inline-error {
         opacity: 0;
         transform: translateY(-10px);
     }
+
     to {
         opacity: 1;
         transform: translateY(0);
@@ -733,10 +757,12 @@ p.memori--login-drawer--inline-error {
 }
 
 @keyframes warning {
+
     0%,
     100% {
         transform: scale(1);
     }
+
     50% {
         transform: scale(1.1);
     }
@@ -768,22 +794,27 @@ p.memori--login-drawer--inline-error {
     0% {
         transform: scale(1);
     }
+
     50% {
         transform: scale(1.05);
     }
+
     100% {
         transform: scale(1);
     }
 }
 
 @keyframes shake {
+
     0%,
     100% {
         transform: translateX(0);
     }
+
     25% {
         transform: translateX(-5px);
     }
+
     75% {
         transform: translateX(5px);
     }
@@ -844,7 +875,7 @@ p.memori--login-drawer--inline-error {
         max-width: 200px;
     }
 
-    .memori--login-drawer--otp-label{
+    .memori--login-drawer--otp-label {
         min-width: auto;
     }
 }
@@ -1257,6 +1288,7 @@ p.memori--login-drawer--inline-error {
     width: 1.5rem;
     height: 1.5rem;
 }
+
 /* .memori--login-drawer--stat-card:hover::before {
     transform: scaleX(1);
 } */
@@ -1372,7 +1404,7 @@ p.memori--login-drawer--inline-error {
     transform: translateY(-50%) rotate(180deg);
 }
 
-.memori--login-drawer--account-form .memori--details > *:not(summary) {
+.memori--login-drawer--account-form .memori--details>*:not(summary) {
     padding: 1.5rem;
 }
 
@@ -1581,4 +1613,4 @@ p.memori--login-drawer--inline-error {
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
     }
-}
+}

package/src/components/LoginDrawer/LoginDrawer.stories.tsx

@@ -61,7 +61,6 @@ export const SignupWaitingForOtp = Template.bind({});
 SignupWaitingForOtp.args = {
   open: true,
   __TEST__signup: true,
-  __TEST__waitingForOtp: true,
 };
 
 export const ChangePassword = Template.bind({});