@furystack/shades-common-components 10.0.35 → 11.0.0

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

@@ -23,6 +23,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 +34,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()
@@ -64,6 +63,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) => {
@@ -75,16 +77,7 @@ const SearchButton = Shade<{
       (findOptions.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>)?.$regex || ''
 
     return (
-      <Button
-        type="button"
-        title="Filter"
-        style={{
-          padding: '4px',
-          margin: '0',
-          cursor: 'pointer',
-        }}
-        onclick={props.onclick}
-      >
+      <Button type="button" title="Filter" variant="outlined" onclick={props.onclick}>
         {filterValue ? '🔍' : '🔎'}
       </Button>
     )
@@ -98,6 +91,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 +125,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 +133,6 @@ const SearchForm = Shade<{
         }}
       >
         <Input
-          style={{ padding: '0px', paddingBottom: '0', margin: '0' }}
           placeholder={props.fieldName}
           autofocus
           labelTitle={`${props.fieldName}`}
@@ -140,10 +142,10 @@ 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()
@@ -152,7 +154,7 @@ const SearchForm = Shade<{
           >
             ❌
           </Button>
-          <Button style={{ padding: '4px', margin: '0' }} type="submit">
+          <Button variant="outlined" type="submit">
             🔎
           </Button>
         </div>
@@ -167,6 +169,27 @@ export const DataGridHeader: <T, Column extends string>(
   findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>,
 ) => JSX.Element<any> = Shade({
   shadowDomName: 'data-grid-header',
+  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, element, useObservable }) => {
     const [, setIsSearchOpened] = useObservable('isSearchOpened', new ObservableValue(false), {
       onChange: (newValue) => {
@@ -214,23 +237,9 @@ export const DataGridHeader: <T, Column extends string>(
           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' }}
-          >
+        <div className="header-content">
+          <div className="header-field-name">{props.field}</div>
+          <div className="header-controls">
             <SearchButton
               onclick={() => {
                 setIsSearchOpened(true)

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

@@ -0,0 +1,150 @@
+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,
+    }
+  }
+
+  describe('rendering', () => {
+    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')
+      })
+    })
+  })
+
+  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' }
+        const { getCheckbox } = await renderSelectionCell(entry, service)
+
+        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])
+        const { getCheckbox } = await renderSelectionCell(entry, service)
+
+        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)
+
+        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])
+        const { getCheckbox } = await renderSelectionCell(entry, service)
+
+        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' }
+        const { getCheckbox } = await renderSelectionCell(entry, service)
+
+        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])
+        const { getCheckbox } = await renderSelectionCell(entry, service)
+
+        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])
+        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)
+      })
+    })
+  })
+})

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

@@ -1,8 +1,20 @@
 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',
+  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, element }) => {
     const [selection] = useObservable('selection', props.service.selection, {
       onChange: (newSelection) => {
@@ -18,12 +30,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/fab.spec.tsx

@@ -0,0 +1,108 @@
+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 { Fab } from './fab.js'
+
+describe('Fab', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const renderFab = async (children?: JSX.Element[]) => {
+    const injector = new Injector()
+    const root = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: <Fab>{children}</Fab>,
+    })
+    await sleepAsync(50)
+    return {
+      injector,
+      fab: root.querySelector('button[is="shade-fab"]') as HTMLButtonElement,
+    }
+  }
+
+  describe('rendering', () => {
+    it('should render a button element', async () => {
+      const { fab } = await renderFab()
+      expect(fab).toBeTruthy()
+      expect(fab.tagName.toLowerCase()).toBe('button')
+      expect(fab.getAttribute('is')).toBe('shade-fab')
+    })
+  })
+
+  describe('positioning', () => {
+    it('should have fixed positioning', async () => {
+      const { fab } = await renderFab()
+      const computedStyle = window.getComputedStyle(fab)
+      expect(computedStyle.position).toBe('fixed')
+    })
+
+    it('should be positioned at bottom-right corner', async () => {
+      const { fab } = await renderFab()
+      const computedStyle = window.getComputedStyle(fab)
+      expect(computedStyle.bottom).toBe('32px')
+      expect(computedStyle.right).toBe('32px')
+    })
+  })
+
+  describe('children', () => {
+    it('should render text children', async () => {
+      const { fab } = await renderFab(['+'] as unknown as JSX.Element[])
+      expect(fab.textContent).toContain('+')
+    })
+
+    it('should render element children', async () => {
+      const { fab } = await renderFab([<span>🚀</span>])
+      expect(fab.textContent).toContain('🚀')
+    })
+  })
+
+  describe('styling', () => {
+    it('should have circular shape', async () => {
+      const { fab } = await renderFab()
+      const computedStyle = window.getComputedStyle(fab)
+      expect(computedStyle.borderRadius).toBe('50%')
+    })
+
+    it('should have fixed dimensions', async () => {
+      const { fab } = await renderFab()
+      const computedStyle = window.getComputedStyle(fab)
+      expect(computedStyle.width).toBe('64px')
+      expect(computedStyle.height).toBe('64px')
+    })
+
+    it('should center content with flexbox', async () => {
+      const { fab } = await renderFab()
+      const computedStyle = window.getComputedStyle(fab)
+      expect(computedStyle.display).toBe('flex')
+      expect(computedStyle.justifyContent).toBe('center')
+      expect(computedStyle.alignItems).toBe('center')
+    })
+  })
+
+  describe('button functionality', () => {
+    it('should trigger onclick handler when clicked', async () => {
+      const handleClick = vi.fn()
+      const injector = new Injector()
+      const root = document.getElementById('root')!
+      initializeShadeRoot({
+        injector,
+        rootElement: root,
+        jsxElement: <Fab onclick={handleClick}>+</Fab>,
+      })
+      await sleepAsync(50)
+      const fab = root.querySelector('button[is="shade-fab"]') as HTMLButtonElement
+
+      fab.click()
+
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})

package/src/components/fab.tsx

@@ -4,7 +4,7 @@ export const Fab = Shade({
   shadowDomName: 'shade-fab',
   elementBase: HTMLButtonElement,
   elementBaseName: 'button',
-  style: {
+  css: {
     position: 'fixed',
     bottom: '32px',
     right: '32px',
@@ -17,6 +17,15 @@ export const Fab = Shade({
     borderRadius: '50%',
     boxShadow: '2px 2px 4px rgba(0,0,0,0.3)',
     cursor: 'pointer',
+    border: 'none',
+    transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+    '&:hover': {
+      transform: 'scale(1.05)',
+      boxShadow: '3px 3px 6px rgba(0,0,0,0.4)',
+    },
+    '&:active': {
+      transform: 'scale(0.95)',
+    },
   },
   render: ({ children }) => {
     return <>{children}</>