@linktr.ee/messaging-react 4.1.7-rc-1787179679 → 4.1.7-rc-1787181506

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.1.7-rc-1787179679",
+  "version": "4.1.7-rc-1787181506",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,19 +50,17 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.5.0-rc-1787179679",
+    "@linktr.ee/messaging-core": "2.5.0-rc-1787181506",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {
     "@linktr.ee/arbor": "25.0.0",
     "@linktr.ee/design-tokens": "14.0.0",
-    "@storybook/addon-essentials": "^8.5.0",
-    "@storybook/addon-interactions": "^8.5.0",
-    "@storybook/addon-links": "^8.5.0",
-    "@storybook/react": "^8.5.0",
-    "@storybook/react-vite": "^8.5.0",
-    "@storybook/test": "^8.5.0",
+    "@storybook/addon-docs": "10.5.7",
+    "@storybook/addon-links": "10.5.7",
+    "@storybook/react": "10.5.7",
+    "@storybook/react-vite": "10.5.7",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.1.5",
@@ -79,7 +77,7 @@
     "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^8.5.0",
+    "storybook": "10.5.7",
     "stream-chat": "^9.41.1",
     "stream-chat-react": "^13.14.5",
     "tailwindcss": "^3.4.17",

package/src/components/Avatar/Avatar.test.tsx

@@ -27,4 +27,130 @@ describe('Avatar', () => {
   it('keeps fixed emoji sizes for larger avatars', () => {
     expect(emojiFontSize(40)).toHaveStyle({ fontSize: '14px' })
   })
+
+  it.each([
+    [32, '14px'],
+    [55, '14px'],
+    [56, '18px'],
+    [119, '18px'],
+    [120, '36px'],
+  ])(
+    'uses the exact fixed font size at the %spx boundary',
+    (size, fontSize) => {
+      expect(emojiFontSize(size)).toHaveStyle({ fontSize })
+    }
+  )
+
+  it('does not show a star by default but shows one when starred', () => {
+    const defaultAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" />
+    )
+    expect(defaultAvatar.container.querySelector('svg')).not.toBeInTheDocument()
+
+    const starredAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" starred />
+    )
+    expect(starredAvatar.container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('uses a squircle by default and a circle when explicitly requested', () => {
+    const squircleAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" />
+    )
+    const squircleElements = squircleAvatar.container.querySelectorAll(
+      '[style*="border-radius"]'
+    )
+    expect(squircleElements).toHaveLength(3)
+    squircleElements.forEach((element) =>
+      expect(element).toHaveStyle({ borderRadius: '1rem' })
+    )
+
+    const circleAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" shape="circle" />
+    )
+    const circleElements = circleAvatar.container.querySelectorAll(
+      '[style*="border-radius"]'
+    )
+    expect(circleElements).toHaveLength(3)
+    circleElements.forEach((element) =>
+      expect(element).toHaveStyle({ borderRadius: '50%' })
+    )
+  })
+
+  it('only applies the AI ring when dmAgentEnabled is true', () => {
+    const defaultAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" size={40} />
+    )
+    expect(
+      defaultAvatar.container.querySelector('[data-testid="avatar-ring"]')
+    ).not.toHaveStyle({
+      borderWidth: '2px',
+      borderStyle: 'solid',
+    })
+
+    const enabledAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" size={40} dmAgentEnabled />
+    )
+    expect(
+      enabledAvatar.container.querySelector('[data-testid="avatar-ring"]')
+    ).toHaveStyle({
+      borderWidth: '2px',
+      borderStyle: 'solid',
+      borderColor: 'var(--AI-Gradient, #7F22FE)',
+      boxShadow: 'inset 0 1px 2px 0 rgba(255, 255, 255, 0.5)',
+    })
+
+    const smallEnabledAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" size={20} dmAgentEnabled />
+    )
+    expect(
+      smallEnabledAvatar.container.querySelector('[data-testid="avatar-ring"]')
+    ).toHaveStyle({ borderWidth: '1px' })
+  })
+
+  it('renders an image instead of the emoji fallback when image is provided', () => {
+    const fallbackAvatar = renderWithProviders(<Avatar id="" name="Alice" />)
+    expect(
+      fallbackAvatar.container.querySelector('img')
+    ).not.toBeInTheDocument()
+    expect(fallbackAvatar.container).toHaveTextContent('🍎')
+    expect(
+      fallbackAvatar.container.querySelector('.avatar-fallback')
+    ).toHaveClass(
+      'avatar-fallback',
+      'flex',
+      'h-full',
+      'w-full',
+      'items-center',
+      'justify-center',
+      'font-semibold',
+      'select-none',
+      'transition-colors'
+    )
+
+    const imageAvatar = renderWithProviders(
+      <Avatar id="" name="Alice" image="https://example.com/avatar.png" />
+    )
+    expect(imageAvatar.container.querySelector('img')).toHaveAttribute(
+      'src',
+      'https://example.com/avatar.png'
+    )
+    expect(imageAvatar.container).not.toHaveTextContent('🍎')
+  })
+
+  it('applies the fallback background color and forwards custom classes', () => {
+    const { container } = renderWithProviders(
+      <Avatar id="" name="Alice" className="custom-avatar" />
+    )
+    const root = container.firstElementChild
+    const ring = container.querySelector('[data-testid="avatar-ring"]')
+
+    expect(root).toHaveClass('relative', 'flex-shrink-0', 'custom-avatar')
+    expect(ring).toHaveClass('h-full', 'w-full', 'bg-transparent')
+    expect(root).toHaveStyle({
+      backgroundColor: '#FFD1DD',
+      width: '40px',
+      height: '40px',
+    })
+  })
 })

package/src/components/Avatar/getAvatarEmoji.test.ts

@@ -29,4 +29,43 @@ describe('getAvatarBgColor', () => {
     expect(color).toBe(emojiBgColors[emoji])
     expect(getAvatarBgColor(id)).toBe(color)
   })
+
+  it.each([
+    ['', '🍎', '#FFD1DD'],
+    ['id-2', '🍌', '#FFF1C9'],
+    ['id-3', '🍇', '#E6D9FF'],
+    ['id-4', '🍊', '#D6F4FF'],
+    ['id-5', '🍓', '#FFE0AE'],
+    ['id-6', '🥥', '#F7E7D8'],
+    ['id-7', '🍒', '#DFF4D8'],
+    ['id-8', '🥭', '#FFD8C2'],
+    ['id-9', '🍉', '#D6EBFF'],
+    ['id-10', '🍋', '#CAEEB5'],
+    ['id-11', '🥝', '#FFE7C7'],
+    ['id-12', '🫒', '#F6E3B4'],
+    ['id-13', '🍈', '#D9F7E1'],
+  ])('returns the exact fruit pair for %j', (id, emoji, bgColor) => {
+    expect(getAvatarEmoji(id)).toBe(emoji)
+    expect(getAvatarBgColor(id)).toBe(bgColor)
+  })
+
+  it('uses the absolute hash value for ids with a negative raw hash', () => {
+    const id = 'id-100'
+
+    expect(getAvatarEmoji(id)).toBe('🥭')
+    expect(getAvatarBgColor(id)).toBe('#FFD8C2')
+  })
+
+  it('is deterministic and keeps emoji and background color paired', () => {
+    const ids = ['', 'id-2', 'id-7', 'id-13', 'id-100']
+
+    ids.forEach((id) => {
+      const emoji = getAvatarEmoji(id)
+      const color = getAvatarBgColor(id)
+
+      expect(getAvatarEmoji(id)).toBe(emoji)
+      expect(getAvatarBgColor(id)).toBe(color)
+      expect(emojiBgColors[emoji]).toBe(color)
+    })
+  })
 })

package/src/components/FaqList/FaqList.test.tsx

@@ -0,0 +1,204 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../test/utils'
+import { getAvatarEmoji } from '../Avatar/getAvatarEmoji'
+
+import { FaqListItem } from './FaqListItem'
+
+import { FaqList } from './index'
+
+const faqs = [
+  {
+    id: 'second',
+    question: 'What payment methods do you accept?',
+    answer: 'Cards and bank transfers.',
+    enabled: true,
+    order: 2,
+  },
+  {
+    id: 'disabled',
+    question: 'What is your phone number?',
+    answer: 'This FAQ is disabled.',
+    enabled: false,
+    order: 0,
+  },
+  {
+    id: 'first',
+    question: 'How do I get started?',
+    answer: 'Create an account.',
+    enabled: true,
+    order: 1,
+  },
+]
+
+const baseItemClasses = [
+  'w-full',
+  'text-center',
+  'p-4',
+  'rounded-xl',
+  'text-charcoal',
+  'font-medium',
+  'transition-colors',
+  'focus-ring',
+]
+
+describe('FaqListItem', () => {
+  it('renders its question and defaults to an enabled button', () => {
+    renderWithProviders(
+      <FaqListItem question="How do I get started?" onClick={vi.fn()} />
+    )
+
+    const button = screen.getByRole('button', {
+      name: 'How do I get started?',
+    })
+    expect(button).toBeEnabled()
+    expect(button.className.split(/\s+/)).toEqual([
+      ...baseItemClasses,
+      'hover:brightness-95',
+      'active:brightness-90',
+    ])
+  })
+
+  it('renders the FAQ surface color', () => {
+    renderWithProviders(
+      <FaqListItem question="How do I get started?" onClick={vi.fn()} />
+    )
+
+    expect(
+      screen.getByRole('button', { name: 'How do I get started?' })
+    ).toHaveStyle({ backgroundColor: '#E6E5E3' })
+  })
+
+  it('uses loading-only classes and blocks clicks while loading', () => {
+    const onClick = vi.fn()
+    renderWithProviders(
+      <FaqListItem question="How do I get started?" onClick={onClick} loading />
+    )
+
+    const button = screen.getByRole('button', {
+      name: 'How do I get started?',
+    })
+    expect(button).toBeDisabled()
+    expect(button.className.split(/\s+/)).toEqual([
+      ...baseItemClasses,
+      'opacity-50',
+      'cursor-not-allowed',
+    ])
+
+    fireEvent.click(button)
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('calls the click handler once when enabled', () => {
+    const onClick = vi.fn()
+    renderWithProviders(
+      <FaqListItem question="How do I get started?" onClick={onClick} />
+    )
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('FaqList', () => {
+  it('returns nothing when no FAQ is enabled', () => {
+    const { container } = renderWithProviders(
+      <FaqList
+        faqs={faqs.map((faq) => ({ ...faq, enabled: false }))}
+        onFaqClick={vi.fn()}
+      />
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders enabled FAQs in ascending order and filters disabled FAQs', () => {
+    renderWithProviders(<FaqList faqs={faqs} onFaqClick={vi.fn()} />)
+
+    expect(
+      screen.getByRole('button', { name: 'How do I get started?' })
+        .parentElement
+    ).toHaveStyle({ backgroundColor: '#F1F0EE' })
+    expect(
+      screen.getAllByRole('button').map((button) => button.textContent)
+    ).toEqual(['How do I get started?', 'What payment methods do you accept?'])
+    expect(
+      screen.queryByRole('button', { name: 'What is your phone number?' })
+    ).toBeNull()
+  })
+
+  it('renders the header only when headerText is provided', () => {
+    const { container, rerender } = renderWithProviders(
+      <FaqList faqs={faqs} onFaqClick={vi.fn()} />
+    )
+    expect(screen.queryByText('Frequently asked questions')).toBeNull()
+    expect(container.querySelector('p')).toBeNull()
+
+    rerender(
+      <FaqList
+        faqs={faqs}
+        onFaqClick={vi.fn()}
+        headerText="Frequently asked questions"
+      />
+    )
+    expect(screen.getByText('Frequently asked questions')).toBeInTheDocument()
+  })
+
+  it('passes className to the list root', () => {
+    const { container } = renderWithProviders(
+      <FaqList
+        faqs={faqs}
+        onFaqClick={vi.fn()}
+        className="faq-list-custom-class"
+      />
+    )
+
+    expect(container.firstElementChild).toHaveClass('faq-list-custom-class')
+  })
+
+  it('renders an avatar only when avatar data is provided', () => {
+    const { rerender } = renderWithProviders(
+      <FaqList faqs={faqs} onFaqClick={vi.fn()} />
+    )
+    expect(screen.queryAllByTestId('avatar-ring')).toHaveLength(0)
+
+    rerender(
+      <FaqList faqs={faqs} onFaqClick={vi.fn()} avatarName="Brie Nala" />
+    )
+    expect(screen.queryAllByTestId('avatar-ring')).toHaveLength(1)
+    expect(screen.getByText(getAvatarEmoji('Brie Nala'))).toBeInTheDocument()
+
+    rerender(
+      <FaqList
+        faqs={faqs}
+        onFaqClick={vi.fn()}
+        avatarImage="https://cdn.example.com/avatar.jpg"
+      />
+    )
+    expect(screen.queryAllByTestId('avatar-ring')).toHaveLength(1)
+  })
+
+  it('passes the clicked FAQ id and marks only its matching row as loading', () => {
+    const onFaqClick = vi.fn()
+    renderWithProviders(
+      <FaqList faqs={faqs} onFaqClick={onFaqClick} loadingFaqId="second" />
+    )
+
+    const firstButton = screen.getByRole('button', {
+      name: 'How do I get started?',
+    })
+    const secondButton = screen.getByRole('button', {
+      name: 'What payment methods do you accept?',
+    })
+    expect(firstButton).toBeEnabled()
+    expect(secondButton).toBeDisabled()
+    expect(firstButton).not.toHaveClass('opacity-50', 'cursor-not-allowed')
+    expect(secondButton).toHaveClass('opacity-50', 'cursor-not-allowed')
+
+    fireEvent.click(firstButton)
+    fireEvent.click(secondButton)
+    expect(onFaqClick).toHaveBeenCalledTimes(1)
+    expect(onFaqClick).toHaveBeenCalledWith('first')
+  })
+})