@furystack/shades-common-components 12.3.0 → 12.5.0

package/src/components/data-grid/filters/filter-dropdown.spec.tsx

@@ -0,0 +1,89 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { FilterDropdown } from './filter-dropdown.js'
+
+describe('FilterDropdown', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('should render children inside panel', async () => {
+    const onClose = vi.fn()
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root')!
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <FilterDropdown onClose={onClose}>
+            <span className="test-child">Hello</span>
+          </FilterDropdown>
+        ),
+      })
+      await flushUpdates()
+
+      const dropdown = document.querySelector('data-grid-filter-dropdown')
+      expect(dropdown).not.toBeNull()
+
+      const panel = dropdown?.querySelector('.filter-dropdown-panel')
+      expect(panel).not.toBeNull()
+
+      const child = panel?.querySelector('.test-child')
+      expect(child).not.toBeNull()
+      expect(child?.textContent).toBe('Hello')
+    })
+  })
+
+  it('should add visible class after animation frame', async () => {
+    const onClose = vi.fn()
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root')!
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <FilterDropdown onClose={onClose}>
+            <span>Content</span>
+          </FilterDropdown>
+        ),
+      })
+      await flushUpdates()
+      await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+
+      const panel = document.querySelector('.filter-dropdown-panel')
+      expect(panel?.classList.contains('visible')).toBe(true)
+    })
+  })
+
+  it('should stop click propagation on panel', async () => {
+    const onClose = vi.fn()
+    const outerClick = vi.fn()
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root')!
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <div onclick={outerClick}>
+            <FilterDropdown onClose={onClose}>
+              <span className="inner">Content</span>
+            </FilterDropdown>
+          </div>
+        ),
+      })
+      await flushUpdates()
+
+      const panel = document.querySelector('.filter-dropdown-panel') as HTMLElement
+      panel?.click()
+      await flushUpdates()
+
+      expect(outerClick).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/components/data-grid/filters/filter-dropdown.tsx

@@ -0,0 +1,60 @@
+import type { ChildrenList } from '@furystack/shades'
+import { createComponent, Shade } from '@furystack/shades'
+import { ClickAwayService } from '../../../services/click-away-service.js'
+import { buildTransition, cssVariableTheme } from '../../../services/css-variable-theme.js'
+
+export type FilterDropdownProps = {
+  onClose: () => void
+}
+
+export const FilterDropdown: (props: FilterDropdownProps, children: ChildrenList) => JSX.Element = Shade({
+  shadowDomName: 'data-grid-filter-dropdown',
+  css: {
+    display: 'block',
+    position: 'absolute',
+    top: '100%',
+    left: '0',
+    zIndex: '10',
+    '& .filter-dropdown-panel': {
+      background: cssVariableTheme.background.paper,
+      borderRadius: cssVariableTheme.shape.borderRadius.md,
+      boxShadow: cssVariableTheme.shadows.lg,
+      border: `1px solid ${cssVariableTheme.divider}`,
+      padding: cssVariableTheme.spacing.md,
+      opacity: '0',
+      transform: 'scale(0.95) translateY(-4px)',
+      transition: buildTransition(
+        ['opacity', cssVariableTheme.transitions.duration.fast, 'ease-out'],
+        ['transform', cssVariableTheme.transitions.duration.fast, 'ease-out'],
+      ),
+    },
+    '& .filter-dropdown-panel.visible': {
+      opacity: '1',
+      transform: 'scale(1) translateY(0)',
+    },
+  },
+  render: ({ props, children, useDisposable, useRef }) => {
+    const panelRef = useRef<HTMLDivElement>('panel')
+
+    useDisposable(
+      'clickAway',
+      () =>
+        new ClickAwayService(panelRef, () => {
+          props.onClose()
+        }),
+    )
+
+    useDisposable('animateIn', () => {
+      const id = requestAnimationFrame(() => {
+        panelRef.current?.classList.add('visible')
+      })
+      return { [Symbol.dispose]: () => cancelAnimationFrame(id) }
+    })
+
+    return (
+      <div ref={panelRef} className="filter-dropdown-panel" onclick={(ev: MouseEvent) => ev.stopPropagation()}>
+        {children}
+      </div>
+    )
+  },
+})

package/src/components/data-grid/filters/filter-styles.ts

@@ -0,0 +1,26 @@
+import { cssVariableTheme } from '../../../services/css-variable-theme.js'
+
+export const filterBaseCss = {
+  display: 'block' as const,
+  '& .filter-row': {
+    display: 'flex',
+    gap: '6px',
+    alignItems: 'center',
+    marginBottom: '8px',
+  },
+  '& .filter-actions': {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: '4px',
+  },
+}
+
+export const filterInputCss = {
+  flex: '1',
+  padding: '4px 6px',
+  borderRadius: cssVariableTheme.shape.borderRadius.sm,
+  border: `1px solid ${cssVariableTheme.divider}`,
+  background: cssVariableTheme.background.default,
+  color: cssVariableTheme.text.primary,
+  fontSize: cssVariableTheme.typography.fontSize.xs,
+}

package/src/components/data-grid/filters/index.ts

@@ -0,0 +1,6 @@
+export * from './filter-dropdown.js'
+export * from './string-filter.js'
+export * from './number-filter.js'
+export * from './boolean-filter.js'
+export * from './enum-filter.js'
+export * from './date-filter.js'

package/src/components/data-grid/filters/number-filter.spec.tsx

@@ -0,0 +1,174 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { ObservableValue, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { FilterableFindOptions } from '../data-grid.js'
+import { NumberFilter } from './number-filter.js'
+
+describe('NumberFilter', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const createFindOptions = (options: Partial<FilterableFindOptions> = {}): ObservableValue<FilterableFindOptions> => {
+    return new ObservableValue<FilterableFindOptions>(options)
+  }
+
+  const renderNumberFilter = async (
+    findOptions: ObservableValue<FilterableFindOptions>,
+    field = 'level',
+    onClose = vi.fn(),
+  ) => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <NumberFilter field={field} findOptions={findOptions} onClose={onClose} />,
+    })
+    await flushUpdates()
+    return { injector, onClose }
+  }
+
+  it('should render operator segmented control and input', async () => {
+    const findOptions = createFindOptions()
+    await usingAsync((await renderNumberFilter(findOptions)).injector, async () => {
+      const control = document.querySelector('shade-segmented-control')
+      expect(control).not.toBeNull()
+
+      const input = document.querySelector('[data-testid="number-filter-value"]')
+      expect(input).not.toBeNull()
+    })
+  })
+
+  it('should apply $eq filter on submit', async () => {
+    const findOptions = createFindOptions()
+    const { injector, onClose } = await renderNumberFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const input = document.querySelector('[data-testid="number-filter-value"]') as HTMLInputElement
+      input.value = '42'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter).toEqual({ level: { $eq: 42 } })
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should apply $gt operator when selected', async () => {
+    const findOptions = createFindOptions()
+    const { injector, onClose } = await renderNumberFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const gtButton = document.querySelector('shade-segmented-control button[data-value="$gt"]') as HTMLButtonElement
+      gtButton?.click()
+      await flushUpdates()
+
+      const input = document.querySelector('[data-testid="number-filter-value"]') as HTMLInputElement
+      input.value = '10'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter).toEqual({ level: { $gt: 10 } })
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should apply $lte operator when selected', async () => {
+    const findOptions = createFindOptions()
+    const { injector, onClose } = await renderNumberFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const lteButton = document.querySelector('shade-segmented-control button[data-value="$lte"]') as HTMLButtonElement
+      lteButton?.click()
+      await flushUpdates()
+
+      const input = document.querySelector('[data-testid="number-filter-value"]') as HTMLInputElement
+      input.value = '99.5'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter).toEqual({ level: { $lte: 99.5 } })
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should clear filter when Clear button is clicked', async () => {
+    const findOptions = createFindOptions({ filter: { level: { $eq: 5 } } })
+    const { injector, onClose } = await renderNumberFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear')
+      clearButton?.click()
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter?.level).toBeUndefined()
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should remove filter when submitting NaN value', async () => {
+    const findOptions = createFindOptions({ filter: { level: { $eq: 5 } } })
+    const { injector, onClose } = await renderNumberFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const input = document.querySelector('[data-testid="number-filter-value"]') as HTMLInputElement
+      input.value = ''
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter?.level).toBeUndefined()
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should preserve filters on other fields', async () => {
+    const findOptions = createFindOptions({ filter: { level: { $gt: 10 }, name: { $regex: 'keep' } } })
+    const { injector } = await renderNumberFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear')
+      clearButton?.click()
+      await flushUpdates()
+
+      const updatedFilter = findOptions.getValue().filter
+      expect(updatedFilter?.level).toBeUndefined()
+      expect(updatedFilter?.name).toEqual({ $regex: 'keep' })
+    })
+  })
+
+  it('should reset skip to 0 when applying filter', async () => {
+    const findOptions = createFindOptions({ skip: 20 })
+    const { injector } = await renderNumberFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const input = document.querySelector('[data-testid="number-filter-value"]') as HTMLInputElement
+      input.value = '5'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      expect(findOptions.getValue().skip).toBe(0)
+    })
+  })
+
+  it('should show current filter value in input', async () => {
+    const findOptions = createFindOptions({ filter: { level: { $eq: 25 } } })
+    await usingAsync((await renderNumberFilter(findOptions)).injector, async () => {
+      const input = document.querySelector('[data-testid="number-filter-value"]') as HTMLInputElement
+      expect(input.value).toBe('25')
+    })
+  })
+})

package/src/components/data-grid/filters/number-filter.tsx

@@ -0,0 +1,115 @@
+import { createComponent, Shade } from '@furystack/shades'
+import type { ObservableValue } from '@furystack/utils'
+import { Button } from '../../button.js'
+import { SegmentedControl } from '../../button-group.js'
+import { Icon } from '../../icons/icon.js'
+import { close as closeIcon, search as searchIcon } from '../../icons/icon-definitions.js'
+import type { FilterableFindOptions } from '../data-grid.js'
+import { filterBaseCss, filterInputCss } from './filter-styles.js'
+
+type NumberOperator = '$eq' | '$gt' | '$gte' | '$lt' | '$lte'
+
+const operatorLabels: Record<NumberOperator, string> = {
+  $eq: '=',
+  $gt: '>',
+  $gte: '>=',
+  $lt: '<',
+  $lte: '<=',
+}
+
+export const NumberFilter = Shade<{
+  field: string
+  findOptions: ObservableValue<FilterableFindOptions>
+  onClose: () => void
+}>({
+  shadowDomName: 'data-grid-number-filter',
+  css: {
+    ...filterBaseCss,
+    '& input': filterInputCss,
+  },
+  render: ({ props, useObservable, useState }) => {
+    const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions)
+
+    const currentFilter = findOptions.filter?.[props.field] as Record<string, number> | undefined
+    const currentOperator: NumberOperator = currentFilter
+      ? ((Object.keys(currentFilter).find((k) => k in operatorLabels) as NumberOperator) ?? '$eq')
+      : '$eq'
+    const currentValue = currentFilter?.[currentOperator]
+
+    const applyFilter = (operator: NumberOperator, value: string) => {
+      const num = parseFloat(value)
+      const filter = { ...findOptions.filter }
+      if (isNaN(num)) {
+        delete filter[props.field]
+      } else {
+        filter[props.field] = { [operator]: num }
+      }
+      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onClose()
+    }
+
+    const clearFilter = () => {
+      const filter = { ...findOptions.filter }
+      delete filter[props.field]
+      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onClose()
+    }
+
+    const [selectedOperator, setSelectedOperator] = useState<NumberOperator>('selectedOperator', currentOperator)
+    let inputValue = currentValue !== undefined ? currentValue.toString() : ''
+
+    return (
+      <form
+        onsubmit={(ev: Event) => {
+          ev.preventDefault()
+          applyFilter(selectedOperator, inputValue)
+        }}
+      >
+        <div className="filter-row">
+          <SegmentedControl
+            size="small"
+            value={selectedOperator}
+            onValueChange={(v) => setSelectedOperator(v as NumberOperator)}
+            options={(Object.keys(operatorLabels) as NumberOperator[]).map((op) => ({
+              value: op,
+              label: operatorLabels[op],
+            }))}
+          />
+        </div>
+        <div className="filter-row">
+          <input
+            data-testid="number-filter-value"
+            type="number"
+            step="any"
+            placeholder="Value..."
+            value={inputValue}
+            autofocus
+            oninput={(ev: Event) => {
+              inputValue = (ev.target as HTMLInputElement).value
+            }}
+          />
+        </div>
+        <div className="filter-actions">
+          <Button
+            type="button"
+            variant="outlined"
+            size="small"
+            onclick={clearFilter}
+            startIcon={<Icon icon={closeIcon} size={14} />}
+          >
+            Clear
+          </Button>
+          <Button
+            type="submit"
+            variant="outlined"
+            size="small"
+            color="primary"
+            startIcon={<Icon icon={searchIcon} size={14} />}
+          >
+            Apply
+          </Button>
+        </div>
+      </form>
+    )
+  },
+})

package/src/components/data-grid/filters/string-filter.spec.tsx

@@ -0,0 +1,157 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { ObservableValue, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { FilterableFindOptions } from '../data-grid.js'
+import { StringFilter } from './string-filter.js'
+
+describe('StringFilter', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const createFindOptions = (options: Partial<FilterableFindOptions> = {}): ObservableValue<FilterableFindOptions> => {
+    return new ObservableValue<FilterableFindOptions>(options)
+  }
+
+  const renderStringFilter = async (
+    findOptions: ObservableValue<FilterableFindOptions>,
+    field = 'name',
+    onClose = vi.fn(),
+  ) => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <StringFilter field={field} findOptions={findOptions} onClose={onClose} />,
+    })
+    await flushUpdates()
+    return { injector, onClose }
+  }
+
+  it('should render operator segmented control and input', async () => {
+    const findOptions = createFindOptions()
+    await usingAsync((await renderStringFilter(findOptions)).injector, async () => {
+      const control = document.querySelector('shade-segmented-control')
+      expect(control).not.toBeNull()
+
+      const input = document.querySelector('[data-testid="string-filter-value"]')
+      expect(input).not.toBeNull()
+    })
+  })
+
+  it('should apply $regex filter on submit', async () => {
+    const findOptions = createFindOptions()
+    const { injector, onClose } = await renderStringFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const input = document.querySelector('[data-testid="string-filter-value"]') as HTMLInputElement
+      input.value = 'test-value'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter).toEqual({ name: { $regex: 'test-value' } })
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should clear filter when Clear button is clicked', async () => {
+    const findOptions = createFindOptions({ filter: { name: { $regex: 'existing' } } })
+    const { injector, onClose } = await renderStringFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear')
+      clearButton?.click()
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter?.name).toBeUndefined()
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should remove filter when submitting empty value', async () => {
+    const findOptions = createFindOptions({ filter: { name: { $regex: 'existing' } } })
+    const { injector, onClose } = await renderStringFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const input = document.querySelector('[data-testid="string-filter-value"]') as HTMLInputElement
+      input.value = ''
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter?.name).toBeUndefined()
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should preserve filters on other fields', async () => {
+    const findOptions = createFindOptions({ filter: { name: { $regex: 'old' }, email: { $regex: 'keep' } } })
+    const { injector } = await renderStringFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const input = document.querySelector('[data-testid="string-filter-value"]') as HTMLInputElement
+      input.value = 'new-value'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      const updatedFilter = findOptions.getValue().filter
+      expect(updatedFilter?.name).toEqual({ $regex: 'new-value' })
+      expect(updatedFilter?.email).toEqual({ $regex: 'keep' })
+    })
+  })
+
+  it('should apply selected operator', async () => {
+    const findOptions = createFindOptions()
+    const { injector, onClose } = await renderStringFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const eqButton = document.querySelector('shade-segmented-control button[data-value="$eq"]') as HTMLButtonElement
+      eqButton?.click()
+      await flushUpdates()
+
+      const input = document.querySelector('[data-testid="string-filter-value"]') as HTMLInputElement
+      input.value = 'exact'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter).toEqual({ name: { $eq: 'exact' } })
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should reset skip to 0 when applying filter', async () => {
+    const findOptions = createFindOptions({ skip: 20 })
+    const { injector } = await renderStringFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const input = document.querySelector('[data-testid="string-filter-value"]') as HTMLInputElement
+      input.value = 'test'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      expect(findOptions.getValue().skip).toBe(0)
+    })
+  })
+
+  it('should show current filter value in input', async () => {
+    const findOptions = createFindOptions({ filter: { name: { $regex: 'current-value' } } })
+    await usingAsync((await renderStringFilter(findOptions)).injector, async () => {
+      const input = document.querySelector('[data-testid="string-filter-value"]') as HTMLInputElement
+      expect(input.value).toBe('current-value')
+    })
+  })
+})