@hanzogui/kitchen-sink 3.0.5

package/tests/_debug_position.mjs

@@ -0,0 +1,52 @@
+import { chromium } from 'playwright'
+
+const browser = await chromium.launch()
+const page = await browser.newPage()
+await page.goto(
+  'http://localhost:9000/?test=PopoverHoverableScopedCase&animationDriver=motion&theme=light',
+  { waitUntil: 'networkidle' }
+)
+await page.waitForTimeout(500)
+
+const trigger = page.locator('#nav-trigger-about')
+const tBox = await trigger.boundingBox()
+console.log('trigger box:', JSON.stringify(tBox))
+await trigger.hover()
+await page.waitForTimeout(2000)
+
+const content = page.locator('#nav-content')
+const visible = await content.isVisible()
+console.log('content visible:', visible)
+if (visible) {
+  const cBox = await content.boundingBox()
+  console.log('content box:', JSON.stringify(cBox))
+
+  const info = await page.evaluate(() => {
+    const el = document.getElementById('nav-content')
+    if (!el) return null
+    // the PopperContent renders: outer GuiView > inner PopperContentFrame
+    // nav-content is the PopperContent, which is the inner PopperContentFrame
+    // let's walk up the DOM to find the position wrapper
+    let node = el
+    const results = []
+    for (let i = 0; i < 5 && node; i++) {
+      const cs = getComputedStyle(node)
+      results.push({
+        tag: node.tagName,
+        id: node.id,
+        className: node.className?.substring?.(0, 60),
+        transform: cs.transform,
+        opacity: cs.opacity,
+        position: cs.position,
+        top: cs.top,
+        left: cs.left,
+        display: cs.display,
+      })
+      node = node.parentElement
+    }
+    return results
+  })
+  console.log('DOM hierarchy:')
+  info?.forEach((n, i) => console.log(`  ${i}:`, JSON.stringify(n)))
+}
+await browser.close()

package/tests/test-utils.ts

@@ -0,0 +1,106 @@
+import { test, type Page } from '@playwright/test'
+
+/** Animation drivers available for testing */
+export const ANIMATION_DRIVERS = ['css', 'native', 'reanimated', 'motion'] as const
+export type AnimationDriver = (typeof ANIMATION_DRIVERS)[number]
+
+type SetupPageArgs = {
+  type: 'demo' | 'useCase'
+  name: string
+  theme?: 'light' | 'dark'
+  splitView?: boolean
+  centered?: boolean
+  waitExtra?: boolean
+  adapt?: boolean
+  searchParams?: Record<string, string>
+}
+
+export async function setupPage(
+  page: Page,
+  {
+    name,
+    type,
+    theme = 'light',
+    splitView = false,
+    adapt = false,
+    centered = false,
+    waitExtra = false,
+    searchParams = {},
+  }: SetupPageArgs
+) {
+  // Get animation driver from: searchParams > project metadata > env var > default
+  const testInfo = test.info()
+  const animationDriver =
+    searchParams.animationDriver ??
+    (testInfo.project?.metadata as any)?.animationDriver ??
+    process.env.HANZO_GUI_TEST_ANIMATION_DRIVER ??
+    'native'
+
+  const params = new URLSearchParams({
+    theme,
+    animationDriver,
+  })
+
+  // Add any additional custom search params
+  for (const [key, value] of Object.entries(searchParams)) {
+    if (key !== 'animationDriver') {
+      params.set(key, value)
+    }
+  }
+
+  if (type === 'useCase') {
+    params.append('test', name)
+  } else if (type === 'demo') {
+    params.append('demo', name)
+  }
+  if (splitView) {
+    params.append('splitView', 'true')
+  }
+  if (centered) {
+    params.append('centered', 'true')
+  }
+  if (adapt) {
+    params.append('adapt', 'true')
+  }
+
+  const url = `/?${params.toString()}`
+  await page.goto(url, { waitUntil: 'networkidle' })
+
+  // poll for app readiness instead of a fixed sleep
+  await page.waitForFunction(
+    () => {
+      const root = document.getElementById('root')
+      return root && root.children.length > 0
+    },
+    { timeout: waitExtra ? 10_000 : 5_000, polling: 50 }
+  )
+
+  return page
+}
+
+/**
+ * get bounding rect without forcing reflow using IntersectionObserver trick.
+ * runs in the browser context via page.evaluate.
+ */
+export async function getBoundingRect(
+  page: Page,
+  selector: string
+): Promise<{ x: number; y: number; width: number; height: number } | null> {
+  return page.evaluate((sel) => {
+    const el = document.querySelector(sel)
+    if (!el) return null
+    return new Promise<{ x: number; y: number; width: number; height: number }>(
+      (resolve) => {
+        const io = new IntersectionObserver(
+          (entries) => {
+            io.disconnect()
+            const r = entries[0].boundingClientRect
+            resolve({ x: r.x, y: r.y, width: r.width, height: r.height })
+          },
+          { threshold: 0 }
+        )
+        io.observe(el)
+      }
+    )
+  }, selector)
+}

package/tests/utils.tsx

@@ -0,0 +1,54 @@
+import type { Locator } from '@playwright/test'
+
+export async function getStyles(locator: Locator) {
+  return await locator.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+}
+
+type InteractionOpts = {
+  delay?: number
+}
+
+export async function whilePressed<A>(
+  locator: Locator,
+  cb: () => Promise<A>,
+  _opts?: InteractionOpts
+) {
+  // use explicit mouse.down/up instead of click({ delay }) for reliable
+  // pressed state testing - click timing is imprecise on slow CI
+  const box = await locator.boundingBox()
+  if (!box) throw new Error('Element not visible')
+  const page = locator.page()
+  const x = box.x + box.width / 2
+  const y = box.y + box.height / 2
+  await page.mouse.move(x, y)
+  await page.mouse.down()
+  await page.waitForTimeout(150)
+  const res = await cb()
+  await page.mouse.up()
+  return res
+}
+
+export async function whileHovered<A>(locator: Locator, cb: () => Promise<A>) {
+  await locator.hover({
+    force: true,
+  })
+  return await cb()
+}
+
+export async function getPressStyle(locator: Locator, opts?: InteractionOpts) {
+  return await whilePressed(
+    locator,
+    async () => {
+      return await getStyles(locator)
+    },
+    opts
+  )
+}
+
+export async function getHoverStyle(locator: Locator) {
+  return await whileHovered(locator, async () => {
+    return await getStyles(locator)
+  })
+}

package/tsconfig.json

@@ -0,0 +1,45 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "exclude": ["e2e"],
+  "references": [
+    {
+      "path": "../compiler/babel-plugin"
+    },
+    {
+      "path": "../core/cli"
+    },
+    {
+      "path": "../core/colors"
+    },
+    {
+      "path": "../core/config"
+    },
+    {
+      "path": "../core/core"
+    },
+    {
+      "path": "../core/font-inter"
+    },
+    {
+      "path": "../core/shorthands"
+    },
+    {
+      "path": "../core/themes"
+    },
+    {
+      "path": "../core/web"
+    },
+    {
+      "path": "../demos"
+    },
+    {
+      "path": "../packages/lucide-icons"
+    },
+    {
+      "path": "../ui/toast"
+    }
+  ]
+}

package/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/vite.config.ts

@@ -0,0 +1,14 @@
+import { guiPlugin } from '@hanzogui/vite-plugin'
+// @ts-ignore vite types require moduleResolution bundler
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  clearScreen: true,
+  plugins: [
+    // guiPlugin({
+    //   components: ['@hanzogui/sandbox-ui', '@hanzo/gui'],
+    //   config: 'src/gui.config.ts',
+    //   optimize: process.env.EXTRACT === '1',
+    // }),
+  ].filter(Boolean),
+})

package/webpack.config.js

@@ -0,0 +1,139 @@
+const path = require('path')
+const webpack = require('webpack')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { shouldExclude, GuiPlugin } = require('@hanzogui/loader')
+
+const NODE_ENV = process.env.NODE_ENV || 'development'
+const target = 'web'
+const isProduction = NODE_ENV === 'production'
+
+const boolVals = {
+  true: true,
+  false: false,
+}
+const disableExtraction =
+  boolVals[process.env.DISABLE_EXTRACTION] ?? process.env.NODE_ENV === 'development'
+
+/** @type { import('webpack').Configuration } */
+module.exports = {
+  context: __dirname,
+  stats: 'normal', // 'detailed'
+  mode: NODE_ENV,
+  entry: ['./src/index.tsx'],
+  devtool: 'cheap-module-source-map',
+  optimization: {
+    concatenateModules: false,
+    minimize: false,
+  },
+  resolve: {
+    mainFields: ['module:jsx', 'browser', 'module', 'main'],
+    extensions: ['.web.tsx', '.web.ts', '.ts', '.tsx', '.js'],
+    alias: {
+      'react/jsx-runtime': require.resolve('react/jsx-runtime'),
+      'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
+      'react/compiler-runtime': require.resolve('react/compiler-runtime'),
+      react: require.resolve('react'),
+      'react-dom/client': require.resolve('react-dom/client'),
+      'react-dom': require.resolve('react-dom'),
+      'react-native$': 'react-native-web',
+      'react-native-svg': '@hanzogui/react-native-svg',
+    },
+  },
+  devServer: {
+    client: {
+      overlay: false,
+      logging: 'error',
+    },
+    hot: true,
+    static: {
+      directory: path.join(__dirname, 'public'),
+    },
+    compress: true,
+    port: process.env.PORT || 9000,
+  },
+  ignoreWarnings: [
+    // suppress react-native-worklets critical dependency warning
+    /Critical dependency: require function is used in a way/,
+    // suppress expo-modules-core tsconfig warnings
+    /expo-modules-core.*expo-module-scripts\/tsconfig\.base/,
+    // suppress all esbuild-loader tsconfig warnings
+    /esbuild-loader.*Error parsing tsconfig\.json/,
+  ],
+  module: {
+    rules: [
+      // Process react-native-reanimated and @hanzogui/animations-reanimated with Babel plugin
+      // The reanimated babel plugin transforms 'worklet' directives for web
+      {
+        test: /\.(js|ts)x?$/,
+        include: [
+          /node_modules\/(react-native-reanimated|react-native-worklets)/,
+          /code\/core\/animations-reanimated/,
+        ],
+        use: {
+          loader: 'babel-loader',
+          options: {
+            configFile: true,
+          },
+        },
+      },
+      {
+        oneOf: [
+          {
+            test: /\.(ts|js)x?$/,
+            use: [
+              {
+                loader: 'esbuild-loader',
+                options: {
+                  target: 'es2020',
+                  loader: 'tsx',
+                  minify: false,
+                },
+              },
+            ],
+          },
+
+          {
+            test: /\.css$/,
+            use: ['style-loader', 'css-loader'],
+          },
+
+          {
+            test: /\.(gif|jpe?g|png|svg|ttf|otf|woff2?|bmp|webp|png|jpg|gif|woff|woff2)$/i,
+            use: [
+              {
+                loader: 'url-loader',
+                options: {
+                  limit: 8192,
+                },
+              },
+            ],
+            type: 'javascript/auto',
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new GuiPlugin({
+      config: './src/gui.config.ts',
+      components: ['@hanzo/gui', '@hanzogui/sandbox-ui'],
+      importsWhitelist: ['constants.js'],
+      disableExtraction,
+    }),
+    isProduction ? null : new ReactRefreshWebpackPlugin(),
+    new webpack.DefinePlugin({
+      __DEV__: NODE_ENV === 'development' ? 'true' : 'false',
+      process: {
+        env: {
+          NODE_ENV: JSON.stringify(NODE_ENV),
+          __DEV__: NODE_ENV === 'development' ? 'true' : 'false',
+          DEBUG: JSON.stringify(process.env.DEBUG || '0'),
+        },
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: `./index.html`,
+    }),
+  ].filter(Boolean),
+}