@furystack/shades-common-components 10.0.35 → 12.0.0

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

@@ -1,33 +1,52 @@
-import type { RouteLinkProps } from '@furystack/shades'
-import { attachProps, createComponent, LocationService, RouteLink, Shade } from '@furystack/shades'
+import type { ChildrenList, ExtractRoutePaths, NestedRoute, NestedRouteLinkProps } from '@furystack/shades'
+import { createComponent, LocationService, NestedRouteLink, Shade } from '@furystack/shades'
 import { match, type MatchOptions } from 'path-to-regexp'
-import { ThemeProviderService } from '../services/theme-provider-service.js'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 
-export const AppBarLink = Shade<RouteLinkProps & { routingOptions?: MatchOptions }>({
-  shadowDomName: 'shade-app-bar-link',
-  render: ({ children, props, useObservable, injector, element }) => {
-    const getAnchorStyle = (currentUrl: string) => {
-      const isActive = !!match(props.href as string, props.routingOptions)(currentUrl)
-      const themeProviderService = injector.getInstance(ThemeProviderService)
-      const { theme } = themeProviderService
-      return {
-        display: 'flex',
-        height: '100%',
-        textDecoration: 'none',
-        alignItems: 'center',
-        padding: '0 8px',
-        transition: 'color .2s ease-in-out, transform .2s ease-in-out',
-        color: isActive ? theme.text.primary : theme.text.secondary,
-        opacity: isActive ? '1' : '0.8',
-        transform: isActive ? 'scale(1)' : 'scale(0.9)',
-        cursor: 'pointer',
-      }
-    }
+export type AppBarLinkProps = NestedRouteLinkProps & { routingOptions?: MatchOptions }
 
+export const AppBarLink = Shade<AppBarLinkProps>({
+  shadowDomName: 'shade-app-bar-link',
+  css: {
+    display: 'flex',
+    height: '100%',
+    textDecoration: 'none',
+    alignItems: 'center',
+    padding: `0 ${cssVariableTheme.spacing.sm}`,
+    transition: `color ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.easeInOut}, transform ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.easeInOut}`,
+    cursor: 'pointer',
+    color: cssVariableTheme.text.secondary,
+    opacity: '0.8',
+    transform: 'scale(0.9)',
+    '&[data-active]': {
+      color: cssVariableTheme.text.primary,
+      opacity: '1',
+      transform: 'scale(1)',
+    },
+  },
+  render: ({ children, props, useObservable, injector, useHostProps }) => {
     const [currentUrl] = useObservable('locationChange', injector.getInstance(LocationService).onLocationPathChanged)
 
-    attachProps(element as HTMLElement, { style: getAnchorStyle(currentUrl) })
+    const isActive = !!match(props.href, props.routingOptions)(currentUrl)
+    if (isActive) {
+      useHostProps({ 'data-active': '' })
+    }
 
-    return <RouteLink {...props}>{children}</RouteLink>
+    return <NestedRouteLink {...props}>{children}</NestedRouteLink>
   },
 })
+
+/**
+ * Creates a type-safe wrapper around AppBarLink constrained to a specific route tree.
+ * The returned component has the same runtime behavior but narrows `href` to only accept
+ * valid route paths, and requires `params` when the route has parameters.
+ *
+ * @typeParam TRoutes - The route tree type (use `typeof yourRoutes`)
+ * @returns A type-safe AppBarLink component constrained to a specific route tree.
+ */
+export const createAppBarLink = <TRoutes extends Record<string, NestedRoute<unknown>>>() => {
+  return AppBarLink as unknown as <TPath extends ExtractRoutePaths<TRoutes>>(
+    props: AppBarLinkProps & { href: TPath },
+    children?: ChildrenList,
+  ) => JSX.Element
+}

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

@@ -0,0 +1,157 @@
+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 { AppBar } from './app-bar.js'
+
+describe('AppBar component', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const renderAppBar = async (children: JSX.Element) => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <AppBar>{children}</AppBar>,
+    })
+
+    await sleepAsync(50)
+
+    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 () => {
+      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 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 () => {
+      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()
+      })
+    })
+  })
+
+  describe('positioning', () => {
+    it('should have fixed positioning', async () => {
+      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 () => {
+      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 () => {
+      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 () => {
+      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 () => {
+      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 () => {
+      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 () => {
+      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 () => {
+      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 () => {
+      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 () => {
+      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 () => {
+      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

@@ -1,32 +1,39 @@
-import { Shade, createComponent, attachProps } from '@furystack/shades'
-import { ThemeProviderService } from '../services/theme-provider-service.js'
+import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 
 export const AppBar = Shade({
   shadowDomName: 'shade-app-bar',
-  constructed: ({ element }) => {
-    requestAnimationFrame(() => {
-      element.style.opacity = '1'
-    })
+  css: {
+    width: '100%',
+    background: `color-mix(in srgb, ${cssVariableTheme.background.paper} 85%, transparent)`,
+    backdropFilter: `blur(${cssVariableTheme.effects.blurLg})`,
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    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.primary,
+    '&[data-visible]': {
+      opacity: '1',
+    },
   },
-  render: ({ children, injector, element }) => {
-    const { theme } = injector.getInstance(ThemeProviderService)
-    attachProps(element, {
-      style: {
-        width: '100%',
-        background: 'rgba(128,128,128,0.2)',
-        backdropFilter: 'blur(15px)',
-        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)',
-        opacity: '0',
-        position: 'fixed',
-        zIndex: '1',
-        color: theme.text.secondary,
-      },
+  render: ({ children, useHostProps, useDisposable, useState }) => {
+    const [isVisible, setVisible] = useState('isVisible', false)
+
+    useDisposable('enter-animation', () => {
+      requestAnimationFrame(() => {
+        setVisible(true)
+      })
+      return { [Symbol.dispose]: () => {} }
     })
+
+    if (isVisible) {
+      useHostProps({ 'data-visible': '' })
+    }
+
     return <>{children}</>
   },
 })

package/src/components/avatar.spec.tsx

@@ -0,0 +1,146 @@
+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 { Avatar } from './avatar.js'
+
+describe('Avatar component', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('should render an image with the provided avatarUrl', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const testUrl = 'https://example.com/avatar.png'
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Avatar avatarUrl={testUrl} />,
+      })
+
+      await sleepAsync(50)
+
+      const avatar = document.querySelector('shade-avatar')
+      expect(avatar).not.toBeNull()
+
+      const img = avatar?.querySelector('img')
+      expect(img).not.toBeNull()
+      expect(img?.src).toBe(testUrl)
+      expect(img?.alt).toBe('avatar image')
+    })
+  })
+
+  it('should display default fallback emoji when image fails to load', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Avatar avatarUrl="invalid-url" />,
+      })
+
+      await sleepAsync(50)
+
+      const avatar = document.querySelector('shade-avatar')
+      expect(avatar).not.toBeNull()
+
+      const img = avatar?.querySelector('img')
+      expect(img).not.toBeNull()
+
+      // Trigger the error event
+      const errorEvent = new Event('error')
+      img?.dispatchEvent(errorEvent)
+
+      await sleepAsync(50)
+
+      // After error, img should be replaced with fallback div
+      const fallbackImg = avatar?.querySelector('img')
+      expect(fallbackImg).toBeNull()
+
+      // The fallback div should contain the default emoji
+      const fallbackContent = avatar?.textContent
+      expect(fallbackContent).toContain('🛑')
+    })
+  })
+
+  it('should display custom fallback when image fails to load and fallback prop is provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const customFallback = <span data-testid="custom-fallback">AB</span>
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Avatar avatarUrl="invalid-url" fallback={customFallback} />,
+      })
+
+      await sleepAsync(50)
+
+      const avatar = document.querySelector('shade-avatar')
+      expect(avatar).not.toBeNull()
+
+      const img = avatar?.querySelector('img')
+      expect(img).not.toBeNull()
+
+      // Trigger the error event
+      const errorEvent = new Event('error')
+      img?.dispatchEvent(errorEvent)
+
+      await sleepAsync(50)
+
+      // After error, img should be replaced with fallback div
+      const fallbackImg = avatar?.querySelector('img')
+      expect(fallbackImg).toBeNull()
+
+      // The custom fallback should be rendered
+      const customElement = avatar?.querySelector('[data-testid="custom-fallback"]')
+      expect(customElement).not.toBeNull()
+      expect(customElement?.textContent).toBe('AB')
+    })
+  })
+
+  it('should apply custom style from props', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Avatar avatarUrl="https://example.com/avatar.png" style={{ width: '64px', height: '64px' }} />,
+      })
+
+      await sleepAsync(50)
+
+      const avatar = document.querySelector('shade-avatar') as HTMLElement
+      expect(avatar).not.toBeNull()
+      expect(avatar.style.width).toBe('64px')
+      expect(avatar.style.height).toBe('64px')
+    })
+  })
+
+  it('should pass through additional props to the container', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Avatar avatarUrl="https://example.com/avatar.png" className="custom-avatar" title="User Avatar" />,
+      })
+
+      await sleepAsync(50)
+
+      const avatar = document.querySelector('shade-avatar') as HTMLElement
+      expect(avatar).not.toBeNull()
+      expect(avatar.className).toBe('custom-avatar')
+      expect(avatar.title).toBe('User Avatar')
+    })
+  })
+})

package/src/components/avatar.tsx

@@ -1,40 +1,66 @@
 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>
 
 export const Avatar = Shade<AvatarProps>({
   shadowDomName: 'shade-avatar',
-  render: ({ props, element }) => {
-    const { avatarUrl, ...containerProps } = props
+  css: {
+    width: '128px',
+    height: '128px',
+    overflow: 'hidden',
+    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 ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.default}`,
+    '&:hover': {
+      transform: 'translateY(-2px) scale(1.02)',
+      boxShadow: cssVariableTheme.shadows.xl,
+    },
 
-    attachProps(element, {
-      ...containerProps,
-      style: {
-        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%)',
-        display: 'flex',
-        position: 'relative',
-        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        ...containerProps?.style,
-      },
-      onmouseenter: () => {
-        element.style.transform = 'translateY(-2px) scale(1.02)'
-        element.style.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)'
-      },
-      onmouseleave: () => {
-        element.style.transform = 'translateY(0) scale(1)'
-        element.style.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)'
-      },
+    '& .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, useHostProps, useState }) => {
+    const { style } = props
+    const [hasError, setHasError] = useState('hasError', false)
+
+    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={{
@@ -46,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)
         }}
       />
     )