@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/app-bar.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
 import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync } from '@furystack/utils'
+import { sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { AppBar } from './app-bar.js'
 
@@ -28,115 +28,130 @@ describe('AppBar component', () => {
     return {
       injector,
       appBar: document.querySelector('shade-app-bar') as HTMLElement,
+      [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
     }
   }
 
   describe('rendering', () => {
     it('should render the shade-app-bar custom element', async () => {
-      const { appBar } = await renderAppBar(<span>Content</span>)
-      expect(appBar).not.toBeNull()
-      expect(appBar.tagName.toLowerCase()).toBe('shade-app-bar')
+      await usingAsync(await renderAppBar(<span>Content</span>), async ({ appBar }) => {
+        expect(appBar).not.toBeNull()
+        expect(appBar.tagName.toLowerCase()).toBe('shade-app-bar')
+      })
     })
 
-    it('should render children in shadow DOM', async () => {
-      const { appBar } = await renderAppBar(<span id="child-content">Test Content</span>)
-      // Children are rendered inside shadow DOM - verify via the element itself
-      expect(appBar).not.toBeNull()
+    it('should render children in custom element', async () => {
+      await usingAsync(await renderAppBar(<span id="child-content">Test Content</span>), async ({ appBar }) => {
+        // Children are rendered inside the custom element
+        expect(appBar).not.toBeNull()
+      })
     })
 
     it('should render multiple children', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <AppBar>
-            <span id="logo">Logo</span>
-            <nav id="navigation">Nav</nav>
-            <button id="action">Action</button>
-          </AppBar>
-        ),
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <AppBar>
+              <span id="logo">Logo</span>
+              <nav id="navigation">Nav</nav>
+              <button id="action">Action</button>
+            </AppBar>
+          ),
+        })
+
+        await sleepAsync(50)
+
+        const appBar = document.querySelector('shade-app-bar')
+        expect(appBar).not.toBeNull()
       })
-
-      await sleepAsync(50)
-
-      const appBar = document.querySelector('shade-app-bar')
-      expect(appBar).not.toBeNull()
     })
   })
 
   describe('positioning', () => {
     it('should have fixed positioning', async () => {
-      const { appBar } = await renderAppBar(<span>Content</span>)
-      const computedStyle = window.getComputedStyle(appBar)
-      expect(computedStyle.position).toBe('fixed')
+      await usingAsync(await renderAppBar(<span>Content</span>), async ({ appBar }) => {
+        const computedStyle = window.getComputedStyle(appBar)
+        expect(computedStyle.position).toBe('fixed')
+      })
     })
 
     it('should have z-index of 1', async () => {
-      const { appBar } = await renderAppBar(<span>Content</span>)
-      const computedStyle = window.getComputedStyle(appBar)
-      expect(computedStyle.zIndex).toBe('1')
+      await usingAsync(await renderAppBar(<span>Content</span>), async ({ appBar }) => {
+        const computedStyle = window.getComputedStyle(appBar)
+        expect(computedStyle.zIndex).toBe('1')
+      })
     })
 
     it('should have full width', async () => {
-      const { appBar } = await renderAppBar(<span>Content</span>)
-      const computedStyle = window.getComputedStyle(appBar)
-      expect(computedStyle.width).toBe('100%')
+      await usingAsync(await renderAppBar(<span>Content</span>), async ({ appBar }) => {
+        const computedStyle = window.getComputedStyle(appBar)
+        expect(computedStyle.width).toBe('100%')
+      })
     })
   })
 
   describe('fade-in animation', () => {
     it('should add visible class after construction', async () => {
-      const { appBar } = await renderAppBar(<span>Content</span>)
-      expect(appBar.classList.contains('visible')).toBe(true)
+      await usingAsync(await renderAppBar(<span>Content</span>), async ({ appBar }) => {
+        expect(appBar.hasAttribute('data-visible')).toBe(true)
+      })
     })
 
     it('should have opacity 1 when visible class is applied', async () => {
-      const { appBar } = await renderAppBar(<span>Content</span>)
-      const computedStyle = window.getComputedStyle(appBar)
-      expect(computedStyle.opacity).toBe('1')
+      await usingAsync(await renderAppBar(<span>Content</span>), async ({ appBar }) => {
+        const computedStyle = window.getComputedStyle(appBar)
+        expect(computedStyle.opacity).toBe('1')
+      })
     })
 
     it('should have transition styles for animation', async () => {
-      const { appBar } = await renderAppBar(<span>Content</span>)
-      const computedStyle = window.getComputedStyle(appBar)
-      expect(computedStyle.transition).toContain('opacity')
+      await usingAsync(await renderAppBar(<span>Content</span>), async ({ appBar }) => {
+        const computedStyle = window.getComputedStyle(appBar)
+        expect(computedStyle.transition).toContain('opacity')
+      })
     })
   })
 
   describe('layout', () => {
     it('should have flex display', async () => {
-      const { appBar } = await renderAppBar(<span>Content</span>)
-      const computedStyle = window.getComputedStyle(appBar)
-      expect(computedStyle.display).toBe('flex')
+      await usingAsync(await renderAppBar(<span>Content</span>), async ({ appBar }) => {
+        const computedStyle = window.getComputedStyle(appBar)
+        expect(computedStyle.display).toBe('flex')
+      })
     })
 
     it('should align items center', async () => {
-      const { appBar } = await renderAppBar(<span>Content</span>)
-      const computedStyle = window.getComputedStyle(appBar)
-      expect(computedStyle.alignItems).toBe('center')
+      await usingAsync(await renderAppBar(<span>Content</span>), async ({ appBar }) => {
+        const computedStyle = window.getComputedStyle(appBar)
+        expect(computedStyle.alignItems).toBe('center')
+      })
     })
 
     it('should justify content to flex-start', async () => {
-      const { appBar } = await renderAppBar(<span>Content</span>)
-      const computedStyle = window.getComputedStyle(appBar)
-      expect(computedStyle.justifyContent).toBe('flex-start')
+      await usingAsync(await renderAppBar(<span>Content</span>), async ({ appBar }) => {
+        const computedStyle = window.getComputedStyle(appBar)
+        expect(computedStyle.justifyContent).toBe('flex-start')
+      })
     })
   })
 
   describe('styling', () => {
     it('should have box shadow', async () => {
-      const { appBar } = await renderAppBar(<span>Content</span>)
-      const computedStyle = window.getComputedStyle(appBar)
-      expect(computedStyle.boxShadow).not.toBe('none')
+      await usingAsync(await renderAppBar(<span>Content</span>), async ({ appBar }) => {
+        const computedStyle = window.getComputedStyle(appBar)
+        expect(computedStyle.boxShadow).not.toBe('none')
+      })
     })
 
     it('should have semi-transparent background', async () => {
-      const { appBar } = await renderAppBar(<span>Content</span>)
-      const computedStyle = window.getComputedStyle(appBar)
-      expect(computedStyle.background).toContain('rgba')
+      await usingAsync(await renderAppBar(<span>Content</span>), async ({ appBar }) => {
+        const computedStyle = window.getComputedStyle(appBar)
+        expect(computedStyle.background).toContain('color-mix')
+      })
     })
   })
 })

package/src/components/app-bar.tsx

@@ -5,28 +5,35 @@ export const AppBar = Shade({
   shadowDomName: 'shade-app-bar',
   css: {
     width: '100%',
-    background: 'rgba(128,128,128,0.2)',
-    backdropFilter: 'blur(15px)',
+    background: `color-mix(in srgb, ${cssVariableTheme.background.paper} 85%, transparent)`,
+    backdropFilter: `blur(${cssVariableTheme.effects.blurLg})`,
     display: 'flex',
     justifyContent: 'flex-start',
     alignItems: 'center',
-    boxShadow: '0 0 12px rgba(0,0,0,0.6)',
-    transition:
-      'opacity .35s cubic-bezier(0.550, 0.085, 0.680, 0.530), padding .2s cubic-bezier(0.550, 0.085, 0.680, 0.530)',
+    boxShadow: cssVariableTheme.shadows.md,
+    transition: `opacity ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.default}, padding ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.default}`,
     opacity: '0',
     position: 'fixed',
     zIndex: '1',
-    color: cssVariableTheme.text.secondary,
-    '&.visible': {
+    color: cssVariableTheme.text.primary,
+    '&[data-visible]': {
       opacity: '1',
     },
   },
-  constructed: ({ element }) => {
-    requestAnimationFrame(() => {
-      element.classList.add('visible')
+  render: ({ children, useHostProps, useDisposable, useState }) => {
+    const [isVisible, setVisible] = useState('isVisible', false)
+
+    useDisposable('enter-animation', () => {
+      requestAnimationFrame(() => {
+        setVisible(true)
+      })
+      return { [Symbol.dispose]: () => {} }
     })
-  },
-  render: ({ children }) => {
+
+    if (isVisible) {
+      useHostProps({ 'data-visible': '' })
+    }
+
     return <>{children}</>
   },
 })

package/src/components/avatar.tsx

@@ -1,5 +1,6 @@
 import type { PartialElement } from '@furystack/shades'
-import { Shade, attachProps, createComponent } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 
 export type AvatarProps = { avatarUrl: string; fallback?: JSX.Element } & PartialElement<HTMLDivElement>
 
@@ -9,29 +10,57 @@ export const Avatar = Shade<AvatarProps>({
     width: '128px',
     height: '128px',
     overflow: 'hidden',
-    borderRadius: '50%',
-    boxShadow:
-      '0 0 0 3px rgba(255, 255, 255, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1)',
-    backgroundColor: 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%)',
+    borderRadius: cssVariableTheme.shape.borderRadius.full,
+    boxShadow: cssVariableTheme.shadows.md,
+    background: `color-mix(in srgb, ${cssVariableTheme.palette.primary.main} 10%, ${cssVariableTheme.background.paper})`,
     display: 'flex',
     position: 'relative',
-    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    transition: `all ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.default}`,
     '&:hover': {
       transform: 'translateY(-2px) scale(1.02)',
-      boxShadow:
-        '0 0 0 3px rgba(255, 255, 255, 0.15), 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1)',
+      boxShadow: cssVariableTheme.shadows.xl,
+    },
+
+    '& .avatar-fallback-container': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%',
+      width: '100%',
+      background: `color-mix(in srgb, ${cssVariableTheme.palette.primary.main} 15%, ${cssVariableTheme.background.paper})`,
+    },
+
+    '& .avatar-fallback-icon': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '64px',
+      height: '64px',
+      borderRadius: cssVariableTheme.shape.borderRadius.full,
+      background: `color-mix(in srgb, ${cssVariableTheme.palette.primary.main} 20%, transparent)`,
+      backdropFilter: 'blur(10px)',
+      textAlign: 'center',
+      userSelect: 'none',
+      fontSize: '48px',
+      lineHeight: '1',
     },
   },
-  render: ({ props, element }) => {
-    const { avatarUrl, ...containerProps } = props
+  render: ({ props, useHostProps, useState }) => {
+    const { style } = props
+    const [hasError, setHasError] = useState('hasError', false)
 
-    attachProps(element, {
-      ...containerProps,
-      style: {
-        ...containerProps?.style,
-      },
+    useHostProps({
+      ...(style ? { style: style as Record<string, string> } : {}),
     })
 
+    if (hasError) {
+      return (
+        <div className="avatar-fallback-container">
+          <div className="avatar-fallback-icon">{props.fallback || '🛑'}</div>
+        </div>
+      )
+    }
+
     return (
       <img
         style={{
@@ -43,38 +72,8 @@ export const Avatar = Shade<AvatarProps>({
         }}
         alt={'avatar image'}
         src={props.avatarUrl}
-        onerror={(ev) => {
-          ;((ev as Event).target as HTMLImageElement).replaceWith(
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                width: '100%',
-                background: 'linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%)',
-              }}
-            >
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: '64px',
-                  height: '64px',
-                  borderRadius: '50%',
-                  background: 'rgba(255, 255, 255, 0.1)',
-                  backdropFilter: 'blur(10px)',
-                  textAlign: 'center',
-                  userSelect: 'none',
-                  fontSize: '48px',
-                  lineHeight: '1',
-                }}
-              >
-                {props.fallback || '🛑'}
-              </div>
-            </div>,
-          )
+        onerror={() => {
+          setHasError(true)
         }}
       />
     )

package/src/components/badge.spec.tsx

@@ -0,0 +1,228 @@
+import { createComponent } from '@furystack/shades'
+import { flushUpdates } from '@furystack/shades'
+import { describe, expect, it } from 'vitest'
+import type { BadgeProps } from './badge.js'
+import { Badge } from './badge.js'
+
+describe('Badge', () => {
+  it('should be defined', () => {
+    expect(Badge).toBeDefined()
+    expect(typeof Badge).toBe('function')
+  })
+
+  it('should create a badge element with default props', () => {
+    const el = (<Badge />) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-badge')
+  })
+
+  it('should pass children as badge content', () => {
+    const el = (<Badge>Child</Badge>) as unknown as JSX.Element
+    expect(el).toBeDefined()
+  })
+
+  it('should set props correctly', () => {
+    const el = (<Badge count={5} color="primary" dot max={10} showZero />) as unknown as { props: BadgeProps }
+    expect(el.props.count).toBe(5)
+    expect(el.props.color).toBe('primary')
+    expect(el.props.dot).toBe(true)
+    expect(el.props.max).toBe(10)
+    expect(el.props.showZero).toBe(true)
+  })
+
+  it('should render with a badge indicator', async () => {
+    const el = (
+      <div>
+        <Badge count={5}>
+          <span>Content</span>
+        </Badge>
+      </div>
+    )
+    const badge = el.firstElementChild as JSX.Element
+    badge.updateComponent()
+    await flushUpdates()
+    expect(badge.querySelector('.badge-indicator')).not.toBeNull()
+  })
+
+  it('should display the count value', async () => {
+    const el = (
+      <div>
+        <Badge count={42}>
+          <span>Content</span>
+        </Badge>
+      </div>
+    )
+    const badge = el.firstElementChild as JSX.Element
+    badge.updateComponent()
+    await flushUpdates()
+    const indicator = badge.querySelector('.badge-indicator') as HTMLElement
+    expect(indicator.textContent).toBe('42')
+  })
+
+  it('should cap count at max and show overflow indicator', async () => {
+    const el = (
+      <div>
+        <Badge count={150} max={99}>
+          <span>Content</span>
+        </Badge>
+      </div>
+    )
+    const badge = el.firstElementChild as JSX.Element
+    badge.updateComponent()
+    await flushUpdates()
+    const indicator = badge.querySelector('.badge-indicator') as HTMLElement
+    expect(indicator.textContent).toBe('99+')
+  })
+
+  it('should use custom max value', async () => {
+    const el = (
+      <div>
+        <Badge count={15} max={10}>
+          <span>Content</span>
+        </Badge>
+      </div>
+    )
+    const badge = el.firstElementChild as JSX.Element
+    badge.updateComponent()
+    await flushUpdates()
+    const indicator = badge.querySelector('.badge-indicator') as HTMLElement
+    expect(indicator.textContent).toBe('10+')
+  })
+
+  it('should not show overflow when count is within max', async () => {
+    const el = (
+      <div>
+        <Badge count={5} max={10}>
+          <span>Content</span>
+        </Badge>
+      </div>
+    )
+    const badge = el.firstElementChild as JSX.Element
+    badge.updateComponent()
+    await flushUpdates()
+    const indicator = badge.querySelector('.badge-indicator') as HTMLElement
+    expect(indicator.textContent).toBe('5')
+  })
+
+  it('should hide when count is 0 and showZero is not set', async () => {
+    const el = (
+      <div>
+        <Badge count={0}>
+          <span>Content</span>
+        </Badge>
+      </div>
+    )
+    const badge = el.firstElementChild as JSX.Element
+    badge.updateComponent()
+    await flushUpdates()
+    const indicator = badge.querySelector('.badge-indicator') as HTMLElement
+    expect(indicator.hasAttribute('data-hidden')).toBe(true)
+  })
+
+  it('should show when count is 0 and showZero is true', async () => {
+    const el = (
+      <div>
+        <Badge count={0} showZero>
+          <span>Content</span>
+        </Badge>
+      </div>
+    )
+    const badge = el.firstElementChild as JSX.Element
+    badge.updateComponent()
+    await flushUpdates()
+    const indicator = badge.querySelector('.badge-indicator') as HTMLElement
+    expect(indicator.hasAttribute('data-hidden')).toBe(false)
+  })
+
+  it('should hide when count is undefined and showZero is not set', async () => {
+    const el = (
+      <div>
+        <Badge>
+          <span>Content</span>
+        </Badge>
+      </div>
+    )
+    const badge = el.firstElementChild as JSX.Element
+    badge.updateComponent()
+    await flushUpdates()
+    const indicator = badge.querySelector('.badge-indicator') as HTMLElement
+    expect(indicator.hasAttribute('data-hidden')).toBe(true)
+  })
+
+  it('should render a dot badge when dot prop is set', async () => {
+    const el = (
+      <div>
+        <Badge dot>
+          <span>Content</span>
+        </Badge>
+      </div>
+    )
+    const badge = el.firstElementChild as JSX.Element
+    badge.updateComponent()
+    await flushUpdates()
+    const indicator = badge.querySelector('.badge-indicator') as HTMLElement
+    expect(indicator.hasAttribute('data-dot')).toBe(true)
+    expect(indicator.textContent).toBe('')
+  })
+
+  it('should not hide dot badge even without count', async () => {
+    const el = (
+      <div>
+        <Badge dot>
+          <span>Content</span>
+        </Badge>
+      </div>
+    )
+    const badge = el.firstElementChild as JSX.Element
+    badge.updateComponent()
+    await flushUpdates()
+    const indicator = badge.querySelector('.badge-indicator') as HTMLElement
+    expect(indicator.hasAttribute('data-hidden')).toBe(false)
+  })
+
+  it('should hide badge when visible is false', async () => {
+    const el = (
+      <div>
+        <Badge count={5} visible={false}>
+          <span>Content</span>
+        </Badge>
+      </div>
+    )
+    const badge = el.firstElementChild as JSX.Element
+    badge.updateComponent()
+    await flushUpdates()
+    const indicator = badge.querySelector('.badge-indicator') as HTMLElement
+    expect(indicator.hasAttribute('data-hidden')).toBe(true)
+  })
+
+  it('should set CSS custom properties for palette color', async () => {
+    const el = (
+      <div>
+        <Badge count={5} color="primary">
+          <span>Content</span>
+        </Badge>
+      </div>
+    )
+    const badge = el.firstElementChild as JSX.Element
+    badge.updateComponent()
+    await flushUpdates()
+    expect(badge.style.getPropertyValue('--badge-color-main')).toBe('var(--shades-theme-palette-primary-main)')
+    expect(badge.style.getPropertyValue('--badge-color-contrast')).toBe(
+      'var(--shades-theme-palette-primary-main-contrast)',
+    )
+  })
+
+  it('should set CSS custom properties for default (error) color when no color prop', async () => {
+    const el = (
+      <div>
+        <Badge count={5}>
+          <span>Content</span>
+        </Badge>
+      </div>
+    )
+    const badge = el.firstElementChild as JSX.Element
+    badge.updateComponent()
+    await flushUpdates()
+    expect(badge.style.getPropertyValue('--badge-color-main')).toBe('var(--shades-theme-palette-error-main)')
+  })
+})