@furystack/shades-common-components 11.0.0 → 12.0.1

package/src/components/alert.spec.tsx

@@ -0,0 +1,256 @@
+import { createComponent } from '@furystack/shades'
+import { flushUpdates } from '@furystack/shades'
+import { describe, expect, it, vi } from 'vitest'
+import type { AlertProps } from './alert.js'
+import { Alert } from './alert.js'
+
+describe('Alert', () => {
+  it('should be defined', () => {
+    expect(Alert).toBeDefined()
+    expect(typeof Alert).toBe('function')
+  })
+
+  it('should create an alert element with default props', () => {
+    const el = (<Alert>Test message</Alert>) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-alert')
+  })
+
+  it('should set severity to info by default', async () => {
+    const el = (
+      <div>
+        <Alert>Info message</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    expect(alert.getAttribute('data-severity')).toBe('info')
+  })
+
+  it('should set data-severity attribute for each severity', async () => {
+    const severities = ['error', 'warning', 'info', 'success'] as const
+
+    for (const severity of severities) {
+      const el = (
+        <div>
+          <Alert severity={severity}>Message</Alert>
+        </div>
+      )
+      const alert = el.firstElementChild as JSX.Element
+      alert.updateComponent()
+      await flushUpdates()
+      expect(alert.getAttribute('data-severity')).toBe(severity)
+    }
+  })
+
+  it('should set data-variant attribute when variant is provided', async () => {
+    const variants = ['filled', 'outlined', 'standard'] as const
+
+    for (const variant of variants) {
+      const el = (
+        <div>
+          <Alert variant={variant}>Message</Alert>
+        </div>
+      )
+      const alert = el.firstElementChild as JSX.Element
+      alert.updateComponent()
+      await flushUpdates()
+      expect(alert.getAttribute('data-variant')).toBe(variant)
+    }
+  })
+
+  it('should not set data-variant attribute when variant is not provided', async () => {
+    const el = (
+      <div>
+        <Alert>Message</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    expect(alert.hasAttribute('data-variant')).toBe(false)
+  })
+
+  it('should set role="alert" on the element', async () => {
+    const el = (
+      <div>
+        <Alert>Message</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    expect(alert.getAttribute('role')).toBe('alert')
+  })
+
+  it('should render a title when title prop is provided', async () => {
+    const el = (
+      <div>
+        <Alert title="Error Title" severity="error">
+          Details here
+        </Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const titleEl = alert.querySelector('.alert-title')
+    expect(titleEl).not.toBeNull()
+    expect(titleEl?.textContent).toBe('Error Title')
+  })
+
+  it('should not render a title when title prop is not provided', async () => {
+    const el = (
+      <div>
+        <Alert severity="info">Just a message</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const titleEl = alert.querySelector('.alert-title')
+    expect(titleEl).toBeNull()
+  })
+
+  it('should render a close button when onClose is provided', async () => {
+    const onClose = vi.fn()
+    const el = (
+      <div>
+        <Alert onClose={onClose}>Closeable</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const closeBtn = alert.querySelector('.alert-close')
+    expect(closeBtn).not.toBeNull()
+  })
+
+  it('should not render a close button when onClose is not provided', async () => {
+    const el = (
+      <div>
+        <Alert>Not closeable</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const closeBtn = alert.querySelector('.alert-close')
+    expect(closeBtn).toBeNull()
+  })
+
+  it('should call onClose when close button is clicked', async () => {
+    const onClose = vi.fn()
+    const el = (
+      <div>
+        <Alert onClose={onClose}>Closeable</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const closeBtn = alert.querySelector('.alert-close') as HTMLElement
+    closeBtn.click()
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+
+  it('should stop propagation when close button is clicked', async () => {
+    const onClose = vi.fn()
+    const onAlertClick = vi.fn()
+    const el = (
+      <div>
+        <Alert onClose={onClose} onclick={onAlertClick}>
+          Closeable
+        </Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const closeBtn = alert.querySelector('.alert-close') as HTMLElement
+    closeBtn.click()
+    expect(onClose).toHaveBeenCalledOnce()
+    expect(onAlertClick).not.toHaveBeenCalled()
+  })
+
+  it('should render the default icon for the severity', async () => {
+    const el = (
+      <div>
+        <Alert severity="error">Error</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const iconEl = alert.querySelector('.alert-icon')
+    expect(iconEl).not.toBeNull()
+    expect(iconEl?.querySelector('shade-icon')).not.toBeNull()
+  })
+
+  it('should render a custom icon when icon prop is provided', async () => {
+    const el = (
+      <div>
+        <Alert severity="error" icon="🔥">
+          Error
+        </Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const iconEl = alert.querySelector('.alert-icon')
+    expect(iconEl).not.toBeNull()
+    expect(iconEl?.textContent).toBe('🔥')
+  })
+
+  it('should set CSS custom properties for severity color', async () => {
+    const el = (
+      <div>
+        <Alert severity="error">Error</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    expect(alert.style.getPropertyValue('--alert-color-main')).toBe('var(--shades-theme-palette-error-main)')
+  })
+
+  it('should set CSS custom properties for success severity', async () => {
+    const el = (
+      <div>
+        <Alert severity="success">Success</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    expect(alert.style.getPropertyValue('--alert-color-main')).toBe('var(--shades-theme-palette-success-main)')
+  })
+
+  it('should render children in the message area', async () => {
+    const el = (
+      <div>
+        <Alert>Alert message content</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const messageEl = alert.querySelector('.alert-message')
+    expect(messageEl).not.toBeNull()
+  })
+
+  it('should set props correctly', () => {
+    const el = (
+      <Alert severity="warning" variant="filled" title="Warning Title" icon="⚡">
+        Warning content
+      </Alert>
+    ) as unknown as JSX.Element
+    const props = el.props as AlertProps
+    expect(props.severity).toBe('warning')
+    expect(props.variant).toBe('filled')
+    expect(props.title).toBe('Warning Title')
+    expect(props.icon).toBe('⚡')
+  })
+})

package/src/components/alert.tsx

@@ -0,0 +1,186 @@
+import type { PartialElement } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
+import { paletteMainColors } from '../services/palette-css-vars.js'
+import { Icon } from './icons/icon.js'
+import {
+  checkCircle,
+  close as closeIcon,
+  errorCircle,
+  info as infoIcon,
+  warning as warningIcon,
+} from './icons/icon-definitions.js'
+
+export type AlertSeverity = 'error' | 'warning' | 'info' | 'success'
+
+export type AlertProps = PartialElement<HTMLElement> & {
+  severity?: AlertSeverity
+  variant?: 'filled' | 'outlined' | 'standard'
+  title?: string
+  onClose?: (ev: MouseEvent) => void
+  icon?: JSX.Element | string
+}
+
+const severityColorMap: Record<AlertSeverity, { main: string; mainContrast: string; light: string }> = {
+  error: { ...paletteMainColors.error, light: cssVariableTheme.palette.error.light },
+  warning: { ...paletteMainColors.warning, light: cssVariableTheme.palette.warning.light },
+  info: { ...paletteMainColors.info, light: cssVariableTheme.palette.info.light },
+  success: { ...paletteMainColors.success, light: cssVariableTheme.palette.success.light },
+}
+
+const defaultIcons: Record<AlertSeverity, JSX.Element> = {
+  error: (<Icon icon={errorCircle} size="small" />) as unknown as JSX.Element,
+  warning: (<Icon icon={warningIcon} size="small" />) as unknown as JSX.Element,
+  info: (<Icon icon={infoIcon} size="small" />) as unknown as JSX.Element,
+  success: (<Icon icon={checkCircle} size="small" />) as unknown as JSX.Element,
+}
+
+export const Alert = Shade<AlertProps>({
+  shadowDomName: 'shade-alert',
+  css: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: cssVariableTheme.spacing.md,
+    padding: `${cssVariableTheme.spacing.md} ${cssVariableTheme.spacing.lg}`,
+    fontFamily: cssVariableTheme.typography.fontFamily,
+    fontSize: cssVariableTheme.typography.fontSize.sm,
+    lineHeight: '1.5',
+    borderRadius: cssVariableTheme.shape.borderRadius.md,
+    boxSizing: 'border-box',
+    transition: buildTransition(
+      ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ['color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ['box-shadow', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+    ),
+
+    // ==========================================
+    // STANDARD VARIANT (default)
+    // ==========================================
+
+    '&:not([data-variant]), &[data-variant="standard"]': {
+      background: 'color-mix(in srgb, var(--alert-color-main) 12%, transparent)',
+      color: 'var(--alert-color-main)',
+    },
+
+    // ==========================================
+    // FILLED VARIANT
+    // ==========================================
+
+    '&[data-variant="filled"]': {
+      background: 'var(--alert-color-main)',
+      color: 'var(--alert-color-main-contrast)',
+    },
+
+    // ==========================================
+    // OUTLINED VARIANT
+    // ==========================================
+
+    '&[data-variant="outlined"]': {
+      background: 'transparent',
+      color: 'var(--alert-color-main)',
+      boxShadow: '0px 0px 0px 1px var(--alert-color-main)',
+    },
+
+    // ==========================================
+    // ICON
+    // ==========================================
+
+    '& .alert-icon': {
+      display: 'flex',
+      alignItems: 'center',
+      fontSize: '20px',
+      lineHeight: '1',
+      flexShrink: '0',
+      paddingTop: '1px',
+    },
+
+    // ==========================================
+    // CONTENT
+    // ==========================================
+
+    '& .alert-content': {
+      flex: '1',
+      minWidth: '0',
+    },
+
+    '& .alert-title': {
+      fontWeight: cssVariableTheme.typography.fontWeight.semibold,
+      marginBottom: cssVariableTheme.spacing.xs,
+    },
+
+    '& .alert-message': {
+      opacity: '0.9',
+    },
+
+    // ==========================================
+    // CLOSE BUTTON
+    // ==========================================
+
+    '& .alert-close': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      borderRadius: cssVariableTheme.shape.borderRadius.full,
+      border: 'none',
+      background: 'transparent',
+      color: 'inherit',
+      padding: '4px',
+      marginTop: '-2px',
+      marginRight: `-${cssVariableTheme.spacing.sm}`,
+      fontSize: '14px',
+      lineHeight: '1',
+      opacity: '0.7',
+      flexShrink: '0',
+      transition: buildTransition(
+        ['opacity', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+        ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ),
+    },
+
+    '& .alert-close:hover': {
+      opacity: '1',
+      background: 'color-mix(in srgb, currentColor 15%, transparent)',
+    },
+  },
+  render: ({ props, children, useHostProps }) => {
+    const { severity = 'info', variant, title, onClose, icon, style } = props
+
+    const colors = severityColorMap[severity]
+    useHostProps({
+      'data-variant': variant || undefined,
+      'data-severity': severity,
+      role: 'alert',
+      style: {
+        '--alert-color-main': colors.main,
+        '--alert-color-main-contrast': colors.mainContrast,
+        '--alert-color-light': colors.light,
+        ...(style as Record<string, string>),
+      },
+    })
+
+    const displayIcon = icon ?? defaultIcons[severity]
+
+    return (
+      <>
+        <span className="alert-icon">{displayIcon}</span>
+        <div className="alert-content">
+          {title ? <div className="alert-title">{title}</div> : null}
+          <div className="alert-message">{children}</div>
+        </div>
+        {onClose ? (
+          <span
+            className="alert-close"
+            role="button"
+            onclick={(ev: MouseEvent) => {
+              ev.stopPropagation()
+              onClose(ev)
+            }}
+          >
+            <Icon icon={closeIcon} size="small" />
+          </span>
+        ) : null}
+      </>
+    )
+  },
+})

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

@@ -1,5 +1,5 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot, LocationService } from '@furystack/shades'
+import { createComponent, flushUpdates, 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'
@@ -32,7 +32,7 @@ describe('AppBarLink component', () => {
       })
     })
 
-    it('should render children through RouteLink', async () => {
+    it('should render children through NestedRouteLink', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -48,7 +48,7 @@ describe('AppBarLink component', () => {
       })
     })
 
-    it('should render RouteLink with correct href', async () => {
+    it('should render NestedRouteLink with correct href', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -81,7 +81,7 @@ describe('AppBarLink component', () => {
         await sleepAsync(50)
 
         const appBarLink = document.querySelector('shade-app-bar-link')
-        expect(appBarLink?.classList.contains('active')).toBe(true)
+        expect(appBarLink?.hasAttribute('data-active')).toBe(true)
       })
     })
 
@@ -100,7 +100,7 @@ describe('AppBarLink component', () => {
         await sleepAsync(50)
 
         const appBarLink = document.querySelector('shade-app-bar-link')
-        expect(appBarLink?.classList.contains('active')).toBe(false)
+        expect(appBarLink?.hasAttribute('data-active')).toBe(false)
       })
     })
 
@@ -119,15 +119,16 @@ describe('AppBarLink component', () => {
         await sleepAsync(50)
 
         const appBarLink = document.querySelector('shade-app-bar-link')
-        expect(appBarLink?.classList.contains('active')).toBe(false)
+        expect(appBarLink?.hasAttribute('data-active')).toBe(false)
 
         // Navigate to matching route
         history.pushState(null, '', '/dashboard')
         injector.getInstance(LocationService).updateState()
 
         await sleepAsync(50)
+        await flushUpdates()
 
-        expect(appBarLink?.classList.contains('active')).toBe(true)
+        expect(appBarLink?.hasAttribute('data-active')).toBe(true)
       })
     })
 
@@ -146,15 +147,16 @@ describe('AppBarLink component', () => {
         await sleepAsync(50)
 
         const appBarLink = document.querySelector('shade-app-bar-link')
-        expect(appBarLink?.classList.contains('active')).toBe(true)
+        expect(appBarLink?.hasAttribute('data-active')).toBe(true)
 
         // Navigate away
         history.pushState(null, '', '/other')
         injector.getInstance(LocationService).updateState()
 
         await sleepAsync(50)
+        await flushUpdates()
 
-        expect(appBarLink?.classList.contains('active')).toBe(false)
+        expect(appBarLink?.hasAttribute('data-active')).toBe(false)
       })
     })
 
@@ -173,7 +175,7 @@ describe('AppBarLink component', () => {
         await sleepAsync(50)
 
         const appBarLink = document.querySelector('shade-app-bar-link')
-        expect(appBarLink?.classList.contains('active')).toBe(true)
+        expect(appBarLink?.hasAttribute('data-active')).toBe(true)
       })
     })
 
@@ -196,7 +198,7 @@ describe('AppBarLink component', () => {
         await sleepAsync(50)
 
         const appBarLink = document.querySelector('shade-app-bar-link')
-        expect(appBarLink?.classList.contains('active')).toBe(true)
+        expect(appBarLink?.hasAttribute('data-active')).toBe(true)
       })
     })
 
@@ -215,7 +217,7 @@ describe('AppBarLink component', () => {
         await sleepAsync(50)
 
         const appBarLink = document.querySelector('shade-app-bar-link')
-        expect(appBarLink?.classList.contains('active')).toBe(false)
+        expect(appBarLink?.hasAttribute('data-active')).toBe(false)
       })
     })
   })
@@ -242,9 +244,9 @@ describe('AppBarLink component', () => {
         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)
+        expect(links[0]?.hasAttribute('data-active')).toBe(false)
+        expect(links[1]?.hasAttribute('data-active')).toBe(true)
+        expect(links[2]?.hasAttribute('data-active')).toBe(false)
       })
     })
 
@@ -268,17 +270,18 @@ describe('AppBarLink component', () => {
         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)
+        expect(links[0]?.hasAttribute('data-active')).toBe(true)
+        expect(links[1]?.hasAttribute('data-active')).toBe(false)
 
         // Navigate to settings
         history.pushState(null, '', '/settings')
         injector.getInstance(LocationService).updateState()
 
         await sleepAsync(50)
+        await flushUpdates()
 
-        expect(links[0]?.classList.contains('active')).toBe(false)
-        expect(links[1]?.classList.contains('active')).toBe(true)
+        expect(links[0]?.hasAttribute('data-active')).toBe(false)
+        expect(links[1]?.hasAttribute('data-active')).toBe(true)
       })
     })
   })

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

@@ -1,33 +1,52 @@
-import type { RouteLinkProps } from '@furystack/shades'
-import { 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 { cssVariableTheme } from '../services/css-variable-theme.js'
 
-export const AppBarLink = Shade<RouteLinkProps & { routingOptions?: MatchOptions }>({
+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 8px',
-    transition: 'color .2s ease-in-out, transform .2s ease-in-out',
+    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)',
-    '&.active': {
+    '&[data-active]': {
       color: cssVariableTheme.text.primary,
       opacity: '1',
       transform: 'scale(1)',
     },
   },
-  render: ({ children, props, useObservable, injector, element }) => {
+  render: ({ children, props, useObservable, injector, useHostProps }) => {
     const [currentUrl] = useObservable('locationChange', injector.getInstance(LocationService).onLocationPathChanged)
 
-    const isActive = !!match(props.href as string, props.routingOptions)(currentUrl)
-    element.classList.toggle('active', isActive)
+    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
+}