@memori.ai/memori-react 6.8.1 → 6.8.4

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

@@ -26,7 +26,116 @@ const Template: Story<Props> = 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.
+    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>
 );
 
@@ -35,11 +144,13 @@ const Template: Story<Props> = args => (
 export const Default = Template.bind({});
 Default.args = {
   rows: 2,
+  mode: 'rows',
 };
 
 export const DefaultExpanded = Template.bind({});
 DefaultExpanded.args = {
   rows: 3,
+  mode: 'rows',
   defaultExpanded: true,
 };
 
@@ -51,3 +162,19 @@ WithCustomProps.args = {
   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.tsx

@@ -2,9 +2,11 @@ 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;
+  rows?: number;
   className?: string;
   innerClassName?: string;
   btnClassName?: string;
@@ -13,6 +15,7 @@ export interface Props {
   expandSymbol?: (lang: string) => React.ReactNode;
   collapseSymbol?: (lang: string) => React.ReactNode;
   children: React.ReactNode;
+  mode?: 'rows' | 'characters';
 }
 
 const Expandable = ({
@@ -26,6 +29,7 @@ const Expandable = ({
   collapseSymbol = (lang: string) =>
     lang === 'it' ? 'Mostra meno' : 'Show less',
   children,
+  mode = 'rows',
 }: Props) => {
   const { i18n } = useTranslation();
   const lang = i18n.language;
@@ -34,31 +38,47 @@ const Expandable = ({
   const [expanded, setExpanded] = useState(defaultExpanded);
   const [needsExpanding, setNeedsExpanding] = useState(false);
   const [rowHeight, setRowHeight] = useState(16);
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (ref.current) {
-      let height = (ref.current as HTMLElement).getBoundingClientRect().height;
-      let computedStyle = getComputedStyle(ref.current as HTMLElement);
-      let elLineHeight = computedStyle.lineHeight;
-      let lineHeight =
-        elLineHeight === 'normal' || !elLineHeight?.length
-          ? lineHeightMultiplier * parseInt(computedStyle.fontSize, 10)
-          : parseInt(elLineHeight, 10);
+      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);
 
-      console.table({
-        rows,
-        lineHeight,
-        height,
-        maxHeight: rows * lineHeight,
-        needsExpanding: height > rows * lineHeight,
-      });
-      setRowHeight(lineHeight);
-      if (height && height > rows * lineHeight) {
-        setNeedsExpanding(true);
+        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, ref.current]);
+  }, [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)}>
@@ -67,10 +87,12 @@ const Expandable = ({
         className={cx('memori-expandable--inner', innerClassName)}
         style={{
           maxHeight:
-            expanded || !needsExpanding ? '9999px' : `${rowHeight * rows}px`,
+            expanded || !needsExpanding || mode === 'characters'
+              ? '9999px'
+              : `${rowHeight * (rows || 1)}px`,
         }}
       >
-        {children}
+        {renderContent()}
       </div>
       {needsExpanding && !expanded && (
         <Button

package/src/components/ui/Slider.css

@@ -0,0 +1,192 @@
+.memori--slider-container {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  padding: 12px 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  touch-action: none;
+  user-select: none;
+
+}
+
+.memori--slider-disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.memori--slider-header {
+  position: absolute;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  /* max-height: 10px; */
+}
+
+.memori--slider-label {
+  max-width: 70%;
+  font-size: 1.2rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.memori--slider-value {
+  min-width: 40px;
+  max-width: 30%;
+  font-size: 1rem;
+  font-weight: 500;
+  text-align: right;
+}
+
+.memori--slider-track-container {
+  position: relative;
+  display: flex;
+  height: 96px;
+  max-height: 96px;
+  align-items: center;
+  margin-top: 8px;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.memori--slider-track {
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 16px;
+  max-height: 16px;
+  border-radius: 8px;
+  background-color: #e5e5e5;
+}
+
+.memori--slider-track-fill {
+  position: absolute;
+  width: var(--percentage);
+  height: 100%;
+  border-radius: 8px;
+  background-color: var(--memori-primary, #2563eb);
+  transition: width 0.15s ease;
+}
+
+.memori--slider-marks {
+  position: absolute;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 8px;
+  padding-top: 24px;
+  pointer-events: none;
+}
+
+.memori--slider-mark {
+  display: flex;
+  min-width: 40px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.memori--slider-mark-line {
+  width: 3px;
+  height: 8px;
+  max-height: 8px;
+  margin-bottom: 8px;
+  background-color: #9ca3af;
+}
+
+.memori--slider-mark-value {
+  color: #666;
+  font-size: 1rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.memori--slider-thumb {
+  position: absolute;
+  z-index: 1;
+  left: var(--percentage);
+  width: 40px;
+  max-width: 40px;
+  height: 40px;
+  max-height: 40px;
+  border: 4px solid var(--memori-primary, #2563eb);
+  border-radius: 50%;
+  background-color: white;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
+  touch-action: none;
+  transform: translateX(-50%);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.memori--slider-thumb:hover,
+.memori--slider-thumb:active {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+  transform: translateX(-50%) scale(1.1);
+}
+
+/* Portrait/Totem specific styles */
+@media screen and (max-aspect-ratio: 3/4) {
+  .memori--slider-container {
+    padding: 16px;
+  }
+
+  .memori--slider-header {
+    margin-bottom: 16px;
+  }
+
+  .memori--slider-label {
+    font-size: 1.3rem;
+  }
+
+  .memori--slider-value {
+    min-width: 50px;
+    font-size: 1.1rem;
+  }
+
+  .memori--slider-track-container {
+    height: 80px;
+    margin-top: 8px;
+  }
+
+  .memori--slider-track {
+    height: 16px;
+    border-radius: 10px;
+  }
+
+  .memori--slider-thumb {
+    width: 48px;
+    height: 48px;
+    border-width: 4px;
+  }
+
+  .memori--slider-mark-value {
+    margin-top: 4px;
+    font-size: 1.1rem;
+  }
+}
+
+/* Very tall displays */
+@media screen and (min-height: 1200px) {
+  .memori--slider-container {
+    padding: 24px 20px;
+  }
+
+  .memori--slider-header {
+    margin-bottom: 24px;
+  }
+
+  .memori--slider-label {
+    font-size: 1.4rem;
+  }
+
+  .memori--slider-track-container {
+    height: 96px;
+    margin-top: 12px;
+  }
+
+  .memori--slider-thumb {
+    width: 56px;
+    height: 56px;
+    border-width: 5px;
+  }
+}

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Slider, { Props } from './Slider';
+
+import './Slider.css';
+
+const meta: Meta = {
+  title: 'UI/Slider',
+  component: Slider,
+  argTypes: {
+    min: {
+      control: {
+        type: 'number',
+      },
+    },
+    max: {
+      control: {
+        type: 'number',
+      },
+    },
+    step: {
+      control: {
+        type: 'number',
+      },
+    },
+  },        
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => (
+  <Slider {...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 = {
+  min: 0,
+  max: 100,
+  step: 1,
+  defaultValue: 50,
+};
+
+export const Spinning = Template.bind({});
+Spinning.args = {
+  min: 0,
+  max: 100,
+  step: 1,
+  defaultValue: 50,
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  min: 0,
+  max: 100,
+  step: 1,
+  defaultValue: 50,
+  primary: true,
+};

package/src/components/ui/Slider.tsx

@@ -0,0 +1,142 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Listbox } from '@headlessui/react';
+import cx from 'classnames';
+export interface Props {
+  min?: number;
+  max?: number;
+  step?: number;
+  defaultValue?: number;
+  label?: string | React.ReactNode;
+  onChange?: (value: number) => void;
+  disabled?: boolean;
+}
+
+const CustomSlider = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  defaultValue = 50,
+  label,
+  onChange,
+  disabled = false,
+}: Props) => {
+  const [value, setValue] = useState(defaultValue);
+  const [isDragging, setIsDragging] = useState(false);
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const percentage = ((value - min) / (max - min)) * 100;
+
+  const marks = [];
+  for (let i = min; i <= max; i += (max - min) / 4) {
+    marks.push(Math.round(i));
+  }
+
+  const calculateNewValue = (clientX: number) => {
+    if (!sliderRef.current) return value;
+
+    const bounds = sliderRef.current.getBoundingClientRect();
+    const position = clientX - bounds.left;
+    const sliderWidth = bounds.width;
+    const percentage = Math.max(0, Math.min(100, (position / sliderWidth) * 100));
+    const newValue = Math.round((percentage / 100) * (max - min) + min);
+    const steppedValue = Math.round(newValue / step) * step;
+    return Math.min(Math.max(steppedValue, min), max);
+  };
+
+  const handleInteractionStart = (clientX: number) => {
+    if (disabled) return;
+    setIsDragging(true);
+    const newValue = calculateNewValue(clientX);
+    setValue(newValue);
+    onChange?.(newValue);
+  };
+
+  const handleInteractionMove = (clientX: number) => {
+    if (!isDragging || disabled) return;
+    const newValue = calculateNewValue(clientX);
+    setValue(newValue);
+    onChange?.(newValue);
+  };
+
+  const handleInteractionEnd = () => {
+    setIsDragging(false);
+  };
+
+  useEffect(() => {
+    const handleTouchMove = (e: TouchEvent) => {
+      if (!isDragging) return;
+      e.preventDefault(); // Prevent scrolling while dragging
+      handleInteractionMove(e.touches[0].clientX);
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      handleInteractionMove(e.clientX);
+    };
+
+    const handleEndInteraction = () => {
+      handleInteractionEnd();
+    };
+
+    if (isDragging) {
+      window.addEventListener('touchmove', handleTouchMove, { passive: false });
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('touchend', handleEndInteraction);
+      window.addEventListener('mouseup', handleEndInteraction);
+    }
+
+    return () => {
+      window.removeEventListener('touchmove', handleTouchMove);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('touchend', handleEndInteraction);
+      window.removeEventListener('mouseup', handleEndInteraction);
+    };
+  }, [isDragging]);
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  return (
+    <div 
+      className={cx('memori--slider-container', { 'memori--slider-disabled': disabled })}
+      style={{ '--percentage': `${percentage}%` } as React.CSSProperties}
+    >
+      <div className="memori--slider-header">
+        {label && <div className="memori--slider-label">{label}</div>}
+        <div className="memori--slider-value">{value}</div>
+      </div>
+      
+      <div
+        ref={sliderRef}
+        className="memori--slider-track-container"
+        onMouseDown={(e) => handleInteractionStart(e.clientX)}
+        onTouchStart={(e) => handleInteractionStart(e.touches[0].clientX)}
+      >
+        <div className="memori--slider-track">
+          <div className="memori--slider-track-fill" />
+        </div>
+
+        <div className="memori--slider-marks">
+          {marks.map((mark) => (
+            <div key={mark} className="memori--slider-mark">
+              <div className="memori--slider-mark-line" />
+              <span className="memori--slider-mark-value">{mark}</span>
+            </div>
+          ))}
+        </div>
+
+        <Listbox value={value} onChange={setValue} disabled={disabled}>
+          <div 
+            className="memori--slider-thumb"
+            role="slider"
+            aria-valuemin={min}
+            aria-valuemax={max}
+            aria-valuenow={value}
+            tabIndex={disabled ? -1 : 0}
+          />
+        </Listbox>
+      </div>
+    </div>
+  );
+};
+
+export default CustomSlider;

package/src/components/ui/Table.css

@@ -7,12 +7,21 @@ table.memori--table {
     font-size: 1rem;
 }
 
+table.memori--table.memori--table--compact {
+    --memori-table-spacing: 0.5rem;
+    font-size: 0.875rem;
+}
+
 @media (max-width: 767px) {
     table.memori--table {
         --memori-table-spacing: 0.5rem;
 
         font-size: 0.875rem;
     }
+
+    table.memori--table.memori--table--compact {
+        font-size: 0.75rem;
+    }
 }
 
 :where(table) {
@@ -28,6 +37,10 @@ table.memori--table {
     overflow-x: auto;
 }
 
+.memori--responsive-table-wrapper > br {
+    display: none;
+}
+
 table.memori--table th,
 table.memori--table td {
     padding: calc(var(--memori-table-spacing) / 2) var(--memori-table-spacing);
@@ -47,7 +60,7 @@ table.memori--table tfoot td {
     border-bottom: 0;
 }
 
-table.memori--table[role="grid"] tbody tr:nth-child(odd) {
+table.memori--table[role='grid'] tbody tr:nth-child(odd) {
     background-color: var(--memori-table-bg-color);
 }
 
@@ -116,4 +129,4 @@ table.memori--table td.memori--table--column-right {
 
 .memori--table--date {
     white-space: nowrap;
-}
+}