@furystack/shades-common-components 10.0.35 → 12.0.0

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> {
@@ -23,6 +26,9 @@ export const OrderButton = Shade<{
   findOptions: ObservableValue<FindOptions<any, any[]>>
 }>({
   shadowDomName: 'data-grid-order-button',
+  css: {
+    display: 'inline-block',
+  },
   render: ({ props, useObservable }) => {
     const [findOptions, onFindOptionsChange] = useObservable('findOptions', props.findOptions, {})
 
@@ -31,11 +37,7 @@ export const OrderButton = Shade<{
     return (
       <Button
         title="Change order"
-        style={{
-          padding: '4px',
-          margin: '0',
-          cursor: 'pointer',
-        }}
+        variant="outlined"
         color={currentOrder === props.field ? 'info' : undefined}
         onclick={(ev) => {
           ev.stopPropagation()
@@ -52,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>
     )
   },
@@ -64,6 +71,9 @@ const SearchButton = Shade<{
   findOptions: ObservableValue<FindOptions<any, any[]>>
 }>({
   shadowDomName: 'data-grid-search-button',
+  css: {
+    display: 'inline-block',
+  },
   render: ({ props, useObservable }) => {
     const [findOptions] = useObservable('currentValue', props.findOptions, {
       filter: (newValue) => {
@@ -78,14 +88,11 @@ const SearchButton = Shade<{
       <Button
         type="button"
         title="Filter"
-        style={{
-          padding: '4px',
-          margin: '0',
-          cursor: 'pointer',
-        }}
+        variant="outlined"
+        color={filterValue ? 'info' : undefined}
         onclick={props.onclick}
       >
-        {filterValue ? '🔍' : '🔎'}
+        <Icon icon={searchIcon} size={16} />
       </Button>
     )
   },
@@ -98,6 +105,24 @@ const SearchForm = Shade<{
   findOptions: ObservableValue<FindOptions<any, any[]>>
 }>({
   shadowDomName: 'data-grid-search-form',
+  css: {
+    display: 'block',
+    '& .search-form': {
+      display: 'flex',
+      width: '100%',
+      overflow: 'hidden',
+      height: '0px',
+      justifyContent: 'space-around',
+      opacity: '0',
+    },
+    '& .search-form-actions': {
+      display: 'flex',
+      width: '64px',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '8px',
+    },
+  },
   render: ({ props, useObservable }) => {
     type SearchSubmitType = { searchValue: string }
 
@@ -114,14 +139,6 @@ const SearchForm = Shade<{
     return (
       <Form<SearchSubmitType>
         className="search-form"
-        style={{
-          display: 'flex',
-          width: '100%',
-          overflow: 'hide',
-          height: '0px',
-          justifyContent: 'space-around',
-          opacity: '0',
-        }}
         validate={(data): data is SearchSubmitType =>
           typeof (data as SearchSubmitType).searchValue?.length === 'number'
         }
@@ -130,7 +147,6 @@ const SearchForm = Shade<{
         }}
       >
         <Input
-          style={{ padding: '0px', paddingBottom: '0', margin: '0' }}
           placeholder={props.fieldName}
           autofocus
           labelTitle={`${props.fieldName}`}
@@ -140,20 +156,20 @@ const SearchForm = Shade<{
             style: { padding: '0px 2em' },
           }}
         />
-        <div style={{ display: 'flex', width: '64px', alignItems: 'center', justifyContent: 'center', gap: '8px' }}>
+        <div className="search-form-actions">
           <Button
             type="reset"
-            style={{ padding: '4px', margin: '0' }}
+            variant="outlined"
             onclick={(ev) => {
               ev.preventDefault()
               ev.stopPropagation()
               props.onClear()
             }}
           >
-            ❌
+            <Icon icon={closeIcon} size={16} />
           </Button>
-          <Button style={{ padding: '4px', margin: '0' }} type="submit">
-            🔎
+          <Button variant="outlined" type="submit">
+            <Icon icon={searchIcon} size={16} />
           </Button>
         </div>
       </Form>
@@ -167,24 +183,54 @@ export const DataGridHeader: <T, Column extends string>(
   findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>,
 ) => JSX.Element<any> = Shade({
   shadowDomName: 'data-grid-header',
-  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)
-        }
-      },
-    })
+  css: {
+    display: 'block',
+    '& .header-content': {
+      display: 'flex',
+      width: '100%',
+      height: '48px',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '12px',
+      overflow: 'hidden',
+    },
+    '& .header-field-name': {
+      fontWeight: '600',
+    },
+    '& .header-controls': {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '4px',
+    },
+  },
+  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)
 
@@ -203,41 +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"
-          style={{
-            display: 'flex',
-            width: '100%',
-            height: '48px',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            gap: '12px',
-            overflow: 'hide',
-          }}
-        >
-          <div style={{ paddingLeft: '0', fontWeight: '600' }}>{props.field}</div>
-          <div
-            className="header-controls"
-            style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: '0', gap: '4px' }}
-          >
-            <SearchButton
-              onclick={() => {
-                setIsSearchOpened(true)
-              }}
-              findOptions={props.findOptions}
-              fieldName={props.field}
-            />
+        <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={openSearch} findOptions={props.findOptions} fieldName={props.field} />
 
             <OrderButton field={props.field} findOptions={props.findOptions} />
           </div>

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

@@ -0,0 +1,151 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { CollectionService } from '../../services/collection-service.js'
+import { SelectionCell } from './selection-cell.js'
+
+type TestEntry = { id: number; name: string }
+
+describe('SelectionCell', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const renderSelectionCell = async (entry: TestEntry, service: CollectionService<TestEntry>) => {
+    const injector = new Injector()
+    const root = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: <SelectionCell entry={entry} service={service} />,
+    })
+    await sleepAsync(50)
+    return {
+      injector,
+      cell: root.querySelector('shades-data-grid-selection-cell') as HTMLElement,
+      getCheckbox: () =>
+        root.querySelector('shades-data-grid-selection-cell')?.querySelector('input[type="checkbox"]') as
+          | HTMLInputElement
+          | undefined,
+      [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
+    }
+  }
+
+  describe('rendering', () => {
+    it('should render a checkbox input', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        await usingAsync(await renderSelectionCell(entry, service), async ({ cell, getCheckbox }) => {
+          expect(cell).toBeTruthy()
+          expect(getCheckbox()).toBeTruthy()
+          expect(getCheckbox()?.type).toBe('checkbox')
+        })
+      })
+    })
+  })
+
+  describe('checkbox state sync', () => {
+    it('should be unchecked when entry is not selected', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+          expect(getCheckbox()?.checked).toBe(false)
+        })
+      })
+    })
+
+    it('should be checked when entry is in selection', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        service.selection.setValue([entry])
+        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' }
+        await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+          expect(getCheckbox()?.checked).toBe(false)
+
+          service.selection.setValue([entry])
+          await sleepAsync(50)
+
+          expect(getCheckbox()?.checked).toBe(true)
+
+          service.selection.setValue([])
+          await sleepAsync(50)
+
+          expect(getCheckbox()?.checked).toBe(false)
+        })
+      })
+    })
+
+    it('should remain unchecked when different entries are selected', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const otherEntry = { id: 2, name: 'Other' }
+        service.selection.setValue([otherEntry])
+        await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+          expect(getCheckbox()?.checked).toBe(false)
+        })
+      })
+    })
+  })
+
+  describe('selection toggle', () => {
+    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' }
+        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)
+
+          expect(service.selection.getValue()).toContain(entry)
+        })
+      })
+    })
+
+    it('should remove entry from selection when checkbox is clicked and entry is selected', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        service.selection.setValue([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)
+
+          expect(service.selection.getValue()).not.toContain(entry)
+        })
+      })
+    })
+
+    it('should preserve other selected entries when toggling', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const otherEntry = { id: 2, name: 'Other' }
+        service.selection.setValue([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

@@ -1,14 +1,22 @@
 import { createComponent, Shade } from '@furystack/shades'
 import type { CollectionService } from '../../services/collection-service.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 
 export const SelectionCell = Shade<{ entry: any; service: CollectionService<any> }>({
   shadowDomName: 'shades-data-grid-selection-cell',
-  render: ({ props, useObservable, element }) => {
-    const [selection] = useObservable('selection', props.service.selection, {
-      onChange: (newSelection) => {
-        ;(element.querySelector('input') as HTMLInputElement).checked = newSelection.includes(props.entry)
-      },
-    })
+  css: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '& input[type="checkbox"]': {
+      cursor: 'pointer',
+      width: '18px',
+      height: '18px',
+      accentColor: cssVariableTheme.palette.primary.main,
+    },
+  },
+  render: ({ props, useObservable }) => {
+    const [selection] = useObservable('selection', props.service.selection)
     const isSelected = selection.includes(props.entry)
 
     return (
@@ -18,12 +26,6 @@ export const SelectionCell = Shade<{ entry: any; service: CollectionService<any>
         }}
         type="checkbox"
         checked={isSelected}
-        style={{
-          cursor: 'pointer',
-          width: '18px',
-          height: '18px',
-          accentColor: 'var(--shades-theme-palette-primary-main)',
-        }}
       />
     )
   },

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()
+  })
+})