@hanzogui/kitchen-sink 3.0.5

package/tests/SheetAnimation.animated.test.tsx

@@ -0,0 +1,413 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Comprehensive tests for Sheet animation configurations
+ * Tests CSS driver, Motion driver, and various animation prop combinations
+ * Verifies that different animation configs produce measurably different animation speeds
+ */
+
+// Helper to measure actual animation duration by tracking position changes
+async function measureSheetAnimationDuration(
+  page: any,
+  triggerTestId: string,
+  frameTestId: string,
+  closeTestId: string
+): Promise<number> {
+  const closeButton = page.getByTestId(closeTestId)
+
+  // click trigger and measure how long until the frame's visual position stabilizes
+  const duration = await page.evaluate(
+    async ({ triggerId, frameId }: { triggerId: string; frameId: string }) => {
+      return new Promise<number>((resolve) => {
+        const trigger = document.querySelector(
+          `[data-testid="${triggerId}"]`
+        ) as HTMLElement
+        if (!trigger) {
+          resolve(-1)
+          return
+        }
+
+        const startTime = performance.now()
+        let initialTop = -1
+        let lastTop = -1
+        let stableCount = 0
+        let hasMovedFromInitial = false
+        let checkCount = 0
+        const maxChecks = 200 // ~10 seconds max
+
+        trigger.click()
+
+        const checkAnimation = () => {
+          checkCount++
+          const frame = document.querySelector(
+            `[data-testid="${frameId}"]`
+          ) as HTMLElement
+          if (!frame) {
+            if (checkCount < maxChecks) {
+              requestAnimationFrame(checkAnimation)
+            } else {
+              resolve(performance.now() - startTime)
+            }
+            return
+          }
+
+          // use getBoundingClientRect which reflects parent transforms
+          const currentTop = Math.round(frame.getBoundingClientRect().top)
+
+          // record the initial position on first check
+          if (initialTop === -1) {
+            initialTop = currentTop
+          }
+
+          // wait until the position has actually changed from the initial value
+          // before we start counting stability (animation might not start for a frame or two)
+          if (!hasMovedFromInitial && currentTop !== initialTop) {
+            hasMovedFromInitial = true
+          }
+
+          if (hasMovedFromInitial && currentTop === lastTop) {
+            stableCount++
+            if (stableCount >= 3) {
+              resolve(performance.now() - startTime)
+              return
+            }
+          } else {
+            stableCount = 0
+            lastTop = currentTop
+          }
+
+          if (checkCount < maxChecks) {
+            requestAnimationFrame(checkAnimation)
+          } else {
+            resolve(performance.now() - startTime)
+          }
+        }
+
+        requestAnimationFrame(checkAnimation)
+      })
+    },
+    { triggerId: triggerTestId, frameId: frameTestId }
+  )
+
+  // close the sheet for next measurement
+  await closeButton.scrollIntoViewIfNeeded()
+  await closeButton.click({ timeout: 5000 })
+  await page.waitForTimeout(1500)
+
+  return Math.round(duration)
+}
+
+// ============================================================================
+// CSS DRIVER TESTS
+// Note: CSS driver has a known limitation where animation names don't translate
+// to Sheet animation timing (the Sheet uses useAnimatedNumber internally which
+// CSS driver doesn't animate - it relies on CSS transitions for component styles)
+// ============================================================================
+test.describe('Sheet Animation - CSS Driver', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'SheetAnimationCase',
+      type: 'useCase',
+      searchParams: { animationDriver: 'css' },
+    })
+  })
+
+  test('sheet transform has CSS transition applied', async ({ page }) => {
+    // This test verifies that the CSS driver properly applies a CSS transition
+    // to the Sheet's transform property, enabling smooth open/close animations
+    const trigger = page.getByTestId('animation-quick-trigger')
+    const closeButton = page.getByTestId('animation-quick-close')
+
+    await trigger.click()
+    await page.waitForTimeout(100) // Small wait for sheet to start rendering
+
+    // The transform is on the AnimatedView wrapper, which is the parent of Sheet.Frame
+    // We need to find the element with position:absolute that wraps the frame
+    const debugInfo = await page.evaluate(() => {
+      const frame = document.querySelector('[data-testid="animation-quick-frame"]')
+      if (!frame) return { found: false, error: 'frame not found' }
+
+      // The AnimatedView is a parent with position:absolute and transform
+      let animatedView: Element | null = frame
+      for (let i = 0; i < 5; i++) {
+        animatedView = animatedView?.parentElement || null
+        if (!animatedView) break
+        const style = getComputedStyle(animatedView)
+        if (style.position === 'absolute' && style.transform !== 'none') {
+          break
+        }
+      }
+
+      if (!animatedView) {
+        return { found: false, error: 'animatedView not found' }
+      }
+
+      const style = getComputedStyle(animatedView)
+      // Get all style attributes for debugging
+      const allStyles: Record<string, string> = {}
+      for (let i = 0; i < style.length; i++) {
+        const prop = style[i]
+        if (prop.includes('transition') || prop.includes('transform')) {
+          allStyles[prop] = style.getPropertyValue(prop)
+        }
+      }
+      return {
+        found: true,
+        tagName: animatedView.tagName,
+        transition: style.transition,
+        transform: style.transform,
+        inlineStyle: (animatedView as HTMLElement).style.cssText,
+        allTransitionStyles: allStyles,
+      }
+    })
+
+    // Check that there's a transition that applies to transform
+    // CSS transition "0.1s ease-in" (without property name) means "all 0.1s ease-in"
+    // which applies to all properties including transform
+    const hasTransition =
+      debugInfo.found && debugInfo.transition && debugInfo.transition !== 'all'
+    expect(hasTransition).toBe(true)
+
+    await closeButton.click()
+    await page.waitForTimeout(600)
+  })
+
+  test('sheet actually animates (transform changes over time)', async ({ page }) => {
+    // This test verifies that the sheet's transform actually changes over time
+    // (i.e., it animates) rather than instantly snapping to position
+    const trigger = page.getByTestId('animation-lazy-trigger')
+    const closeButton = page.getByTestId('animation-lazy-close')
+
+    // Click to open the sheet
+    await trigger.click()
+
+    // Wait a small moment for sheet to start appearing
+    await page.waitForTimeout(50)
+
+    // Capture transform values over the animation duration
+    const transforms: string[] = []
+    for (let i = 0; i < 20; i++) {
+      const transform = await page.evaluate(() => {
+        // Find the AnimatedView (parent of frame with transform)
+        const frame = document.querySelector('[data-testid="animation-lazy-frame"]')
+        if (!frame) return 'frame-not-found'
+
+        let el: Element | null = frame
+        for (let j = 0; j < 5; j++) {
+          el = el?.parentElement
+          if (!el) break
+          const style = getComputedStyle(el)
+          if (style.position === 'absolute' && style.transform !== 'none') {
+            return style.transform
+          }
+        }
+        return 'parent-not-found'
+      })
+      transforms.push(transform)
+      await page.waitForTimeout(30) // ~30ms between samples
+    }
+
+    // Filter out errors and get unique values
+    const uniqueTransforms = [
+      ...new Set(transforms.filter((t) => !t.includes('not-found') && t !== 'none')),
+    ]
+
+    // If animation is working, we should see multiple distinct transform values
+    // as the sheet animates from bottom to its snap point
+    expect(uniqueTransforms.length).toBeGreaterThan(1)
+
+    await closeButton.click()
+    await page.waitForTimeout(600)
+  })
+
+  test('all sheet variants open and close correctly', async ({ page }) => {
+    // CSS driver doesn't support transitionConfig prop reliably - only test transition variants
+    const testIds = ['animation-quick', 'animation-lazy', 'animation-slow']
+
+    for (const testId of testIds) {
+      const trigger = page.getByTestId(`${testId}-trigger`)
+      // Use .first() because Sheet passes testId to both Sheet.Frame and SheetCover
+      const frame = page.getByTestId(`${testId}-frame`).first()
+      const closeButton = page.getByTestId(`${testId}-close`)
+
+      await trigger.click()
+      await expect(frame).toBeVisible({ timeout: 5000 })
+
+      await closeButton.click()
+      // Wait longer for slow animations to complete
+      await page.waitForTimeout(1500)
+      await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+    }
+  })
+
+  // transitionConfig not working reliably with CSS driver
+  test.skip('transitionConfig prop works without animation prop', async ({ page }) => {
+    // Use .first() because Sheet passes testId to both Sheet.Frame and SheetCover
+    const frame = page.getByTestId('transitionConfig-only-frame').first()
+    const trigger = page.getByTestId('transitionConfig-only-trigger')
+    const closeButton = page.getByTestId('transitionConfig-only-close')
+
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 3000 })
+
+    // Sheet should open successfully with only transitionConfig
+    await closeButton.click()
+    await page.waitForTimeout(1500)
+    await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+  })
+})
+
+// ============================================================================
+// MOTION DRIVER TESTS
+// ============================================================================
+test.describe('Sheet Animation - Motion Driver', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'SheetAnimationCase',
+      type: 'useCase',
+      searchParams: { animationDriver: 'motion' },
+    })
+  })
+
+  test('all sheet variants open and close correctly', async ({ page }) => {
+    // Skip transitionConfig variants - not working reliably
+    const testIds = ['animation-quick', 'animation-lazy', 'animation-slow']
+
+    for (const testId of testIds) {
+      const trigger = page.getByTestId(`${testId}-trigger`)
+      // Use .first() because Sheet passes testId to both Sheet.Frame and SheetCover
+      const frame = page.getByTestId(`${testId}-frame`).first()
+      const closeButton = page.getByTestId(`${testId}-close`)
+
+      await trigger.click()
+      await expect(frame).toBeVisible({ timeout: 5000 })
+
+      await closeButton.click()
+      // Wait longer for slow animations to complete
+      await page.waitForTimeout(2000)
+      await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+    }
+  })
+
+  test('transitionConfig prop works without animation prop', async ({ page }) => {
+    // Use .first() because Sheet passes testId to both Sheet.Frame and SheetCover
+    const frame = page.getByTestId('transitionConfig-only-frame').first()
+    const trigger = page.getByTestId('transitionConfig-only-trigger')
+    const closeButton = page.getByTestId('transitionConfig-only-close')
+
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 3000 })
+
+    await closeButton.click()
+    await page.waitForTimeout(2000)
+    await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+  })
+
+  test('transitionConfig overrides transition prop', async ({ page }) => {
+    // transition="quick" (fast) + transitionConfig={type:'timing',duration:1000} (slow)
+    // if override works, the 1000ms config should make it measurably slower than the 100ms baseline
+    const baselineDuration = await measureSheetAnimationDuration(
+      page,
+      'transitionConfig-only-trigger',
+      'transitionConfig-only-frame',
+      'transitionConfig-only-close'
+    )
+
+    const overrideDuration = await measureSheetAnimationDuration(
+      page,
+      'animation-plus-config-trigger',
+      'animation-plus-config-frame',
+      'animation-plus-config-close'
+    )
+
+    console.info(
+      `Motion Driver - baseline (100ms): ${baselineDuration}ms, override (1000ms): ${overrideDuration}ms`
+    )
+
+    // the 1000ms override should be significantly slower than the 100ms baseline
+    // use absolute +250ms margin: CI inflates both measurements (spring settling + overhead)
+    // which compresses the ratio, but absolute difference stays well above 250ms
+    expect(overrideDuration).toBeGreaterThan(baselineDuration + 250)
+  })
+})
+
+// ============================================================================
+// REANIMATED DRIVER TESTS (default)
+// ============================================================================
+test.describe('Sheet Animation - Reanimated Driver (default)', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'SheetAnimationCase',
+      type: 'useCase',
+      // No animationDriver param = default reanimated
+    })
+  })
+
+  test('all sheet variants open and close correctly', async ({ page }) => {
+    const testIds = ['animation-quick', 'animation-lazy', 'animation-slow']
+
+    for (const testId of testIds) {
+      const trigger = page.getByTestId(`${testId}-trigger`)
+      // Use .first() because Sheet passes testId to both Sheet.Frame and SheetCover
+      const frame = page.getByTestId(`${testId}-frame`).first()
+      const closeButton = page.getByTestId(`${testId}-close`)
+
+      await trigger.click()
+      await expect(frame).toBeVisible({ timeout: 5000 })
+
+      await closeButton.click()
+      // Wait longer for slow animations to complete
+      await page.waitForTimeout(2000)
+      await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+    }
+  })
+
+  test('transitionConfig prop works', async ({ page }) => {
+    // transitionConfig only works with JS animation drivers, not CSS
+    const driver = (test.info().project?.metadata as any)?.animationDriver
+    test.skip(driver === 'css', 'transitionConfig not supported by CSS animation driver')
+
+    // Use .first() because Sheet passes testId to both Sheet.Frame and SheetCover
+    const frame = page.getByTestId('transitionConfig-only-frame').first()
+    const trigger = page.getByTestId('transitionConfig-only-trigger')
+    const closeButton = page.getByTestId('transitionConfig-only-close')
+
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 3000 })
+
+    await closeButton.click()
+    await page.waitForTimeout(2000)
+    await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+  })
+
+  test('transitionConfig overrides transition prop', async ({ page }) => {
+    // transitionConfig only works with JS animation drivers, not CSS
+    const driver = (test.info().project?.metadata as any)?.animationDriver
+    test.skip(driver === 'css', 'transitionConfig not supported by CSS animation driver')
+    // transition="quick" (fast) + transitionConfig={type:'timing',duration:1000} (slow)
+    // if override works, the 1000ms config should make it measurably slower than the 100ms baseline
+    const baselineDuration = await measureSheetAnimationDuration(
+      page,
+      'transitionConfig-only-trigger',
+      'transitionConfig-only-frame',
+      'transitionConfig-only-close'
+    )
+
+    const overrideDuration = await measureSheetAnimationDuration(
+      page,
+      'animation-plus-config-trigger',
+      'animation-plus-config-frame',
+      'animation-plus-config-close'
+    )
+
+    console.info(
+      `Reanimated Driver - baseline (100ms): ${baselineDuration}ms, override (1000ms): ${overrideDuration}ms`
+    )
+
+    // the 1000ms override should be significantly slower than the 100ms baseline
+    // use absolute +250ms margin: CI inflates both measurements (spring settling + overhead)
+    // which compresses the ratio, but absolute difference stays well above 250ms
+    expect(overrideDuration).toBeGreaterThan(baselineDuration + 250)
+  })
+})

package/tests/SheetDrag.animated.test.tsx

@@ -0,0 +1,223 @@
+import { expect, test, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+// mobile viewport with touch support for realistic sheet drag testing
+test.use({
+  viewport: { width: 390, height: 844 },
+  hasTouch: true,
+  isMobile: true,
+})
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'SheetDragCase', type: 'useCase' })
+})
+
+/**
+ * perform a drag gesture using mouse events
+ * PanResponder responds to mouse events on web
+ */
+async function dragSheet(
+  page: Page,
+  startX: number,
+  startY: number,
+  deltaY: number,
+  options: { steps?: number; stepDelay?: number } = {}
+) {
+  const { steps = 20, stepDelay = 16 } = options
+
+  await page.mouse.move(startX, startY)
+  await page.mouse.down()
+
+  for (let i = 1; i <= steps; i++) {
+    await page.mouse.move(startX, startY + (deltaY * i) / steps)
+    await page.waitForTimeout(stepDelay)
+  }
+
+  await page.mouse.up()
+}
+
+test.describe('Sheet drag interactions', () => {
+  test('dragging sheet changes snap point position state', async ({ page }) => {
+    const trigger = page.getByTestId('drag-percent-trigger')
+    const frame = page.getByTestId('drag-percent-frame')
+    const handle = page.getByTestId('drag-percent-handle')
+    const positionIndicator = page.getByTestId('drag-percent-snap-indicator')
+
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(400)
+
+    await expect(positionIndicator).toContainText('0')
+
+    const handleBox = await handle.boundingBox()
+    expect(handleBox).toBeTruthy()
+
+    const startX = handleBox!.x + handleBox!.width / 2
+    const startY = handleBox!.y + handleBox!.height / 2
+
+    // drag down to cross threshold between 80% and 40%
+    await dragSheet(page, startX, startY, 250)
+    await page.waitForTimeout(600)
+
+    // verify snap point state changed (this works)
+    await expect(positionIndicator).toContainText('1')
+  })
+
+  test('dragging sheet down changes snap point (constant mode)', async ({ page }) => {
+    const trigger = page.getByTestId('drag-constant-trigger')
+    const frame = page.getByTestId('drag-constant-frame')
+    const handle = page.getByTestId('drag-constant-handle')
+    const positionIndicator = page.getByTestId('drag-constant-snap-indicator')
+
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(400)
+
+    await expect(positionIndicator).toContainText('0')
+
+    const handleBox = await handle.boundingBox()
+    expect(handleBox).toBeTruthy()
+
+    const startX = handleBox!.x + handleBox!.width / 2
+    const startY = handleBox!.y + handleBox!.height / 2
+
+    // drag 200px to move from 500px to 250px snap point
+    await dragSheet(page, startX, startY, 200)
+    await page.waitForTimeout(600)
+
+    // verify snap point state changed
+    await expect(positionIndicator).toContainText('1')
+  })
+
+  test('dragging sheet past bottom dismisses it', async ({ page }) => {
+    const trigger = page.getByTestId('dismiss-drag-trigger')
+    const frame = page.getByTestId('dismiss-drag-frame')
+    const handle = page.getByTestId('dismiss-drag-handle')
+    const dismissCount = page.getByTestId('dismiss-drag-count')
+
+    await expect(dismissCount).toContainText('0')
+
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(400)
+
+    const handleBox = await handle.boundingBox()
+    expect(handleBox).toBeTruthy()
+
+    const startX = handleBox!.x + handleBox!.width / 2
+    const startY = handleBox!.y + handleBox!.height / 2
+
+    // drag far down to dismiss (sheet is at 50%)
+    await dragSheet(page, startX, startY, 500)
+    await page.waitForTimeout(800)
+
+    await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+    await expect(dismissCount).toContainText('1')
+  })
+
+  test('partial drag snaps back to original position', async ({ page }) => {
+    const trigger = page.getByTestId('drag-percent-trigger')
+    const frame = page.getByTestId('drag-percent-frame')
+    const handle = page.getByTestId('drag-percent-handle')
+    const positionIndicator = page.getByTestId('drag-percent-snap-indicator')
+
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(400)
+
+    await expect(positionIndicator).toContainText('0')
+
+    const handleBox = await handle.boundingBox()
+    expect(handleBox).toBeTruthy()
+
+    const startX = handleBox!.x + handleBox!.width / 2
+    const startY = handleBox!.y + handleBox!.height / 2
+
+    // small drag that shouldn't cross threshold - use more steps for smoother movement
+    await dragSheet(page, startX, startY, 20, { steps: 10 })
+    await page.waitForTimeout(800)
+
+    await expect(positionIndicator).toContainText('0')
+  })
+
+  // flaky: Playwright mouse events don't trigger PanResponder consistently for subsequent drags
+  test.skip('dragging up from lower snap point returns to higher', async ({ page }) => {
+    const trigger = page.getByTestId('drag-percent-trigger')
+    const frame = page.getByTestId('drag-percent-frame')
+    const handle = page.getByTestId('drag-percent-handle')
+    const positionIndicator = page.getByTestId('drag-percent-snap-indicator')
+
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(400)
+
+    const handleBox = await handle.boundingBox()
+    expect(handleBox).toBeTruthy()
+
+    const startX = handleBox!.x + handleBox!.width / 2
+    const startY = handleBox!.y + handleBox!.height / 2
+
+    // first drag down to snap point 1
+    await dragSheet(page, startX, startY, 250)
+    await page.waitForTimeout(600)
+
+    await expect(positionIndicator).toContainText('1')
+
+    // wait for animation to fully settle
+    await page.waitForTimeout(800)
+
+    // get new handle position after snapping to lower position
+    const newHandleBox = await handle.boundingBox()
+    expect(newHandleBox).toBeTruthy()
+
+    const newStartX = newHandleBox!.x + newHandleBox!.width / 2
+    const newStartY = newHandleBox!.y + newHandleBox!.height / 2
+
+    // drag UP (negative) to return to snap point 0
+    await dragSheet(page, newStartX, newStartY, -200, { steps: 25, stepDelay: 16 })
+    await page.waitForTimeout(600)
+
+    // verify we returned to snap point 0
+    await expect(positionIndicator).toContainText('0')
+  })
+
+  test('sheet frame moves during drag', async ({ page }) => {
+    const trigger = page.getByTestId('drag-percent-trigger')
+    const frame = page.getByTestId('drag-percent-frame')
+    const handle = page.getByTestId('drag-percent-handle')
+
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(400)
+
+    const handleBox = await handle.boundingBox()
+    expect(handleBox).toBeTruthy()
+
+    // get initial frame position
+    const initialBox = await frame.boundingBox()
+    expect(initialBox).toBeTruthy()
+    const initialTop = initialBox!.y
+
+    const startX = handleBox!.x + handleBox!.width / 2
+    const startY = handleBox!.y + handleBox!.height / 2
+
+    // start drag and hold mid-drag
+    await page.mouse.move(startX, startY)
+    await page.mouse.down()
+    // move in steps like a real drag
+    for (let i = 1; i <= 10; i++) {
+      await page.mouse.move(startX, startY + 10 * i)
+      await page.waitForTimeout(40)
+    }
+
+    // check frame moved during drag
+    const midDragBox = await frame.boundingBox()
+    expect(midDragBox).toBeTruthy()
+
+    await page.mouse.up()
+
+    // frame should have moved down during drag
+    // this verifies the drag gesture is actually being detected by the sheet
+    expect(midDragBox!.y).toBeGreaterThan(initialTop)
+  })
+})