@furystack/shades-common-components 10.0.35 → 11.0.0

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

@@ -0,0 +1,341 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot, LocationService } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { AppBarLink } from './app-bar-link.js'
+
+describe('AppBarLink component', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  describe('rendering', () => {
+    it('should render the shade-app-bar-link custom element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <AppBarLink href="/test">Link</AppBarLink>,
+        })
+
+        await sleepAsync(50)
+
+        const appBarLink = document.querySelector('shade-app-bar-link')
+        expect(appBarLink).not.toBeNull()
+        expect(appBarLink?.tagName.toLowerCase()).toBe('shade-app-bar-link')
+      })
+    })
+
+    it('should render children through RouteLink', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <AppBarLink href="/test">Test Link Text</AppBarLink>,
+        })
+
+        await sleepAsync(50)
+
+        expect(document.body.innerHTML).toContain('Test Link Text')
+      })
+    })
+
+    it('should render RouteLink with correct href', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <AppBarLink href="/my-route">Link</AppBarLink>,
+        })
+
+        await sleepAsync(50)
+
+        expect(document.body.innerHTML).toContain('href="/my-route"')
+      })
+    })
+  })
+
+  describe('route matching', () => {
+    it('should have active class when current URL matches href', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        history.pushState(null, '', '/dashboard')
+
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <AppBarLink href="/dashboard">Dashboard</AppBarLink>,
+        })
+
+        await sleepAsync(50)
+
+        const appBarLink = document.querySelector('shade-app-bar-link')
+        expect(appBarLink?.classList.contains('active')).toBe(true)
+      })
+    })
+
+    it('should not have active class when current URL does not match href', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        history.pushState(null, '', '/other-page')
+
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <AppBarLink href="/dashboard">Dashboard</AppBarLink>,
+        })
+
+        await sleepAsync(50)
+
+        const appBarLink = document.querySelector('shade-app-bar-link')
+        expect(appBarLink?.classList.contains('active')).toBe(false)
+      })
+    })
+
+    it('should update active class when location changes', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        history.pushState(null, '', '/home')
+
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <AppBarLink href="/dashboard">Dashboard</AppBarLink>,
+        })
+
+        await sleepAsync(50)
+
+        const appBarLink = document.querySelector('shade-app-bar-link')
+        expect(appBarLink?.classList.contains('active')).toBe(false)
+
+        // Navigate to matching route
+        history.pushState(null, '', '/dashboard')
+        injector.getInstance(LocationService).updateState()
+
+        await sleepAsync(50)
+
+        expect(appBarLink?.classList.contains('active')).toBe(true)
+      })
+    })
+
+    it('should remove active class when navigating away', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        history.pushState(null, '', '/dashboard')
+
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <AppBarLink href="/dashboard">Dashboard</AppBarLink>,
+        })
+
+        await sleepAsync(50)
+
+        const appBarLink = document.querySelector('shade-app-bar-link')
+        expect(appBarLink?.classList.contains('active')).toBe(true)
+
+        // Navigate away
+        history.pushState(null, '', '/other')
+        injector.getInstance(LocationService).updateState()
+
+        await sleepAsync(50)
+
+        expect(appBarLink?.classList.contains('active')).toBe(false)
+      })
+    })
+
+    it('should match routes with parameters', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        history.pushState(null, '', '/users/123')
+
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <AppBarLink href="/users/:id">Users</AppBarLink>,
+        })
+
+        await sleepAsync(50)
+
+        const appBarLink = document.querySelector('shade-app-bar-link')
+        expect(appBarLink?.classList.contains('active')).toBe(true)
+      })
+    })
+
+    it('should support routingOptions with end: false for prefix matching', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        history.pushState(null, '', '/admin/settings/security')
+
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <AppBarLink href="/admin" routingOptions={{ end: false }}>
+              Admin
+            </AppBarLink>
+          ),
+        })
+
+        await sleepAsync(50)
+
+        const appBarLink = document.querySelector('shade-app-bar-link')
+        expect(appBarLink?.classList.contains('active')).toBe(true)
+      })
+    })
+
+    it('should not match prefix by default (end: true)', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        history.pushState(null, '', '/admin/settings')
+
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <AppBarLink href="/admin">Admin</AppBarLink>,
+        })
+
+        await sleepAsync(50)
+
+        const appBarLink = document.querySelector('shade-app-bar-link')
+        expect(appBarLink?.classList.contains('active')).toBe(false)
+      })
+    })
+  })
+
+  describe('multiple links', () => {
+    it('should only activate the matching link', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        history.pushState(null, '', '/settings')
+
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <div>
+              <AppBarLink href="/home">Home</AppBarLink>
+              <AppBarLink href="/settings">Settings</AppBarLink>
+              <AppBarLink href="/about">About</AppBarLink>
+            </div>
+          ),
+        })
+
+        await sleepAsync(50)
+
+        const links = document.querySelectorAll('shade-app-bar-link')
+        expect(links[0]?.classList.contains('active')).toBe(false)
+        expect(links[1]?.classList.contains('active')).toBe(true)
+        expect(links[2]?.classList.contains('active')).toBe(false)
+      })
+    })
+
+    it('should update all links when location changes', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        history.pushState(null, '', '/home')
+
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <div>
+              <AppBarLink href="/home">Home</AppBarLink>
+              <AppBarLink href="/settings">Settings</AppBarLink>
+            </div>
+          ),
+        })
+
+        await sleepAsync(50)
+
+        const links = document.querySelectorAll('shade-app-bar-link')
+        expect(links[0]?.classList.contains('active')).toBe(true)
+        expect(links[1]?.classList.contains('active')).toBe(false)
+
+        // Navigate to settings
+        history.pushState(null, '', '/settings')
+        injector.getInstance(LocationService).updateState()
+
+        await sleepAsync(50)
+
+        expect(links[0]?.classList.contains('active')).toBe(false)
+        expect(links[1]?.classList.contains('active')).toBe(true)
+      })
+    })
+  })
+
+  describe('styling', () => {
+    it('should have flex display', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <AppBarLink href="/test">Link</AppBarLink>,
+        })
+
+        await sleepAsync(50)
+
+        const appBarLink = document.querySelector('shade-app-bar-link') as HTMLElement
+        const computedStyle = window.getComputedStyle(appBarLink)
+        expect(computedStyle.display).toBe('flex')
+      })
+    })
+
+    it('should have pointer cursor', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <AppBarLink href="/test">Link</AppBarLink>,
+        })
+
+        await sleepAsync(50)
+
+        const appBarLink = document.querySelector('shade-app-bar-link') as HTMLElement
+        const computedStyle = window.getComputedStyle(appBarLink)
+        expect(computedStyle.cursor).toBe('pointer')
+      })
+    })
+
+    it('should have transition for animations', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <AppBarLink href="/test">Link</AppBarLink>,
+        })
+
+        await sleepAsync(50)
+
+        const appBarLink = document.querySelector('shade-app-bar-link') as HTMLElement
+        const computedStyle = window.getComputedStyle(appBarLink)
+        expect(computedStyle.transition).toContain('color')
+      })
+    })
+  })
+})

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

@@ -1,32 +1,32 @@
 import type { RouteLinkProps } from '@furystack/shades'
-import { attachProps, createComponent, LocationService, RouteLink, Shade } from '@furystack/shades'
+import { createComponent, LocationService, RouteLink, 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',
+  css: {
+    display: 'flex',
+    height: '100%',
+    textDecoration: 'none',
+    alignItems: 'center',
+    padding: '0 8px',
+    transition: 'color .2s ease-in-out, transform .2s ease-in-out',
+    cursor: 'pointer',
+    color: cssVariableTheme.text.secondary,
+    opacity: '0.8',
+    transform: 'scale(0.9)',
+    '&.active': {
+      color: cssVariableTheme.text.primary,
+      opacity: '1',
+      transform: 'scale(1)',
+    },
+  },
   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',
-      }
-    }
-
     const [currentUrl] = useObservable('locationChange', injector.getInstance(LocationService).onLocationPathChanged)
 
-    attachProps(element as HTMLElement, { style: getAnchorStyle(currentUrl) })
+    const isActive = !!match(props.href as string, props.routingOptions)(currentUrl)
+    element.classList.toggle('active', isActive)
 
     return <RouteLink {...props}>{children}</RouteLink>
   },

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

@@ -0,0 +1,142 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync } 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,
+    }
+  }
+
+  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')
+    })
+
+    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 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 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')
+    })
+
+    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')
+    })
+
+    it('should have full width', async () => {
+      const { appBar } = await renderAppBar(<span>Content</span>)
+      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)
+    })
+
+    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')
+    })
+
+    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')
+    })
+  })
+
+  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')
+    })
+
+    it('should align items center', async () => {
+      const { appBar } = await renderAppBar(<span>Content</span>)
+      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')
+    })
+  })
+
+  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')
+    })
+
+    it('should have semi-transparent background', async () => {
+      const { appBar } = await renderAppBar(<span>Content</span>)
+      const computedStyle = window.getComputedStyle(appBar)
+      expect(computedStyle.background).toContain('rgba')
+    })
+  })
+})

package/src/components/app-bar.tsx

@@ -1,32 +1,32 @@
-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',
+  css: {
+    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: cssVariableTheme.text.secondary,
+    '&.visible': {
+      opacity: '1',
+    },
+  },
   constructed: ({ element }) => {
     requestAnimationFrame(() => {
-      element.style.opacity = '1'
+      element.classList.add('visible')
     })
   },
-  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 }) => {
     return <>{children}</>
   },
 })