@furystack/shades-common-components 10.0.35 → 11.0.0

package/src/components/suggest/suggestion-list.spec.tsx

@@ -0,0 +1,334 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { using } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { SuggestManager } from './suggest-manager.js'
+import { SuggestionList } from './suggestion-list.js'
+import type { SuggestionResult } from './suggestion-result.js'
+
+type TestEntry = { id: number; name: string }
+
+const createTestEntries = (): TestEntry[] => [
+  { id: 1, name: 'alpha' },
+  { id: 2, name: 'beta' },
+  { id: 3, name: 'gamma' },
+]
+
+const createSuggestionResult = (entry: TestEntry): SuggestionResult => ({
+  element: (<span>{entry.name}</span>) as unknown as JSX.Element,
+  score: entry.id,
+})
+
+describe('SuggestionList', () => {
+  let originalAnimate: typeof Element.prototype.animate
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+    vi.useFakeTimers()
+    originalAnimate = Element.prototype.animate
+
+    Element.prototype.animate = vi.fn(() => {
+      const mockAnimation = {
+        onfinish: null as ((event: AnimationPlaybackEvent) => void) | null,
+        oncancel: null as ((event: AnimationPlaybackEvent) => void) | null,
+        cancel: vi.fn(),
+        play: vi.fn(),
+        pause: vi.fn(),
+        finish: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      }
+      return mockAnimation as unknown as Animation
+    }) as typeof Element.prototype.animate
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    Element.prototype.animate = originalAnimate
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  const createManager = () => {
+    const getEntries = vi.fn().mockResolvedValue(createTestEntries())
+    const getSuggestionEntry = vi.fn().mockImplementation(createSuggestionResult)
+    return new SuggestManager<TestEntry>(getEntries, getSuggestionEntry)
+  }
+
+  it('should render with shadow DOM', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    using(createManager(), (manager) => {
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
+    })
+
+    await vi.advanceTimersByTimeAsync(50)
+
+    const suggestionList = document.querySelector('shade-suggest-suggestion-list')
+    expect(suggestionList).not.toBeNull()
+  })
+
+  it('should render the suggestions container', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    using(createManager(), (manager) => {
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
+    })
+
+    await vi.advanceTimersByTimeAsync(50)
+
+    const container = document.querySelector('.suggestion-items-container')
+    expect(container).not.toBeNull()
+  })
+
+  it('should render suggestion items when suggestions are present', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const manager = createManager()
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <SuggestionList manager={manager} />,
+    })
+
+    await vi.advanceTimersByTimeAsync(50)
+
+    void manager.getSuggestion({ injector, term: 'test' })
+    await vi.advanceTimersByTimeAsync(250)
+    await vi.advanceTimersByTimeAsync(50)
+
+    const suggestionItems = document.querySelectorAll('.suggestion-item')
+    expect(suggestionItems.length).toBe(3)
+
+    expect(suggestionItems[0].textContent).toContain('alpha')
+    expect(suggestionItems[1].textContent).toContain('beta')
+    expect(suggestionItems[2].textContent).toContain('gamma')
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should apply selected class to the correct suggestion item', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const manager = createManager()
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <SuggestionList manager={manager} />,
+    })
+
+    await vi.advanceTimersByTimeAsync(50)
+
+    void manager.getSuggestion({ injector, term: 'test' })
+    await vi.advanceTimersByTimeAsync(250)
+    await vi.advanceTimersByTimeAsync(50)
+
+    const suggestionItems = document.querySelectorAll('.suggestion-item')
+    expect(suggestionItems[0].classList.contains('selected')).toBe(true)
+    expect(suggestionItems[1].classList.contains('selected')).toBe(false)
+    expect(suggestionItems[2].classList.contains('selected')).toBe(false)
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should update selected class when selectedIndex changes', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const manager = createManager()
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <SuggestionList manager={manager} />,
+    })
+
+    await vi.advanceTimersByTimeAsync(50)
+
+    void manager.getSuggestion({ injector, term: 'test' })
+    await vi.advanceTimersByTimeAsync(250)
+    await vi.advanceTimersByTimeAsync(50)
+
+    manager.selectedIndex.setValue(1)
+    await vi.advanceTimersByTimeAsync(50)
+
+    const suggestionItems = document.querySelectorAll('.suggestion-item')
+    expect(suggestionItems[0].classList.contains('selected')).toBe(false)
+    expect(suggestionItems[1].classList.contains('selected')).toBe(true)
+    expect(suggestionItems[2].classList.contains('selected')).toBe(false)
+
+    manager.selectedIndex.setValue(2)
+    await vi.advanceTimersByTimeAsync(50)
+
+    expect(suggestionItems[0].classList.contains('selected')).toBe(false)
+    expect(suggestionItems[1].classList.contains('selected')).toBe(false)
+    expect(suggestionItems[2].classList.contains('selected')).toBe(true)
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should call selectSuggestion when a suggestion item is clicked', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const manager = createManager()
+    const selectSpy = vi.spyOn(manager, 'selectSuggestion')
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <SuggestionList manager={manager} />,
+    })
+
+    await vi.advanceTimersByTimeAsync(50)
+
+    void manager.getSuggestion({ injector, term: 'test' })
+    await vi.advanceTimersByTimeAsync(250)
+    await vi.advanceTimersByTimeAsync(50)
+
+    manager.isOpened.setValue(true)
+    await vi.advanceTimersByTimeAsync(50)
+
+    const suggestionItems = document.querySelectorAll('.suggestion-item')
+    ;(suggestionItems[1] as HTMLElement).click()
+
+    expect(selectSpy).toHaveBeenCalledWith(1)
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should not call selectSuggestion when list is not opened', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const manager = createManager()
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <SuggestionList manager={manager} />,
+    })
+
+    await vi.advanceTimersByTimeAsync(50)
+
+    manager.currentSuggestions.setValue([
+      { entry: { id: 1, name: 'alpha' }, suggestion: createSuggestionResult({ id: 1, name: 'alpha' }) },
+      { entry: { id: 2, name: 'beta' }, suggestion: createSuggestionResult({ id: 2, name: 'beta' }) },
+    ])
+    await vi.advanceTimersByTimeAsync(50)
+
+    const selectSpy = vi.spyOn(manager, 'selectSuggestion')
+
+    const suggestionItems = document.querySelectorAll('.suggestion-item')
+    ;(suggestionItems[1] as HTMLElement).click()
+
+    expect(selectSpy).not.toHaveBeenCalled()
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should render empty container when no suggestions', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    const getEntries = vi.fn().mockResolvedValue([])
+    const getSuggestionEntry = vi.fn().mockImplementation(createSuggestionResult)
+    const manager = new SuggestManager<TestEntry>(getEntries, getSuggestionEntry)
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <SuggestionList manager={manager} />,
+    })
+
+    await vi.advanceTimersByTimeAsync(50)
+
+    const suggestionItems = document.querySelectorAll('.suggestion-item')
+    expect(suggestionItems.length).toBe(0)
+
+    manager[Symbol.dispose]()
+  })
+
+  describe('animations', () => {
+    it('should animate container when isOpened changes to true', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
+
+      await vi.advanceTimersByTimeAsync(50)
+
+      const container = document.querySelector('.suggestion-items-container') as HTMLDivElement
+
+      manager.isOpened.setValue(true)
+      await vi.advanceTimersByTimeAsync(50)
+
+      expect(container.style.zIndex).toBe('1')
+
+      manager[Symbol.dispose]()
+    })
+
+    it('should animate container when isOpened changes to false', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
+
+      await vi.advanceTimersByTimeAsync(50)
+
+      manager.isOpened.setValue(true)
+      await vi.advanceTimersByTimeAsync(50)
+
+      const container = document.querySelector('.suggestion-items-container') as HTMLDivElement
+
+      manager.isOpened.setValue(false)
+      await vi.advanceTimersByTimeAsync(50)
+
+      expect(container.style.zIndex).toBe('-1')
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  describe('container width', () => {
+    it('should set container width based on parent element', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      rootElement.style.width = '400px'
+
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
+
+      await vi.advanceTimersByTimeAsync(50)
+
+      const container = document.querySelector('.suggestion-items-container') as HTMLDivElement
+      expect(container.style.width).toBeDefined()
+
+      manager[Symbol.dispose]()
+    })
+  })
+})

package/src/components/suggest/suggestion-list.tsx

@@ -1,31 +1,59 @@
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import type { SuggestManager } from './suggest-manager.js'
 
 export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children: ChildrenList) => JSX.Element<any> =
   Shade<{ manager: SuggestManager<any> }>({
     shadowDomName: 'shade-suggest-suggestion-list',
-    render: ({ element, props, injector, useObservable }) => {
+    css: {
+      '& .suggestion-items-container': {
+        borderTop: 'none',
+        position: 'absolute',
+        borderRadius: '0px 0px 12px 12px',
+        marginLeft: '14px',
+        marginTop: '4px',
+        overflow: 'hidden',
+        zIndex: '1',
+        left: 'auto',
+        backgroundColor: cssVariableTheme.background.paper,
+        color: cssVariableTheme.text.secondary,
+        boxShadow: '0 8px 24px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12)',
+        backdropFilter: 'blur(20px)',
+        border: '1px solid rgba(128,128,128,0.2)',
+      },
+      '& .suggestion-item': {
+        padding: '0.875em 1.25em',
+        cursor: 'pointer',
+        background: 'transparent',
+        fontWeight: '400',
+        borderLeft: '3px solid transparent',
+        transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        fontSize: '0.95em',
+        letterSpacing: '0.01em',
+      },
+      '& .suggestion-item:hover': {
+        background: 'rgba(128,128,128,0.1)',
+      },
+      '& .suggestion-item.selected': {
+        background: 'rgba(128,128,128,0.2)',
+        fontWeight: '500',
+        borderLeft: `3px solid ${cssVariableTheme.text.primary}`,
+      },
+      '& .suggestion-item.selected:hover': {
+        background: 'rgba(128,128,128,0.2)',
+      },
+    },
+    render: ({ element, props, useObservable }) => {
       const { manager } = props
-      const { theme } = injector.getInstance(ThemeProviderService)
 
       const [suggestions] = useObservable('suggestions', manager.currentSuggestions)
 
-      // todo: GetLast is eliminated, do we need it?
       const [selectedIndex] = useObservable('selectedIndex', manager.selectedIndex, {
         onChange: (idx) => {
-          ;([...element.querySelectorAll('.suggestion-item')] as HTMLDivElement[]).map((s, i) => {
-            if (i === idx) {
-              s.style.background = 'rgba(128,128,128,0.2)'
-              s.style.fontWeight = '500'
-              s.style.borderLeft = `3px solid ${theme.text.primary}`
-            } else {
-              s.style.background = 'transparent'
-              s.style.fontWeight = '400'
-              s.style.borderLeft = '3px solid transparent'
-            }
+          ;([...element.querySelectorAll('.suggestion-item')] as HTMLDivElement[]).forEach((s, i) => {
+            s.classList.toggle('selected', i === idx)
           })
         },
       })
@@ -64,50 +92,17 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
         <div
           className="suggestion-items-container"
           style={{
-            borderTop: 'none',
-            position: 'absolute',
-            borderRadius: '0px 0px 12px 12px',
-            marginLeft: '14px',
-            marginTop: '4px',
-            overflow: 'hidden',
-            zIndex: '1',
-            left: 'auto',
-            backgroundColor: theme.background.paper,
-            color: theme.text.secondary,
-            boxShadow: '0 8px 24px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12)',
-            backdropFilter: 'blur(20px)',
-            border: '1px solid rgba(128,128,128,0.2)',
             width: `calc(${Math.round(element.parentElement?.getBoundingClientRect().width || 200)}px - 3em)`,
           }}
         >
           {suggestions.map((s, i) => (
             <div
-              className="suggestion-item"
+              className={`suggestion-item${i === selectedIndex ? ' selected' : ''}`}
               onclick={() => {
                 if (isListOpened) {
                   manager.selectSuggestion(i)
                 }
               }}
-              onmouseenter={(ev) => {
-                if (i !== selectedIndex) {
-                  ;(ev.target as HTMLElement).style.background = 'rgba(128,128,128,0.1)'
-                }
-              }}
-              onmouseleave={(ev) => {
-                if (i !== selectedIndex) {
-                  ;(ev.target as HTMLElement).style.background = 'transparent'
-                }
-              }}
-              style={{
-                padding: '0.875em 1.25em',
-                cursor: 'pointer',
-                background: i === selectedIndex ? 'rgba(128,128,128,0.2)' : 'transparent',
-                fontWeight: i === selectedIndex ? '500' : '400',
-                borderLeft: i === selectedIndex ? `3px solid ${theme.text.primary}` : '3px solid transparent',
-                transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
-                fontSize: '0.95em',
-                letterSpacing: '0.01em',
-              }}
             >
               {s.suggestion.element}
             </div>

package/src/components/tabs.spec.tsx

@@ -0,0 +1,236 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot, LocationService } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { Tabs, type Tab } from './tabs.js'
+
+describe('Tabs', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+    window.location.hash = ''
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    window.location.hash = ''
+  })
+
+  const createTabs = (): Tab[] => [
+    {
+      hash: 'tab1',
+      header: <span>Tab 1</span>,
+      component: <div id="content-1">Content 1</div>,
+    },
+    {
+      hash: 'tab2',
+      header: <span>Tab 2</span>,
+      component: <div id="content-2">Content 2</div>,
+    },
+    {
+      hash: 'tab3',
+      header: <span>Tab 3</span>,
+      component: <div id="content-3">Content 3</div>,
+    },
+  ]
+
+  it('should render all tab headers', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const tabs = createTabs()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Tabs tabs={tabs} />,
+      })
+
+      await sleepAsync(100)
+
+      expect(document.body.innerHTML).toContain('Tab 1')
+      expect(document.body.innerHTML).toContain('Tab 2')
+      expect(document.body.innerHTML).toContain('Tab 3')
+    })
+  })
+
+  it('should display the active tab content based on URL hash', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      window.location.hash = '#tab2'
+
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const tabs = createTabs()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Tabs tabs={tabs} />,
+      })
+
+      await sleepAsync(100)
+
+      expect(document.getElementById('content-2')).toBeTruthy()
+      expect(document.getElementById('content-1')).toBeFalsy()
+      expect(document.getElementById('content-3')).toBeFalsy()
+    })
+  })
+
+  it('should not display any tab content when hash does not match', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      window.location.hash = '#nonexistent'
+
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const tabs = createTabs()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Tabs tabs={tabs} />,
+      })
+
+      await sleepAsync(100)
+
+      expect(document.getElementById('content-1')).toBeFalsy()
+      expect(document.getElementById('content-2')).toBeFalsy()
+      expect(document.getElementById('content-3')).toBeFalsy()
+    })
+  })
+
+  it('should update active tab when hash changes', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      window.location.hash = '#tab1'
+
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const tabs = createTabs()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Tabs tabs={tabs} />,
+      })
+
+      await sleepAsync(100)
+
+      expect(document.getElementById('content-1')).toBeTruthy()
+
+      // Change hash
+      window.location.hash = '#tab3'
+      injector.getInstance(LocationService).updateState()
+
+      await sleepAsync(100)
+
+      expect(document.getElementById('content-3')).toBeTruthy()
+      expect(document.getElementById('content-1')).toBeFalsy()
+    })
+  })
+
+  it('should render tab headers as anchor elements with correct href', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const tabs = createTabs()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Tabs tabs={tabs} />,
+      })
+
+      await sleepAsync(100)
+
+      // Tab headers extend anchor elements
+      const html = document.body.innerHTML
+      expect(html).toContain('href="#tab1"')
+      expect(html).toContain('href="#tab2"')
+      expect(html).toContain('href="#tab3"')
+    })
+  })
+
+  it('should mark the active tab header with active class', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      window.location.hash = '#tab2'
+
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const tabs = createTabs()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Tabs tabs={tabs} />,
+      })
+
+      await sleepAsync(100)
+
+      // The tab header with tab2 hash should have active class
+      const html = document.body.innerHTML
+      // Verify the active tab content is shown
+      expect(document.getElementById('content-2')).toBeTruthy()
+      // Check for active class in the tab-header element containing Tab 2
+      expect(html).toMatch(/shade-tab-header[^>]*class="active"[^>]*href="#tab2"/)
+    })
+  })
+
+  it('should switch active class when hash changes', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      window.location.hash = '#tab1'
+
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const tabs = createTabs()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Tabs tabs={tabs} />,
+      })
+
+      await sleepAsync(100)
+
+      // Verify tab1 is active
+      expect(document.getElementById('content-1')).toBeTruthy()
+      expect(document.body.innerHTML).toMatch(/shade-tab-header[^>]*class="active"[^>]*href="#tab1"/)
+
+      // Change hash
+      window.location.hash = '#tab2'
+      injector.getInstance(LocationService).updateState()
+
+      await sleepAsync(100)
+
+      // Verify tab2 is now active
+      expect(document.getElementById('content-2')).toBeTruthy()
+      expect(document.getElementById('content-1')).toBeFalsy()
+      expect(document.body.innerHTML).toMatch(/shade-tab-header[^>]*class="active"[^>]*href="#tab2"/)
+    })
+  })
+
+  it('should apply containerStyle to the element', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const tabs = createTabs()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Tabs tabs={tabs} containerStyle={{ maxWidth: '800px' }} />,
+      })
+
+      await sleepAsync(100)
+
+      const tabsElement = document.querySelector('shade-tabs') as HTMLElement
+      expect(tabsElement.style.maxWidth).toBe('800px')
+    })
+  })
+
+  it('should work with empty tabs array', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Tabs tabs={[]} />,
+      })
+
+      await sleepAsync(100)
+
+      const tabHeaders = document.querySelectorAll('shade-tab-header')
+      expect(tabHeaders.length).toBe(0)
+    })
+  })
+})