@furystack/shades-common-components 10.0.35 → 12.0.0

package/src/components/linear-progress.spec.tsx

@@ -0,0 +1,320 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ThemeProviderService } from '../services/theme-provider-service.js'
+import { LinearProgress } from './linear-progress.js'
+
+describe('LinearProgress', () => {
+  let originalAnimate: typeof Element.prototype.animate
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+    originalAnimate = Element.prototype.animate
+
+    Element.prototype.animate = vi.fn(
+      (_keyframes: Keyframe[] | PropertyIndexedKeyframes | null, _options?: number | KeyframeAnimationOptions) => {
+        const mockAnimation = {
+          onfinish: null as ((event: AnimationPlaybackEvent) => void) | null,
+          oncancel: null as ((event: AnimationPlaybackEvent) => void) | null,
+          cancel: vi.fn(),
+          play: vi.fn(),
+          pause: vi.fn(),
+          finish: vi.fn(),
+          addEventListener: vi.fn(),
+          removeEventListener: vi.fn(),
+        }
+        return mockAnimation as unknown as Animation
+      },
+    ) as typeof Element.prototype.animate
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    Element.prototype.animate = originalAnimate
+    vi.restoreAllMocks()
+  })
+
+  it('should render with shadow DOM', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <LinearProgress />,
+      })
+
+      await sleepAsync(50)
+
+      const el = document.querySelector('shade-linear-progress')
+      expect(el).not.toBeNull()
+    })
+  })
+
+  it('should render the progress bar element', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <LinearProgress />,
+      })
+
+      await sleepAsync(50)
+
+      const bar = document.querySelector('shade-linear-progress .progress-bar')
+      expect(bar).not.toBeNull()
+    })
+  })
+
+  it('should set role="progressbar"', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <LinearProgress />,
+      })
+
+      await sleepAsync(50)
+
+      const el = document.querySelector('shade-linear-progress') as HTMLElement
+      expect(el.getAttribute('role')).toBe('progressbar')
+    })
+  })
+
+  describe('determinate variant', () => {
+    it('should set aria-valuenow for determinate variant', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const value = new ObservableValue(50)
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <LinearProgress variant="determinate" value={value} />,
+        })
+
+        await sleepAsync(50)
+
+        const el = document.querySelector('shade-linear-progress') as HTMLElement
+        expect(el.getAttribute('aria-valuenow')).toBe('50')
+        expect(el.getAttribute('aria-valuemin')).toBe('0')
+        expect(el.getAttribute('aria-valuemax')).toBe('100')
+      })
+    })
+
+    it('should set bar width based on value', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const value = new ObservableValue(75)
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <LinearProgress variant="determinate" value={value} />,
+        })
+
+        await sleepAsync(50)
+
+        const bar = document.querySelector('shade-linear-progress .progress-bar') as HTMLElement
+        expect(bar.style.width).toBe('75%')
+      })
+    })
+
+    it('should clamp value to 0-100 range', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const value = new ObservableValue(150)
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <LinearProgress variant="determinate" value={value} />,
+        })
+
+        await sleepAsync(50)
+
+        const bar = document.querySelector('shade-linear-progress .progress-bar') as HTMLElement
+        expect(bar.style.width).toBe('100%')
+      })
+    })
+
+    it('should clamp negative values to 0', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const value = new ObservableValue(-20)
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <LinearProgress variant="determinate" value={value} />,
+        })
+
+        await sleepAsync(50)
+
+        const bar = document.querySelector('shade-linear-progress .progress-bar') as HTMLElement
+        expect(bar.style.width).toBe('0%')
+      })
+    })
+
+    it('should update bar width when observable value changes', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const value = new ObservableValue(20)
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <LinearProgress variant="determinate" value={value} />,
+        })
+
+        await sleepAsync(50)
+
+        const bar = document.querySelector('shade-linear-progress .progress-bar') as HTMLElement
+        expect(bar.style.width).toBe('20%')
+
+        value.setValue(80)
+        await sleepAsync(10)
+
+        expect(bar.style.width).toBe('80%')
+      })
+    })
+
+    it('should update aria-valuenow when observable value changes', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const value = new ObservableValue(30)
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <LinearProgress variant="determinate" value={value} />,
+        })
+
+        await sleepAsync(50)
+
+        const el = document.querySelector('shade-linear-progress') as HTMLElement
+        expect(el.getAttribute('aria-valuenow')).toBe('30')
+
+        value.setValue(90)
+        await sleepAsync(10)
+
+        expect(el.getAttribute('aria-valuenow')).toBe('90')
+      })
+    })
+  })
+
+  describe('indeterminate variant', () => {
+    it('should default to indeterminate variant', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <LinearProgress />,
+        })
+
+        await sleepAsync(50)
+
+        const bar = document.querySelector('shade-linear-progress .progress-bar') as HTMLElement
+        expect(bar.hasAttribute('data-indeterminate')).toBe(true)
+      })
+    })
+
+    it('should not set aria-valuenow for indeterminate variant', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <LinearProgress />,
+        })
+
+        await sleepAsync(50)
+
+        const el = document.querySelector('shade-linear-progress') as HTMLElement
+        expect(el.hasAttribute('aria-valuenow')).toBe(false)
+      })
+    })
+  })
+
+  describe('size', () => {
+    it('should set data-size="small" when size is small', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <LinearProgress size="small" />,
+        })
+
+        await sleepAsync(50)
+
+        const el = document.querySelector('shade-linear-progress') as HTMLElement
+        expect(el.getAttribute('data-size')).toBe('small')
+      })
+    })
+
+    it('should not set data-size when size is medium (default)', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <LinearProgress />,
+        })
+
+        await sleepAsync(50)
+
+        const el = document.querySelector('shade-linear-progress') as HTMLElement
+        expect(el.hasAttribute('data-size')).toBe(false)
+      })
+    })
+  })
+
+  describe('theme integration', () => {
+    it('should set CSS color variable from theme', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <LinearProgress />,
+        })
+
+        await sleepAsync(50)
+
+        const el = document.querySelector('shade-linear-progress') as HTMLElement
+        const themeService = injector.getInstance(ThemeProviderService)
+        expect(el.style.getPropertyValue('--progress-color')).toBe(themeService.theme.palette.primary.main)
+      })
+    })
+
+    it('should use custom color from color prop', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <LinearProgress color="error" />,
+        })
+
+        await sleepAsync(50)
+
+        const el = document.querySelector('shade-linear-progress') as HTMLElement
+        const themeService = injector.getInstance(ThemeProviderService)
+        expect(el.style.getPropertyValue('--progress-color')).toBe(themeService.theme.palette.error.main)
+      })
+    })
+  })
+})

package/src/components/linear-progress.tsx

@@ -0,0 +1,127 @@
+import { Shade, createComponent } from '@furystack/shades'
+import type { ObservableValue } from '@furystack/utils'
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
+import type { Palette } from '../services/theme-provider-service.js'
+import { ThemeProviderService } from '../services/theme-provider-service.js'
+import { promisifyAnimation } from '../utils/promisify-animation.js'
+
+export type LinearProgressProps = {
+  /**
+   * An observable progress value (0–100). Used when variant is 'determinate'.
+   * The component subscribes internally and updates the bar without re-rendering.
+   */
+  value?: ObservableValue<number>
+  /**
+   * The variant of the progress indicator.
+   * - 'determinate': shows a fixed progress bar based on `value`
+   * - 'indeterminate': shows an animated looping bar
+   * @default 'indeterminate'
+   */
+  variant?: 'determinate' | 'indeterminate'
+  /**
+   * The palette color for the progress bar.
+   * @default 'primary'
+   */
+  color?: keyof Palette
+  /**
+   * The height of the progress bar.
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium'
+}
+
+const clampValue = (v: number) => Math.max(0, Math.min(100, v))
+
+export const LinearProgress = Shade<LinearProgressProps>({
+  shadowDomName: 'shade-linear-progress',
+  css: {
+    display: 'block',
+    width: '100%',
+    overflow: 'hidden',
+    position: 'relative',
+    borderRadius: cssVariableTheme.shape.borderRadius.xs,
+    backgroundColor: 'color-mix(in srgb, var(--progress-color) 20%, transparent)',
+
+    // Medium size (default)
+    height: '6px',
+
+    '&[data-size="small"]': {
+      height: '4px',
+    },
+
+    '& .progress-bar': {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      height: '100%',
+      borderRadius: 'inherit',
+      backgroundColor: 'var(--progress-color)',
+      transition: buildTransition([
+        'width',
+        cssVariableTheme.transitions.duration.normal,
+        cssVariableTheme.transitions.easing.easeInOut,
+      ]),
+    },
+
+    '& .progress-bar[data-indeterminate]': {
+      transition: 'none',
+    },
+  },
+  render: ({ props, injector, useObservable, useHostProps, useRef }) => {
+    const themeProvider = injector.getInstance(ThemeProviderService)
+    const barRef = useRef<HTMLElement>('progressBar')
+    const variant = props.variant || 'indeterminate'
+
+    if (variant === 'determinate' && props.value) {
+      useObservable('progressValue', props.value)
+    }
+    const value = clampValue(props.value?.getValue() ?? 0)
+
+    const color = themeProvider.theme.palette[props.color || 'primary'].main
+    useHostProps({
+      'data-size': props.size === 'small' ? 'small' : undefined,
+      role: 'progressbar',
+      ...(variant === 'determinate'
+        ? {
+            'aria-valuenow': String(value),
+            'aria-valuemin': '0',
+            'aria-valuemax': '100',
+          }
+        : {
+            'aria-valuenow': undefined,
+          }),
+      style: { '--progress-color': color },
+    })
+
+    const barWidth = variant === 'determinate' ? `${value}%` : '40%'
+
+    if (variant === 'indeterminate') {
+      setTimeout(() => {
+        if (barRef.current) {
+          void promisifyAnimation(
+            barRef.current,
+            [
+              { left: '-40%', width: '40%' },
+              { left: '60%', width: '40%' },
+              { left: '100%', width: '10%' },
+            ],
+            {
+              duration: 1800,
+              easing: 'cubic-bezier(0.65, 0, 0.35, 1)',
+              iterations: Infinity,
+            },
+          )
+        }
+      }, 1)
+    }
+
+    return (
+      <div
+        ref={barRef}
+        className="progress-bar"
+        style={{ width: barWidth }}
+        {...(variant === 'indeterminate' ? { 'data-indeterminate': '' } : {})}
+      />
+    )
+  },
+})

package/src/components/list/index.ts

@@ -0,0 +1,2 @@
+export * from './list.js'
+export * from './list-item.js'

package/src/components/list/list-item.tsx

@@ -0,0 +1,106 @@
+import type { ChildrenList } from '@furystack/shades'
+import { createComponent, Shade } from '@furystack/shades'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
+import type { ListService } from '../../services/list-service.js'
+import type { ListItemState } from './list.js'
+
+export type ListItemProps<T> = {
+  item: T
+  listService: ListService<T>
+  renderItem: (item: T, state: ListItemState) => JSX.Element
+  renderIcon?: (item: T) => JSX.Element
+  renderSecondaryActions?: (item: T) => JSX.Element[]
+  onActivate?: (item: T) => void
+}
+
+export const ListItem: <T>(props: ListItemProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
+  shadowDomName: 'shade-list-item',
+  css: {
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'default',
+    userSelect: 'none',
+    padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.md}`,
+    gap: cssVariableTheme.spacing.sm,
+    transition: `background-color ${cssVariableTheme.transitions.duration.fast} ease, box-shadow ${cssVariableTheme.transitions.duration.fast} ${cssVariableTheme.transitions.easing.easeInOut}`,
+    borderLeft: '3px solid transparent',
+    '&:not([data-selected]):hover': {
+      backgroundColor: cssVariableTheme.action.hoverBackground,
+    },
+    '&[data-selected]': {
+      backgroundColor: cssVariableTheme.action.selectedBackground,
+      borderLeft: `3px solid ${cssVariableTheme.palette.primary.main}`,
+    },
+    '&[data-focused]': {
+      boxShadow: `0 0 0 2px ${cssVariableTheme.palette.primary.main} inset`,
+    },
+  },
+  render: ({ props, useObservable, useHostProps, useRef }) => {
+    const { item, listService, renderItem, renderIcon, renderSecondaryActions, onActivate } = props
+
+    const [selection] = useObservable('selection', listService.selection)
+    const [focusedItem] = useObservable('focusedItem', listService.focusedItem)
+
+    const isFocused = focusedItem === item
+    const isSelected = selection.includes(item)
+
+    useHostProps({
+      role: 'option',
+      'aria-selected': isSelected.toString(),
+      onclick: (ev: MouseEvent) => {
+        listService.handleItemClick(item, ev)
+      },
+      ondblclick: () => {
+        listService.handleItemDoubleClick(item)
+        onActivate?.(item)
+      },
+      ...(isSelected ? { 'data-selected': '' } : {}),
+      ...(isFocused ? { 'data-focused': '' } : {}),
+    })
+
+    const wrapperRef = useRef<HTMLElement>('wrapper')
+
+    if (isFocused) {
+      queueMicrotask(() => {
+        const el = wrapperRef.current
+        if (!el) return
+        const scrollContainer = el.closest('shade-list') as HTMLElement
+        if (scrollContainer) {
+          const containerRect = scrollContainer.getBoundingClientRect()
+          const hostEl = el.closest('shade-list-item') as HTMLElement
+          if (!hostEl) return
+          const itemRect = hostEl.getBoundingClientRect()
+          const itemTopInContainer = itemRect.top - containerRect.top
+          const itemBottomInContainer = itemRect.bottom - containerRect.top
+
+          if (itemTopInContainer < 0) {
+            scrollContainer.scrollTo({
+              top: scrollContainer.scrollTop + itemTopInContainer,
+              behavior: 'smooth',
+            })
+          } else if (itemBottomInContainer > scrollContainer.clientHeight) {
+            scrollContainer.scrollTo({
+              top: scrollContainer.scrollTop + (itemBottomInContainer - scrollContainer.clientHeight),
+              behavior: 'smooth',
+            })
+          }
+        }
+      })
+    }
+    const state: ListItemState = { isFocused, isSelected }
+
+    return (
+      <span ref={wrapperRef} style={{ display: 'contents' }}>
+        {renderIcon && <span className="list-item-icon">{renderIcon(item)}</span>}
+        <span className="list-item-content" style={{ flex: '1' }}>
+          {renderItem(item, state)}
+        </span>
+        {renderSecondaryActions && (
+          <span className="list-item-actions" style={{ display: 'flex', gap: cssVariableTheme.spacing.xs }}>
+            {renderSecondaryActions(item).map((action) => action)}
+          </span>
+        )}
+      </span>
+    )
+  },
+})