@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

package/src/__snapshots__/index.test.tsx.snap

@@ -3,8 +3,14 @@
 exports[`renders client 1`] = `
 <div>
   <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
+    tabindex="-1"
   />
   <div
     style="display: flex; align-items: center; justify-content: center;"
@@ -22,8 +28,14 @@ exports[`renders client 1`] = `
 exports[`renders client with all the props 1`] = `
 <div>
   <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
+    tabindex="-1"
   />
   <div
     style="display: flex; align-items: center; justify-content: center;"
@@ -41,8 +53,14 @@ exports[`renders client with all the props 1`] = `
 exports[`renders client with audio disabled 1`] = `
 <div>
   <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
+    tabindex="-1"
   />
   <div
     style="display: flex; align-items: center; justify-content: center;"
@@ -60,8 +78,14 @@ exports[`renders client with audio disabled 1`] = `
 exports[`renders client with whiteListedDomains on allowed domains 1`] = `
 <div>
   <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
+    tabindex="-1"
   />
   <div
     style="display: flex; align-items: center; justify-content: center;"
@@ -79,8 +103,14 @@ exports[`renders client with whiteListedDomains on allowed domains 1`] = `
 exports[`renders client with whiteListedDomains on not allowed domains 1`] = `
 <div>
   <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
+    tabindex="-1"
   />
   <div
     style="display: flex; align-items: center; justify-content: center;"

package/src/components/AgeVerificationModal/AgeVerificationModal.css

@@ -21,29 +21,48 @@
     }
 } */
 
-.age-verification-form fieldset {
+.age-verification-form fieldset,
+.age-verification-form .age-verification-birth-field {
     padding-right: 0;
     padding-left: 0;
     border: 0;
 }
 
-.age-verification-form .form-item {
+.age-verification-form .form-item,
+.age-verification-form .age-verification-birth-field {
     width: 100%;
     text-align: center;
 }
 
+.age-verification-form .memori-field__control-wrapper {
+    width: 100%;
+}
+
+.age-verification-form .memori-field__description {
+    padding-bottom: var(--memori-spacing-xs);
+    margin: var(--memori-spacing-lg) 0 var(--memori-spacing-md);
+    opacity: 0.5;
+    text-align: left;
+}
+
+.age-verification-form .memori-field__error {
+    padding-bottom: 0.25rem;
+    margin: 1.5rem 0 1rem;
+    color: var(--memori-error);
+}
+
 .age-verification-form .form-item.submit {
-    margin-top: 1.5rem;
+    margin-top: var(--memori-spacing-lg);
     text-align: center;
 }
 
 .age-verification-form .form-item input {
-    color: #000;
+    color: var(--memori-text-color);
 }
 
 .age-verification-form .form-item-help {
-    padding-bottom: 0.25rem;
-    margin: 1.5rem 0 1rem;
+    padding-bottom: var(--memori-spacing-xs);
+    margin: var(--memori-spacing-lg) 0 var(--memori-spacing-md);
     opacity: 0.5;
     text-align: left;
 }
@@ -51,7 +70,7 @@
 .age-verification-form .form-item-error {
     padding-bottom: 0.25rem;
     margin: 1.5rem 0 1rem;
-    color: var(--memori-error-color);
+    color: var(--memori-error);
 }
 
 button.age-verification-submit {
@@ -63,14 +82,13 @@ button.age-verification-submit {
     min-height: 42px;
     padding: 1rem 2rem;
     border: none;
-    border-radius: 12px;
-    border-radius: 8px;
+    border-radius: var(--memori-radius-box);
     margin-top: 1rem;
     background: var(--memori-primary);
-    color: white;
+    color: var(--memori-text-color);
     cursor: pointer;
-    font-size: 1rem;
-    font-weight: 600;
+    font-size: var(--memori-text-size-base);
+    font-weight: var(--memori-text-weight-semibold);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -93,3 +111,8 @@ button.age-verification-submit:hover::before {
 button.age-verification-submit:active {
     transform: translateY(0);
 }
+
+.age-verification-text{
+    margin-top: 0;
+    margin-bottom: var(--memori-spacing-lg);
+}

package/src/components/AgeVerificationModal/AgeVerificationModal.stories.tsx

@@ -4,6 +4,7 @@ import I18nWrapper from '../../I18nWrapper';
 import AgeVerificationModal, { Props } from './AgeVerificationModal';
 
 import './AgeVerificationModal.css';
+import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
   title: 'AgeVerificationModal',
@@ -18,7 +19,9 @@ export default meta;
 
 const Template: Story<Props> = args => (
   <I18nWrapper>
-    <AgeVerificationModal {...args} />
+    <AlertProvider defaultDuration={5000}>
+      <AgeVerificationModal {...args} />
+    </AlertProvider>
   </I18nWrapper>
 );
 

package/src/components/AgeVerificationModal/AgeVerificationModal.test.tsx

@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render } from '../../testUtils';
 import AgeVerificationModal from './AgeVerificationModal';
 
 beforeEach(() => {

package/src/components/AgeVerificationModal/AgeVerificationModal.tsx

@@ -1,7 +1,12 @@
 import { useTranslation } from 'react-i18next';
-import toast from 'react-hot-toast';
-import Button from '../ui/Button';
-import Modal from '../ui/Modal';
+import {
+  Button,
+  FieldGroup,
+  Form,
+  Modal,
+  useAlertManager,
+  createAlertOptions,
+} from '@memori.ai/ui';
 import { DateTime } from 'luxon';
 import DateSelector from '../DateSelector/DateSelector';
 import { useCallback, useState } from 'react';
@@ -14,7 +19,7 @@ export interface Props {
 
 const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
   const { t } = useTranslation();
-
+  const { add } = useAlertManager();
   const [birthDate, setBirthDate] = useState<DateTime>();
   const [error, setError] = useState<string>();
   const [submitting, setSubmitting] = useState<boolean>(false);
@@ -23,7 +28,12 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
     setSubmitting(true);
 
     if (!birthDate) {
-      toast.error(t('requiredField'));
+      add(
+        createAlertOptions({
+          description: t('requiredField'),
+          severity: 'error',
+        })
+      );
       setError(t('requiredField') || 'Required field');
       setSubmitting(false);
       return;
@@ -31,7 +41,12 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
 
     let age = DateTime.now().diff(birthDate, 'years').years;
     if (age < minAge) {
-      toast.error(t('underageTwinSession', { age: minAge }));
+      add(
+        createAlertOptions({
+          description: t('underageTwinSession', { age: minAge }),
+          severity: 'error',
+        })
+      );
       setError(
         t('underageTwinSession', { age: minAge }) ||
           `You must be at least ${minAge} years old to interact with this Agent`
@@ -40,8 +55,16 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
       return;
     }
 
+    setError(undefined);
+    add(
+      createAlertOptions({
+        description: t('ageVerificationSuccess'),
+        severity: 'success',
+      })
+    );
     onClose(birthDate.toJSDate().toISOString());
-  }, [birthDate, minAge, onClose, t]);
+    setSubmitting(false);
+  }, [add, birthDate, minAge, onClose, t]);
 
   return (
     <Modal
@@ -50,46 +73,43 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
       widthMd="600px"
       title={t('ageVerification')}
       className="age-verification-modal"
-      closable
-      onClose={() => onClose()}
+      closable={false}
     >
-      <p>{t('ageVerificationText', { minAge })}</p>
+      <p className="age-verification-text">{t('ageVerificationText', { minAge })}</p>
 
-      <form
+      <Form
+        name="ageVerification"
         className="age-verification-form"
         onSubmit={e => {
           e.preventDefault();
           onSubmit();
         }}
       >
-        <div className="form-item">
-          <fieldset name="birthDate">
-            <legend className="sr-only">{t('birthDate')}</legend>
-
-            <DateSelector
-              //defaultDate={new Date(Date.now())}
-              onChange={date => {
-                setBirthDate(date);
-              }}
-            />
-
-            <p className="form-item-help">{t('birthDateHelper')}</p>
-
-            {error && <p className="form-item-error">{error}</p>}
-          </fieldset>
-        </div>
-        <div className="form-item form-submit">
-          <Button
-            primary
-            htmlType="submit"
-            className="age-verification-submit"
-            loading={submitting}
-            disabled={!birthDate}
-          >
-            {t('confirm')}
-          </Button>
-        </div>
-      </form>
+        <FieldGroup
+          className="age-verification-birth-field"
+          helperText={t('birthDateHelper')}
+          error={error}
+          invalid={!!error}
+          required
+        >
+          <DateSelector
+            onChange={date => {
+              setBirthDate(date);
+              setError(undefined);
+            }}
+          />
+        </FieldGroup>
+        <Button
+          variant="primary"
+          type="submit"
+          size="lg"
+          loading={submitting}
+          disabled={!birthDate}
+          style={{ marginBottom: '0.25rem' }}
+        >
+          {t('confirm')}
+        </Button>
+      </Form>
     </Modal>
   );
 };

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

@@ -1,11 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders AgeVerificationModal unchanged 1`] = `<div />`;
+exports[`renders AgeVerificationModal unchanged 1`] = `
+<div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
+</div>
+`;
 
 exports[`renders AgeVerificationModal visible unchanged 1`] = `
 <div>
   <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
   />
 </div>
 `;
@@ -13,7 +31,13 @@ exports[`renders AgeVerificationModal visible unchanged 1`] = `
 exports[`renders AgeVerificationModal with minAge unchanged 1`] = `
 <div>
   <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
   />
 </div>
 `;

package/src/components/Auth/Auth.css

@@ -1,3 +1,7 @@
+.memori-auth-widget--form {
+    padding: var(--memori-spacing-md);
+}
+
 .memori-auth-widget--form fieldset {
     padding: 0;
     border: 0;
@@ -17,10 +21,10 @@
 input.memori-auth-widget--input {
     min-height: 2.5rem;
     border: 1px solid #e0e0e0;
-    border-radius: 0.375rem;
+    border-radius: var(--memori-radius-box);
     appearance: none;
     background: inherit;
-    font-size: 1rem;
+    font-size: var(--memori-text-size-base);
     outline: transparent solid 2px;
     outline-offset: 2px;
     padding-inline-end: 1rem;
@@ -30,7 +34,7 @@ input.memori-auth-widget--input {
 }
 
 input.memori-auth-widget--input::placeholder {
-    color: #bdbdbd;
+    color: var(--memori-text-color);
 }
 
 input.memori-auth-widget--input:hover {
@@ -43,15 +47,15 @@ input.memori-auth-widget--input:focus {
 
 .memori-auth-widget--token {
     display: block;
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--memori-spacing-sm);
 }
 
 .memori-auth-widget--error {
-    padding: 1rem 1.5rem;
+    padding: var(--memori-spacing-lg) var(--memori-spacing-xl);
     border: 1px solid currentColor;
-    border-radius: 10px;
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
+        border-radius: var(--memori-radius-box);
+        margin-top: var(--memori-spacing-sm);
+    margin-bottom: var(--memori-spacing-lg);
     background-color: rgba(255, 235, 238, 0.5);
-    color: #f44336;
+    color: var(--memori-text-color);
 }

package/src/components/Auth/Auth.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import Button from '../ui/Button';
-import Modal from '../ui/Modal';
+import { Button, Input, Modal, Form } from '@memori.ai/ui';
 import { useForm, SubmitHandler } from 'react-hook-form';
-import Plus from '../icons/Plus';
+import { Plus } from 'lucide-react';
 
 export interface Props {
   pwdOrTokens: null | 'password' | 'tokens';
@@ -94,16 +93,17 @@ export const AuthWidget = ({
   };
 
   const form = (
-    <form
-      name="memoriAuth"
+    <Form
+      name="auth"
       onSubmit={handleSubmit(onSubmit)}
       className="memori-auth-widget--form"
     >
       {(pwdOrTokens === 'password' || !showTokens) && (
         <fieldset className="memori-auth-widget--password-fieldset">
-          <label>
+          <label htmlFor="auth-password">
             Password:{' '}
-            <input
+            <Input
+              id="auth-password"
               className="memori-auth-widget--input"
               required
               type="password"
@@ -114,7 +114,7 @@ export const AuthWidget = ({
           {showTokens && (
             <>
               <hr />
-              <Button outlined onClick={() => setPwdOrTokens('tokens')}>
+              <Button variant="outline" onClick={() => setPwdOrTokens('tokens')}>
                 {t('auth.useRecoveryTokens') || 'Recovery tokens'}
               </Button>
             </>
@@ -127,12 +127,24 @@ export const AuthWidget = ({
           {createArrayWithNumbers(numTokens).map(idx => {
             return (
               <label className="memori-auth-widget--token" key={idx}>
-                <input
+                <span className="sr-only">
+                  {t('auth.tokenNumber', {
+                    defaultValue: 'Recovery token {{number}}',
+                    number: idx + 1,
+                  })}
+                </span>
+                <Input
                   type="password"
                   className="memori-auth-widget--input"
                   placeholder="Recovery token"
                   required
                   autoComplete="off"
+                  aria-label={String(
+                    t('auth.tokenNumber', {
+                      defaultValue: 'Recovery token {{number}}',
+                      number: idx + 1,
+                    })
+                  )}
                   {...register(`tokens.${idx}`, {
                     required: true,
                   })}
@@ -150,46 +162,46 @@ export const AuthWidget = ({
           </Button>
 
           <hr />
-          <Button outlined onClick={() => setPwdOrTokens('password')}>
+          <Button variant="outline" onClick={() => setPwdOrTokens('password')}>
             {t('auth.usePassword') || 'Password'}
           </Button>
         </fieldset>
       )}
 
       {errors.tokens?.type === 'minLength' && (
-        <div className="memori-auth-widget--error">
+        <div role="alert" className="memori-auth-widget--error">
           {t('auth.atLeast') || 'At least'} {minimumNumberOfRecoveryTokens}
         </div>
       )}
 
       {errors.password?.type === 'auth' && (
-        <div className="memori-auth-widget--error">
+        <div role="alert" className="memori-auth-widget--error">
           {errors.password.message}
         </div>
       )}
       {errors.tokens?.type === 'auth' && (
-        <div className="memori-auth-widget--error">
+        <div role="alert" className="memori-auth-widget--error">
           {errors.tokens.message}
         </div>
       )}
 
       <Button
-        htmlType="submit"
-        primary
+        type="submit"
+        variant="primary"
         className="memori-auth-widget--submit"
         loading={isSubmitting}
       >
         {t('confirm') || 'Submit'}
       </Button>
-    </form>
+    </Form>
   );
 
   return withModal ? (
     <Modal
       open={openModal || showModal}
       title={t('auth.title') || 'Authentication'}
-      onClose={() => setPwdOrTokens(null)}
-      closable={false}
+      closable={true}
+      onOpenChange={() => setPwdOrTokens(null)}
     >
       {form}
     </Modal>