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

package/src/components/PositionDrawer/PositionDrawer.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const PositionDrawer = () => (
+  <div>
+    <h1>Position Drawer</h1>
+  </div>
+);
+
+export default PositionDrawer;

package/src/components/SendOnEnterMenu/SendOnEnterMenu.css

@@ -0,0 +1,47 @@
+.memori-send-on-enter-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: 15rem;
+    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);
+    color: #000;
+    list-style: none;
+    outline: none;
+    transform-origin: top right;
+}
+
+.memori-menu--option {
+    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/SendOnEnterMenu/SendOnEnterMenu.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import SendOnEnterMenu, { Props } from './SendOnEnterMenu';
+
+const meta: Meta = {
+  title: 'Widget/Send On Enter Menu',
+  component: SendOnEnterMenu,
+  argTypes: {
+    sendOnEnter: {
+      control: {
+        type: 'select',
+        options: ['keypress', 'click'],
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  const [sendOnEnter, setSendOnEnter] = React.useState(args.sendOnEnter);
+  return (
+    <div
+      style={{
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'flex-end',
+      }}
+    >
+      <SendOnEnterMenu
+        {...args}
+        sendOnEnter={sendOnEnter}
+        setSendOnEnter={setSendOnEnter}
+      />
+    </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 Click = Template.bind({});
+Click.args = {
+  sendOnEnter: 'click',
+};
+
+export const Keypress = Template.bind({});
+Keypress.args = {
+  sendOnEnter: 'keypress',
+};

package/src/components/SendOnEnterMenu/SendOnEnterMenu.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SendOnEnterMenu from './SendOnEnterMenu';
+
+it('renders SendOnEnterMenu on click unchanged', () => {
+  const { container } = render(
+    <SendOnEnterMenu sendOnEnter="click" setSendOnEnter={jest.fn()} />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders SendOnEnterMenu on keypress unchanged', () => {
+  const { container } = render(
+    <SendOnEnterMenu sendOnEnter="keypress" setSendOnEnter={jest.fn()} />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/SendOnEnterMenu/SendOnEnterMenu.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Menu, RadioGroup } from '@headlessui/react';
+import cx from 'classnames';
+import { useTranslation } from 'react-i18next';
+import Button from '../ui/Button';
+
+import './SendOnEnterMenu.css';
+
+export interface Props {
+  sendOnEnter: 'keypress' | 'click';
+  setSendOnEnter: (value: 'keypress' | 'click') => void;
+}
+
+const SendOnEnterMenu: React.FC<Props> = ({ sendOnEnter, setSendOnEnter }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Menu as="div" className="memori-send-on-enter-menu">
+      <Menu.Button
+        className={cx(
+          'memori-button',
+          'memori-button--circle',
+          'memori-button--icon-only',
+          'memori-share-button--button',
+          'memori--conversation-button'
+        )}
+      >
+        <div className="memori-button--icon">…</div>
+      </Menu.Button>
+      <Menu.Items className="memori-menu--overlay">
+        <RadioGroup value={sendOnEnter} onChange={setSendOnEnter}>
+          <RadioGroup.Option value="keypress" className="memori-menu--option">
+            {({ checked }) => (
+              <Menu.Item>
+                <Button
+                  className="memori-menu--button"
+                  ghost
+                  outlined={checked}
+                  icon={
+                    <span className="memori-menu--icon">
+                      {checked ? '✓' : ''}
+                    </span>
+                  }
+                >
+                  {t('widget.sendOnKeypress')}
+                </Button>
+              </Menu.Item>
+            )}
+          </RadioGroup.Option>
+          <RadioGroup.Option value="click" className="memori-menu--option">
+            {({ checked }) => (
+              <Menu.Item>
+                <Button
+                  className="memori-menu--button"
+                  ghost
+                  outlined={checked}
+                  icon={
+                    <span className="memori-menu--icon">
+                      {checked ? '✓' : ''}
+                    </span>
+                  }
+                >
+                  {t('widget.sendOnClick')}
+                </Button>
+              </Menu.Item>
+            )}
+          </RadioGroup.Option>
+        </RadioGroup>
+      </Menu.Items>
+    </Menu>
+  );
+};
+
+export default SendOnEnterMenu;

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

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders SendOnEnterMenu on click unchanged 1`] = `
+<div>
+  <div
+    class="memori-send-on-enter-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"
+      >
+        …
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders SendOnEnterMenu on keypress unchanged 1`] = `
+<div>
+  <div
+    class="memori-send-on-enter-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-:r2:"
+      type="button"
+    >
+      <div
+        class="memori-button--icon"
+      >
+        …
+      </div>
+    </button>
+  </div>
+</div>
+`;

package/src/components/ShareButton/ShareButton.css

@@ -0,0 +1,57 @@
+.memori-share-button {
+    position: relative;
+    display: inline-block;
+}
+
+.memori-share-button--button {
+    cursor: pointer;
+}
+
+.memori-share-button--overlay {
+    position: absolute;
+    right: auto;
+    left: 0;
+    display: flex;
+    min-width: 14rem;
+    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);
+    color: #000;
+    list-style: none;
+    outline: none;
+    transform-origin: top right;
+}
+
+.memori-share-button.memori-share-button--align-left .memori-share-button--overlay {
+    right: 0;
+    left: auto;
+    transform-origin: top left;
+}
+
+.memori-share-button--li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-share-button--link {
+    width: 100%;
+    justify-content: flex-start;
+    color: inherit;
+    text-align: left;
+    text-decoration: none;
+}
+
+.memori-share-button--li-qr-code {
+    margin-top: 0.5rem;
+    text-align: center;
+}
+
+.memori-share-button--li-qr-code button {
+    color: #000;
+}

package/src/components/ShareButton/ShareButton.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import ShareButton, { Props } from './ShareButton';
+
+const meta: Meta = {
+  title: 'Share Button',
+  component: ShareButton,
+  argTypes: {
+    url: {
+      control: {
+        type: 'text',
+      },
+    },
+    showQrCode: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <ShareButton {...args} />;
+const TemplateRight: Story<Props> = args => (
+  <div style={{ textAlign: 'right' }}>
+    <ShareButton {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  url: 'https://memori.ai',
+  showQrCode: false,
+  align: 'right',
+};
+
+export const WithQrCode = Template.bind({});
+WithQrCode.args = {
+  url: 'https://memori.ai',
+  showQrCode: true,
+  align: 'right',
+};
+
+export const Alignment = TemplateRight.bind({});
+Alignment.args = {
+  url: 'https://memori.ai',
+  align: 'left',
+};

package/src/components/ShareButton/ShareButton.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ShareButton from './ShareButton';
+
+it('renders ShareButton unchanged', () => {
+  const { container } = render(<ShareButton />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ShareButton with url unchanged', () => {
+  const { container } = render(<ShareButton url="https://memori.ai" />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ShareButton with title unchanged', () => {
+  const { container } = render(<ShareButton title="Lorem ipsum" />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ShareButton with button not primary unchanged', () => {
+  const { container } = render(<ShareButton primary={false} />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ShareButton without qr code unchanged', () => {
+  const { container } = render(<ShareButton showQrCode={false} />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ShareButton aligned left unchanged', () => {
+  const { container } = render(<ShareButton align="left" />);
+  expect(container).toMatchSnapshot();
+});

package/src/components/ShareButton/ShareButton.tsx

@@ -0,0 +1,198 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Facebook from '../icons/Facebook';
+import Twitter from '../icons/Twitter';
+import LinkedIn from '../icons/Linkedin';
+import WhatsApp from '../icons/WhatsApp';
+import Mail from '../icons/Mail';
+import Link from '../icons/Link';
+import Share from '../icons/Share';
+import Download from '../icons/Download';
+import Telegram from '../icons/Telegram';
+import { QRCodeCanvas } from 'qrcode.react';
+import { Menu } from '@headlessui/react';
+import Button from '../ui/Button';
+import cx from 'classnames';
+
+import './ShareButton.css';
+
+export interface Props {
+  url?: string;
+  title?: string;
+  className?: string;
+  primary?: boolean;
+  baseUrl?: string;
+  showQrCode?: boolean;
+  align?: 'left' | 'right';
+}
+
+const ShareButton: React.FC<Props> = ({
+  url,
+  title = '',
+  className,
+  baseUrl,
+  primary = true,
+  showQrCode = true,
+  align = 'right',
+}: Props) => {
+  const { t } = useTranslation();
+  const [targetUrl, setTargetUrl] = useState(url);
+
+  useEffect(() => {
+    if (!url) setTargetUrl(window.location.href);
+  }, [url]);
+
+  const socialShare = [
+    {
+      id: 'facebook',
+      title: 'Facebook',
+      url: `https://www.facebook.com/sharer/sharer.php?u=${targetUrl}`,
+      icon: Facebook,
+    },
+    {
+      id: 'twitter',
+      title: 'Twitter',
+      url: `https://twitter.com/intent/tweet?url=${targetUrl}`,
+      icon: Twitter,
+    },
+    {
+      id: 'linkedin',
+      title: 'LinkedIn',
+      url: `https://www.linkedin.com/shareArticle?mini=true&title=${title}&url=${targetUrl}`,
+      icon: LinkedIn,
+    },
+    {
+      id: 'whatsapp',
+      title: 'Whatsapp',
+      url: `https://api.whatsapp.com/send?phone=&text=${targetUrl}`,
+      icon: WhatsApp,
+    },
+    {
+      id: 'telegram',
+      title: 'Telegram',
+      url: `https://t.me/share/url?text=${title}&url=${targetUrl}`,
+      icon: Telegram,
+    },
+    {
+      id: 'email',
+      title: 'Email',
+      url: `mailto:?subject=${
+        title?.length > 0 ? title : url
+      }&body=${targetUrl}`,
+      icon: Mail,
+    },
+  ];
+
+  const downloadQRCode = () => {
+    const canvas: HTMLCanvasElement | null = document.getElementById(
+      'qr-canvas'
+    ) as HTMLCanvasElement | null;
+    console.log();
+    if (!canvas) return;
+    const link = document.createElement('a');
+    link.href = canvas.toDataURL();
+    link.download = `memori-${title}-share.png`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <Menu
+      as="div"
+      className={cx('memori-share-button', {
+        'memori-share-button--align-left': align === 'left',
+      })}
+    >
+      <Menu.Button
+        className={cx(
+          'memori-button',
+          'memori-button--circle',
+          'memori-button--icon-only',
+          'memori-share-button--button',
+          className,
+          {
+            'memori-button--primary': primary,
+          }
+        )}
+        title={t('widget.share') || undefined}
+      >
+        <div className="memori-button--icon">
+          <Share />
+        </div>
+      </Menu.Button>
+      <Menu.Items className="memori-share-button--overlay" as="ul">
+        <Menu.Item key="copy" as="li" className="memori-share-button--li">
+          <Button
+            className="memori-share-button--link"
+            ghost
+            icon={<Link />}
+            onClick={() => {
+              targetUrl && navigator.clipboard.writeText(targetUrl);
+            }}
+          >
+            {t('copyToClipboard') || undefined}
+          </Button>
+        </Menu.Item>
+        {socialShare.map(item => (
+          <Menu.Item key={item.id} as="li" className="memori-share-button--li">
+            <a
+              className={cx(
+                'memori-button',
+                'memori-button--with-icon',
+                'memori-button--ghost',
+                'memori-button--padded',
+                'memori-share-button--link'
+              )}
+              href={item.url ?? ''}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="memori-button--icon">
+                <item.icon />
+              </div>
+              {item.title}
+            </a>
+          </Menu.Item>
+        ))}
+        {showQrCode && (
+          <Menu.Item
+            key="qrcode"
+            as="li"
+            className="memori-share-button--li-qr-code"
+          >
+            <QRCodeCanvas
+              id="qr-canvas"
+              value={targetUrl ?? ''}
+              size={128}
+              bgColor={'#ffffff'}
+              fgColor={'#000000'}
+              level={'H'}
+              includeMargin={false}
+              imageSettings={{
+                src: `${baseUrl ||
+                  'https://app.twincreator.com'}/images/memori_logo.png`,
+                x: undefined,
+                y: undefined,
+                height: 32,
+                width: 32,
+                excavate: true,
+              }}
+            />
+            <div>
+              <Button
+                onClick={downloadQRCode}
+                icon={<Download />}
+                title="Download QR"
+              >
+                Download
+              </Button>
+            </div>
+          </Menu.Item>
+        )}
+      </Menu.Items>
+    </Menu>
+  );
+};
+
+export default ShareButton;