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

package/src/components/Blob/Blob.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import './Blob.css';
+
+export interface Props {
+  avatar?: string;
+}
+
+const ExperienceBlob = ({ avatar }: Props) => {
+  return (
+    <div className="memori-blob">
+      {avatar && (
+        <figure>
+          <img src={avatar} alt="" role="presentation" />
+        </figure>
+      )}
+      <div className="mainDiv"></div>
+      <div className="mainDiv"></div>
+      <div className="mainDiv"></div>
+      <div className="mainDiv"></div>
+      <div className="mainDiv"></div>
+    </div>
+  );
+};
+
+export default ExperienceBlob;

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

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Blob unchanged 1`] = `
+<div>
+  <div
+    class="memori-blob"
+  >
+    <div
+      class="mainDiv"
+    />
+    <div
+      class="mainDiv"
+    />
+    <div
+      class="mainDiv"
+    />
+    <div
+      class="mainDiv"
+    />
+    <div
+      class="mainDiv"
+    />
+  </div>
+</div>
+`;
+
+exports[`renders Blob with avatar unchanged 1`] = `
+<div>
+  <div
+    class="memori-blob"
+  >
+    <figure>
+      <img
+        alt=""
+        role="presentation"
+        src="/images/logo.png"
+      />
+    </figure>
+    <div
+      class="mainDiv"
+    />
+    <div
+      class="mainDiv"
+    />
+    <div
+      class="mainDiv"
+    />
+    <div
+      class="mainDiv"
+    />
+    <div
+      class="mainDiv"
+    />
+  </div>
+</div>
+`;

package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.css

@@ -0,0 +1,40 @@
+.blocked-memori-badge--wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.blocked-memori-badge {
+    display: flex;
+    width: 1.75rem;
+    height: 1.75rem;
+    align-items: center;
+    justify-content: center;
+    border: 1.5px solid #ffe58f;
+    border-radius: 50%;
+    background: #fffbe6;
+}
+
+.blocked-memori-badge.margin-left {
+    margin-left: 0.5rem;
+}
+
+.blocked-memori-badge--icon {
+    width: 1rem;
+    height: 1rem;
+    color: #d48806;
+    cursor: pointer;
+    fill: currentColor;
+    font-size: 1rem;
+}
+
+.blocked-memori-badge--tooltip {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.blocked-memori-badge--title {
+    margin-left: 0.5rem;
+}

package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import BlockedMemoriBadge, { Props } from './BlockedMemoriBadge';
+
+const meta: Meta = {
+  title: 'Blocked Memori Badge',
+  component: BlockedMemoriBadge,
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <BlockedMemoriBadge {...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 = {
+  memoriName: 'John Doe',
+  blockedUntil: '2051-01-01T00:00:00.000Z',
+};
+
+export const WithGiverInfo = Template.bind({});
+WithGiverInfo.args = {
+  memoriName: 'John Doe',
+  blockedUntil: '2051-01-01T00:00:00.000Z',
+  showGiverInfo: true,
+};
+
+export const WithTitle = Template.bind({});
+WithTitle.args = {
+  memoriName: 'John Doe',
+  blockedUntil: '2051-01-01T00:00:00.000Z',
+  showTitle: true,
+};
+
+export const WithMarginLeft = Template.bind({});
+WithMarginLeft.args = {
+  memoriName: 'John Doe',
+  blockedUntil: '2051-01-01T00:00:00.000Z',
+  marginLeft: true,
+};

package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import BlockedMemoriBadge from './BlockedMemoriBadge';
+
+it('renders BlockedMemoriBadge unchanged', () => {
+  const { container } = render(
+    <BlockedMemoriBadge
+      memoriName="John Doe"
+      blockedUntil="2051-01-01T00:00:00.000Z"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders BlockedMemoriBadge with giver info unchanged', () => {
+  const { container } = render(
+    <BlockedMemoriBadge
+      memoriName="John Doe"
+      blockedUntil="2051-01-01T00:00:00.000Z"
+      showGiverInfo
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+it('renders BlockedMemoriBadge with title unchanged', () => {
+  const { container } = render(
+    <BlockedMemoriBadge
+      memoriName="John Doe"
+      blockedUntil="2051-01-01T00:00:00.000Z"
+      showTitle
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+it('renders BlockedMemoriBadge with margin left unchanged', () => {
+  const { container } = render(
+    <BlockedMemoriBadge
+      memoriName="John Doe"
+      blockedUntil="2051-01-01T00:00:00.000Z"
+      marginLeft
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import Tooltip from '../ui/Tooltip';
+import Warning from '../icons/Warning';
+import { useTranslation } from 'react-i18next';
+
+import './BlockedMemoriBadge.css';
+
+export interface Props {
+  memoriName: string;
+  blockedUntil: string;
+  showGiverInfo?: boolean;
+  showTitle?: boolean;
+  marginLeft?: boolean;
+}
+
+const BlockedMemoriBadge = ({
+  memoriName,
+  blockedUntil,
+  showGiverInfo = false,
+  showTitle = false,
+  marginLeft = false,
+}: Props) => {
+  const { t } = useTranslation();
+  const blockedUntilDate = new Date(blockedUntil);
+
+  return blockedUntilDate > new Date() ? (
+    <Tooltip
+      className="blocked-memori-badge--tooltip"
+      content={
+        <>
+          {!showGiverInfo &&
+            t('memoriBlockedAnon', {
+              name: memoriName,
+              date: new Intl.DateTimeFormat('it', {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+              }).format(blockedUntilDate),
+            })}
+          {showGiverInfo &&
+            t('memoriBlockedUntil', {
+              date: new Intl.DateTimeFormat('it', {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+              }).format(blockedUntilDate),
+            })}
+          {showGiverInfo && ` ${t('memoriBlockedReasonExceedChats')}`}
+          {showGiverInfo && <br />}
+          {showGiverInfo && `\n${t('memoriBlockedGiverHelper')}`}
+        </>
+      }
+    >
+      <div className="blocked-memori-badge--wrapper">
+        <div
+          className={`blocked-memori-badge ${marginLeft ? ` margin-left` : ''}`}
+        >
+          <Warning className="blocked-memori-badge--icon" />
+        </div>
+        {showTitle && (
+          <span className="blocked-memori-badge--title">
+            {t('memoriBlockedTitle')}
+          </span>
+        )}
+      </div>
+    </Tooltip>
+  ) : null;
+};
+
+export default BlockedMemoriBadge;

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

@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders BlockedMemoriBadge unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip blocked-memori-badge--tooltip"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      memoriBlockedAnon
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      <div
+        class="blocked-memori-badge--wrapper"
+      >
+        <div
+          class="blocked-memori-badge "
+        >
+          <svg
+            aria-hidden="true"
+            class="blocked-memori-badge--icon"
+            focusable="false"
+            role="img"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders BlockedMemoriBadge with giver info unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip blocked-memori-badge--tooltip"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      memoriBlockedUntil
+       memoriBlockedReasonExceedChats
+      <br />
+      
+memoriBlockedGiverHelper
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      <div
+        class="blocked-memori-badge--wrapper"
+      >
+        <div
+          class="blocked-memori-badge "
+        >
+          <svg
+            aria-hidden="true"
+            class="blocked-memori-badge--icon"
+            focusable="false"
+            role="img"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders BlockedMemoriBadge with margin left unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip blocked-memori-badge--tooltip"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      memoriBlockedAnon
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      <div
+        class="blocked-memori-badge--wrapper"
+      >
+        <div
+          class="blocked-memori-badge  margin-left"
+        >
+          <svg
+            aria-hidden="true"
+            class="blocked-memori-badge--icon"
+            focusable="false"
+            role="img"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders BlockedMemoriBadge with title unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip blocked-memori-badge--tooltip"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      memoriBlockedAnon
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      <div
+        class="blocked-memori-badge--wrapper"
+      >
+        <div
+          class="blocked-memori-badge "
+        >
+          <svg
+            aria-hidden="true"
+            class="blocked-memori-badge--icon"
+            focusable="false"
+            role="img"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+            />
+          </svg>
+        </div>
+        <span
+          class="blocked-memori-badge--title"
+        >
+          memoriBlockedTitle
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/ChangeMode/ChangeMode.css

@@ -0,0 +1,22 @@
+.memori--changeMode-instruct {
+    padding: 1rem;
+    border-radius: 5px;
+}
+
+.memori--changeMode-instruct-radio {
+    display: flex;
+}
+
+.memori--changeMode-instruct-radio-button:first-of-type button {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.memori--changeMode-instruct-radio-button:last-of-type button {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+
+.memori--changeMode-instruct-radio-button[data-headlessui-state="checked"] button {
+    font-weight: 600;
+}

package/src/components/ChangeMode/ChangeMode.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import ChangeMode, { Props } from './ChangeMode';
+
+const meta: Meta = {
+  title: 'Widget/Change Mode',
+  component: ChangeMode,
+  argTypes: {
+    instruct: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  const [instruct, setInstruct] = React.useState(args.instruct);
+
+  return (
+    <ChangeMode
+      {...args}
+      instruct={instruct}
+      onChangeMode={mode => setInstruct(mode === 'instruct')}
+    />
+  );
+};
+
+// 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 = {
+  instruct: false,
+};
+
+export const Instruct = Template.bind({});
+Instruct.args = {
+  instruct: true,
+};

package/src/components/ChangeMode/ChangeMode.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ChangeMode from './ChangeMode';
+
+it('renders ChangeMode in test mode unchanged', () => {
+  const { container } = render(
+    <ChangeMode instruct={false} onChangeMode={jest.fn()} />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ChangeMode in instruct mode unchanged', () => {
+  const { container } = render(
+    <ChangeMode instruct={true} onChangeMode={jest.fn()} />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ChangeMode/ChangeMode.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { RadioGroup } from '@headlessui/react';
+import { useTranslation } from 'react-i18next';
+import Button from '../ui/Button';
+
+import './ChangeMode.css';
+
+export interface Props {
+  instruct?: boolean;
+  onChangeMode: (mode: 'test' | 'instruct') => void;
+}
+
+const ChangeMode: React.FC<Props> = ({ instruct, onChangeMode }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="memori--changeMode-instruct">
+      <RadioGroup
+        name="instruct"
+        value={instruct ? 'instruct' : 'test'}
+        defaultValue={instruct ? 'instruct' : 'test'}
+        className="memori--changeMode-instruct-radio"
+        onChange={onChangeMode}
+      >
+        <RadioGroup.Option
+          value="instruct"
+          className="memori--changeMode-instruct-radio-button"
+        >
+          {({ checked }) => (
+            <Button primary={checked}>
+              {t('widget.instruct') || 'Instruct'}
+            </Button>
+          )}
+        </RadioGroup.Option>
+        <RadioGroup.Option
+          value="test"
+          className="memori--changeMode-instruct-radio-button"
+        >
+          {({ checked }) => (
+            <Button primary={checked}>{t('widget.test') || 'Test'}</Button>
+          )}
+        </RadioGroup.Option>
+      </RadioGroup>
+    </div>
+  );
+};
+
+export default ChangeMode;

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

@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ChangeMode in instruct mode unchanged 1`] = `
+<div>
+  <div
+    class="memori--changeMode-instruct"
+  >
+    <input
+      checked=""
+      hidden=""
+      name="instruct"
+      readonly=""
+      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;"
+      type="radio"
+      value="instruct"
+    />
+    <div
+      class="memori--changeMode-instruct-radio"
+      id="headlessui-radiogroup-:r3:"
+      role="radiogroup"
+    >
+      <div
+        aria-checked="true"
+        class="memori--changeMode-instruct-radio-button"
+        data-headlessui-state="checked"
+        id="headlessui-radiogroup-option-:r4:"
+        role="radio"
+        tabindex="0"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--rounded memori-button--padded"
+        >
+          widget.instruct
+        </button>
+      </div>
+      <div
+        aria-checked="false"
+        class="memori--changeMode-instruct-radio-button"
+        data-headlessui-state=""
+        id="headlessui-radiogroup-option-:r5:"
+        role="radio"
+        tabindex="-1"
+      >
+        <button
+          class="memori-button memori-button--rounded memori-button--padded"
+        >
+          widget.test
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ChangeMode in test mode unchanged 1`] = `
+<div>
+  <div
+    class="memori--changeMode-instruct"
+  >
+    <input
+      checked=""
+      hidden=""
+      name="instruct"
+      readonly=""
+      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;"
+      type="radio"
+      value="test"
+    />
+    <div
+      class="memori--changeMode-instruct-radio"
+      id="headlessui-radiogroup-:r0:"
+      role="radiogroup"
+    >
+      <div
+        aria-checked="false"
+        class="memori--changeMode-instruct-radio-button"
+        data-headlessui-state=""
+        id="headlessui-radiogroup-option-:r1:"
+        role="radio"
+        tabindex="-1"
+      >
+        <button
+          class="memori-button memori-button--rounded memori-button--padded"
+        >
+          widget.instruct
+        </button>
+      </div>
+      <div
+        aria-checked="true"
+        class="memori--changeMode-instruct-radio-button"
+        data-headlessui-state="checked"
+        id="headlessui-radiogroup-option-:r2:"
+        role="radio"
+        tabindex="0"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--rounded memori-button--padded"
+        >
+          widget.test
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;