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

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

@@ -0,0 +1,369 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders StartPanel on instruct unchanged 1`] = `
+<div>
+  <div
+    class="memori--start-panel"
+  >
+    <div
+      class="memori--cover"
+    >
+      <div
+        class="memori--gamification-badge"
+      >
+        <div
+          class="memori-tooltip memori-tooltip--align-left"
+        >
+          <div
+            class="memori-tooltip--content"
+          >
+            gamification.level 🌍, 61 gamification.points
+          </div>
+          <div
+            class="memori-tooltip--trigger"
+          >
+            <span
+              aria-label="gamification.level 🌍, 61 gamification.points"
+            >
+              🌍
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <picture
+      class="memori--avatar"
+    >
+      <source
+        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+      />
+      <img
+        alt="Memori"
+        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+      />
+    </picture>
+    <h2
+      class="memori--title"
+    >
+      Memori
+    </h2>
+    <div
+      class="memori--description"
+    >
+      <p>
+        <span
+          class="memori--description-text"
+        >
+          Lorem ipsum.
+        </span>
+      </p>
+      <button
+        class="memori--start-button memori-button memori-button--primary memori-button--rounded memori-button--padded"
+      >
+        write_and_speak.instructButton
+      </button>
+      <p
+        class="memori--start-description"
+      >
+        write_and_speak.pageInstructExplanation
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders StartPanel unchanged 1`] = `
+<div>
+  <div
+    class="memori--start-panel"
+  >
+    <div
+      class="memori--cover"
+    />
+    <picture
+      class="memori--avatar"
+    >
+      <source
+        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+      />
+      <img
+        alt="Memori"
+        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+      />
+    </picture>
+    <h2
+      class="memori--title"
+    >
+      Memori
+    </h2>
+    <div
+      class="memori--description"
+    >
+      <p>
+        <span
+          class="memori--description-text"
+        >
+          Lorem ipsum.
+        </span>
+      </p>
+      <button
+        class="memori--start-button memori-button memori-button--primary memori-button--rounded memori-button--padded"
+      >
+        write_and_speak.tryMeButton
+      </button>
+      <p
+        class="memori--start-description"
+      >
+        write_and_speak.pageTryMeExplanation
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders StartPanel with gamification level unchanged 1`] = `
+<div>
+  <div
+    class="memori--start-panel"
+  >
+    <div
+      class="memori--cover"
+    >
+      <div
+        class="memori--gamification-badge"
+      >
+        <div
+          class="memori-tooltip memori-tooltip--align-left"
+        >
+          <div
+            class="memori-tooltip--content"
+          >
+            gamification.level 🌍, 61 gamification.points
+          </div>
+          <div
+            class="memori-tooltip--trigger"
+          >
+            <span
+              aria-label="gamification.level 🌍, 61 gamification.points"
+            >
+              🌍
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <picture
+      class="memori--avatar"
+    >
+      <source
+        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+      />
+      <img
+        alt="Memori"
+        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+      />
+    </picture>
+    <h2
+      class="memori--title"
+    >
+      Memori
+    </h2>
+    <div
+      class="memori--description"
+    >
+      <p>
+        <span
+          class="memori--description-text"
+        >
+          Lorem ipsum.
+        </span>
+      </p>
+      <button
+        class="memori--start-button memori-button memori-button--primary memori-button--rounded memori-button--padded"
+      >
+        write_and_speak.tryMeButton
+      </button>
+      <p
+        class="memori--start-description"
+      >
+        write_and_speak.pageTryMeExplanation
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders StartPanel with integrationConfig unchanged 1`] = `
+<div>
+  <div
+    class="memori--start-panel"
+  >
+    <div
+      class="memori--cover"
+    />
+    <picture
+      class="memori--avatar"
+    >
+      <source
+        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+      />
+      <img
+        alt="Memori"
+        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+      />
+    </picture>
+    <h2
+      class="memori--title"
+    >
+      Memori
+    </h2>
+    <div
+      class="memori--description"
+    >
+      <p>
+        <span
+          class="memori--description-text"
+        >
+          Lorem ipsum.
+        </span>
+      </p>
+      <div
+        class="memori--language-chooser"
+      >
+        <label
+          for="user-lang-pref"
+          id="user-lang-pref-label"
+        >
+          write_and_speak.iWantToTalkToIn
+        </label>
+        <select
+          aria-labelledby="user-lang-pref-label"
+          id="user-lang-pref"
+        >
+          <option
+            aria-label="Italiano"
+            value="IT"
+          >
+            Italiano
+          </option>
+          <option
+            aria-label="English"
+            value="EN"
+          >
+            English
+          </option>
+          <option
+            aria-label="Deutsch"
+            value="DE"
+          >
+            Deutsch
+          </option>
+          <option
+            aria-label="Español"
+            value="ES"
+          >
+            Español
+          </option>
+          <option
+            aria-label="Français"
+            value="FR"
+          >
+            Français
+          </option>
+          <option
+            aria-label="Português"
+            value="PT"
+          >
+            Português
+          </option>
+          <option
+            aria-label="Українська"
+            value="UK"
+          >
+            Українська
+          </option>
+          <option
+            aria-label="Русский"
+            value="RU"
+          >
+            Русский
+          </option>
+        </select>
+      </div>
+      <button
+        class="memori--start-button memori-button memori-button--primary memori-button--rounded memori-button--padded"
+      >
+        write_and_speak.tryMeButton
+      </button>
+      <p
+        class="memori--start-description"
+      >
+        write_and_speak.pageTryMeExplanation
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders StartPanel with position required unchanged 1`] = `
+<div>
+  <div
+    class="memori--start-panel"
+  >
+    <div
+      class="memori--cover"
+    >
+      <div
+        class="memori--gamification-badge"
+      >
+        <div
+          class="memori-tooltip memori-tooltip--align-left"
+        >
+          <div
+            class="memori-tooltip--content"
+          >
+            gamification.level 🌍, 61 gamification.points
+          </div>
+          <div
+            class="memori-tooltip--trigger"
+          >
+            <span
+              aria-label="gamification.level 🌍, 61 gamification.points"
+            >
+              🌍
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <picture
+      class="memori--avatar"
+    >
+      <source
+        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+      />
+      <img
+        alt="Memori"
+        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+      />
+    </picture>
+    <h2
+      class="memori--title"
+    >
+      Memori
+    </h2>
+    <div
+      class="memori--needsPosition"
+    >
+      <p>
+        write_and_speak.requirePosition
+      </p>
+      <button
+        class="memori--start-button memori-button memori-button--primary memori-button--rounded memori-button--padded"
+      >
+        widget.position
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/src/components/UploadMenu/UploadMenu.css

@@ -0,0 +1,46 @@
+.memori-upload-menu {
+    position: relative;
+    display: inline-block;
+}
+
+.memori--conversation-button {
+    cursor: pointer;
+}
+
+.memori-menu--overlay {
+    position: absolute;
+    right: auto;
+    bottom: 100%;
+    left: 0;
+    display: flex;
+    min-width: 10rem;
+    flex-direction: column;
+    padding: 0.5rem 0;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 0.375rem;
+    margin: 0;
+    margin-top: 0.5rem;
+    background-color: #fff;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
+    list-style: none;
+    outline: none;
+    transform-origin: top right;
+}
+
+.memori-menu--li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-menu--button {
+    width: 100%;
+    justify-content: flex-start;
+    color: inherit;
+    text-align: left;
+    text-decoration: none;
+}
+
+.memori-menu--icon {
+    width: 1em;
+}

package/src/components/UploadMenu/UploadMenu.stories.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Meta, Story } from '@storybook/react';
+import UploadMenu, { Props } from './UploadMenu';
+
+const meta: Meta = {
+  title: 'Widget/Upload Menu',
+  component: UploadMenu,
+  argTypes: {
+    attachmentsMenuOpen: {
+      control: {
+        type: 'select',
+        options: ['link', 'media'],
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  const [attachmentsMenuOpen, setAttachmentsMenuOpen] = useState<
+    'link' | 'media' | undefined
+  >(args.attachmentsMenuOpen);
+  return (
+    <div
+      style={{
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'flex-end',
+      }}
+    >
+      <UploadMenu
+        {...args}
+        attachmentsMenuOpen={attachmentsMenuOpen}
+        setAttachmentsMenuOpen={setAttachmentsMenuOpen}
+      />
+    </div>
+  );
+};
+
+// 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 = {
+  attachmentsMenuOpen: undefined,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  attachmentsMenuOpen: undefined,
+  disabled: true,
+};

package/src/components/UploadMenu/UploadMenu.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import UploadMenu from './UploadMenu';
+
+it('renders UploadMenu unchanged', () => {
+  const { container } = render(
+    <UploadMenu setAttachmentsMenuOpen={jest.fn()} />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders UploadMenu disabled unchanged', () => {
+  const { container } = render(
+    <UploadMenu setAttachmentsMenuOpen={jest.fn()} disabled />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders UploadMenu on link selected unchanged', () => {
+  const { container } = render(
+    <UploadMenu attachmentsMenuOpen="link" setAttachmentsMenuOpen={jest.fn()} />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders UploadMenu on media selected unchanged', () => {
+  const { container } = render(
+    <UploadMenu
+      attachmentsMenuOpen="media"
+      setAttachmentsMenuOpen={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/UploadMenu/UploadMenu.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Menu } from '@headlessui/react';
+import cx from 'classnames';
+import Button from '../ui/Button';
+import Link from '../icons/Link';
+import Picture from '../icons/Picture';
+import PaperClip from '../icons/PaperClip';
+
+import './UploadMenu.css';
+
+export interface Props {
+  attachmentsMenuOpen?: 'link' | 'media';
+  setAttachmentsMenuOpen: (value: 'link' | 'media') => void;
+  disabled?: boolean;
+}
+
+const UploadMenu: React.FC<Props> = ({
+  attachmentsMenuOpen,
+  setAttachmentsMenuOpen,
+  disabled = false,
+}) => {
+  return (
+    <Menu as="div" className="memori-upload-menu">
+      <Menu.Button
+        disabled={disabled}
+        className={cx(
+          'memori-button',
+          'memori-button--circle',
+          'memori-button--icon-only',
+          'memori-share-button--button',
+          'memori--conversation-button'
+        )}
+      >
+        <div className="memori-button--icon">
+          <PaperClip />
+        </div>
+      </Menu.Button>
+      <Menu.Items as="ul" className="memori-menu--overlay">
+        <Menu.Item as="li" className="memori-menu--li">
+          <Button
+            className="memori-menu--button"
+            ghost
+            icon={<Link />}
+            outlined={attachmentsMenuOpen === 'link'}
+            onClick={() => setAttachmentsMenuOpen('link')}
+          >
+            Link
+          </Button>
+        </Menu.Item>
+        <Menu.Item>
+          <Button
+            className="memori-menu--button"
+            ghost
+            icon={<Picture />}
+            outlined={attachmentsMenuOpen === 'media'}
+            onClick={() => setAttachmentsMenuOpen('media')}
+          >
+            Media
+          </Button>
+        </Menu.Item>
+      </Menu.Items>
+    </Menu>
+  );
+};
+
+export default UploadMenu;

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

@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders UploadMenu disabled unchanged 1`] = `
+<div>
+  <div
+    class="memori-upload-menu"
+    data-headlessui-state=""
+  >
+    <button
+      aria-haspopup="true"
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
+      data-headlessui-state=""
+      disabled=""
+      id="headlessui-menu-button-:r2:"
+      type="button"
+    >
+      <div
+        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="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0 0 12.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0 0 12.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 0 0 174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders UploadMenu on link selected unchanged 1`] = `
+<div>
+  <div
+    class="memori-upload-menu"
+    data-headlessui-state=""
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
+      data-headlessui-state=""
+      id="headlessui-menu-button-:r4:"
+      type="button"
+    >
+      <div
+        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="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0 0 12.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0 0 12.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 0 0 174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders UploadMenu on media selected unchanged 1`] = `
+<div>
+  <div
+    class="memori-upload-menu"
+    data-headlessui-state=""
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
+      data-headlessui-state=""
+      id="headlessui-menu-button-:r6:"
+      type="button"
+    >
+      <div
+        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="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0 0 12.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0 0 12.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 0 0 174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders UploadMenu unchanged 1`] = `
+<div>
+  <div
+    class="memori-upload-menu"
+    data-headlessui-state=""
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
+      data-headlessui-state=""
+      id="headlessui-menu-button-:r0:"
+      type="button"
+    >
+      <div
+        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="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0 0 12.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0 0 12.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 0 0 174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;