@furystack/shades-common-components 11.0.0 → 12.0.1

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

@@ -1,10 +1,13 @@
 import type { FilterType, FindOptions } from '@furystack/core'
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import { ObservableValue, sleepAsync } from '@furystack/utils'
+import type { ObservableValue } from '@furystack/utils'
+import { sleepAsync } from '@furystack/utils'
 import { collapse, expand } from '../animations.js'
 import { Button } from '../button.js'
 import { Form } from '../form.js'
+import { Icon } from '../icons/icon.js'
+import { arrowDown, arrowUp, arrowUpDown, close as closeIcon, search as searchIcon } from '../icons/icon-definitions.js'
 import { Input } from '../inputs/input.js'
 
 export interface DataGridHeaderProps<T, Column extends string> {
@@ -51,7 +54,12 @@ export const OrderButton = Shade<{
           })
         }}
       >
-        {(currentOrder === props.field && (currentOrderDirection === 'ASC' ? '⬇' : '⬆')) || '↕'}
+        {(currentOrder === props.field &&
+          (currentOrderDirection === 'ASC' ? (
+            <Icon icon={arrowDown} size={16} />
+          ) : (
+            <Icon icon={arrowUp} size={16} />
+          ))) || <Icon icon={arrowUpDown} size={16} />}
       </Button>
     )
   },
@@ -77,8 +85,14 @@ const SearchButton = Shade<{
       (findOptions.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>)?.$regex || ''
 
     return (
-      <Button type="button" title="Filter" variant="outlined" onclick={props.onclick}>
-        {filterValue ? '🔍' : '🔎'}
+      <Button
+        type="button"
+        title="Filter"
+        variant="outlined"
+        color={filterValue ? 'info' : undefined}
+        onclick={props.onclick}
+      >
+        <Icon icon={searchIcon} size={16} />
       </Button>
     )
   },
@@ -152,10 +166,10 @@ const SearchForm = Shade<{
               props.onClear()
             }}
           >
-            ❌
+            <Icon icon={closeIcon} size={16} />
           </Button>
           <Button variant="outlined" type="submit">
-            🔎
+            <Icon icon={searchIcon} size={16} />
           </Button>
         </div>
       </Form>
@@ -190,24 +204,33 @@ export const DataGridHeader: <T, Column extends string>(
       gap: '4px',
     },
   },
-  render: ({ props, element, useObservable }) => {
-    const [, setIsSearchOpened] = useObservable('isSearchOpened', new ObservableValue(false), {
-      onChange: (newValue) => {
-        const searchForm = element.querySelector('.search-form') as HTMLElement
-        const headerContent = element.querySelector('.header-content') as HTMLElement
-        if (!newValue) {
-          void collapse(searchForm)
-          void expand(headerContent)
-        } else {
-          searchForm.style.display = 'flex'
-          void expand(searchForm).then(async () => {
-            await sleepAsync(100)
-            searchForm.querySelector('input')?.focus()
-          })
-          void collapse(headerContent)
-        }
-      },
-    })
+  render: ({ props, useObservable, useState, useRef }) => {
+    const searchFormRef = useRef<HTMLElement>('searchForm')
+    const headerContentRef = useRef<HTMLDivElement>('headerContent')
+
+    const [, setIsSearchOpened] = useState('isSearchOpened', false)
+
+    const openSearch = () => {
+      setIsSearchOpened(true)
+      const searchForm = searchFormRef.current?.querySelector('.search-form') as HTMLElement | null
+      const headerContent = headerContentRef.current
+      if (!searchForm || !headerContent) return
+      searchForm.style.display = 'flex'
+      void expand(searchForm).then(async () => {
+        await sleepAsync(100)
+        searchForm.querySelector('input')?.focus()
+      })
+      void collapse(headerContent)
+    }
+
+    const closeSearch = () => {
+      setIsSearchOpened(false)
+      const searchForm = searchFormRef.current?.querySelector('.search-form') as HTMLElement | null
+      const headerContent = headerContentRef.current
+      if (!searchForm || !headerContent) return
+      void collapse(searchForm)
+      void expand(headerContent)
+    }
 
     const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions)
 
@@ -226,27 +249,23 @@ export const DataGridHeader: <T, Column extends string>(
         setFindOptions({ ...findOptions, filter: newFilter })
       }
 
-      setIsSearchOpened(false)
+      closeSearch()
     }
 
     return (
       <>
-        <SearchForm
-          onSubmit={updateSearchValue}
-          onClear={updateSearchValue}
-          fieldName={props.field}
-          findOptions={props.findOptions}
-        />
-        <div className="header-content">
+        <div ref={searchFormRef} style={{ display: 'contents' }}>
+          <SearchForm
+            onSubmit={updateSearchValue}
+            onClear={updateSearchValue}
+            fieldName={props.field}
+            findOptions={props.findOptions}
+          />
+        </div>
+        <div ref={headerContentRef} className="header-content">
           <div className="header-field-name">{props.field}</div>
           <div className="header-controls">
-            <SearchButton
-              onclick={() => {
-                setIsSearchOpened(true)
-              }}
-              findOptions={props.findOptions}
-              fieldName={props.field}
-            />
+            <SearchButton onclick={openSearch} findOptions={props.findOptions} fieldName={props.field} />
 
             <OrderButton field={props.field} findOptions={props.findOptions} />
           </div>

package/src/components/data-grid/selection-cell.spec.tsx

@@ -32,6 +32,7 @@ describe('SelectionCell', () => {
         root.querySelector('shades-data-grid-selection-cell')?.querySelector('input[type="checkbox"]') as
           | HTMLInputElement
           | undefined,
+      [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
     }
   }
 
@@ -39,11 +40,11 @@ describe('SelectionCell', () => {
     it('should render a checkbox input', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { cell, getCheckbox } = await renderSelectionCell(entry, service)
-
-        expect(cell).toBeTruthy()
-        expect(getCheckbox()).toBeTruthy()
-        expect(getCheckbox()?.type).toBe('checkbox')
+        await usingAsync(await renderSelectionCell(entry, service), async ({ cell, getCheckbox }) => {
+          expect(cell).toBeTruthy()
+          expect(getCheckbox()).toBeTruthy()
+          expect(getCheckbox()?.type).toBe('checkbox')
+        })
       })
     })
   })
@@ -52,9 +53,9 @@ describe('SelectionCell', () => {
     it('should be unchecked when entry is not selected', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getCheckbox } = await renderSelectionCell(entry, service)
-
-        expect(getCheckbox()?.checked).toBe(false)
+        await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+          expect(getCheckbox()?.checked).toBe(false)
+        })
       })
     })
 
@@ -62,28 +63,28 @@ describe('SelectionCell', () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
         service.selection.setValue([entry])
-        const { getCheckbox } = await renderSelectionCell(entry, service)
-
-        expect(getCheckbox()?.checked).toBe(true)
+        await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+          expect(getCheckbox()?.checked).toBe(true)
+        })
       })
     })
 
     it('should update checkbox when selection changes externally', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getCheckbox } = await renderSelectionCell(entry, service)
+        await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+          expect(getCheckbox()?.checked).toBe(false)
 
-        expect(getCheckbox()?.checked).toBe(false)
-
-        service.selection.setValue([entry])
-        await sleepAsync(50)
+          service.selection.setValue([entry])
+          await sleepAsync(50)
 
-        expect(getCheckbox()?.checked).toBe(true)
+          expect(getCheckbox()?.checked).toBe(true)
 
-        service.selection.setValue([])
-        await sleepAsync(50)
+          service.selection.setValue([])
+          await sleepAsync(50)
 
-        expect(getCheckbox()?.checked).toBe(false)
+          expect(getCheckbox()?.checked).toBe(false)
+        })
       })
     })
 
@@ -92,9 +93,9 @@ describe('SelectionCell', () => {
         const entry = { id: 1, name: 'Test' }
         const otherEntry = { id: 2, name: 'Other' }
         service.selection.setValue([otherEntry])
-        const { getCheckbox } = await renderSelectionCell(entry, service)
-
-        expect(getCheckbox()?.checked).toBe(false)
+        await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+          expect(getCheckbox()?.checked).toBe(false)
+        })
       })
     })
   })
@@ -103,15 +104,15 @@ describe('SelectionCell', () => {
     it('should add entry to selection when checkbox is clicked and entry is not selected', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getCheckbox } = await renderSelectionCell(entry, service)
-
-        expect(service.selection.getValue()).toEqual([])
+        await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+          expect(service.selection.getValue()).toEqual([])
 
-        const checkbox = getCheckbox()
-        checkbox?.dispatchEvent(new Event('change', { bubbles: true }))
-        await sleepAsync(50)
+          const checkbox = getCheckbox()
+          checkbox?.dispatchEvent(new Event('change', { bubbles: true }))
+          await sleepAsync(50)
 
-        expect(service.selection.getValue()).toContain(entry)
+          expect(service.selection.getValue()).toContain(entry)
+        })
       })
     })
 
@@ -119,15 +120,15 @@ describe('SelectionCell', () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
         service.selection.setValue([entry])
-        const { getCheckbox } = await renderSelectionCell(entry, service)
-
-        expect(service.selection.getValue()).toContain(entry)
+        await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+          expect(service.selection.getValue()).toContain(entry)
 
-        const checkbox = getCheckbox()
-        checkbox?.dispatchEvent(new Event('change', { bubbles: true }))
-        await sleepAsync(50)
+          const checkbox = getCheckbox()
+          checkbox?.dispatchEvent(new Event('change', { bubbles: true }))
+          await sleepAsync(50)
 
-        expect(service.selection.getValue()).not.toContain(entry)
+          expect(service.selection.getValue()).not.toContain(entry)
+        })
       })
     })
 
@@ -136,14 +137,14 @@ describe('SelectionCell', () => {
         const entry = { id: 1, name: 'Test' }
         const otherEntry = { id: 2, name: 'Other' }
         service.selection.setValue([otherEntry])
-        const { getCheckbox } = await renderSelectionCell(entry, service)
-
-        const checkbox = getCheckbox()
-        checkbox?.dispatchEvent(new Event('change', { bubbles: true }))
-        await sleepAsync(50)
-
-        expect(service.selection.getValue()).toContain(entry)
-        expect(service.selection.getValue()).toContain(otherEntry)
+        await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+          const checkbox = getCheckbox()
+          checkbox?.dispatchEvent(new Event('change', { bubbles: true }))
+          await sleepAsync(50)
+
+          expect(service.selection.getValue()).toContain(entry)
+          expect(service.selection.getValue()).toContain(otherEntry)
+        })
       })
     })
   })

package/src/components/data-grid/selection-cell.tsx

@@ -15,12 +15,8 @@ export const SelectionCell = Shade<{ entry: any; service: CollectionService<any>
       accentColor: cssVariableTheme.palette.primary.main,
     },
   },
-  render: ({ props, useObservable, element }) => {
-    const [selection] = useObservable('selection', props.service.selection, {
-      onChange: (newSelection) => {
-        ;(element.querySelector('input') as HTMLInputElement).checked = newSelection.includes(props.entry)
-      },
-    })
+  render: ({ props, useObservable }) => {
+    const [selection] = useObservable('selection', props.service.selection)
     const isSelected = selection.includes(props.entry)
 
     return (

package/src/components/dialog.spec.tsx

@@ -0,0 +1,135 @@
+import { createComponent } from '@furystack/shades'
+import { describe, expect, it, vi } from 'vitest'
+import type { DialogProps } from './dialog.js'
+import { ConfirmDialog, Dialog } from './dialog.js'
+
+describe('Dialog', () => {
+  it('should be defined', () => {
+    expect(Dialog).toBeDefined()
+    expect(typeof Dialog).toBe('function')
+  })
+
+  it('should create a dialog element', () => {
+    const el = (<Dialog isVisible={true} />) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-dialog')
+  })
+
+  it('should pass title prop', () => {
+    const el = (<Dialog isVisible={true} title="Test Title" />) as unknown as { props: DialogProps }
+    expect(el.props.title).toBe('Test Title')
+  })
+
+  it('should pass onClose prop', () => {
+    const onClose = vi.fn()
+    const el = (<Dialog isVisible={true} onClose={onClose} />) as unknown as { props: DialogProps }
+    expect(el.props.onClose).toBe(onClose)
+  })
+
+  it('should pass actions prop', () => {
+    const actions = <button>OK</button>
+    const el = (<Dialog isVisible={true} actions={actions} />) as unknown as { props: DialogProps }
+    expect(el.props.actions).toBeDefined()
+  })
+
+  it('should pass maxWidth prop', () => {
+    const el = (<Dialog isVisible={true} maxWidth="800px" />) as unknown as { props: DialogProps }
+    expect(el.props.maxWidth).toBe('800px')
+  })
+
+  it('should pass fullWidth prop', () => {
+    const el = (<Dialog isVisible={true} fullWidth />) as unknown as { props: DialogProps }
+    expect(el.props.fullWidth).toBe(true)
+  })
+
+  it('should pass children as dialog content', () => {
+    const el = (
+      <Dialog isVisible={true}>
+        <p>Dialog content</p>
+      </Dialog>
+    ) as unknown as HTMLElement
+    expect(el).toBeDefined()
+  })
+
+  it('should accept isVisible boolean', () => {
+    const el = (<Dialog isVisible={false} />) as unknown as { props: DialogProps }
+    expect(el.props.isVisible).toBe(false)
+  })
+})
+
+describe('ConfirmDialog', () => {
+  it('should be defined', () => {
+    expect(ConfirmDialog).toBeDefined()
+    expect(typeof ConfirmDialog).toBe('function')
+  })
+
+  it('should create a confirm dialog element', () => {
+    const onConfirm = vi.fn()
+    const el = ConfirmDialog(true, {
+      title: 'Confirm',
+      message: 'Are you sure?',
+      onConfirm,
+    }) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-dialog')
+  })
+
+  it('should pass the title to the dialog', () => {
+    const onConfirm = vi.fn()
+    const el = ConfirmDialog(true, {
+      title: 'Delete Item',
+      message: 'Are you sure?',
+      onConfirm,
+    }) as unknown as { props: DialogProps }
+    expect(el.props.title).toBe('Delete Item')
+  })
+
+  it('should render with default button texts', () => {
+    const onConfirm = vi.fn()
+    const el = ConfirmDialog(true, {
+      title: 'Confirm',
+      message: 'Are you sure?',
+      onConfirm,
+    }) as unknown as { props: DialogProps }
+    expect(el.props.actions).toBeDefined()
+  })
+
+  it('should accept custom button texts', () => {
+    const onConfirm = vi.fn()
+    const el = ConfirmDialog(true, {
+      title: 'Confirm',
+      message: 'Are you sure?',
+      confirmText: 'Yes, delete',
+      cancelText: 'No, keep',
+      onConfirm,
+    }) as unknown as HTMLElement
+    expect(el).toBeDefined()
+  })
+
+  it('should accept JSX as message', () => {
+    const onConfirm = vi.fn()
+    const el = ConfirmDialog(true, {
+      title: 'Confirm',
+      message: (
+        <div>
+          <strong>Warning:</strong> This action cannot be undone.
+        </div>
+      ),
+      onConfirm,
+    }) as unknown as HTMLElement
+    expect(el).toBeDefined()
+  })
+
+  it('should call onCancel when onClose is triggered', () => {
+    const onCancel = vi.fn()
+    const el = ConfirmDialog(true, {
+      title: 'Confirm',
+      message: 'Are you sure?',
+      onConfirm: vi.fn(),
+      onCancel,
+    }) as unknown as { props: DialogProps }
+
+    el.props.onClose?.()
+    expect(onCancel).toHaveBeenCalledOnce()
+  })
+})