@memori.ai/memori-react 1.0.0-alpha.1

package/src/components/Auth/Auth.css

@@ -0,0 +1,57 @@
+.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

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { Meta, Story } from '@storybook/react';
+import AuthWidget, { Props } from './Auth';
+
+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<'password' | 'tokens'>(
+    args.pwdOrTokens as 'password' | 'tokens'
+  );
+
+  return (
+    <AuthWidget
+      {...args}
+      pwdOrTokens={pwdOrTokens}
+      setPwdOrTokens={setPwdOrTokens}
+    />
+  );
+};
+
+const TemplateWithModal: Story<Props> = args => {
+  const [pwdOrTokens, setPwdOrTokens] = useState<'password' | 'tokens'>(
+    args.pwdOrTokens as 'password' | 'tokens'
+  );
+
+  return (
+    <AuthWidget
+      {...args}
+      withModal
+      pwdOrTokens={pwdOrTokens}
+      setPwdOrTokens={setPwdOrTokens}
+    />
+  );
+};
+
+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

@@ -0,0 +1,59 @@
+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}
+    />
+  );
+  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}
+    />
+  );
+  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}
+    />
+  );
+  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}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/Auth/Auth.tsx

@@ -0,0 +1,172 @@
+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';
+
+import './Auth.css';
+
+export interface Props {
+  pwdOrTokens: null | 'password' | 'tokens';
+  setPwdOrTokens: (state: 'password' | 'tokens') => void;
+  onFinish?: (values: AuthInputs) => Promise<void>;
+  minimumNumberOfRecoveryTokens?: number;
+  showTokens?: boolean;
+  withModal?: 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,
+  withModal = false,
+}: Props) => {
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setError,
+  } = useForm<AuthInputs>();
+  const [numTokens, setNumTokens] = useState(1);
+
+  const [showModal, setShowModal] = useState(true);
+
+  const onSubmit: SubmitHandler<AuthInputs> = data => {
+    if (
+      (pwdOrTokens === 'password' && !data.password?.length) ||
+      (pwdOrTokens === 'tokens' &&
+        ((data?.tokens?.length || 0) < minimumNumberOfRecoveryTokens ||
+          !data?.tokens?.every(t => t.length)))
+    ) {
+      setError('tokens', {
+        type: 'minLength',
+        message: 'Tokens',
+      });
+      return;
+    }
+
+    if (onFinish) {
+      onFinish(data).then(() => {
+        setShowModal(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>
+      )}
+
+      {!withModal && (
+        <Button
+          htmlType="submit"
+          primary
+          className="memori-auth-widget--submit"
+        >
+          {t('confirm') || 'Submit'}
+        </Button>
+      )}
+    </form>
+  );
+
+  return withModal ? (
+    <Modal
+      open={showModal}
+      title="Authentication"
+      onClose={() => {}}
+      closable={false}
+      footer={
+        <Button
+          htmlType="submit"
+          primary
+          className="memori-auth-widget--submit"
+        >
+          {t('auth.submit') || 'Submit'}
+        </Button>
+      }
+    >
+      {form}
+    </Modal>
+  ) : (
+    form
+  );
+};
+
+export default AuthWidget;

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

@@ -0,0 +1,143 @@
+// 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-auth-widget--token-add memori-button memori-button--rounded memori-button--padded memori-button--with-icon"
+      >
+        <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-auth-widget--submit memori-button memori-button--primary memori-button--rounded memori-button--padded"
+      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-auth-widget--submit memori-button memori-button--primary memori-button--rounded memori-button--padded"
+      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-auth-widget--submit memori-button memori-button--primary memori-button--rounded memori-button--padded"
+      type="submit"
+    >
+      confirm
+    </button>
+  </form>
+</div>
+`;

package/src/components/Avatar/Avatar.css

@@ -0,0 +1,151 @@
+@media (min-width: 870px) {
+    .memori--blob-container {
+        position: relative;
+        top: 50%;
+        width: 100%;
+        margin-bottom: auto;
+    }
+
+    .memori--blob-container .memori-blob {
+        top: 50%;
+        left: 50%;
+        width: 70%;
+        max-width: 300px;
+        height: 70%;
+        max-height: 300px;
+    }
+
+    .memori--blob-container .memori-blob figure {
+        width: 100%;
+        height: auto;
+        aspect-ratio: 1;
+    }
+
+    .memori--blob-container .memori-blob .mainDiv {
+        overflow: hidden;
+        width: 100%;
+        height: auto;
+        padding-top: 100%;
+    }
+}
+
+@media (max-width: 870px) {
+    .memori--blob-container {
+        position: static;
+        display: none;
+        width: 100%;
+    }
+
+    .memori--blob-container .memori-blob {
+        position: relative;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori--blob-container {
+        display: none;
+    }
+}
+
+.memori--avatar-wrapper {
+    z-index: 100;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori--avatar-wrapper.hidden {
+    display: none;
+}
+
+@media (max-width: 870px) {
+
+    .memori--avatar-wrapper div,
+    .memori--avatar-wrapper canvas,
+    .memori--avatar-wrapper model-viewer {
+        width: 150px !important;
+        height: 150px !important;
+    }
+
+    .memori--avatar-wrapper model-viewer {
+        margin-top: 2rem;
+    }
+
+    .memori--avatar-wrapper div {
+        top: 1rem;
+    }
+}
+
+@media (orientation: landscape) and (max-width: 870px) {
+    .memori--avatar-wrapper {
+        display: none;
+    }
+}
+
+.memori--avatar-wrapper .avatar-loader figure {
+    width: 100%;
+    height: 300px;
+}
+
+.memori--avatar-wrapper .avatar-loader figure img {
+    width: 250px;
+    height: 250px;
+}
+
+@media (max-width: 870px) {
+    .memori--avatar-wrapper .avatar-loader figure img {
+        width: 150px;
+        height: 150px;
+    }
+}
+
+.memori--avatar-wrapper .avatar-loader figcaption {
+    max-height: 50px;
+    font-size: 0.8em;
+    text-align: center;
+}
+
+.memori--avatar-toggle {
+    position: absolute;
+    z-index: 1001;
+    top: 0;
+    right: 0;
+    display: inline-flex;
+    align-items: center;
+    text-align: right;
+}
+
+@media (min-width: 871px) {
+    .memori--avatar-toggle {
+        display: none;
+    }
+}
+
+.memori--avatar-toggle button.memori-button {
+    color: var(--memori-primary, #1890ff);
+}
+
+.memori--avatar-toggle .memori--avatar-toggle-text {
+    font-size: 0.85em;
+}
+
+.memori--avatar-link-to-integrations {
+    position: absolute;
+    z-index: 101;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 2rem;
+}
+
+@media (max-width: 768px) {
+    .memori--avatar-link-to-integrations {
+        display: none;
+    }
+}