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

package/src/components/MediaWidget/MediaWidget.tsx

@@ -0,0 +1,84 @@
+import {
+  Medium,
+  TranslatedHint,
+} from '@memori.ai/memori-api-client/dist/types';
+import React, { useEffect, useState } from 'react';
+import Button from '../ui/Button';
+import LinkItemWidget from './LinkItemWidget';
+import MediaItemWidget from './MediaItemWidget';
+import { Transition } from '@headlessui/react';
+import cx from 'classnames';
+
+import './MediaWidget.css';
+
+export interface Props {
+  hints?: TranslatedHint[];
+  links?: Medium[];
+  media?: Medium[];
+  simulateUserPrompt?: (item: string, translatedItem?: string) => void;
+  sessionID?: string;
+  baseUrl?: string;
+  translateTo?: string;
+}
+
+const MediaWidget: React.FC<Props> = ({
+  hints = [],
+  links = [],
+  media = [],
+  simulateUserPrompt = () => {},
+  sessionID,
+  baseUrl,
+  translateTo,
+}: Props) => {
+  const [showHints, setShowHints] = useState(true);
+  useEffect(() => {
+    setShowHints(true);
+  }, [hints]);
+
+  return (
+    <div className="memori-media-widget">
+      {media?.length > 0 && (
+        <MediaItemWidget
+          items={media}
+          sessionID={sessionID}
+          translateTo={translateTo}
+        />
+      )}
+      {links?.length > 0 && <LinkItemWidget items={links} baseUrl={baseUrl} />}
+      {hints?.length > 0 && showHints && (
+        <Transition appear show as="ul" className="memori-media--hints">
+          {hints.map((item, index) => (
+            <Transition.Child
+              as="li"
+              key={item.text + index}
+              enter="ease-out duration-500"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-1 translate-y-0"
+              leave="ease-in duration-300"
+              leaveFrom="opacity-1"
+              leaveTo="opacity-0"
+            >
+              <Button
+                key={item.text + index}
+                className={cx('memori-media--hint')}
+                primary
+                onClick={() => {
+                  simulateUserPrompt(item.originalText, item.text);
+                  setShowHints(false);
+                }}
+                onTouchEnd={() => {
+                  simulateUserPrompt(item.originalText, item.text);
+                  setShowHints(false);
+                }}
+              >
+                {item.text}
+              </Button>
+            </Transition.Child>
+          ))}
+        </Transition>
+      )}
+    </div>
+  );
+};
+
+export default MediaWidget;

package/src/components/MediaWidget/__snapshots__/LinkItemWidget.test.tsx.snap

@@ -0,0 +1,253 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders LinkItemWidget unchanged 1`] = `
+<div>
+  <div
+    class="memori-link-items"
+  >
+    <div
+      class="memori-link-items--grid"
+    >
+      <div
+        class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
+      >
+        <a
+          class="memori-link-item--link"
+          href="https://memori.ai/en"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <div
+            class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+          >
+            <div
+              class="memori-spin"
+            >
+              <div
+                class="memori-card--cover"
+              >
+                <div
+                  class="memori-link-item--card-cover-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="memori-link-item--icon"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 1024 1024"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="memori-card--content"
+              >
+                <h3
+                  class="memori-card--title"
+                >
+                  Memori Srl
+                </h3>
+                <div
+                  class="memori-card--children"
+                />
+              </div>
+              <div
+                class="memori-spin--spinner"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="memori-loading-icon"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 1024 1024"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders LinkItemWidget unchanged with baseUrl 1`] = `
+<div>
+  <div
+    class="memori-link-items"
+  >
+    <div
+      class="memori-link-items--grid"
+    >
+      <div
+        class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
+      >
+        <a
+          class="memori-link-item--link"
+          href="https://memori.ai/en"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <div
+            class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+          >
+            <div
+              class="memori-spin"
+            >
+              <div
+                class="memori-card--cover"
+              >
+                <div
+                  class="memori-link-item--card-cover-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="memori-link-item--icon"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 1024 1024"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="memori-card--content"
+              >
+                <h3
+                  class="memori-card--title"
+                >
+                  Memori Srl
+                </h3>
+                <div
+                  class="memori-card--children"
+                />
+              </div>
+              <div
+                class="memori-spin--spinner"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="memori-loading-icon"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 1024 1024"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders LinkItemWidget unchanged with description oneline 1`] = `
+<div>
+  <div
+    class="memori-link-items"
+  >
+    <div
+      class="memori-link-items--grid"
+    >
+      <div
+        class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
+      >
+        <a
+          class="memori-link-item--link"
+          href="https://memori.ai/en"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <div
+            class="memori-card memori-link-item--card memori-link-item--card-description-oneline memori-card--with-cover memori-card--hoverable"
+          >
+            <div
+              class="memori-spin"
+            >
+              <div
+                class="memori-card--cover"
+              >
+                <div
+                  class="memori-link-item--card-cover-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="memori-link-item--icon"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 1024 1024"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="memori-card--content"
+              >
+                <h3
+                  class="memori-card--title"
+                >
+                  Memori Srl
+                </h3>
+                <div
+                  class="memori-card--children"
+                />
+              </div>
+              <div
+                class="memori-spin--spinner"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="memori-loading-icon"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 1024 1024"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders LinkItemWidget unchanged with no media 1`] = `
+<div>
+  <div
+    class="memori-link-items"
+  >
+    <div
+      class="memori-link-items--grid"
+    />
+  </div>
+</div>
+`;