@furystack/shades-common-components 12.0.0 → 12.1.0

package/src/components/skeleton.spec.tsx

@@ -46,7 +46,7 @@ describe('Skeleton', () => {
     vi.restoreAllMocks()
   })
 
-  it('should render with shadow DOM', async () => {
+  it('should render with correct initial state and default delay', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -60,40 +60,13 @@ describe('Skeleton', () => {
 
       const skeleton = document.querySelector('shade-skeleton')
       expect(skeleton).not.toBeNull()
-    })
-  })
-
-  it('should have initial opacity of 0', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <Skeleton />,
-      })
-
-      await sleepAsync(50)
 
-      const skeleton = document.querySelector('shade-skeleton') as HTMLElement
-      expect(skeleton).not.toBeNull()
+      const skeletonDiv = document.querySelector('shade-skeleton div') as HTMLElement
+      expect(skeletonDiv).not.toBeNull()
 
-      const computedStyle = window.getComputedStyle(skeleton)
+      const computedStyle = window.getComputedStyle(skeletonDiv)
       expect(computedStyle.opacity).toBe('0')
-    })
-  })
-
-  it('should use default delay of 1500ms', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <Skeleton />,
-      })
-
-      await sleepAsync(50)
+      expect(computedStyle.display).toBe('inline-block')
 
       const fadeInCall = animateCalls.find(
         (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf),
@@ -125,26 +98,6 @@ describe('Skeleton', () => {
     })
   })
 
-  it('should have correct css styles applied', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <Skeleton />,
-      })
-
-      await sleepAsync(50)
-
-      const skeleton = document.querySelector('shade-skeleton') as HTMLElement
-      expect(skeleton).not.toBeNull()
-
-      const computedStyle = window.getComputedStyle(skeleton)
-      expect(computedStyle.display).toBe('inline-block')
-    })
-  })
-
   it('should start fade-in animation with correct parameters', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
@@ -175,7 +128,7 @@ describe('Skeleton', () => {
     })
   })
 
-  it('should start background animation after fade-in completes', async () => {
+  it('should start background animation with correct keyframes after fade-in completes', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -196,26 +149,6 @@ describe('Skeleton', () => {
       const options = backgroundAnimation?.options as KeyframeAnimationOptions
       expect(options.duration).toBe(10000)
       expect(options.iterations).toBe(Infinity)
-    })
-  })
-
-  it('should have gradient background animation keyframes', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <Skeleton delay={0} />,
-      })
-
-      await sleepAsync(100)
-
-      const backgroundAnimation = animateCalls.find(
-        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'backgroundPosition' in kf),
-      )
-
-      expect(backgroundAnimation).toBeDefined()
 
       const keyframes = backgroundAnimation?.keyframes as Keyframe[]
       expect(keyframes).toHaveLength(3)

package/src/components/skeleton.tsx

@@ -11,15 +11,6 @@ export type SkeletonProps = {
 
 export const Skeleton = Shade<SkeletonProps>({
   shadowDomName: 'shade-skeleton',
-  css: {
-    opacity: '0',
-    display: 'inline-block',
-    background: `linear-gradient(-45deg, color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 30%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent))`,
-    backgroundSize: '400% 400%',
-    width: '100%',
-    height: '100%',
-    minHeight: '1em',
-  },
   render: ({ props, useRef }) => {
     const wrapperRef = useRef<HTMLDivElement>('wrapper')
     const { delay = 1500 } = props
@@ -49,8 +40,8 @@ export const Skeleton = Shade<SkeletonProps>({
         style={{
           opacity: '0',
           display: 'inline-block',
-          background: 'inherit',
-          backgroundSize: 'inherit',
+          background: `linear-gradient(-45deg, color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 30%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent))`,
+          backgroundSize: '400% 400%',
           width: '100%',
           height: '100%',
           minHeight: '1em',

package/src/services/click-away-service.spec.ts

@@ -1,35 +1,33 @@
+import { using } from '@furystack/utils'
 import { describe, expect, it, vi } from 'vitest'
 import { ClickAwayService } from './click-away-service.js'
 
 describe('ClickAwayService', () => {
   it('Should be constructed and disposed', () => {
-    const service = new ClickAwayService(document.createElement('div'), () => {})
-    service[Symbol.dispose]()
+    using(new ClickAwayService(document.createElement('div'), () => {}), () => {
+      // Constructed and disposed automatically
+    })
   })
 
   it('Should call onClickAway when clicking outside the element', () => {
     const onClickAway = vi.fn()
     const div = document.createElement('div')
-    const service = new ClickAwayService(div, onClickAway)
+    using(new ClickAwayService(div, onClickAway), () => {
+      document.body.appendChild(div)
+      document.body.click()
 
-    document.body.appendChild(div)
-    document.body.click()
-
-    expect(onClickAway).toBeCalled()
-
-    service[Symbol.dispose]()
+      expect(onClickAway).toBeCalled()
+    })
   })
 
   it('Should not call onClickAway when clicking inside the element', () => {
     const onClickAway = vi.fn()
     const div = document.createElement('div')
-    const service = new ClickAwayService(div, onClickAway)
-
-    document.body.appendChild(div)
-    div.click()
-
-    expect(onClickAway).not.toBeCalled()
+    using(new ClickAwayService(div, onClickAway), () => {
+      document.body.appendChild(div)
+      div.click()
 
-    service[Symbol.dispose]()
+      expect(onClickAway).not.toBeCalled()
+    })
   })
 })