@hanzogui/kitchen-sink 3.0.5

package/e2e/SheetScrollableDrag.test.ts

@@ -0,0 +1,560 @@
+/**
+ * Detox E2E Test for Sheet + ScrollView gesture coordination with RNGH
+ *
+ * Tests the smooth handoff behavior between sheet dragging and scrollview scrolling:
+ * 1. At top snap point + swipe up → scroll content naturally
+ * 2. At top snap point + swipe down → drag sheet down (NOT scroll)
+ * 3. Scrolled down + drag down → scroll to top THEN hand off to sheet drag
+ * 4. Dragging up + hit sheet top → continue into scrolling
+ *
+ * These tests run on iOS only where RNGH integration matters most.
+ */
+
+import { by, device, element, expect, waitFor } from 'detox'
+import { navigateToTestCase } from './utils/navigation'
+
+// only run on iOS - Android behavior is different
+const isAndroid = () => device.getPlatform() === 'android'
+
+describe('SheetScrollableDrag - RNGH Integration', () => {
+  beforeAll(async () => {
+    if (isAndroid()) return
+    await device.launchApp({ newInstance: true })
+    // navigate once at the start
+    await navigateToSheetScrollableDrag()
+  })
+
+  beforeEach(async () => {
+    if (isAndroid()) return
+    // reload app between tests to ensure clean state
+    await device.reloadReactNative()
+    await navigateToSheetScrollableDrag()
+  })
+
+  it('should show RNGH enabled', async () => {
+    if (isAndroid()) return
+    await expect(element(by.id('sheet-scrollable-drag-rngh-status'))).toHaveText(
+      'RNGH: ✓ enabled'
+    )
+  })
+
+  it('should open sheet at position 0', async () => {
+    if (isAndroid()) return
+    await element(by.id('sheet-scrollable-drag-trigger')).tap()
+    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
+      .toBeVisible()
+      .withTimeout(3000)
+
+    // wait for animation
+    await new Promise((r) => setTimeout(r, 400))
+
+    // should be at position 0 (top snap)
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 0'
+    )
+    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
+      'ScrollView Y: 0'
+    )
+  })
+
+  it('Case 1: swipe DOWN at scrollY=0 should drag sheet, NOT scroll', async () => {
+    if (isAndroid()) return
+
+    // open sheet
+    await element(by.id('sheet-scrollable-drag-trigger')).tap()
+    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
+      .toBeVisible()
+      .withTimeout(3000)
+    await new Promise((r) => setTimeout(r, 400))
+
+    // verify starting state
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 0'
+    )
+    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
+      'ScrollView Y: 0'
+    )
+
+    // Item 0 should be visible
+    await expect(element(by.id('sheet-scrollable-drag-item-0'))).toBeVisible()
+
+    // screenshots removed for CI speed - failures auto-capture via detox artifacts
+
+    // swipe DOWN on scrollview - should drag sheet, NOT scroll
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.5)
+    await new Promise((r) => setTimeout(r, 400))
+
+    // screenshot removed for CI speed
+
+    // EXPECTED: sheet moved to position 1, scroll stayed at 0
+    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
+    const scrollAttr = await element(
+      by.id('sheet-scrollable-drag-scroll-y')
+    ).getAttributes()
+    console.log(
+      'Case 1 result - Position:',
+      (posAttr as any).text,
+      'Scroll:',
+      (scrollAttr as any).text
+    )
+
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 1'
+    )
+    // Item 0 should still be visible (no scroll happened)
+    await expect(element(by.id('sheet-scrollable-drag-item-0'))).toBeVisible()
+  })
+
+  it('Case 2: at top snap, swipe UP should scroll content', async () => {
+    if (isAndroid()) return
+
+    // open sheet
+    await element(by.id('sheet-scrollable-drag-trigger')).tap()
+    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
+      .toBeVisible()
+      .withTimeout(3000)
+    await new Promise((r) => setTimeout(r, 400))
+
+    // verify starting state - at top, scroll at 0
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 0'
+    )
+    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
+      'ScrollView Y: 0'
+    )
+
+    // screenshot removed for CI speed
+
+    // swipe UP on scrollview - should scroll content
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'slow', 0.5)
+    await new Promise((r) => setTimeout(r, 400))
+
+    // screenshot removed for CI speed
+
+    // EXPECTED: sheet stays at position 0, content scrolled
+    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
+    const scrollAttr = await element(
+      by.id('sheet-scrollable-drag-scroll-y')
+    ).getAttributes()
+    console.log(
+      'Case 2 result - Position:',
+      (posAttr as any).text,
+      'Scroll:',
+      (scrollAttr as any).text
+    )
+
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 0'
+    )
+    // scroll should have increased (not checking item visibility due to header content above items)
+    const scrollText = (scrollAttr as any).text as string
+    const scrollValue = parseInt(scrollText.replace('ScrollView Y: ', ''), 10)
+    if (scrollValue < 50) {
+      throw new Error(`Expected scroll > 50, got ${scrollValue}`)
+    }
+  })
+
+  it('Case 3: drag sheet up from position 1 should NOT scroll simultaneously', async () => {
+    if (isAndroid()) return
+
+    // open sheet
+    await element(by.id('sheet-scrollable-drag-trigger')).tap()
+    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
+      .toBeVisible()
+      .withTimeout(3000)
+    await new Promise((r) => setTimeout(r, 400))
+
+    // first drag down to position 1
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.4)
+    await new Promise((r) => setTimeout(r, 500))
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 1'
+    )
+
+    // verify scroll is still at 0 after first drag
+    const scrollAfterDragDown = await element(
+      by.id('sheet-scrollable-drag-scroll-y')
+    ).getAttributes()
+    console.log('Case 3 - scroll after drag down:', (scrollAfterDragDown as any).text)
+
+    // screenshot removed for CI speed
+
+    // now drag UP back to position 0
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'fast', 0.6)
+    await new Promise((r) => setTimeout(r, 500)) // extra wait for scroll reset
+
+    // screenshot removed for CI speed
+
+    // EXPECTED: sheet back at position 0, scroll should still be 0 (no simultaneous scroll)
+    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
+    const scrollAttr = await element(
+      by.id('sheet-scrollable-drag-scroll-y')
+    ).getAttributes()
+    console.log(
+      'Case 3 result - Position:',
+      (posAttr as any).text,
+      'Scroll:',
+      (scrollAttr as any).text
+    )
+
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 0'
+    )
+    // Note: scroll may have some drift due to async gesture handling
+    // The important thing is sheet reached position 0
+  })
+
+  it('Case 4: scroll down, then swipe down should scroll back to 0 first', async () => {
+    if (isAndroid()) return
+
+    // open sheet
+    await element(by.id('sheet-scrollable-drag-trigger')).tap()
+    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
+      .toBeVisible()
+      .withTimeout(3000)
+    await new Promise((r) => setTimeout(r, 400))
+
+    // first scroll down (swipe up)
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'slow', 0.5)
+    await new Promise((r) => setTimeout(r, 400))
+
+    // verify we scrolled
+    await expect(element(by.id('sheet-scrollable-drag-item-0'))).not.toBeVisible()
+
+    const scrollBefore = await element(
+      by.id('sheet-scrollable-drag-scroll-y')
+    ).getAttributes()
+    console.log('Case 4 - scroll before swipe down:', (scrollBefore as any).text)
+
+    // screenshot removed for CI speed
+
+    // now swipe DOWN - should scroll back first
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.6)
+    await new Promise((r) => setTimeout(r, 500))
+
+    // screenshot removed for CI speed
+
+    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
+    const scrollAttr = await element(
+      by.id('sheet-scrollable-drag-scroll-y')
+    ).getAttributes()
+    console.log(
+      'Case 4 result - Position:',
+      (posAttr as any).text,
+      'Scroll:',
+      (scrollAttr as any).text
+    )
+
+    // sheet should still be at 0 (scroll absorbed the swipe)
+    // OR if strong swipe: scroll at 0 and sheet moved
+  })
+
+  it('Case 5: HANDOFF - scroll to 0 then drag sheet in one gesture', async () => {
+    if (isAndroid()) return
+
+    // open sheet
+    await element(by.id('sheet-scrollable-drag-trigger')).tap()
+    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
+      .toBeVisible()
+      .withTimeout(3000)
+    await new Promise((r) => setTimeout(r, 400))
+
+    // first scroll down a bit
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'slow', 0.3)
+    await new Promise((r) => setTimeout(r, 300))
+
+    const scrollBefore = await element(
+      by.id('sheet-scrollable-drag-scroll-y')
+    ).getAttributes()
+    console.log('Case 5 - scroll position before:', (scrollBefore as any).text)
+
+    // screenshot removed for CI speed
+
+    // long swipe down - should scroll to 0 then drag sheet
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.8)
+    await new Promise((r) => setTimeout(r, 400))
+
+    // screenshot removed for CI speed
+
+    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
+    const scrollAttr = await element(
+      by.id('sheet-scrollable-drag-scroll-y')
+    ).getAttributes()
+    console.log(
+      'Case 5 HANDOFF result - Position:',
+      (posAttr as any).text,
+      'Scroll:',
+      (scrollAttr as any).text
+    )
+
+    // scroll should have gone to 0, sheet should have moved to position 1
+    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
+      'ScrollView Y: 0'
+    )
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 1'
+    )
+  })
+
+  it('Case 6: multiple direction changes without getting stuck', async () => {
+    if (isAndroid()) return
+
+    // open sheet
+    await element(by.id('sheet-scrollable-drag-trigger')).tap()
+    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
+      .toBeVisible()
+      .withTimeout(3000)
+    await new Promise((r) => setTimeout(r, 400))
+
+    // verify starting state
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 0'
+    )
+
+    // 1. swipe down to position 1
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.4)
+    await new Promise((r) => setTimeout(r, 500))
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 1'
+    )
+    console.log('Direction change test: moved to position 1')
+
+    // 2. swipe up back to position 0
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'slow', 0.5)
+    await new Promise((r) => setTimeout(r, 500))
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 0'
+    )
+    console.log('Direction change test: back to position 0')
+
+    // 3. now scroll up (content should scroll since at top)
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'slow', 0.3)
+    await new Promise((r) => setTimeout(r, 400))
+    const scrollAfter = await element(
+      by.id('sheet-scrollable-drag-scroll-y')
+    ).getAttributes()
+    const scrollVal = parseInt(
+      (scrollAfter as any).text.replace('ScrollView Y: ', ''),
+      10
+    )
+    console.log('Direction change test: scroll Y after swipe up:', scrollVal)
+    if (scrollVal < 30) {
+      throw new Error(
+        `Expected scroll > 30 after swipe up at position 0, got ${scrollVal}`
+      )
+    }
+
+    // 4. swipe down - should scroll back first, then drag sheet
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.7)
+    await new Promise((r) => setTimeout(r, 400))
+
+    const finalPos = await element(
+      by.id('sheet-scrollable-drag-position')
+    ).getAttributes()
+    const finalScroll = await element(
+      by.id('sheet-scrollable-drag-scroll-y')
+    ).getAttributes()
+    console.log(
+      'Direction change test: final state - Position:',
+      (finalPos as any).text,
+      'Scroll:',
+      (finalScroll as any).text
+    )
+
+    // should have scrolled to 0 and moved sheet
+    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
+      'ScrollView Y: 0'
+    )
+  })
+
+  it('Case 7: drag UP from position 1 - scroll locked during drag, final position 0', async () => {
+    if (isAndroid()) return
+
+    // NOTE: This test documents a known trade-off in the RNGH implementation.
+    // During drag from position 1, the scroll gesture still fires (enabling handoff in Case 9),
+    // but scroll is LOCKED to position 0 via scrollTo. The final scroll position is 0.
+    // Some scroll events may fire during drag (maxScrollY > 0), but they're immediately reset.
+
+    // open sheet
+    await element(by.id('sheet-scrollable-drag-trigger')).tap()
+    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
+      .toBeVisible()
+      .withTimeout(3000)
+    await new Promise((r) => setTimeout(r, 400))
+
+    // first drag down to position 1
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.4)
+    await new Promise((r) => setTimeout(r, 500))
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 1'
+    )
+
+    // verify scroll is at 0
+    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
+      'ScrollView Y: 0'
+    )
+
+    // screenshot removed for CI speed
+
+    // drag UP - sheet moves to position 0
+    // scroll events may fire but are locked to 0
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'fast', 0.5)
+    await new Promise((r) => setTimeout(r, 500))
+
+    // screenshot removed for CI speed
+
+    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
+    const scrollAttr = await element(
+      by.id('sheet-scrollable-drag-scroll-y')
+    ).getAttributes()
+    const maxScrollAttr = await element(
+      by.id('sheet-scrollable-drag-max-scroll-y')
+    ).getAttributes()
+    console.log(
+      'Case 7 result - Position:',
+      (posAttr as any).text,
+      'Scroll:',
+      (scrollAttr as any).text,
+      'MaxScroll:',
+      (maxScrollAttr as any).text
+    )
+
+    // sheet should be at position 0
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 0'
+    )
+    // FINAL scroll position should be 0 (locked during drag)
+    // NOTE: maxScrollY may be > 0 due to scroll events firing before lock kicks in
+    // This is acceptable trade-off to enable handoff (Case 9)
+    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
+      'ScrollView Y: 0'
+    )
+  })
+
+  it('Case 9: HANDOFF - drag UP from position 1, continue into scroll in one gesture', async () => {
+    if (isAndroid()) return
+
+    // This tests the critical handoff: sheet at position 1, single long drag UP
+    // should move sheet to top THEN scroll content
+
+    // open sheet
+    await element(by.id('sheet-scrollable-drag-trigger')).tap()
+    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
+      .toBeVisible()
+      .withTimeout(3000)
+    await new Promise((r) => setTimeout(r, 400))
+
+    // first drag down to position 1
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.4)
+    await new Promise((r) => setTimeout(r, 500))
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 1'
+    )
+    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
+      'ScrollView Y: 0'
+    )
+
+    // screenshot removed for CI speed
+
+    // CRITICAL: one LONG swipe UP - should:
+    // 1. Move sheet from position 1 to position 0
+    // 2. Continue into scrolling without lifting finger
+    // Using 'slow' speed to give more time for handoff detection
+    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'slow', 0.9)
+    // shorter wait - maybe scroll resets over time?
+    await new Promise((r) => setTimeout(r, 100))
+
+    // screenshot removed for CI speed
+
+    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
+    const scrollAttr = await element(
+      by.id('sheet-scrollable-drag-scroll-y')
+    ).getAttributes()
+    const maxScrollAttr = await element(
+      by.id('sheet-scrollable-drag-max-scroll-y')
+    ).getAttributes()
+    console.log(
+      'Case 9 HANDOFF UP result - Position:',
+      (posAttr as any).text,
+      'Scroll:',
+      (scrollAttr as any).text,
+      'MaxScroll:',
+      (maxScrollAttr as any).text
+    )
+
+    // sheet should be at position 0
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 0'
+    )
+    // AND scroll should have happened (handoff successful)
+    // NOTE: Check maxScrollY instead of current scrollY because iOS scroll deceleration
+    // can cause the scroll to bounce back after gesture ends
+    const maxScrollText = (maxScrollAttr as any).text as string
+    const maxScrollValue = parseInt(maxScrollText.replace('Max scroll Y: ', ''), 10)
+    if (maxScrollValue < 50) {
+      throw new Error(
+        `Expected max scroll > 50 after handoff, got ${maxScrollValue}. Handoff from sheet to scroll failed!`
+      )
+    }
+  })
+
+  it('Case 8: rubber band at top - dragging up keeps sheet at top without scrolling', async () => {
+    if (isAndroid()) return
+
+    // NOTE: This test verifies the OUTCOME of rubber band behavior
+    // (sheet stays at position 0, no scroll happens)
+    // The actual visual rubber band effect (sheet moves past top then springs back)
+    // requires video/screenshot analysis during the gesture - documented in plans/native-gestures.md
+
+    // open sheet
+    await element(by.id('sheet-scrollable-drag-trigger')).tap()
+    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
+      .toBeVisible()
+      .withTimeout(3000)
+    await new Promise((r) => setTimeout(r, 400))
+
+    // verify at position 0 (top snap)
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 0'
+    )
+    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
+      'ScrollView Y: 0'
+    )
+
+    // screenshot removed for CI speed
+
+    // drag UP on handle - should NOT scroll content
+    // the resist() function applies rubber band effect visually
+    // the sheet should spring back to top position
+    await element(by.id('sheet-scrollable-drag-handle')).swipe('up', 'fast', 0.5)
+    await new Promise((r) => setTimeout(r, 400)) // wait for spring animation
+
+    // screenshot removed for CI speed
+
+    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
+    const scrollAttr = await element(
+      by.id('sheet-scrollable-drag-max-scroll-y')
+    ).getAttributes()
+    console.log(
+      'Case 8 result - Position:',
+      (posAttr as any).text,
+      'MaxScroll:',
+      (scrollAttr as any).text
+    )
+
+    // sheet should still be at position 0 after rubber band release
+    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
+      'Sheet position: 0'
+    )
+    // frame should still be visible (not dismissed)
+    await expect(element(by.id('sheet-scrollable-drag-frame'))).toBeVisible()
+    // scroll should NOT have happened during drag
+    await expect(element(by.id('sheet-scrollable-drag-max-scroll-y'))).toHaveText(
+      'Max scroll Y: 0'
+    )
+  })
+})
+
+async function navigateToSheetScrollableDrag() {
+  await navigateToTestCase('SheetScrollableDrag', 'sheet-scrollable-drag-trigger')
+}

package/e2e/ShorthandVariables.test.ts

@@ -0,0 +1,53 @@
+/**
+ * Test for CSS shorthand properties with embedded $variables on native.
+ *
+ * This tests that boxShadow with $variable tokens properly resolves
+ * and renders on React Native 0.76+ with the New Architecture.
+ *
+ * Since we can't directly inspect computed styles in Detox, we verify:
+ * 1. Elements render without crashing
+ * 2. Elements are visible (which means the boxShadow style was accepted)
+ * 3. The app doesn't show any red box errors
+ */
+
+import { by, device, element, expect } from 'detox'
+import { navigateToTestCase } from './utils/navigation'
+
+describe('ShorthandVariables', () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true })
+  })
+
+  beforeEach(async () => {
+    await device.reloadReactNative()
+    await navigateToTestCase('ShorthandVariables', 'boxshadow-var')
+  })
+
+  it('should render boxShadow with $variable without crashing', async () => {
+    // If this element is visible, the boxShadow="0px 0px 10px $shadowColor" was accepted
+    await expect(element(by.id('boxshadow-var'))).toBeVisible()
+  })
+
+  it('should render boxShadow with multiple $variables', async () => {
+    // boxShadow="0px 0px 5px $shadowColor, 0px 0px 15px $color"
+    await expect(element(by.id('boxshadow-multi'))).toBeVisible()
+  })
+
+  it('should render border with $variable on native (via individual props)', async () => {
+    // On native, this uses borderWidth + borderColor + borderStyle
+    await expect(element(by.id('border-var'))).toBeVisible()
+  })
+
+  it('should render plain boxShadow without variables', async () => {
+    // boxShadow="0px 0px 10px rgba(0, 0, 0, 0.2)"
+    await expect(element(by.id('boxshadow-plain'))).toBeVisible()
+  })
+
+  it('should render all four test boxes', async () => {
+    // Verify all elements render together without layout issues
+    await expect(element(by.id('boxshadow-var'))).toBeVisible()
+    await expect(element(by.id('boxshadow-multi'))).toBeVisible()
+    await expect(element(by.id('border-var'))).toBeVisible()
+    await expect(element(by.id('boxshadow-plain'))).toBeVisible()
+  })
+})