@memori.ai/ui 1.0.0-alpha

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

@@ -0,0 +1,141 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders Dropdown open unchanged 1`] = `
+<div>
+  <div
+    class="memori-dropdown"
+  >
+    <div
+      class="memori-dropdown--trigger"
+      tabindex="0"
+    >
+      <button
+        class="memori-button memori-button--rounded memori-button--padded"
+      >
+        Open
+      </button>
+    </div>
+    <div
+      class="memori-dropdown--content memori-dropdown--content--bottom-right"
+    >
+      <div>
+        Content
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Dropdown unchanged 1`] = `
+<div>
+  <div
+    class="memori-dropdown"
+  >
+    <div
+      class="memori-dropdown--trigger"
+      tabindex="0"
+    >
+      <button
+        class="memori-button memori-button--rounded memori-button--padded"
+      >
+        Open
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Dropdown with className unchanged 1`] = `
+<div>
+  <div
+    class="memori-dropdown custom-dropdown"
+  >
+    <div
+      class="memori-dropdown--trigger"
+      tabindex="0"
+    >
+      <button
+        class="memori-button memori-button--rounded memori-button--padded"
+      >
+        Open
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Dropdown with placement bottom-left unchanged 1`] = `
+<div>
+  <div
+    class="memori-dropdown"
+  >
+    <div
+      class="memori-dropdown--trigger"
+      tabindex="0"
+    >
+      <button
+        class="memori-button memori-button--rounded memori-button--padded"
+      >
+        Open
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Dropdown with placement bottom-right unchanged 1`] = `
+<div>
+  <div
+    class="memori-dropdown"
+  >
+    <div
+      class="memori-dropdown--trigger"
+      tabindex="0"
+    >
+      <button
+        class="memori-button memori-button--rounded memori-button--padded"
+      >
+        Open
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Dropdown with placement top-left unchanged 1`] = `
+<div>
+  <div
+    class="memori-dropdown"
+  >
+    <div
+      class="memori-dropdown--trigger"
+      tabindex="0"
+    >
+      <button
+        class="memori-button memori-button--rounded memori-button--padded"
+      >
+        Open
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Dropdown with placement top-right unchanged 1`] = `
+<div>
+  <div
+    class="memori-dropdown"
+  >
+    <div
+      class="memori-dropdown--trigger"
+      tabindex="0"
+    >
+      <button
+        class="memori-button memori-button--rounded memori-button--padded"
+      >
+        Open
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Dropdown/index.tsx

@@ -0,0 +1,2 @@
+import Dropdown from './Dropdown'
+export { Dropdown }

package/src/components/Expandable/Expandable.css

@@ -0,0 +1,15 @@
+.memori-expandable {
+    line-height: 1;
+}
+
+.memori-expandable--inner {
+    overflow: hidden;
+    max-height: 9999px;
+    transition: max-height 0.2s ease-in-out;
+}
+
+.memori-expandable > button {
+    color: var(--memori-primary, #333);
+    font-size: 0.9em;
+    text-decoration: underline;
+}

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

@@ -0,0 +1,196 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import Expandable, { type Props } from './Expandable'
+
+const Template = (args: Props) => (
+  <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 = (args: Props) => (
+  <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>
+)
+
+const meta = {
+  title: 'UI/Expandable',
+  component: Expandable,
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    children: 'Test',
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+  render: args => <Template {...args}>{args.children}</Template>,
+} satisfies Meta<typeof Expandable>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    rows: 2,
+    mode: 'rows',
+  },
+}
+
+export const DefaultExpanded: Story = {
+  args: {
+    rows: 3,
+    mode: 'rows',
+    children: 'Test',
+    defaultExpanded: true,
+  },
+}
+
+export const WithCustomProps: Story = {
+  args: {
+    rows: 3,
+    innerClassName: 'custom-inner-class',
+    btnClassName: 'custom-btn-class',
+    expandSymbol: () => '🔽',
+    collapseSymbol: () => '🔼',
+  },
+}
+
+export const WithHTML: Story = {
+  args: {
+    rows: 3,
+    mode: 'rows',
+  },
+  render: args => (
+    <TemplateWithHTML {...args}>{args.children}</TemplateWithHTML>
+  ),
+}
+
+export const ModeChar: Story = {
+  args: {
+    mode: 'characters',
+  },
+}
+
+export const ModeCharWithHTML: Story = {
+  args: {
+    mode: 'characters',
+  },
+  render: args => (
+    <TemplateWithHTML {...args}>{args.children}</TemplateWithHTML>
+  ),
+}

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

@@ -0,0 +1,143 @@
+import { render } from '@testing-library/react'
+import { expect, it } from 'vitest'
+import Expandable from './Expandable'
+
+// Check if we're in CI mode (jsdom environment) vs browser mode
+// In browser mode, we want to run all tests; in CI (jsdom), skip snapshot tests
+const isCI = typeof process !== 'undefined' && process.env.CI === 'true'
+
+it('renders Expandable unchanged', () => {
+  const { container } = render(<Expandable rows={1}>Test</Expandable>)
+  expect(container).toMatchSnapshot()
+})
+
+it.skipIf(isCI)('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.skipIf(isCI)('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.skipIf(isCI)(
+  '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.skipIf(isCI)(
+  '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.skipIf(isCI)(
+  '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.skipIf(isCI)(
+  '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.skipIf(isCI)(
+  '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.skipIf(isCI)('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/Expandable/Expandable.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useRef, useState } from 'react'
+import Button from '../Button/Button'
+import cx from 'classnames'
+import { useTranslation } from 'react-i18next'
+import { truncateMessage, MAX_MSG_CHARS, MAX_MSG_WORDS } from './helpers'
+
+import './Expandable.css'
+
+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