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

package/src/components/MediaWidget/LinkItemWidget.tsx

@@ -0,0 +1,176 @@
+import { Medium } from '@memori.ai/memori-api-client/dist/types';
+import React, { useState, useEffect } from 'react';
+import Link from '../icons/Link';
+import cx from 'classnames';
+import { ellipsis } from 'ellipsed';
+import Card from '../ui/Card';
+import { Transition } from '@headlessui/react';
+
+import './LinkItemWidget.css';
+
+export declare type ILinkPreviewInfo = {
+  title?: string | undefined;
+  siteName?: string | undefined;
+  description?: string | undefined;
+  mediaType?: string | undefined;
+  image?: string | undefined;
+  imageWidth?: number | undefined;
+  imageHeight?: number | undefined;
+  favicon?: string | undefined;
+  images?: string[] | undefined;
+  video?: string | undefined;
+  videos?: string[] | undefined;
+};
+
+export interface Props {
+  items: Medium[];
+  baseUrl?: string;
+  descriptionOneLine?: boolean;
+  onLinkPreviewInfo?: (linkPreviewInfo: ILinkPreviewInfo) => void;
+}
+
+const getSiteInfo = async (url: string, baseUrl?: string) => {
+  try {
+    const data = await fetch(
+      `${baseUrl ||
+        'https://app.twincreator.com'}/api/linkpreview/${encodeURIComponent(
+        url
+      )}`
+    );
+    const siteInfo: ILinkPreviewInfo = await data.json();
+    return siteInfo;
+  } catch (err) {
+    console.error('getSiteInfo', err);
+    return null;
+  }
+};
+
+export const RenderLinkItem = ({
+  item,
+  baseUrl,
+  onLinkPreviewInfo,
+  descriptionOneLine = false,
+}: Omit<Props, 'items'> & {
+  item: Medium;
+}) => {
+  const [link, setLink] = useState<
+    (ILinkPreviewInfo & { urlKey: string }) | null
+  >(null);
+  const normURL =
+    item.url?.startsWith('http') || !item.url || item.url?.length === 0
+      ? item.url
+      : `https://${item.url}`;
+
+  useEffect(() => {
+    let normURL =
+      item.url?.startsWith('http') || !item.url || item.url?.length === 0
+        ? item.url
+        : `https://${item.url}`;
+    if (normURL && normURL !== link?.urlKey) {
+      getSiteInfo(normURL, baseUrl).then(siteInfo => {
+        setLink(
+          siteInfo
+            ? ({ ...siteInfo, urlKey: normURL } as ILinkPreviewInfo & {
+                urlKey: string;
+              })
+            : null
+        );
+
+        if (onLinkPreviewInfo && siteInfo) onLinkPreviewInfo(siteInfo);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [item?.url, baseUrl, onLinkPreviewInfo]);
+
+  const title = item.title && item.title.length > 0 ? item.title : link?.title;
+  const description = link?.description;
+  const video = link?.video;
+  const image = link?.image ?? link?.images?.[0];
+
+  useEffect(() => {
+    setTimeout(() => {
+      ellipsis('.memori-link-item--card .memori-card--description', 3, {
+        responsive: true,
+      });
+    }, 300);
+  }, [description, item.mediumID]);
+
+  return (
+    <a
+      href={normURL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="memori-link-item--link"
+    >
+      <Card
+        hoverable
+        className={cx('memori-link-item--card', {
+          'memori-link-item--card-description-oneline': descriptionOneLine,
+          'memori-link-item--card-has-image': image,
+          'memori-link-item--card-has-video': video,
+        })}
+        cover={
+          video ? (
+            <iframe
+              width="100%"
+              height="100%"
+              src={video}
+              title="Video player"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            />
+          ) : image ? (
+            <img
+              className="memori-link-item--card-cover-img"
+              src={image}
+              alt={item.title}
+            />
+          ) : (
+            <div className="memori-link-item--card-cover-icon">
+              <Link className="memori-link-item--icon" />
+            </div>
+          )
+        }
+        title={title}
+        description={description}
+      />
+    </a>
+  );
+};
+
+const LinkItemWidget: React.FC<Props> = ({
+  items,
+  baseUrl,
+  descriptionOneLine = false,
+  onLinkPreviewInfo,
+}: Props) => {
+  return (
+    <Transition appear show as="div" className="memori-link-items">
+      <div className="memori-link-items--grid">
+        {items.map((item, index) => (
+          <Transition.Child
+            as="div"
+            className="memori-link-item"
+            key={item.mediumID}
+            enter={`ease-out duration-500 delay-${index * 100}`}
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-1 scale-100"
+            leave="ease-in duration-300"
+            leaveFrom="opacity-1 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <RenderLinkItem
+              item={item}
+              baseUrl={baseUrl}
+              descriptionOneLine={descriptionOneLine}
+              onLinkPreviewInfo={onLinkPreviewInfo}
+            />
+          </Transition.Child>
+        ))}
+      </div>
+    </Transition>
+  );
+};
+
+export default LinkItemWidget;

package/src/components/MediaWidget/MediaItemWidget.css

@@ -0,0 +1,62 @@
+.memori-media-items--grid {
+    display: grid;
+    grid-auto-flow: dense;
+    grid-gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.memori-media-item--card {
+    margin-bottom: 1rem;
+}
+
+.memori-media-item--image .memori-card--content {
+    padding: 0;
+}
+
+.memori-media-item .memori-card--cover {
+    height: auto;
+}
+
+.memori-media-item .memori-card--cover audio,
+.memori-media-item .memori-card--cover video {
+    border-radius: 5px;
+}
+
+.memori-media-item--image .memori-card--cover {
+    height: auto;
+    background: transparent;
+}
+
+.memori-media-item--figure {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-media-item--figure img {
+    min-width: 100%;
+    min-height: 100%;
+    object-fit: contain;
+}
+
+.memori-media-item--figure-caption {
+    padding: 0.5rem 1rem;
+    margin: 0.5rem 0;
+    color: #666;
+    font-size: 0.875rem;
+    font-style: italic;
+    font-weight: 400;
+    text-align: center;
+}
+
+a.memori-media-item--link {
+    text-decoration: none;
+}
+
+.memori-media-item--icon {
+    width: 50%;
+    height: 50%;
+}

package/src/components/MediaWidget/MediaItemWidget.stories.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import MediaItemWidget, { Props } from './MediaItemWidget';
+
+const meta: Meta = {
+  title: 'Media Widget/Media',
+  component: MediaItemWidget,
+  argTypes: {
+    translateTo: {
+      control: {
+        type: 'select',
+        items: ['IT', 'EN', 'DE', 'FR', 'ES', 'PT', 'RU', 'ZH'],
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <MediaItemWidget {...args} />;
+
+// 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 = {
+  items: [
+    {
+      mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+      mimeType: 'text/javascript',
+      title: 'Snippet',
+      content: "console.log('Hello World!');",
+    },
+    {
+      mediumID: '95226d7e-7bae-465e-8b80-995587bb5972',
+      mimeType: 'image/png',
+      title: 'Image',
+      url: 'https://picsum.photos/200/300',
+      content: 'https://picsum.photos/200/300',
+    },
+    {
+      mediumID: '95226d7e-7bae-465e-8b80-995587bb5973',
+      mimeType: 'application/pdf',
+      title: 'PDF',
+      url:
+        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+      content:
+        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    },
+    {
+      mediumID: '95226d7e-7bae-465e-8b80-995587bb5974',
+      mimeType: 'video/mp4',
+      title: 'Video',
+      url: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      content: 'https://www.w3schools.com/html/mov_bbb.mp4',
+    },
+    {
+      mediumID: '95226d7e-7bae-465e-8b80-995587bb5975',
+      mimeType: 'audio/mpeg',
+      title: 'Audio',
+      url: 'https://www.w3schools.com/html/horse.mp3',
+      content: 'https://www.w3schools.com/html/horse.mp3',
+    },
+    {
+      mediumID: '95226d7e-7bae-465e-8b80-995587bb5976',
+      mimeType: 'application/msword',
+      title: 'Word',
+      url:
+        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+      content:
+        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    },
+    {
+      mediumID: '95226d7e-7bae-465e-8b80-995587bb5977',
+      mimeType: 'application/vnd.ms-excel',
+      title: 'Excel',
+      url:
+        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+      content:
+        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    },
+  ],
+};
+
+export const ImagesGrid = Template.bind({});
+ImagesGrid.args = {
+  items: Array.from({ length: 9 }, (_, i) => ({
+    mediumID: `95226d7e-7bae-465e-8b80-995587bb597${i}`,
+    mimeType: 'image/png',
+    title: `Image ${i}`,
+    url: `https://picsum.photos/${i % 2 ? '200' : '300'}/${
+      i % 3 ? '300' : '200'
+    }?random=${i}`,
+  })),
+};

package/src/components/MediaWidget/MediaItemWidget.test.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { medium, sessionID } from '../../mocks/data';
+import MediaItemWidget from './MediaItemWidget';
+
+it('renders MediaItemWidget unchanged with no media', () => {
+  const { container } = render(
+    <MediaItemWidget items={[]} sessionID={sessionID} />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders MediaItemWidget unchanged with img', () => {
+  const { container } = render(<MediaItemWidget items={[medium]} />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders MediaItemWidget unchanged with img and sessionID', () => {
+  const { container } = render(
+    <MediaItemWidget items={[medium]} sessionID={sessionID} />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders MediaItemWidget with imgs in correct order (creation date)', () => {
+  let now = new Date().toISOString();
+  let past = new Date('01/01/1970').toISOString();
+
+  const { container } = render(
+    <MediaItemWidget
+      items={[
+        {
+          ...medium,
+          url: 'https://memori.ai/now',
+          mediumID: 'now',
+          creationTimestamp: now,
+        },
+        { ...medium, url: 'https://memori.ai/medium' },
+        {
+          ...medium,
+          url: 'https://memori.ai/past',
+          mediumID: 'past',
+          creationTimestamp: past,
+        },
+      ]}
+    />
+  );
+
+  expect(container).toMatchSnapshot();
+});
+
+it('renders MediaItemWidget unchanged with js snippet to show', () => {
+  const { container } = render(
+    <MediaItemWidget
+      items={[
+        {
+          mediumID: 'a669fadb-12c0-469b-9b6c-34db22d371ca',
+          mimeType: 'text/javascript',
+          title: 'Snippet',
+          content: 'console.log("Hello World!");',
+        },
+      ]}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders MediaItemWidget unchanged with js snippet to exec', () => {
+  const { container } = render(
+    <MediaItemWidget
+      items={[
+        {
+          mediumID: 'a669fadb-12c0-469b-9b6c-34db22d371ca',
+          mimeType: 'text/javascript',
+          title: 'Snippet',
+          content: 'console.log("Hello World!");',
+          properties: {
+            executable: true,
+          },
+        },
+      ]}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders MediaItemWidget unchanged with css snippet to show', () => {
+  const { container } = render(
+    <MediaItemWidget
+      items={[
+        {
+          mediumID: '65ca4a6d-f20b-402e-9d79-5e470f247927',
+          mimeType: 'text/css',
+          title: 'Snippet',
+          content: 'body{\n  background-color: #f00;\n}',
+        },
+      ]}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders MediaItemWidget unchanged with css snippet to exec', () => {
+  const { container } = render(
+    <MediaItemWidget
+      items={[
+        {
+          mediumID: '65ca4a6d-f20b-402e-9d79-5e470f247927',
+          mimeType: 'text/css',
+          title: 'Snippet',
+          content: 'body{\n  background-color: #f00;\n}',
+          properties: {
+            executable: true,
+          },
+        },
+      ]}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});