@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/noty-list.spec.tsx

@@ -123,8 +123,7 @@ describe('NotyComponent', () => {
 
       const noty = document.querySelector('shade-noty') as HTMLElement
       expect(noty).not.toBeNull()
-      expect(noty.classList.contains('noty')).toBe(true)
-      expect(noty.classList.contains('error')).toBe(true)
+      expect(noty.getAttribute('data-noty-type')).toBe('error')
     })
   })
 
@@ -142,9 +141,9 @@ describe('NotyComponent', () => {
 
       await sleepAsync(50)
 
-      const dismissButton = document.querySelector('button[is="shade-button"]')
+      const dismissButton = document.querySelector('.dismiss-button')
       expect(dismissButton).not.toBeNull()
-      expect(dismissButton?.textContent).toContain('✖')
+      expect(dismissButton?.querySelector('shade-icon')).not.toBeNull()
     })
   })
 
@@ -184,7 +183,7 @@ describe('NotyComponent', () => {
 
       await sleepAsync(50)
 
-      const dismissButton = document.querySelector('button[is="shade-button"]') as HTMLButtonElement
+      const dismissButton = document.querySelector('.dismiss-button') as HTMLButtonElement
       expect(dismissButton).not.toBeNull()
       dismissButton.click()
 
@@ -197,33 +196,34 @@ describe('NotyComponent', () => {
   it('should start fade-in animation on mount', async () => {
     vi.useFakeTimers()
 
-    const injector = new Injector()
-    setupTheme(injector)
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const model: NotyModel = { type: 'success', title: 'Success', body: 'Success message' }
+    await usingAsync(new Injector(), async (injector) => {
+      setupTheme(injector)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const model: NotyModel = { type: 'success', title: 'Success', body: 'Success message' }
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <NotyComponent model={model} onDismiss={() => {}} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <NotyComponent model={model} onDismiss={() => {}} />,
+      })
 
-    // Wait for render
-    await vi.advanceTimersByTimeAsync(50)
+      // Wait for render
+      await vi.advanceTimersByTimeAsync(50)
 
-    // The constructed hook schedules the animation via setTimeout
-    await vi.advanceTimersByTimeAsync(10)
+      // The useDisposable hook schedules the animation via setTimeout
+      await vi.advanceTimersByTimeAsync(10)
 
-    const fadeInCall = animateCalls.find(
-      (call) =>
-        Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf && 'height' in kf),
-    )
+      const fadeInCall = animateCalls.find(
+        (call) =>
+          Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf && 'height' in kf),
+      )
 
-    expect(fadeInCall).toBeDefined()
-    expect((fadeInCall?.options as KeyframeAnimationOptions)?.duration).toBe(700)
-    expect((fadeInCall?.options as KeyframeAnimationOptions)?.fill).toBe('forwards')
+      expect(fadeInCall).toBeDefined()
+      expect((fadeInCall?.options as KeyframeAnimationOptions)?.duration).toBe(500)
+      expect((fadeInCall?.options as KeyframeAnimationOptions)?.fill).toBe('forwards')
 
-    vi.useRealTimers()
+      vi.useRealTimers()
+    })
   })
 
   it('should auto-dismiss after timeout for success type', async () => {
@@ -250,27 +250,28 @@ describe('NotyComponent', () => {
       },
     ) as typeof Element.prototype.animate
 
-    const injector = new Injector()
-    setupTheme(injector)
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const model: NotyModel = { type: 'success', title: 'Success', body: 'Success message' }
+    await usingAsync(new Injector(), async (injector) => {
+      setupTheme(injector)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const model: NotyModel = { type: 'success', title: 'Success', body: 'Success message' }
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <NotyComponent model={model} onDismiss={onDismiss} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <NotyComponent model={model} onDismiss={onDismiss} />,
+      })
 
-    await vi.advanceTimersByTimeAsync(50)
-    expect(onDismiss).not.toHaveBeenCalled()
+      await vi.advanceTimersByTimeAsync(50)
+      expect(onDismiss).not.toHaveBeenCalled()
 
-    // Success timeout is 5000ms
-    await vi.advanceTimersByTimeAsync(5000)
-    await vi.advanceTimersByTimeAsync(50)
+      // Success timeout is 5000ms
+      await vi.advanceTimersByTimeAsync(5000)
+      await vi.advanceTimersByTimeAsync(50)
 
-    expect(onDismiss).toHaveBeenCalled()
+      expect(onDismiss).toHaveBeenCalled()
 
-    vi.useRealTimers()
+      vi.useRealTimers()
+    })
   })
 
   it('should use custom timeout when provided', async () => {
@@ -297,50 +298,52 @@ describe('NotyComponent', () => {
       },
     ) as typeof Element.prototype.animate
 
-    const injector = new Injector()
-    setupTheme(injector)
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    // Info default timeout is 20000, but we set custom 1000
-    const model: NotyModel = { type: 'info', title: 'Info', body: 'Info message', timeout: 1000 }
+    await usingAsync(new Injector(), async (injector) => {
+      setupTheme(injector)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      // Info default timeout is 20000, but we set custom 1000
+      const model: NotyModel = { type: 'info', title: 'Info', body: 'Info message', timeout: 1000 }
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <NotyComponent model={model} onDismiss={onDismiss} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <NotyComponent model={model} onDismiss={onDismiss} />,
+      })
 
-    await vi.advanceTimersByTimeAsync(50)
-    expect(onDismiss).not.toHaveBeenCalled()
+      await vi.advanceTimersByTimeAsync(50)
+      expect(onDismiss).not.toHaveBeenCalled()
 
-    await vi.advanceTimersByTimeAsync(1000)
-    await vi.advanceTimersByTimeAsync(50)
+      await vi.advanceTimersByTimeAsync(1000)
+      await vi.advanceTimersByTimeAsync(50)
 
-    expect(onDismiss).toHaveBeenCalled()
+      expect(onDismiss).toHaveBeenCalled()
 
-    vi.useRealTimers()
+      vi.useRealTimers()
+    })
   })
 
   it('should not auto-dismiss for error type (timeout 0)', async () => {
     vi.useFakeTimers()
     const onDismiss = vi.fn()
 
-    const injector = new Injector()
-    setupTheme(injector)
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const model: NotyModel = { type: 'error', title: 'Error', body: 'Error message' }
+    await usingAsync(new Injector(), async (injector) => {
+      setupTheme(injector)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const model: NotyModel = { type: 'error', title: 'Error', body: 'Error message' }
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <NotyComponent model={model} onDismiss={onDismiss} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <NotyComponent model={model} onDismiss={onDismiss} />,
+      })
 
-    await vi.advanceTimersByTimeAsync(50)
-    await vi.advanceTimersByTimeAsync(30000)
+      await vi.advanceTimersByTimeAsync(50)
+      await vi.advanceTimersByTimeAsync(30000)
 
-    expect(onDismiss).not.toHaveBeenCalled()
+      expect(onDismiss).not.toHaveBeenCalled()
 
-    vi.useRealTimers()
+      vi.useRealTimers()
+    })
   })
 
   it('should render all noty types with appropriate styling', async () => {
@@ -364,8 +367,7 @@ describe('NotyComponent', () => {
 
         const noty = document.querySelector('shade-noty') as HTMLElement
         expect(noty).not.toBeNull()
-        expect(noty.classList.contains('noty')).toBe(true)
-        expect(noty.classList.contains(type)).toBe(true)
+        expect(noty.getAttribute('data-noty-type')).toBe(type)
       })
     }
   })
@@ -386,8 +388,9 @@ describe('NotyComponent', () => {
 
       const noty = document.querySelector('shade-noty') as HTMLElement
       expect(noty).not.toBeNull()
-      // The component sets backgroundColor via style
-      expect(noty.style.backgroundColor).toBeTruthy()
+      // The component sets background color via CSS custom property
+      expect(noty.style.getPropertyValue('--noty-bg')).toBeTruthy()
+      expect(noty.style.getPropertyValue('--noty-text')).toBeTruthy()
     })
   })
 })

package/src/components/noty-list.tsx

@@ -1,9 +1,11 @@
 import { createComponent, Shade } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 import type { NotyModel } from '../services/noty-service.js'
 import { NotyService } from '../services/noty-service.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 import { promisifyAnimation } from '../utils/promisify-animation.js'
-import { Button } from './button.js'
+import { Icon } from './icons/icon.js'
+import { close } from './icons/icon-definitions.js'
 
 export const getDefaultNotyTimeouts = (type: NotyModel['type']) => {
   switch (type) {
@@ -22,84 +24,91 @@ export const getDefaultNotyTimeouts = (type: NotyModel['type']) => {
 
 export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>({
   shadowDomName: 'shade-noty',
-  constructed: ({ element }) => {
-    setTimeout(() => {
-      const height = element.scrollHeight || 80
-      void promisifyAnimation(
-        element,
-        [
-          { opacity: '0', height: '0px' },
-          { opacity: '1', height: `${height}px` },
-        ],
-        {
-          fill: 'forwards',
-          duration: 700,
-          easing: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',
-        },
-      )
-    })
-  },
   css: {
-    margin: '8px',
+    margin: cssVariableTheme.spacing.xs,
     overflow: 'hidden',
-    borderRadius: '12px',
-    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08)',
-    width: '340px',
+    borderRadius: cssVariableTheme.shape.borderRadius.md,
+    boxShadow: cssVariableTheme.shadows.sm,
+    width: '300px',
     display: 'flex',
     flexDirection: 'column',
     height: '0px',
-    border: '1px solid rgba(0, 0, 0, 0.1)',
-    backdropFilter: 'blur(10px)',
+    backgroundColor: 'var(--noty-bg)',
+    color: 'var(--noty-text)',
     '& .noty-header': {
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
-      padding: '12px 12px 12px 20px',
-      borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
+      padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.sm} 0 ${cssVariableTheme.spacing.sm}`,
     },
     '& .noty-title': {
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       margin: '0',
-      fontSize: '0.95em',
-      fontWeight: '600',
-      letterSpacing: '0.01em',
+      fontSize: '0.85em',
+      fontWeight: cssVariableTheme.typography.fontWeight.semibold,
     },
     '& .dismiss-button': {
       margin: '0',
-      padding: '4px 8px',
-      fontSize: '16px',
-      minWidth: '28px',
-      opacity: '0.8',
-      transition: 'opacity 0.2s ease',
+      padding: cssVariableTheme.spacing.xs,
+      fontSize: cssVariableTheme.typography.fontSize.md,
+      minWidth: 'auto',
+      background: 'transparent',
+      border: 'none',
+      cursor: 'pointer',
+      opacity: '0.7',
+      transition: `opacity ${cssVariableTheme.transitions.duration.fast} ease`,
+      lineHeight: '1',
     },
     '& .dismiss-button:hover': {
       opacity: '1',
     },
     '& .noty-body': {
-      padding: '16px 20px 18px 20px',
-      fontSize: '0.9em',
-      lineHeight: '1.5',
-      fontWeight: '400',
+      padding: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.sm}`,
+      fontSize: '0.8em',
+      lineHeight: '1.4',
     },
   },
-  render: ({ props, injector, element }) => {
+  render: ({ props, injector, useDisposable, useHostProps, useRef }) => {
+    const wrapperRef = useRef<HTMLDivElement>('wrapper')
+
+    useDisposable('enter-animation', () => {
+      setTimeout(() => {
+        const hostEl = wrapperRef.current?.closest('shade-noty') as HTMLElement | null
+        if (!hostEl) return
+        const height = hostEl.scrollHeight || 60
+        void promisifyAnimation(
+          hostEl,
+          [
+            { opacity: '0', height: '0px' },
+            { opacity: '1', height: `${height}px` },
+          ],
+          {
+            fill: 'forwards',
+            duration: 500,
+            easing: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',
+          },
+        )
+      })
+      return { [Symbol.dispose]: () => {} }
+    })
+
     const themeProvider = injector.getInstance(ThemeProviderService)
     const colors = themeProvider.theme.palette[props.model.type]
-    const headerTextColor = themeProvider.getTextColor(colors.dark)
     const textColor = themeProvider.getTextColor(colors.main)
 
     const removeSelf = async () => {
+      const hostEl = wrapperRef.current?.closest('shade-noty') as HTMLElement | null
       await promisifyAnimation(
-        element,
+        hostEl,
         [
-          { opacity: '1', height: `${element?.scrollHeight || 0}px`, margin: '8px 8px' },
-          { opacity: '0', height: '0px', margin: '0px 8px' },
+          { opacity: '1', height: `${hostEl?.scrollHeight || 0}px`, margin: '6px 6px' },
+          { opacity: '0', height: '0px', margin: '0px 6px' },
         ],
         {
           fill: 'forwards',
-          duration: 700,
+          duration: 500,
           easing: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',
         },
       )
@@ -111,28 +120,23 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
       setTimeout(() => void removeSelf(), timeout)
     }
 
-    element.className = `noty ${props.model.type}`
-    element.style.backgroundColor = colors.main
-    element.style.color = textColor
+    useHostProps({
+      'data-noty-type': props.model.type,
+      style: { '--noty-bg': colors.main, '--noty-text': textColor },
+    })
 
     return (
-      <>
-        <div className="noty-header" style={{ backgroundColor: colors.dark, color: headerTextColor }}>
-          <h5 className="noty-title" title={props.model.title}>
+      <div ref={wrapperRef} style={{ display: 'contents' }}>
+        <div className="noty-header">
+          <span className="noty-title" title={props.model.title}>
             {props.model.title}
-          </h5>
-          <Button
-            className="dismiss-button"
-            onclick={removeSelf}
-            title="Close Notification"
-            variant="contained"
-            color={props.model.type}
-          >
-            ✖
-          </Button>
+          </span>
+          <button className="dismiss-button" onclick={removeSelf} title="Close" style={{ color: 'inherit' }}>
+            <Icon icon={close} size={14} />
+          </button>
         </div>
         <div className="noty-body">{props.model.body}</div>
-      </>
+      </div>
     )
   },
 })
@@ -141,25 +145,29 @@ export const NotyList = Shade({
   shadowDomName: 'shade-noty-list',
   css: {
     position: 'fixed',
-    bottom: '1em',
-    right: '1em',
+    bottom: cssVariableTheme.spacing.md,
+    right: cssVariableTheme.spacing.md,
     display: 'flex',
     flexDirection: 'column',
   },
-  render: ({ useDisposable, injector, element }) => {
+  render: ({ useDisposable, injector, useRef }) => {
     const notyService = injector.getInstance(NotyService)
+    const containerRef = useRef<HTMLDivElement>('container')
 
     const currentNotys = notyService.getNotyList()
 
     useDisposable('addNoty', () =>
       notyService.subscribe('onNotyAdded', (n) =>
-        element.append(<NotyComponent model={n} onDismiss={() => notyService.emit('onNotyRemoved', n)} />),
+        containerRef.current?.append(
+          <NotyComponent model={n} onDismiss={() => notyService.emit('onNotyRemoved', n)} />,
+        ),
       ),
     )
 
     useDisposable('removeNoty', () =>
       notyService.subscribe('onNotyRemoved', (n) => {
-        element.querySelectorAll('shade-noty').forEach((e) => {
+        const notys = containerRef.current?.querySelectorAll('shade-noty') || []
+        notys.forEach((e) => {
           if ((e as JSX.Element<{ model?: NotyModel }>).props.model === n) {
             e.remove()
           }
@@ -168,11 +176,11 @@ export const NotyList = Shade({
     )
 
     return (
-      <>
+      <div ref={containerRef} style={{ display: 'contents' }}>
         {currentNotys.map((n) => (
           <NotyComponent model={n} onDismiss={() => injector.getInstance(NotyService).emit('onNotyRemoved', n)} />
         ))}
-      </>
+      </div>
     )
   },
 })