@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

package/src/components/ui/Expandable.stories.tsx

@@ -1,180 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import Expandable, { Props } from './Expandable';
-
-import './Expandable.css';
-
-const meta: Meta = {
-  title: 'UI/Expandable',
-  component: Expandable,
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <Expandable {...args}>
-    Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
-    sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a
-    sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
-    nisi. Lorem Ipsum is simply dummy text of the printing and typesetting
-    industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever
-    since the 1500s, when an unknown printer took a galley of type and scrambled
-    it to make a type specimen book. It has survived not only five centuries,
-    but also the leap into electronic typesetting, remaining essentially
-    unchanged. It was popularised in the 1960s with the release of Letraset
-    sheets containing Lorem Ipsum passages, and more recently with desktop
-    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    Lorem Ipsum has been the industry&apos;s standard dummy text ever since the
-    1500s, when an unknown printer took a galley of type and scrambled it to
-    make a type specimen book. It has survived not only five centuries, but also
-    the leap into electronic typesetting, remaining essentially unchanged. It
-    was popularised in the 1960s with the release of Letraset sheets containing
-    Lorem Ipsum passages, and more recently with desktop publishing software
-    like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is
-    simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-    been the industry&apos;s standard dummy text ever since the 1500s, when an
-    unknown printer took a galley of type and scrambled it to make a type
-    specimen book. It has survived not only five centuries, but also the leap
-    into electronic typesetting, remaining essentially unchanged. It was
-    popularised in the 1960s with the release of Letraset sheets containing
-    Lorem Ipsum passages, and more recently with desktop publishing software
-    like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is
-    simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-    been the industry&apos;s standard dummy text ever since the 1500s, when an
-    unknown printer took a galley of type and scrambled it to make a type
-    specimen book. It has survived not only five centuries, but also the leap
-    into electronic typesetting, remaining essentially unchanged. It was
-    popularised in the 1960s with the release of Letraset sheets containing
-    Lorem Ipsum passages, and more recently with desktop publishing software
-    like Aldus PageMaker including versions of Lorem Ipsum.
-  </Expandable>
-);
-
-const TemplateWithHTML: Story<Props> = args => (
-  <Expandable {...args}>
-    <p>
-      Ah, ottima domanda! Stavo giusto riflettendo su come spiegare al meglio le
-      funzionalità di questo sistema.{' '}
-    </p>
-    <p>Da qui puoi fare diverse cose interessanti:</p>
-    <ol>
-      <li>
-        <p>
-          Puoi conversare con me, Nunzio Fiore, e io risponderò basandomi sulle
-          mie conoscenze ed esperienze.
-        </p>
-      </li>
-      <li>
-        <p>
-          Puoi aggiungere nuove memorie o informazioni al mio database. Questo
-          significa che puoi insegnarmi cose nuove o aggiornare le mie
-          conoscenze esistenti.
-        </p>
-      </li>
-      <li>
-        <p>
-          Puoi creare, modificare o eliminare ricevitori. Questi sono come
-          utenti specifici che possono interagire con me in modo personalizzato.
-        </p>
-      </li>
-      <li>
-        <p>
-          Puoi associare determinate memorie a ricevitori specifici, creando
-          così contenuti personalizzati per diverse persone.
-        </p>
-      </li>
-      <li>
-        <p>
-          Puoi cercare tra le memorie esistenti, visualizzare le ultime
-          aggiunte, o modificare quelle già presenti.
-        </p>
-      </li>
-    </ol>
-    <p>
-      In pratica, stai interagendo con un sistema che permette di creare e
-      gestire un &quot;gemello digitale&quot; - in questo caso, me stesso. È un
-      po&apos; come scrivere un libro interattivo sulla mia vita e le mie
-      conoscenze.
-    </p>
-    <p>
-      C&apos;è qualcosa in particolare che ti interessa esplorare o su cui
-      vorresti saperne di più?
-    </p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-    <div className="memori--responsive-table-wrapper">
-      <table className="memori--table memori--table--compact">
-        <thead>
-          <tr>
-            <th>Header 1</th>
-            <th>Header 2</th>
-            <th>Header 3</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Cell 1</td>
-            <td>Cell 2</td>
-            <td>Cell 3</td>
-          </tr>
-          <tr>
-            <td>Cell 4</td>
-            <td>Cell 5</td>
-            <td>Cell 6</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-  </Expandable>
-);
-
-// 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 = {
-  rows: 2,
-  mode: 'rows',
-};
-
-export const DefaultExpanded = Template.bind({});
-DefaultExpanded.args = {
-  rows: 3,
-  mode: 'rows',
-  defaultExpanded: true,
-};
-
-export const WithCustomProps = Template.bind({});
-WithCustomProps.args = {
-  rows: 3,
-  innerClassName: 'custom-inner-class',
-  btnClassName: 'custom-btn-class',
-  expandSymbol: () => '🔽',
-  collapseSymbol: () => '🔼',
-};
-
-export const WithHTML = TemplateWithHTML.bind({});
-WithHTML.args = {
-  rows: 3,
-  mode: 'rows',
-};
-
-export const ModeChar = Template.bind({});
-ModeChar.args = {
-  mode: 'characters',
-};
-
-export const ModeCharWithHTML = TemplateWithHTML.bind({});
-ModeCharWithHTML.args = {
-  mode: 'characters',
-};

package/src/components/ui/Expandable.test.tsx

@@ -1,107 +0,0 @@
-import { render } from '@testing-library/react';
-import Expandable from './Expandable';
-
-it('renders Expandable unchanged', () => {
-  const { container } = render(<Expandable rows={1}>Test</Expandable>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Expandable with long text unchanged', () => {
-  const { container } = render(
-    <Expandable rows={1}>
-      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
-      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
-      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
-      nisi.
-    </Expandable>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Expandable with multiple rows unchanged', () => {
-  const { container } = render(
-    <Expandable rows={3}>
-      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
-      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
-      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
-      nisi.
-    </Expandable>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Expandable with custom wrapper CSS class unchanged', () => {
-  const { container } = render(
-    <Expandable rows={1} className="test">
-      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
-      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
-      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
-      nisi.
-    </Expandable>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Expandable with custom inner CSS class unchanged', () => {
-  const { container } = render(
-    <Expandable rows={1} innerClassName="test">
-      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
-      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
-      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
-      nisi.
-    </Expandable>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Expandable with custom button CSS class unchanged', () => {
-  const { container } = render(
-    <Expandable rows={1} btnClassName="test">
-      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
-      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
-      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
-      nisi.
-    </Expandable>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Expandable with custom expand symbol unchanged', () => {
-  const { container } = render(
-    <Expandable rows={1} expandSymbol={() => 'test'}>
-      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
-      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
-      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
-      nisi.
-    </Expandable>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Expandable with custom collapse symbol unchanged', () => {
-  const { container } = render(
-    <Expandable rows={1} collapseSymbol={() => 'test collapse'} defaultExpanded>
-      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
-      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
-      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
-      nisi.
-    </Expandable>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Expandable with JSX markup unchanged', () => {
-  const { container } = render(
-    <Expandable rows={1}>
-      <h1>Lorem ipsum</h1>
-      <p>Suspendisse a sodales nulla, sed semper nisi.</p>
-      <h2>Suspendisse a sodales nulla, sed semper nisi.</h2>
-      <p>Suspendisse a sodales nulla, sed semper nisi.</p>
-      <p>Suspendisse a sodales nulla, sed semper nisi.</p>
-      <button>Dolor sit amet</button>
-      <p>Suspendisse a sodales nulla, sed semper nisi.</p>
-      <p>Suspendisse a sodales nulla, sed semper nisi.</p>
-    </Expandable>
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/ui/Expandable.tsx

@@ -1,121 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import Button from './Button';
-import cx from 'classnames';
-import { useTranslation } from 'react-i18next';
-import { truncateMessage } from '../../helpers/message';
-import { MAX_MSG_CHARS, MAX_MSG_WORDS } from '../../helpers/constants';
-
-export interface Props {
-  rows?: number;
-  className?: string;
-  innerClassName?: string;
-  btnClassName?: string;
-  lineHeightMultiplier?: number;
-  defaultExpanded?: boolean;
-  expandSymbol?: (lang: string) => React.ReactNode;
-  collapseSymbol?: (lang: string) => React.ReactNode;
-  children: React.ReactNode;
-  mode?: 'rows' | 'characters';
-}
-
-const Expandable = ({
-  rows,
-  className,
-  innerClassName,
-  btnClassName,
-  lineHeightMultiplier = 1.2,
-  defaultExpanded = false,
-  expandSymbol = () => '...',
-  collapseSymbol = (lang: string) =>
-    lang === 'it' ? 'Mostra meno' : 'Show less',
-  children,
-  mode = 'rows',
-}: Props) => {
-  const { i18n } = useTranslation();
-  const lang = i18n.language;
-  const collapseSymbolText = collapseSymbol(lang);
-  const expandSymbolText = expandSymbol(lang);
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const [needsExpanding, setNeedsExpanding] = useState(false);
-  const [rowHeight, setRowHeight] = useState(16);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (ref.current) {
-      if (mode === 'rows') {
-        let height = ref.current.getBoundingClientRect().height;
-        let computedStyle = getComputedStyle(ref.current);
-        let elLineHeight = computedStyle.lineHeight;
-        let lineHeight =
-          elLineHeight === 'normal' || !elLineHeight?.length
-            ? lineHeightMultiplier * parseInt(computedStyle.fontSize, 10)
-            : parseInt(elLineHeight, 10);
-
-        setRowHeight(lineHeight);
-        if (height && rows && height > rows * lineHeight) {
-          setNeedsExpanding(true);
-        }
-      } else if (mode === 'characters') {
-        // Get text content length
-        const textContent = ref.current.textContent || '';
-
-        if (
-          textContent.length > MAX_MSG_CHARS ||
-          textContent.split(' ').length > MAX_MSG_WORDS
-        ) {
-          setNeedsExpanding(true);
-        }
-      }
-    }
-  }, [rows, mode, ref.current]);
-
-  const renderContent = () => {
-    if (mode === 'characters' && !expanded && needsExpanding) {
-      const content = ref.current?.textContent || '';
-      let truncatedContent = truncateMessage(content);
-
-      return truncatedContent;
-    }
-
-    return children;
-  };
-
-  return (
-    <div className={cx('memori-expandable', className)}>
-      <div
-        ref={ref}
-        className={cx('memori-expandable--inner', innerClassName)}
-        style={{
-          maxHeight:
-            expanded || !needsExpanding || mode === 'characters'
-              ? '9999px'
-              : `${rowHeight * (rows || 1)}px`,
-        }}
-      >
-        {renderContent()}
-      </div>
-      {needsExpanding && !expanded && (
-        <Button
-          ghost
-          padded={false}
-          className={btnClassName}
-          onClick={() => setExpanded(true)}
-        >
-          {expandSymbolText}
-        </Button>
-      )}
-      {needsExpanding && expanded && (
-        <Button
-          ghost
-          padded={false}
-          className={btnClassName}
-          onClick={() => setExpanded(false)}
-        >
-          {collapseSymbolText}
-        </Button>
-      )}
-    </div>
-  );
-};
-
-export default Expandable;

package/src/components/ui/Modal.css

@@ -1,98 +0,0 @@
-.memori-modal {
-    position: relative;
-    z-index: 1000;
-}
-
-.memori-modal--backdrop {
-    position: fixed;
-    z-index: 40;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.3);
-}
-
-.memori-modal--container {
-    position: fixed;
-    z-index: 50;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow-y: auto;
-}
-
-.memori-modal--container-scrollable {
-    display: flex;
-    min-height: 100%;
-    align-items: center;
-    justify-content: center;
-}
-
-.memori-modal--panel {
-    position: relative;
-    max-width: var(--memori-modal--width, 100%);
-    padding: 1.5rem;
-    border-radius: 10px;
-    margin-right: auto;
-    margin-left: auto;
-    background-color: #fff;
-    font-family: var(--memori-font-family);
-}
-
-@media (min-width: 768px) {
-    .memori-modal--panel {
-        max-width: var(--memori-modal--width-md, 80%);
-        padding: 2rem 3rem;
-    }
-}
-
-.memori-modal--footer {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 1.5rem;
-}
-
-.memori-modal--footer button+button {
-    margin-left: 0.5em;
-}
-
-.memori-modal--close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0.5rem;
-}
-
-.ease-out {
-    transition-timing-function: ease-out;
-}
-
-.ease-in {
-    transition-timing-function: ease-in;
-}
-
-.duration-300 {
-    transition-duration: 300ms;
-}
-
-.duration-200 {
-    transition-duration: 200ms;
-}
-
-.opacity-0 {
-    opacity: 0;
-}
-
-.opacity-100 {
-    opacity: 1;
-}
-
-.scale-95 {
-    transform: scale(0.95);
-}
-
-.scale-100 {
-    transform: scale(1);
-}

package/src/components/ui/Modal.stories.tsx

@@ -1,171 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import Modal, { Props } from './Modal';
-import Button from './Button';
-
-import './Modal.css';
-
-const meta: Meta = {
-  title: 'UI/Modal',
-  component: Modal,
-  argTypes: {
-    title: {
-      control: {
-        type: 'text',
-      },
-    },
-    description: {
-      control: {
-        type: 'text',
-      },
-    },
-    loading: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    open: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const content = (
-  <>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-    <h3>Suspendisse a sodales nulla, sed semper nisi.</h3>
-    <p>Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.</p>
-    <ul>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-    </ul>
-    <p>Nulla at urna diam.</p>
-  </>
-);
-
-const footer = (
-  <>
-    <Button primary>OK</Button>
-    <Button>Cancel</Button>
-  </>
-);
-
-const footerNonClosableModal = <Button primary>OK</Button>;
-
-const Template: Story<Props> = args => {
-  const [isOpen, setIsOpen] = React.useState(!!args.open || false);
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Click me</Button>
-      <Modal
-        {...args}
-        open={isOpen}
-        onClose={args.closable ? () => setIsOpen(false) : () => {}}
-        footer={args.footer}
-      >
-        {content}
-      </Modal>
-    </>
-  );
-};
-
-const TemplateWithALotOfContent: Story<Props> = args => {
-  const [isOpen, setIsOpen] = React.useState(!!args.open || false);
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Click me</Button>
-      <Modal
-        {...args}
-        open={isOpen}
-        onClose={args.closable ? () => setIsOpen(false) : () => {}}
-        footer={args.footer}
-      >
-        {content}
-        {content}
-        {content}
-        {content}
-        {content}
-      </Modal>
-    </>
-  );
-};
-
-// 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 = {
-  open: false,
-  closable: true,
-};
-
-export const Open = Template.bind({});
-Open.args = {
-  open: true,
-  closable: true,
-};
-
-export const WithTitle = Template.bind({});
-WithTitle.args = {
-  open: true,
-  closable: true,
-  title: 'Modal Title',
-};
-
-export const WithTitleAndDescription = Template.bind({});
-WithTitleAndDescription.args = {
-  open: true,
-  closable: true,
-  title: 'Modal Title',
-  description: 'Modal Description',
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  open: true,
-  closable: true,
-  title: 'Modal Title',
-  description: 'Modal Description',
-  loading: true,
-};
-
-export const WithFooter = Template.bind({});
-WithFooter.args = {
-  open: true,
-  closable: true,
-  title: 'Modal Title',
-  description: 'Modal Description',
-  footer,
-};
-
-export const NonClosable = Template.bind({});
-NonClosable.args = {
-  open: true,
-  title: 'Modal Title',
-  description: 'Modal Description',
-  footer: footerNonClosableModal,
-  closable: false,
-};
-
-export const WithALotOfContent = TemplateWithALotOfContent.bind({});
-WithALotOfContent.args = {
-  open: true,
-  closable: true,
-  title: 'Modal Title',
-  description: 'Modal Description',
-  footer,
-};