@furystack/shades-common-components 10.0.35 → 11.0.0

package/src/components/command-palette/index.tsx

@@ -1,6 +1,6 @@
 import { Shade, createComponent } from '@furystack/shades'
 import { ClickAwayService } from '../../services/click-away-service.js'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import { Loader } from '../loader.js'
 import { CommandPaletteInput } from './command-palette-input.js'
@@ -22,85 +22,127 @@ export interface CommandPaletteProps {
 
 export const CommandPalette = Shade<CommandPaletteProps>({
   shadowDomName: 'shade-command-palette',
+  css: {
+    flexGrow: '1',
+    '& .command-palette-wrapper': {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    '& .input-container': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      padding: '0 1.25em',
+      borderRadius: '12px',
+      position: 'relative',
+      background: 'rgba(128,128,128,0.08)',
+      border: '1px solid rgba(128,128,128,0.15)',
+      boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+    '&.opened .input-container': {
+      border: '1px solid rgba(128,128,128,0.3)',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.15), 0 0 0 3px rgba(128,128,128,0.05)',
+    },
+    '& .term-icon': {
+      cursor: 'pointer',
+      color: cssVariableTheme.text.secondary,
+      fontWeight: '600',
+      fontSize: '0.95em',
+      transition: 'color 0.2s ease',
+      padding: '0.5em 0.75em 0.5em 0',
+      userSelect: 'none',
+    },
+    '& .term-icon:hover': {
+      color: cssVariableTheme.text.primary,
+    },
+    '& .post-controls': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      width: '0px',
+      overflow: 'hidden',
+    },
+    '&.opened .post-controls': {
+      width: '50px',
+    },
+    '& .loader-container': {
+      width: '20px',
+      height: '20px',
+      opacity: '0',
+    },
+    '&.loading .loader-container': {
+      opacity: '1',
+    },
+    '& .close-suggestions': {
+      width: '24px',
+      height: '24px',
+      opacity: '0',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      borderRadius: '6px',
+      transition: 'all 0.2s ease',
+      fontSize: '14px',
+      color: cssVariableTheme.text.secondary,
+      background: 'transparent',
+      transform: 'scale(1)',
+    },
+    '&.opened .close-suggestions': {
+      opacity: '1',
+    },
+    '& .close-suggestions:hover': {
+      background: 'rgba(255,255,255,0.15)',
+      transform: 'scale(1.1)',
+    },
+  },
   render: ({ props, injector, element, useState, useDisposable, useObservable }) => {
-    element.style.flexGrow = '1'
     const [manager] = useState('manager', new CommandPaletteManager(props.commandProviders))
-    const { theme } = injector.getInstance(ThemeProviderService)
 
     useDisposable('clickAwayService', () => new ClickAwayService(element, () => manager.isOpened.setValue(false)))
 
-    const [isLoadingAtRender] = useObservable('isLoading', manager.isLoading, {
+    useObservable('isLoading', manager.isLoading, {
       onChange: (isLoading) => {
-        const loader = element.querySelector('.loader-container')
-        if (isLoading) {
-          void promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
-            duration: 100,
-            fill: 'forwards',
-          })
-        } else {
-          void promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
-            duration: 100,
-            fill: 'forwards',
-          })
-        }
+        element.classList.toggle('loading', isLoading)
       },
     })
 
     const [isOpenedAtRender, setIsOpened] = useObservable('isOpened', manager.isOpened, {
       onChange: (isOpened) => {
-        {
-          const suggestions = element.querySelector('.close-suggestions')
-          const postControls = element.querySelector('.post-controls')
-          const inputContainer = element.querySelector('.input-container') as HTMLDivElement
-          if (isOpened) {
-            void promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
-              duration: 500,
-              fill: 'forwards',
-            })
-
-            void promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
-              duration: 100,
-              fill: 'forwards',
-            })
-
-            void promisifyAnimation(
-              inputContainer,
-              [{ background: 'transparent' }, { background: theme.background.default }],
-              {
-                duration: 500,
-                fill: 'forwards',
-                easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
-              },
-            )
-          } else {
-            void promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
+        element.classList.toggle('opened', isOpened)
+        const inputContainer = element.querySelector('.input-container') as HTMLDivElement
+        if (isOpened) {
+          void promisifyAnimation(
+            inputContainer,
+            [{ background: 'transparent' }, { background: cssVariableTheme.background.default }],
+            {
               duration: 500,
               fill: 'forwards',
-            })
-
-            void promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
-              duration: 500,
+              easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
+            },
+          )
+        } else {
+          void promisifyAnimation(
+            inputContainer,
+            [{ background: cssVariableTheme.background.default }, { background: 'transparent' }],
+            {
+              duration: 300,
               fill: 'forwards',
-              delay: 300,
-            })
-
-            void promisifyAnimation(
-              inputContainer,
-              [{ background: theme.background.default }, { background: 'transparent' }],
-              {
-                duration: 300,
-                fill: 'forwards',
-                easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
-              },
-            )
-          }
+              easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
+            },
+          )
         }
       },
     })
 
+    if (isOpenedAtRender) {
+      element.classList.add('opened')
+    }
+
     return (
       <div
-        style={{ display: 'flex', flexDirection: 'column' }}
+        className="command-palette-wrapper"
         onkeyup={(ev) => {
           if (ev.key === 'Enter') {
             ev.preventDefault()
@@ -121,87 +163,16 @@ export const CommandPalette = Shade<CommandPaletteProps>({
           void manager.getSuggestion({ injector, term: (ev.target as HTMLInputElement).value })
         }}
       >
-        <div
-          className="input-container"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-            padding: '0 1.25em',
-            borderRadius: '12px',
-            position: 'relative',
-            background: 'rgba(128,128,128,0.08)',
-            border: `1px solid ${manager.isOpened.getValue() ? 'rgba(128,128,128,0.3)' : 'rgba(128,128,128,0.15)'}`,
-            boxShadow: manager.isOpened.getValue()
-              ? '0 4px 12px rgba(0,0,0,0.15), 0 0 0 3px rgba(128,128,128,0.05)'
-              : '0 2px 4px rgba(0,0,0,0.05)',
-            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-            ...props.style,
-          }}
-        >
-          <div
-            className="term-icon"
-            style={{
-              cursor: 'pointer',
-              color: theme.text.secondary,
-              fontWeight: '600',
-              fontSize: '0.95em',
-              transition: 'color 0.2s ease',
-              padding: '0.5em 0.75em 0.5em 0',
-              userSelect: 'none',
-            }}
-            onmouseenter={(ev) => {
-              ;(ev.target as HTMLElement).style.color = theme.text.primary
-            }}
-            onmouseleave={(ev) => {
-              ;(ev.target as HTMLElement).style.color = theme.text.secondary
-            }}
-            onclick={() => setIsOpened(true)}
-          >
+        <div className="input-container" style={props.style}>
+          <div className="term-icon" onclick={() => setIsOpened(true)}>
             {props.defaultPrefix}
           </div>
           <CommandPaletteInput manager={manager} />
-          <div
-            className="post-controls"
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              width: isOpenedAtRender ? '50px' : '0px',
-              overflow: 'hidden',
-            }}
-          >
-            <div
-              className="loader-container"
-              style={{ width: '20px', height: '20px', opacity: isLoadingAtRender ? '1' : '0' }}
-            >
+          <div className="post-controls">
+            <div className="loader-container">
               <Loader style={{ width: '100%', height: '100%' }} />
             </div>
-            <div
-              className="close-suggestions"
-              onclick={() => setIsOpened(false)}
-              onmouseenter={(ev) => {
-                ;(ev.target as HTMLElement).style.background = 'rgba(255,255,255,0.15)'
-                ;(ev.target as HTMLElement).style.transform = 'scale(1.1)'
-              }}
-              onmouseleave={(ev) => {
-                ;(ev.target as HTMLElement).style.background = 'transparent'
-                ;(ev.target as HTMLElement).style.transform = 'scale(1)'
-              }}
-              style={{
-                width: '24px',
-                height: '24px',
-                opacity: manager.isOpened.getValue() ? '1' : '0',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                cursor: 'pointer',
-                borderRadius: '6px',
-                transition: 'all 0.2s ease',
-                fontSize: '14px',
-                color: theme.text.secondary,
-              }}
-            >
+            <div className="close-suggestions" onclick={() => setIsOpened(false)}>
               ✖
             </div>
           </div>

package/src/components/data-grid/body.spec.tsx

@@ -0,0 +1,340 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { CollectionService } from '../../services/collection-service.js'
+import { DataGridBody } from './body.js'
+
+type TestEntry = { id: number; name: string }
+
+describe('DataGridBody', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('should render default empty component when no data', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const service = new CollectionService<TestEntry>()
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <table>
+          <DataGridBody<TestEntry, 'id' | 'name'> service={service} columns={['id', 'name']} />
+        </table>
+      ),
+    })
+
+    await sleepAsync(50)
+
+    const body = document.querySelector('tbody[is="shade-data-grid-body"]')
+    expect(body).not.toBeNull()
+    expect(body?.textContent).toContain('- No Data -')
+
+    service[Symbol.dispose]()
+  })
+
+  it('should render custom empty component when provided and no data', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const service = new CollectionService<TestEntry>()
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <table>
+          <DataGridBody<TestEntry, 'id' | 'name'>
+            service={service}
+            columns={['id', 'name']}
+            emptyComponent={<div data-testid="custom-empty">Custom Empty State</div>}
+          />
+        </table>
+      ),
+    })
+
+    await sleepAsync(50)
+
+    const body = document.querySelector('tbody[is="shade-data-grid-body"]')
+    expect(body).not.toBeNull()
+    expect(body?.querySelector('[data-testid="custom-empty"]')).not.toBeNull()
+    expect(body?.textContent).toContain('Custom Empty State')
+
+    service[Symbol.dispose]()
+  })
+
+  it('should render rows for each data entry', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const service = new CollectionService<TestEntry>()
+
+    service.data.setValue({
+      count: 2,
+      entries: [
+        { id: 1, name: 'First' },
+        { id: 2, name: 'Second' },
+      ],
+    })
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <table>
+          <DataGridBody<TestEntry, 'id' | 'name'> service={service} columns={['id', 'name']} />
+        </table>
+      ),
+    })
+
+    await sleepAsync(50)
+
+    const body = document.querySelector('tbody[is="shade-data-grid-body"]')
+    expect(body).not.toBeNull()
+
+    const rows = body?.querySelectorAll('shades-data-grid-row')
+    expect(rows?.length).toBe(2)
+
+    service[Symbol.dispose]()
+  })
+
+  it('should render cell content from entry properties', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const service = new CollectionService<TestEntry>()
+
+    service.data.setValue({
+      count: 1,
+      entries: [{ id: 42, name: 'Test Entry' }],
+    })
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <table>
+          <DataGridBody<TestEntry, 'id' | 'name'> service={service} columns={['id', 'name']} />
+        </table>
+      ),
+    })
+
+    await sleepAsync(50)
+
+    const body = document.querySelector('tbody[is="shade-data-grid-body"]')
+    const cells = body?.querySelectorAll('td')
+
+    expect(cells?.length).toBe(2)
+    expect(cells?.[0]?.textContent).toBe('42')
+    expect(cells?.[1]?.textContent).toBe('Test Entry')
+
+    service[Symbol.dispose]()
+  })
+
+  it('should re-render when data observable changes', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const service = new CollectionService<TestEntry>()
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <table>
+          <DataGridBody<TestEntry, 'id' | 'name'> service={service} columns={['id', 'name']} />
+        </table>
+      ),
+    })
+
+    await sleepAsync(50)
+
+    let body = document.querySelector('tbody[is="shade-data-grid-body"]')
+    expect(body?.textContent).toContain('- No Data -')
+
+    service.data.setValue({
+      count: 1,
+      entries: [{ id: 1, name: 'New Entry' }],
+    })
+
+    await sleepAsync(50)
+
+    body = document.querySelector('tbody[is="shade-data-grid-body"]')
+    const rows = body?.querySelectorAll('shades-data-grid-row')
+    expect(rows?.length).toBe(1)
+
+    service[Symbol.dispose]()
+  })
+
+  it('should call onRowClick callback when row is clicked', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const service = new CollectionService<TestEntry>()
+    const onRowClick = vi.fn()
+
+    const entry = { id: 1, name: 'Clickable' }
+    service.data.setValue({
+      count: 1,
+      entries: [entry],
+    })
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <table>
+          <DataGridBody<TestEntry, 'id' | 'name'> service={service} columns={['id', 'name']} onRowClick={onRowClick} />
+        </table>
+      ),
+    })
+
+    await sleepAsync(50)
+
+    const cell = document.querySelector('td') as HTMLTableCellElement
+    cell.click()
+
+    expect(onRowClick).toHaveBeenCalledWith(entry, expect.any(MouseEvent))
+
+    service[Symbol.dispose]()
+  })
+
+  it('should call onRowDoubleClick callback when row is double-clicked', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const service = new CollectionService<TestEntry>()
+    const onRowDoubleClick = vi.fn()
+
+    const entry = { id: 1, name: 'DoubleClickable' }
+    service.data.setValue({
+      count: 1,
+      entries: [entry],
+    })
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <table>
+          <DataGridBody<TestEntry, 'id' | 'name'>
+            service={service}
+            columns={['id', 'name']}
+            onRowDoubleClick={onRowDoubleClick}
+          />
+        </table>
+      ),
+    })
+
+    await sleepAsync(50)
+
+    const cell = document.querySelector('td') as HTMLTableCellElement
+    const dblClickEvent = new MouseEvent('dblclick', { bubbles: true })
+    cell.dispatchEvent(dblClickEvent)
+
+    expect(onRowDoubleClick).toHaveBeenCalledWith(entry, expect.any(MouseEvent))
+
+    service[Symbol.dispose]()
+  })
+
+  it('should use custom row components when provided', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const service = new CollectionService<TestEntry>()
+
+    service.data.setValue({
+      count: 1,
+      entries: [{ id: 1, name: 'Custom' }],
+    })
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <table>
+          <DataGridBody<TestEntry, 'id' | 'name'>
+            service={service}
+            columns={['id', 'name']}
+            rowComponents={{
+              id: (entry) => <span data-testid="custom-id">ID: {entry.id}</span>,
+              name: (entry) => <strong data-testid="custom-name">{entry.name}</strong>,
+            }}
+          />
+        </table>
+      ),
+    })
+
+    await sleepAsync(50)
+
+    const customId = document.querySelector('[data-testid="custom-id"]')
+    const customName = document.querySelector('[data-testid="custom-name"]')
+
+    expect(customId?.textContent).toContain('ID: 1')
+    expect(customName?.textContent).toBe('Custom')
+
+    service[Symbol.dispose]()
+  })
+
+  it('should use default row component when column-specific one is not provided', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const service = new CollectionService<TestEntry>()
+
+    service.data.setValue({
+      count: 1,
+      entries: [{ id: 1, name: 'Default' }],
+    })
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <table>
+          <DataGridBody<TestEntry, 'id' | 'name'>
+            service={service}
+            columns={['id', 'name']}
+            rowComponents={{
+              default: (entry) => <em data-testid="default-cell">{JSON.stringify(entry)}</em>,
+            }}
+          />
+        </table>
+      ),
+    })
+
+    await sleepAsync(50)
+
+    const defaultCells = document.querySelectorAll('[data-testid="default-cell"]')
+    expect(defaultCells.length).toBe(2)
+
+    service[Symbol.dispose]()
+  })
+
+  it('should render with empty entries array', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const service = new CollectionService<TestEntry>()
+
+    service.data.setValue({
+      count: 0,
+      entries: [],
+    })
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <table>
+          <DataGridBody<TestEntry, 'id' | 'name'> service={service} columns={['id', 'name']} />
+        </table>
+      ),
+    })
+
+    await sleepAsync(50)
+
+    const body = document.querySelector('tbody[is="shade-data-grid-body"]')
+    expect(body?.textContent).toContain('- No Data -')
+
+    service[Symbol.dispose]()
+  })
+})

package/src/components/data-grid/body.tsx

@@ -26,7 +26,7 @@ export const DataGridBody: <T, Column extends string>(
   shadowDomName: 'shade-data-grid-body',
   elementBase: HTMLTableSectionElement,
   elementBaseName: 'tbody',
-  style: {
+  css: {
     display: 'table-row-group',
   },
   render: ({ props, useObservable }) => {