@hanzogui/kitchen-sink 3.0.5

package/e2e/ThemeChangeBasic.test.ts

@@ -0,0 +1,123 @@
+/**
+ * Basic theme change test - verifies Theme component correctly updates children
+ * when theme name changes (no animations involved).
+ *
+ * This tests the core theme switching functionality that was broken
+ * with react-native and reanimated animation drivers.
+ */
+
+import * as assert from 'assert'
+import { by, device, element, expect, waitFor } from 'detox'
+import { navigateToTestCase } from './utils/navigation'
+import { getDominantColor, isBlueish, isReddish, formatRGB } from './utils/colors'
+
+describe('ThemeChangeBasic', () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true })
+  })
+
+  beforeEach(async () => {
+    await device.reloadReactNative()
+    await navigateToTestCase('ThemeChangeBasic', 'theme-change-basic-root')
+  })
+
+  it('should show initial red theme', async () => {
+    await expect(element(by.id('theme-change-basic-label'))).toHaveText(
+      'Current theme: red'
+    )
+    await expect(element(by.id('theme-change-basic-square'))).toBeVisible()
+  })
+
+  it('should change theme color when toggle is pressed', async () => {
+    // verify initial red state
+    await expect(element(by.id('theme-change-basic-label'))).toHaveText(
+      'Current theme: red'
+    )
+
+    // take screenshot of red state
+    const redScreenshot = await element(
+      by.id('theme-change-basic-square')
+    ).takeScreenshot('theme-red')
+    const redColor = getDominantColor(redScreenshot)
+    console.log(`Red theme color: ${formatRGB(redColor)}`)
+
+    // tap to change to blue
+    await element(by.id('theme-change-basic-toggle')).tap()
+
+    // wait for theme to update
+    await waitFor(element(by.id('theme-change-basic-label')))
+      .toHaveText('Current theme: blue')
+      .withTimeout(5000)
+
+    // small delay for any potential visual updates
+    await new Promise((r) => setTimeout(r, 300))
+
+    // take screenshot of blue state
+    const blueScreenshot = await element(
+      by.id('theme-change-basic-square')
+    ).takeScreenshot('theme-blue')
+    const blueColor = getDominantColor(blueScreenshot)
+    console.log(`Blue theme color: ${formatRGB(blueColor)}`)
+
+    // verify colors changed
+    // red theme $color4 should be reddish
+    assert.ok(
+      isReddish(redColor),
+      `Expected red color to be reddish, got ${formatRGB(redColor)}`
+    )
+    // blue theme $color4 should be blueish
+    assert.ok(
+      isBlueish(blueColor),
+      `Expected blue color to be blueish, got ${formatRGB(blueColor)}`
+    )
+
+    // extra verification: the colors should be different
+    const colorsDiffer =
+      Math.abs(redColor.r - blueColor.r) > 30 || Math.abs(redColor.b - blueColor.b) > 30
+    assert.ok(
+      colorsDiffer,
+      `Expected colors to be different: red=${formatRGB(redColor)}, blue=${formatRGB(blueColor)}`
+    )
+  })
+
+  it('should toggle theme multiple times', async () => {
+    // start at red
+    await expect(element(by.id('theme-change-basic-label'))).toHaveText(
+      'Current theme: red'
+    )
+
+    // toggle to blue
+    await element(by.id('theme-change-basic-toggle')).tap()
+    await waitFor(element(by.id('theme-change-basic-label')))
+      .toHaveText('Current theme: blue')
+      .withTimeout(5000)
+
+    // verify blue color
+    await new Promise((r) => setTimeout(r, 300))
+    const blueScreenshot = await element(
+      by.id('theme-change-basic-square')
+    ).takeScreenshot('theme-blue-toggle')
+    const blueColor = getDominantColor(blueScreenshot)
+    assert.ok(
+      isBlueish(blueColor),
+      `Expected blue color to be blueish, got ${formatRGB(blueColor)}`
+    )
+
+    // toggle back to red
+    await element(by.id('theme-change-basic-toggle')).tap()
+    await waitFor(element(by.id('theme-change-basic-label')))
+      .toHaveText('Current theme: red')
+      .withTimeout(5000)
+
+    // verify red color
+    await new Promise((r) => setTimeout(r, 300))
+    const redScreenshot = await element(
+      by.id('theme-change-basic-square')
+    ).takeScreenshot('theme-red-toggle')
+    const redColor = getDominantColor(redScreenshot)
+    assert.ok(
+      isReddish(redColor),
+      `Expected red color to be reddish, got ${formatRGB(redColor)}`
+    )
+  })
+})

package/e2e/ThemeMutation.test.ts

@@ -0,0 +1,80 @@
+/**
+ * Test for theme mutation with DynamicColorIOS optimization.
+ *
+ * This tests that updateTheme() properly triggers re-renders on iOS
+ * even when using DynamicColorIOS optimization (which avoids tracking
+ * theme keys for performance).
+ *
+ * The fix ensures forceUpdateThemes() properly forces re-renders
+ * regardless of whether theme keys were tracked.
+ */
+
+import { by, device, element, expect, waitFor } from 'detox'
+import { navigateToTestCase } from './utils/navigation'
+
+describe('ThemeMutation', () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true })
+  })
+
+  beforeEach(async () => {
+    await device.reloadReactNative()
+    await navigateToTestCase('ThemeMutation', 'theme-mutation-button')
+  })
+
+  it('should navigate to ThemeMutation test case', async () => {
+    await expect(element(by.id('theme-mutation-button'))).toBeVisible()
+  })
+
+  it('should show initial red color', async () => {
+    // Verify the initial color text shows red
+    await expect(element(by.id('theme-mutation-color-text'))).toHaveText(
+      'Expected color: red'
+    )
+    // Verify the square is visible
+    await expect(element(by.id('theme-mutation-square'))).toBeVisible()
+  })
+
+  it('should update theme color when button is pressed', async () => {
+    // Initial state should be red
+    await expect(element(by.id('theme-mutation-color-text'))).toHaveText(
+      'Expected color: red'
+    )
+
+    // Tap the button to change theme color
+    await element(by.id('theme-mutation-button')).tap()
+
+    // Wait for the color to update to blue
+    await waitFor(element(by.id('theme-mutation-color-text')))
+      .toHaveText('Expected color: blue')
+      .withTimeout(5000)
+
+    // Verify the square is still visible (component re-rendered)
+    await expect(element(by.id('theme-mutation-square'))).toBeVisible()
+  })
+
+  it('should cycle through multiple theme colors', async () => {
+    const colors = ['red', 'blue', 'green', 'purple', 'orange']
+
+    for (let i = 0; i < colors.length; i++) {
+      const expectedColor = colors[i]
+      await expect(element(by.id('theme-mutation-color-text'))).toHaveText(
+        `Expected color: ${expectedColor}`
+      )
+
+      // Tap to cycle to next color (except on last iteration)
+      if (i < colors.length - 1) {
+        await element(by.id('theme-mutation-button')).tap()
+        await waitFor(element(by.id('theme-mutation-color-text')))
+          .toHaveText(`Expected color: ${colors[i + 1]}`)
+          .withTimeout(5000)
+      }
+    }
+
+    // Verify it cycles back to red after orange
+    await element(by.id('theme-mutation-button')).tap()
+    await waitFor(element(by.id('theme-mutation-color-text')))
+      .toHaveText('Expected color: red')
+      .withTimeout(5000)
+  })
+})

package/e2e/check-rngh-status.test.ts

@@ -0,0 +1,31 @@
+import { by, device, element, expect, waitFor } from 'detox'
+
+describe('RNGH Status Check', () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true })
+  })
+
+  it('should show RNGH status on home screen', async () => {
+    // Wait for app to load
+    await waitFor(element(by.text('Kitchen Sink')))
+      .toExist()
+      .withTimeout(60000)
+
+    // Take screenshot to see RNGH status
+    await device.takeScreenshot('rngh-status')
+
+    // Check for RNGH text - it shows either "RNGH: ✓ enabled" or "RNGH: ✗ disabled"
+    // We'll log what we see
+    try {
+      await expect(element(by.text(/RNGH.*enabled/))).toBeVisible()
+      console.log('RNGH STATUS: ENABLED')
+    } catch {
+      try {
+        await expect(element(by.text(/RNGH.*disabled/))).toBeVisible()
+        console.log('RNGH STATUS: DISABLED')
+      } catch {
+        console.log('RNGH STATUS: NOT FOUND')
+      }
+    }
+  })
+})

package/e2e/jest.config.js

@@ -0,0 +1,19 @@
+// force single worker always - multiple simulators cause resource exhaustion
+// and macOS doesn't properly clean them up between runs
+const maxWorkers = 1
+
+/** @type {import('@jest/types').Config.InitialOptions} */
+module.exports = {
+  rootDir: '..',
+  testMatch: ['<rootDir>/e2e/**/*.test.ts'],
+  testTimeout: 180000, // 3 minutes for CI environments with slow emulators
+  maxWorkers,
+  globalSetup: 'detox/runners/jest/globalSetup',
+  globalTeardown: 'detox/runners/jest/globalTeardown',
+  reporters: ['detox/runners/jest/reporter'],
+  testEnvironment: 'detox/runners/jest/testEnvironment',
+  verbose: true,
+  transform: {
+    '^.+\\.tsx?$': ['ts-jest', { isolatedModules: true }],
+  },
+}

package/e2e/utils/colors.ts

@@ -0,0 +1,75 @@
+/**
+ * Color utilities for screenshot-based testing
+ */
+
+import * as fs from 'fs'
+import { PNG } from 'pngjs'
+
+export type RGB = { r: number; g: number; b: number }
+
+/**
+ * Get the dominant color from a PNG screenshot
+ * Samples pixels from the center region to avoid edges/text
+ */
+export function getDominantColor(screenshotPath: string): RGB {
+  const data = fs.readFileSync(screenshotPath)
+  const png = PNG.sync.read(data)
+
+  // sample the center 50% of the image to avoid edges and text
+  const startX = Math.floor(png.width * 0.25)
+  const endX = Math.floor(png.width * 0.75)
+  const startY = Math.floor(png.height * 0.25)
+  const endY = Math.floor(png.height * 0.75)
+
+  let totalR = 0,
+    totalG = 0,
+    totalB = 0,
+    count = 0
+
+  for (let y = startY; y < endY; y++) {
+    for (let x = startX; x < endX; x++) {
+      const idx = (png.width * y + x) * 4
+      totalR += png.data[idx]
+      totalG += png.data[idx + 1]
+      totalB += png.data[idx + 2]
+      count++
+    }
+  }
+
+  return {
+    r: Math.round(totalR / count),
+    g: Math.round(totalG / count),
+    b: Math.round(totalB / count),
+  }
+}
+
+/**
+ * Check if a color is predominantly blue (for $blue10)
+ */
+export function isBlueish(color: RGB): boolean {
+  // blue should have high B, low R, and low-medium G
+  return color.b > 100 && color.b > color.r && color.b > color.g
+}
+
+/**
+ * Check if a color is predominantly red (for $red10)
+ */
+export function isReddish(color: RGB): boolean {
+  // red should have high R, low B, and low G
+  return color.r > 100 && color.r > color.b && color.r > color.g
+}
+
+/**
+ * Check if a color is predominantly green (for $green10)
+ */
+export function isGreenish(color: RGB): boolean {
+  // green should have high G, low R, and low B
+  return color.g > 100 && color.g > color.r && color.g > color.b
+}
+
+/**
+ * Format RGB color for error messages
+ */
+export function formatRGB(color: RGB): string {
+  return `RGB(${color.r}, ${color.g}, ${color.b})`
+}

package/e2e/utils/navigation.ts

@@ -0,0 +1,53 @@
+/**
+ * Shared navigation utilities for Detox e2e tests
+ * Uses the quick-nav grid in the collapsible section on home screen
+ */
+
+import { by, device, element, waitFor } from 'detox'
+
+/**
+ * Fast navigation to any test case using the quick-nav grid
+ * Taps the toggle button to expand the section, then taps the target test case
+ *
+ * @param testCaseName - The exact name of the test case (e.g., 'SelectAndroidOnPress')
+ * @param waitForElementId - Optional testID to wait for after navigation (confirms screen loaded)
+ */
+export async function navigateToTestCase(
+  testCaseName: string,
+  waitForElementId?: string
+) {
+  // disable sync to avoid animation driver blocking
+  await device.disableSynchronization()
+
+  // wait for home screen to load
+  await waitFor(element(by.text('Kitchen Sink')))
+    .toExist()
+    .withTimeout(60000)
+
+  // small delay for UI to settle before tapping
+  await new Promise((r) => setTimeout(r, 500))
+
+  // tap toggle button to expand the quick-nav section
+  await element(by.id('toggle-test-cases')).tap()
+
+  // wait for the quick-nav element to appear - 15s to allow for:
+  // - grid rendering (123 items with useLink hooks)
+  // - native layout calculation
+  // - any pending main-thread work from previous test
+  await waitFor(element(by.id(`detox-nav-${testCaseName}`)))
+    .toBeVisible()
+    .withTimeout(15000)
+
+  // tap the quick-nav element for this test case
+  await element(by.id(`detox-nav-${testCaseName}`)).tap()
+
+  // wait for the target screen to load
+  if (waitForElementId) {
+    await waitFor(element(by.id(waitForElementId)))
+      .toExist()
+      .withTimeout(10000)
+  }
+
+  // re-enable sync
+  await device.enableSynchronization()
+}

package/eas.json

@@ -0,0 +1,22 @@
+{
+  "build": {
+    "development-simulator": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "ios": {
+        "simulator": true
+      }
+    },
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {}
+  },
+  "cli": {
+    "promptToConfigurePushNotifications": false
+  }
+}

package/flows/AlertDialog.yaml

@@ -0,0 +1,17 @@
+appId: com.gui.guikitchensink
+tags:
+  - component
+---
+- runFlow: OpenApp.yaml
+- scrollUntilVisible:
+    element: 'AlertDialog'
+    centerElement: true
+- tapOn: 'AlertDialog'
+- assertVisible: 'Show Alert'
+# Test: tap button, dialog appears
+- tapOn: 'Show Alert'
+- assertVisible: 'Cancel'
+- assertVisible: 'Accept'
+# Test: dialog closes on cancel
+- tapOn: 'Cancel'
+- assertVisible: 'Show Alert'

package/flows/OpenApp.yaml

@@ -0,0 +1,25 @@
+appId: com.gui.guikitchensink
+tag:
+  - util
+---
+- launchApp
+
+# Dismiss any system dialogs (Apple Account Verification, etc.)
+- tapOn:
+    text: 'Not Now'
+    optional: true
+
+# if on dev builds - tap the dev server URL
+- tapOn:
+    text: http://.*
+    optional: true
+
+# Wait for app to load (60s timeout for CI where bundle download can be slow)
+- extendedWaitUntil:
+    visible: 'Kitchen Sink'
+    timeout: 60000
+
+# dismiss expo's first time bottom sheet if present
+- tapOn:
+    text: 'Home'
+    optional: true

package/flows/Select.yaml

@@ -0,0 +1,13 @@
+appId: com.gui.guikitchensink
+tags:
+  - component
+---
+- runFlow: OpenApp.yaml
+- scrollUntilVisible:
+    element: 'Select'
+    centerElement: true
+- tapOn: 'Select'
+- assertVisible: 'Apple'
+# Test: select opens when tapped
+- tapOn: 'Apple'
+- assertVisible: 'Pear'

package/flows/Sheet.yaml

@@ -0,0 +1,12 @@
+appId: com.gui.guikitchensink
+tags:
+  - component
+---
+- runFlow: OpenApp.yaml
+- scrollUntilVisible:
+    element: 'Sheet'
+    centerElement: true
+- tapOn: 'Sheet'
+- assertVisible: 'Open'
+# Test: sheet opens when button tapped
+- tapOn: 'Open'

package/flows/Tabs.yaml

@@ -0,0 +1,13 @@
+appId: com.gui.guikitchensink
+tags:
+  - component
+---
+- runFlow: OpenApp.yaml
+- scrollUntilVisible:
+    element: 'Tabs'
+    centerElement: true
+- tapOn: 'Tabs'
+- assertVisible: 'Profile'
+# Test: tabs are clickable
+- tapOn: 'Notifications'
+- tapOn: 'Profile'

package/flows/Toast.yaml

@@ -0,0 +1,14 @@
+appId: com.gui.guikitchensink
+tags:
+  - component
+---
+- runFlow: OpenApp.yaml
+- scrollUntilVisible:
+    element: 'Toast'
+    centerElement: true
+- tapOn: 'Toast'
+# Toast v1 demo has Show button
+- assertVisible: 'Show'
+# Test: tap show, native toast appears
+- tapOn: 'Show'
+# Toast should appear (but may dismiss quickly)

package/flows/WarmUp.yaml

@@ -0,0 +1,24 @@
+appId: com.gui.guikitchensink
+tag:
+  - util
+---
+# cold start with clearState to prime Hermes bytecode cache
+# subsequent test launches skip clearState so bytecode cache persists = fast restarts
+- launchApp:
+    clearState: true
+
+- tapOn:
+    text: 'Not Now'
+    optional: true
+
+- tapOn:
+    text: http://.*
+    optional: true
+
+- extendedWaitUntil:
+    visible: 'Kitchen Sink'
+    timeout: 60000
+
+- tapOn:
+    text: 'Home'
+    optional: true

package/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
+    />
+
+    <style>
+      #root {
+        height: 100vh;
+        width: 100vw;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/index.js

@@ -0,0 +1,17 @@
+// ensure gui config is created before any component imports
+import './src/gui.config'
+
+// setup native features - just import, no function calls needed
+import '@hanzogui/native/setup-zeego'
+import '@hanzogui/native/setup-teleport'
+import '@hanzogui/native/setup-gesture-handler'
+// import '@hanzogui/native/setup-safe-area'
+import '@hanzogui/native/setup-keyboard-controller'
+// TODO this causes crash on Select demo?
+// import '@hanzogui/native/setup-burnt'
+
+import { registerRootComponent } from 'expo'
+
+const App = require('./src/App').default
+
+registerRootComponent(() => <App />)

package/metro.config.js

@@ -0,0 +1,64 @@
+const { getDefaultConfig } = require('expo/metro-config')
+const path = require('path')
+const { withGui } = require('@hanzogui/metro-plugin')
+// Find the project and workspace directories
+const projectRoot = __dirname
+// This can be replaced with `find-yarn-workspace-root`
+const monorepoRoot = path.resolve(projectRoot, '../..')
+
+const config = getDefaultConfig(projectRoot)
+
+config.resolver.unstable_enablePackageExports =
+  process.env.HANZO_GUI_PACKAGE_EXPORTS !== 'false'
+
+// block unnecessary directories from metro file crawling
+config.resolver.blockList = [
+  /code\/gui\.dev\//,
+  /code\/.*\/__tests__\//,
+  /code\/.*\/\.maestro\//,
+]
+
+// 1. Watch all files within the monorepo
+config.watchFolders = [monorepoRoot]
+// 2. Let Metro know where to resolve packages and in what order
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(monorepoRoot, 'node_modules'),
+]
+// 3. Metro seems to be ignoring nested node_modules for packages in monorepo
+//    root node_modules (e.g. importing `entities` from
+//    `node_modules/parse5/...` should resolve to
+//    `node_modules/parse5/node_modules/entities/...` but Metro resolves it to
+//    `node_modules/entities/...` instead). This is a workaround to fix it.
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  try {
+    return context.resolveRequest(context, moduleName, platform)
+  } catch (e) {
+    // This isn't 100% safe, it only fixes build-time errors, but it cannot
+    // fix runtime errors occurred due to incorrect resolution.
+    const hierarchicalNodeModulesPaths = path
+      .dirname(context.originModulePath)
+      .split(path.sep)
+      .map((_, i, parts) =>
+        path.join('/', ...parts.slice(1, parts.length - i), 'node_modules')
+      )
+
+    console.info(
+      `Metro failed to resolve "${moduleName}" from "${context.originModulePath}": ${e.message}. Retrying with manually specifying hierarchical node_modules paths: ${hierarchicalNodeModulesPaths.join(', ')}`
+    )
+
+    return context.resolveRequest(
+      {
+        ...context,
+        nodeModulesPaths: [...hierarchicalNodeModulesPaths, ...context.nodeModulesPaths],
+      },
+      moduleName,
+      platform
+    )
+  }
+}
+
+module.exports = withGui(config, {
+  components: ['@hanzo/gui'],
+  config: './src/gui.config.ts',
+})

package/next-router-shim.ts

@@ -0,0 +1,9 @@
+export default {
+  push() {},
+  replace() {},
+  router: null,
+}
+/**
+ * @deprecated You imported from the wrong file!
+ */
+export const useRouter = () => undefined