@memori.ai/memori-react 8.45.2 → 8.45.4

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

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders AgeVerificationModal unchanged 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;"
-  />
-</div>
-`;
-
-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;"
-  />
-</div>
-`;

package/src/components/Auth/Auth.css

@@ -1,57 +0,0 @@
-.memori-auth-widget--form fieldset {
-    padding: 0;
-    border: 0;
-    margin: 0 0 1em;
-}
-
-.memori-auth-widget--form hr {
-    border-top: 0;
-    border-bottom: 1px solid #e0e0e0;
-}
-
-.memori-auth-widget--form label {
-    display: flex;
-    flex-direction: column;
-}
-
-input.memori-auth-widget--input {
-    min-height: 2.5rem;
-    border: 1px solid #e0e0e0;
-    border-radius: 0.375rem;
-    appearance: none;
-    background: inherit;
-    font-size: 1rem;
-    outline: transparent solid 2px;
-    outline-offset: 2px;
-    padding-inline-end: 1rem;
-    padding-inline-start: 1rem;
-    transition-duration: 0.2s;
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
-}
-
-input.memori-auth-widget--input::placeholder {
-    color: #bdbdbd;
-}
-
-input.memori-auth-widget--input:hover {
-    border-color: #c0c0c0;
-}
-
-input.memori-auth-widget--input:focus {
-    border-color: var(--memori-primary);
-}
-
-.memori-auth-widget--token {
-    display: block;
-    margin-bottom: 0.5rem;
-}
-
-.memori-auth-widget--error {
-    padding: 1rem 1.5rem;
-    border: 1px solid currentColor;
-    border-radius: 10px;
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
-    background-color: rgba(255, 235, 238, 0.5);
-    color: #f44336;
-}

package/src/components/Auth/Auth.stories.tsx

@@ -1,90 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import AuthWidget, { Props } from './Auth';
-
-import './Auth.css';
-
-const meta: Meta = {
-  title: 'Auth Widget',
-  component: AuthWidget,
-  argTypes: {
-    pwdOrTokens: {
-      control: {
-        type: 'select',
-        options: ['password', 'tokens'],
-      },
-    },
-    showTokens: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  const [pwdOrTokens, setPwdOrTokens] = useState<null | 'password' | 'tokens'>(
-    args.pwdOrTokens as 'password' | 'tokens' | null
-  );
-
-  return (
-    <I18nWrapper>
-      <AuthWidget
-        {...args}
-        pwdOrTokens={pwdOrTokens}
-        setPwdOrTokens={setPwdOrTokens}
-      />
-    </I18nWrapper>
-  );
-};
-
-const TemplateWithModal: Story<Props> = args => {
-  const [pwdOrTokens, setPwdOrTokens] = useState<null | 'password' | 'tokens'>(
-    args.pwdOrTokens as 'password' | 'tokens' | null
-  );
-
-  return (
-    <I18nWrapper>
-      <AuthWidget
-        {...args}
-        withModal
-        pwdOrTokens={pwdOrTokens}
-        setPwdOrTokens={setPwdOrTokens}
-      />
-    </I18nWrapper>
-  );
-};
-
-export const Password = Template.bind({});
-Password.args = {
-  pwdOrTokens: 'password',
-  minimumNumberOfRecoveryTokens: 2,
-  showTokens: false,
-};
-
-export const WithTokens = Template.bind({});
-WithTokens.args = {
-  pwdOrTokens: 'password',
-  minimumNumberOfRecoveryTokens: 2,
-  showTokens: true,
-};
-
-export const Tokens = Template.bind({});
-Tokens.args = {
-  pwdOrTokens: 'tokens',
-  minimumNumberOfRecoveryTokens: 2,
-  showTokens: true,
-};
-
-export const WithModal = TemplateWithModal.bind({});
-WithModal.args = {
-  pwdOrTokens: 'password',
-  minimumNumberOfRecoveryTokens: 2,
-  showTokens: true,
-};

package/src/components/Auth/Auth.test.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Auth from './Auth';
-
-it('renders Auth unchanged', () => {
-  const { container } = render(
-    <Auth
-      pwdOrTokens="password"
-      setPwdOrTokens={() => {}}
-      minimumNumberOfRecoveryTokens={2}
-      showTokens={false}
-      onFinish={() => Promise.resolve()}
-      withModal={false}
-      openModal
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Auth with tokens unchanged', () => {
-  const { container } = render(
-    <Auth
-      pwdOrTokens="password"
-      setPwdOrTokens={() => {}}
-      minimumNumberOfRecoveryTokens={2}
-      showTokens={true}
-      onFinish={() => Promise.resolve()}
-      withModal={false}
-      openModal
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Auth on tokens unchanged', () => {
-  const { container } = render(
-    <Auth
-      pwdOrTokens="tokens"
-      setPwdOrTokens={() => {}}
-      minimumNumberOfRecoveryTokens={2}
-      showTokens={true}
-      onFinish={() => Promise.resolve()}
-      withModal={false}
-      openModal
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Auth with modal unchanged', () => {
-  const { container } = render(
-    <Auth
-      pwdOrTokens="password"
-      setPwdOrTokens={() => {}}
-      minimumNumberOfRecoveryTokens={2}
-      showTokens={true}
-      onFinish={() => Promise.resolve()}
-      withModal={true}
-      openModal
-    />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/Auth/Auth.tsx

@@ -1,201 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Button from '../ui/Button';
-import Modal from '../ui/Modal';
-import { useForm, SubmitHandler } from 'react-hook-form';
-import Plus from '../icons/Plus';
-
-export interface Props {
-  pwdOrTokens: null | 'password' | 'tokens';
-  setPwdOrTokens: (state: null | 'password' | 'tokens') => void;
-  onFinish?: (values: AuthInputs) => Promise<void>;
-  minimumNumberOfRecoveryTokens?: number;
-  showTokens?: boolean;
-  withModal?: boolean;
-  openModal?: boolean;
-}
-
-type AuthInputs = {
-  password?: string;
-  tokens?: string[];
-};
-
-function createArrayWithNumbers(length: number) {
-  return Array.from({ length }, (_, i) => i);
-}
-
-export const AuthWidget = ({
-  pwdOrTokens,
-  setPwdOrTokens,
-  onFinish,
-  minimumNumberOfRecoveryTokens = 1,
-  showTokens = true,
-  openModal = false,
-  withModal = false,
-}: Props) => {
-  const { t } = useTranslation();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    setError,
-  } = useForm<AuthInputs>();
-  const [numTokens, setNumTokens] = useState(1);
-
-  const [showModal, setShowModal] = useState(!!pwdOrTokens);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const onSubmit: SubmitHandler<AuthInputs> = data => {
-    const missingPassword = pwdOrTokens === 'password' && !data.password?.length;
-    const invalidTokens =
-      pwdOrTokens === 'tokens' &&
-      ((data?.tokens?.length || 0) < minimumNumberOfRecoveryTokens ||
-        !data?.tokens?.every(t => t.length));
-
-    if (missingPassword) {
-      setError('password', {
-        type: 'required',
-        message: t('auth.passwordRequired') || 'Password required',
-      });
-      return;
-    }
-
-    if (invalidTokens) {
-      setError('tokens', {
-        type: 'minLength',
-        message: t('auth.tokens') || 'Tokens',
-      });
-      return;
-    }
-
-    if (onFinish) {
-      setIsSubmitting(true);
-      onFinish(data)
-        .then(() => {
-          setShowModal(false);
-        })
-        .catch(() => {
-          if (pwdOrTokens === 'password') {
-            setError('password', {
-              type: 'auth',
-              message: t('auth.invalidCredentials') || 'Invalid credentials',
-            });
-          } else if (pwdOrTokens === 'tokens') {
-            setError('tokens', {
-              type: 'auth',
-              message: t('auth.invalidCredentials') || 'Invalid credentials',
-            });
-          }
-        })
-        .finally(() => {
-          setIsSubmitting(false);
-        });
-    }
-  };
-
-  const form = (
-    <form
-      name="memoriAuth"
-      onSubmit={handleSubmit(onSubmit)}
-      className="memori-auth-widget--form"
-    >
-      {(pwdOrTokens === 'password' || !showTokens) && (
-        <fieldset className="memori-auth-widget--password-fieldset">
-          <label>
-            Password:{' '}
-            <input
-              className="memori-auth-widget--input"
-              required
-              type="password"
-              placeholder="Password"
-              {...register('password', { required: true })}
-            />
-          </label>
-          {showTokens && (
-            <>
-              <hr />
-              <Button outlined onClick={() => setPwdOrTokens('tokens')}>
-                {t('auth.useRecoveryTokens') || 'Recovery tokens'}
-              </Button>
-            </>
-          )}
-        </fieldset>
-      )}
-      {pwdOrTokens === 'tokens' && showTokens && (
-        <fieldset className="memori-auth-widget--tokens-fieldset" name="tokens">
-          <legend>{t('auth.tokens')}: </legend>
-          {createArrayWithNumbers(numTokens).map(idx => {
-            return (
-              <label className="memori-auth-widget--token" key={idx}>
-                <input
-                  type="password"
-                  className="memori-auth-widget--input"
-                  placeholder="Recovery token"
-                  required
-                  autoComplete="off"
-                  {...register(`tokens.${idx}`, {
-                    required: true,
-                  })}
-                />
-              </label>
-            );
-          })}
-
-          <Button
-            onClick={() => setNumTokens(t => t + 1)}
-            className="memori-auth-widget--token-add"
-            icon={<Plus />}
-          >
-            {t('auth.addToken') || 'Add token'}
-          </Button>
-
-          <hr />
-          <Button outlined onClick={() => setPwdOrTokens('password')}>
-            {t('auth.usePassword') || 'Password'}
-          </Button>
-        </fieldset>
-      )}
-
-      {errors.tokens?.type === 'minLength' && (
-        <div className="memori-auth-widget--error">
-          {t('auth.atLeast') || 'At least'} {minimumNumberOfRecoveryTokens}
-        </div>
-      )}
-
-      {errors.password?.type === 'auth' && (
-        <div className="memori-auth-widget--error">
-          {errors.password.message}
-        </div>
-      )}
-      {errors.tokens?.type === 'auth' && (
-        <div className="memori-auth-widget--error">
-          {errors.tokens.message}
-        </div>
-      )}
-
-      <Button
-        htmlType="submit"
-        primary
-        className="memori-auth-widget--submit"
-        loading={isSubmitting}
-      >
-        {t('confirm') || 'Submit'}
-      </Button>
-    </form>
-  );
-
-  return withModal ? (
-    <Modal
-      open={openModal || showModal}
-      title={t('auth.title') || 'Authentication'}
-      onClose={() => setPwdOrTokens(null)}
-      closable={false}
-    >
-      {form}
-    </Modal>
-  ) : (
-    form
-  );
-};
-
-export default AuthWidget;

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

@@ -1,143 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Auth on tokens unchanged 1`] = `
-<div>
-  <form
-    class="memori-auth-widget--form"
-    name="memoriAuth"
-  >
-    <fieldset
-      class="memori-auth-widget--tokens-fieldset"
-      name="tokens"
-    >
-      <legend>
-        auth.tokens
-        : 
-      </legend>
-      <label
-        class="memori-auth-widget--token"
-      >
-        <input
-          autocomplete="off"
-          class="memori-auth-widget--input"
-          name="tokens.0"
-          placeholder="Recovery token"
-          required=""
-          type="password"
-        />
-      </label>
-      <button
-        class="memori-button memori-button--rounded memori-button--padded memori-button--with-icon memori-auth-widget--token-add"
-      >
-        <span
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-            />
-            <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-            />
-          </svg>
-        </span>
-        auth.addToken
-      </button>
-      <hr />
-      <button
-        class="memori-button memori-button--outlined memori-button--rounded memori-button--padded"
-      >
-        auth.usePassword
-      </button>
-    </fieldset>
-    <button
-      class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-auth-widget--submit"
-      type="submit"
-    >
-      confirm
-    </button>
-  </form>
-</div>
-`;
-
-exports[`renders Auth unchanged 1`] = `
-<div>
-  <form
-    class="memori-auth-widget--form"
-    name="memoriAuth"
-  >
-    <fieldset
-      class="memori-auth-widget--password-fieldset"
-    >
-      <label>
-        Password:
-         
-        <input
-          class="memori-auth-widget--input"
-          name="password"
-          placeholder="Password"
-          required=""
-          type="password"
-        />
-      </label>
-    </fieldset>
-    <button
-      class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-auth-widget--submit"
-      type="submit"
-    >
-      confirm
-    </button>
-  </form>
-</div>
-`;
-
-exports[`renders Auth with modal 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;"
-  />
-</div>
-`;
-
-exports[`renders Auth with tokens unchanged 1`] = `
-<div>
-  <form
-    class="memori-auth-widget--form"
-    name="memoriAuth"
-  >
-    <fieldset
-      class="memori-auth-widget--password-fieldset"
-    >
-      <label>
-        Password:
-         
-        <input
-          class="memori-auth-widget--input"
-          name="password"
-          placeholder="Password"
-          required=""
-          type="password"
-        />
-      </label>
-      <hr />
-      <button
-        class="memori-button memori-button--outlined memori-button--rounded memori-button--padded"
-      >
-        auth.useRecoveryTokens
-      </button>
-    </fieldset>
-    <button
-      class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-auth-widget--submit"
-      type="submit"
-    >
-      confirm
-    </button>
-  </form>
-</div>
-`;