@hanzogui/kitchen-sink 3.0.5

package/screenshots/Screenshotter.test.tsx

@@ -0,0 +1,48 @@
+import { readdirSync } from 'fs'
+import { join } from 'path'
+
+import { test } from '@playwright/test'
+
+const sizes = [
+  {
+    height: 650,
+    width: 650,
+  },
+  {
+    width: 1200,
+    height: 630,
+  },
+]
+
+for (const size of sizes) {
+  const demos = readdirSync(join(__dirname, '../../../packages/demos/src'))
+    .filter((file) => file.endsWith('Demo.tsx'))
+    .map((demo) => demo.split('.')[0])
+  for (const demo of demos) {
+    test(`take screenshots for ${demo} for size ${size.width}x${size.height}`, async ({
+      page,
+    }) => {
+      page.setViewportSize(size)
+      await page.goto(`/?demo=${demo}&screenshot=true`)
+      await new Promise((resolve) => setTimeout(() => resolve(true), 1000))
+      await page.screenshot({
+        path: join(
+          __dirname,
+          `../../site/public/screenshots/light/${demo}/${size.width}x${size.height}.png`
+        ),
+        omitBackground: true,
+      })
+
+      await page.goto(`/?demo=${demo}&screenshot=true&theme=dark`)
+      await new Promise((resolve) => setTimeout(() => resolve(true), 1000))
+      await page.screenshot({
+        path: join(
+          __dirname,
+          `../../site/public/screenshots/dark/${demo}/${size.width}x${size.height}.png`
+        ),
+
+        omitBackground: true,
+      })
+    })
+  }
+}

package/src/AnimationDemos.tsx

@@ -0,0 +1,131 @@
+import React from 'react'
+import { AnimatePresence, Button, Square, styled } from '@hanzo/gui'
+
+function Demo1() {
+  return (
+    <Square
+      size={200}
+      transition="bouncy"
+      bg="$red10"
+      pressStyle={{
+        bg: 'green',
+        scale: 1.2,
+      }}
+    />
+  )
+}
+
+//
+
+function Demo2() {
+  const [show, setShow] = React.useState(false)
+
+  return (
+    <>
+      <Button onPress={() => setShow(!show)}>Toggle</Button>
+      {show && (
+        <Square
+          size={200}
+          transition="bouncy"
+          bg="$red10"
+          enterStyle={{
+            opacity: 0,
+          }}
+          exitStyle={{
+            opacity: 0,
+          }}
+        />
+      )}
+    </>
+  )
+}
+
+//
+
+import { ArrowLeft, ArrowRight } from '@hanzogui/lucide-icons-2'
+import { Image, XStack, YStack } from '@hanzo/gui'
+
+const GalleryItem = styled(YStack, {
+  zIndex: 1,
+  x: 0,
+  opacity: 1,
+  fullscreen: true,
+
+  variants: {
+    // 1 = right, 0 = nowhere, -1 = left
+    going: {
+      ':number': (going) => ({
+        enterStyle: {
+          x: going > 0 ? 1000 : -1000,
+          opacity: 0,
+        },
+        exitStyle: {
+          zIndex: 0,
+          x: going < 0 ? 1000 : -1000,
+          opacity: 0,
+        },
+      }),
+    },
+  } as const,
+})
+
+const photos = [
+  'https://picsum.photos/500/300',
+  'https://picsum.photos/501/300',
+  'https://picsum.photos/502/300',
+]
+
+const wrap = (min: number, max: number, v: number) => {
+  const rangeSize = max - min
+  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min
+}
+
+export function Demo3() {
+  const [[page, going], setPage] = React.useState([0, 0])
+
+  const imageIndex = wrap(0, photos.length, page)
+  const paginate = (going: number) => {
+    setPage([page + going, going])
+  }
+
+  return (
+    <XStack
+      overflow="hidden"
+      backgroundColor="#000"
+      position="relative"
+      height={300}
+      width="100%"
+      alignItems="center"
+    >
+      <AnimatePresence initial={false} custom={{ going }}>
+        <GalleryItem key={page} transition="lazy" going={going}>
+          <Image src={photos[imageIndex]} width={500} height={300} objectFit="cover" />
+        </GalleryItem>
+      </AnimatePresence>
+
+      <Button
+        aria-label="Carousel left"
+        icon={ArrowLeft}
+        size="$5"
+        position="absolute"
+        left="$4"
+        circular
+        elevation="$4"
+        onPress={() => paginate(-1)}
+        z={100}
+      />
+
+      <Button
+        aria-label="Carousel right"
+        icon={ArrowRight}
+        size="$5"
+        position="absolute"
+        right="$4"
+        circular
+        elevation="$4"
+        onPress={() => paginate(1)}
+        z={100}
+      />
+    </XStack>
+  )
+}

package/src/App.native.tsx

@@ -0,0 +1,121 @@
+// check launch args for disabling RNGH (for testing without gesture handler)
+import { LaunchArguments } from 'react-native-launch-arguments'
+import { getGestureHandler } from '@hanzogui/native'
+
+interface TestLaunchArgs {
+  disableGestureHandler?: boolean
+}
+
+const launchArgs = LaunchArguments.value<TestLaunchArgs>()
+if (launchArgs.disableGestureHandler) {
+  getGestureHandler().disable()
+}
+
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import { KeyboardProvider } from 'react-native-keyboard-controller'
+import { Toast, ToastViewport, useToastState } from '@hanzogui/toast'
+import { useFonts } from 'expo-font'
+import { YStack } from '@hanzo/gui'
+import React from 'react'
+import { Appearance, LogBox, useColorScheme } from 'react-native'
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+import { PortalProvider } from 'react-native-teleport'
+import { Navigation } from './Navigation'
+import { Provider } from './provider'
+import { ThemeContext, type ThemeMode } from './useKitchenSinkTheme'
+import * as SplashScreen from 'expo-splash-screen'
+
+// Disable LogBox warnings to prevent them from blocking E2E tests
+// These are typically deep import warnings from react-native internals
+LogBox.ignoreAllLogs()
+
+SplashScreen.hideAsync()
+
+export default function App() {
+  const [mode, setMode] = React.useState<ThemeMode>('system')
+  const [loaded] = useFonts({
+    Inter: require('@hanzogui/font-inter/otf/Inter-Medium.otf'),
+    InterBold: require('@hanzogui/font-inter/otf/Inter-Bold.otf'),
+  })
+
+  const systemColorScheme = useColorScheme()
+
+  // Resolved theme based on mode (useColorScheme can return null on RN 0.83+)
+  const resolvedTheme = (mode === 'system' ? systemColorScheme : mode) || 'light'
+
+  // Update Appearance when mode changes (for native components)
+  React.useEffect(() => {
+    if (mode === 'system') {
+      Appearance.setColorScheme(null as any) // Follow system
+    } else {
+      Appearance.setColorScheme(mode)
+    }
+  }, [mode])
+
+  const themeContext = React.useMemo(() => {
+    return {
+      mode,
+      resolvedTheme,
+      set: setMode,
+    }
+  }, [mode, resolvedTheme])
+
+  if (!loaded) {
+    return null
+  }
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <KeyboardProvider>
+        <PortalProvider>
+          <SafeAreaProvider>
+            <ThemeContext.Provider value={themeContext}>
+              <Provider defaultTheme={resolvedTheme as any}>
+                <Navigation />
+                <SafeToastViewport />
+              </Provider>
+            </ThemeContext.Provider>
+          </SafeAreaProvider>
+        </PortalProvider>
+      </KeyboardProvider>
+    </GestureHandlerRootView>
+  )
+}
+
+const CurrentToast = () => {
+  const currentToast = useToastState()
+
+  if (!currentToast || currentToast.isHandledNatively) {
+    return null
+  }
+
+  return (
+    <Toast
+      key={currentToast.id}
+      duration={currentToast.duration}
+      viewportName={currentToast.viewportName}
+      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
+      exitStyle={{ opacity: 0, scale: 1, y: -20 }}
+      y={0}
+      opacity={1}
+      scale={1}
+    >
+      <YStack py="$1.5" px="$2">
+        <Toast.Title lineHeight="$1">{currentToast.title}</Toast.Title>
+        {!!currentToast.message && (
+          <Toast.Description>{currentToast.message}</Toast.Description>
+        )}
+      </YStack>
+    </Toast>
+  )
+}
+
+const SafeToastViewport = () => {
+  const { top } = useSafeAreaInsets()
+  return (
+    <>
+      <CurrentToast />
+      <ToastViewport top={top} left={0} right={0} />
+    </>
+  )
+}

package/src/App.tsx

@@ -0,0 +1,121 @@
+import '@hanzogui/core/reset.css'
+
+import * as Demos from '@hanzogui/demos'
+import React from 'react'
+import { Separator, Theme, XStack, YStack } from '@hanzo/gui'
+import { Provider } from './provider'
+import { Sandbox } from './Sandbox'
+import * as TestCases from './usecases/index.web'
+
+if (typeof require !== 'undefined') {
+  globalThis['React'] = require('react') // webpack
+}
+
+export default function App() {
+  const kitchenSink = new URLSearchParams(window.location.search).get('kitchen')
+  const demoComponentName = new URLSearchParams(window.location.search).get('demo')
+  const useCaseComponentName = new URLSearchParams(window.location.search).get('test')
+
+  const Component = kitchenSink
+    ? // solito breaking
+      () => null //require('../kitchen-sink/src/features/home/screen').HomeScreen
+    : demoComponentName
+      ? Demos[
+          demoComponentName.endsWith('Demo')
+            ? demoComponentName
+            : `${demoComponentName}Demo`
+        ]
+      : useCaseComponentName
+        ? TestCases[useCaseComponentName]
+        : Sandbox
+
+  return (
+    <SandboxFrame centered={!!demoComponentName}>
+      <Component />
+    </SandboxFrame>
+  )
+}
+
+const SandboxFrame = (props: { children: any; centered?: boolean }) => {
+  const params = new URLSearchParams(window.location.search)
+  const [theme, setTheme] = React.useState(
+    params.get('theme') === 'dark' ? 'dark' : 'light'
+  )
+  const [screenshot] = React.useState(params.has('screenshot'))
+  const showThemeSwitch = !screenshot
+  const splitView = params.has('splitView')
+  const centered = props.centered ?? params.has('centered')
+
+  return (
+    <Provider defaultTheme={theme as any}>
+      <link href="/fonts/inter.css" rel="stylesheet" />
+
+      {screenshot && (
+        <style
+          type="text/css"
+          dangerouslySetInnerHTML={{
+            __html: `
+            html, body, #root { background-color: transparent !important; }
+          `,
+          }}
+        />
+      )}
+
+      <style
+        type="text/css"
+        dangerouslySetInnerHTML={{
+          __html: `
+            html, body, #root { height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; }
+          `,
+        }}
+      />
+
+      <Theme name={screenshot ? 'blue' : undefined}>
+        <XStack width="100%" height="100%" fullscreen>
+          <YStack
+            {...(centered && {
+              items: 'center',
+              justify: 'center',
+            })}
+            flex={1}
+            height="100%"
+          >
+            {props.children}
+          </YStack>
+
+          {splitView ? (
+            <>
+              <Separator vertical />
+              <Theme name="dark">
+                <YStack
+                  flex={1}
+                  {...(centered && {
+                    items: 'center',
+                    justify: 'center',
+                    height: '100%',
+                  })}
+                  bg={screenshot ? 'transparent' : '$background'}
+                >
+                  {props.children}
+                </YStack>
+              </Theme>
+            </>
+          ) : null}
+        </XStack>
+      </Theme>
+      {showThemeSwitch && (
+        <div
+          style={{
+            position: 'fixed',
+            bottom: 30,
+            left: 20,
+            fontSize: 30,
+          }}
+          onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+        >
+          🌗
+        </div>
+      )}
+    </Provider>
+  )
+}

package/src/Navigation.tsx

@@ -0,0 +1,98 @@
+import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { Sandbox } from './Sandbox'
+import { DemoScreen } from './features/demos/demo-screen'
+import { ColorSchemeToggle } from './features/home/ColorSchemeListItem'
+import { HomeScreen } from './features/home/screen'
+import { TestCasesScreen } from './features/testcases/screen'
+import { TestScreen } from './features/testcases/test-screen'
+import { useThemeControl } from './useKitchenSinkTheme'
+
+const Stack = createNativeStackNavigator<{
+  home: undefined
+  demo: {
+    id: string
+  }
+  tests: undefined
+  test: {
+    id: string
+  }
+  sandbox: undefined
+}>()
+
+const linking = {
+  prefixes: [],
+  config: {
+    screens: {
+      home: '',
+      sandbox: 'sandbox',
+      demo: 'demo/:id',
+      tests: 'tests',
+      test: 'test/:id',
+    },
+  },
+}
+
+export function Navigation() {
+  const { resolvedTheme } = useThemeControl()
+
+  return (
+    <NavigationContainer
+      linking={linking}
+      theme={resolvedTheme === 'dark' ? DarkTheme : DefaultTheme}
+    >
+      <Stack.Navigator initialRouteName="home">
+        <Stack.Screen
+          name="home"
+          component={HomeScreen}
+          options={{
+            title: 'Home',
+            headerRight() {
+              return <ColorSchemeToggle />
+            },
+          }}
+        />
+        <Stack.Screen
+          name="sandbox"
+          component={Sandbox}
+          options={{
+            title: 'Sandbox',
+            headerRight() {
+              return <ColorSchemeToggle />
+            },
+          }}
+        />
+        <Stack.Screen
+          name="demo"
+          component={DemoScreen}
+          options={{
+            title: 'Demo',
+            headerRight() {
+              return <ColorSchemeToggle />
+            },
+          }}
+        />
+        <Stack.Screen
+          name="tests"
+          component={TestCasesScreen}
+          options={{
+            title: 'Test Cases',
+            headerRight() {
+              return <ColorSchemeToggle />
+            },
+          }}
+        />
+        <Stack.Screen
+          name="test"
+          component={TestScreen}
+          options={{
+            title: 'Test Case',
+            headerRight() {
+              return <ColorSchemeToggle />
+            },
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  )
+}

package/src/Sandbox.tsx

@@ -0,0 +1,87 @@
+import {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Heading,
+  Paragraph,
+  SizableText,
+  ScrollView,
+  XStack,
+  YStack,
+} from '@hanzo/gui'
+
+const lorem =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.'
+
+const sizes = ['$1', '$2', '$3', '$4', '$5', '$6', '$7', '$8', '$9', '$10'] as const
+
+export const Sandbox = () => {
+  return (
+    <ScrollView flex={1} width="100%" contentContainerStyle={{ padding: 20 }}>
+      <YStack gap="$6" maxWidth={800}>
+        <YStack gap="$4">
+          <Heading size="$8" marginBottom="$2">
+            SizableText Sizes
+          </Heading>
+          {sizes.map((size) => (
+            <YStack key={size} gap="$1">
+              <SizableText size="$2" opacity={0.5}>
+                size="{size}"
+              </SizableText>
+              <SizableText size={size}>{lorem}</SizableText>
+            </YStack>
+          ))}
+        </YStack>
+
+        <YStack gap="$4">
+          <Heading size="$8" marginBottom="$2">
+            Heading Sizes
+          </Heading>
+          {sizes.map((size) => (
+            <YStack key={size} gap="$1">
+              <SizableText size="$2" opacity={0.5}>
+                Heading size="{size}"
+              </SizableText>
+              <Heading size={size}>{lorem}</Heading>
+            </YStack>
+          ))}
+        </YStack>
+
+        <YStack gap="$4">
+          <Heading size="$8" marginBottom="$2">
+            H1-H6 Components
+          </Heading>
+          <YStack gap="$3">
+            <SizableText size="$2" opacity={0.5}>
+              H1
+            </SizableText>
+            <H1>{lorem}</H1>
+            <SizableText size="$2" opacity={0.5}>
+              H2
+            </SizableText>
+            <H2>{lorem}</H2>
+            <SizableText size="$2" opacity={0.5}>
+              H3
+            </SizableText>
+            <H3>{lorem}</H3>
+            <SizableText size="$2" opacity={0.5}>
+              H4
+            </SizableText>
+            <H4>{lorem}</H4>
+            <SizableText size="$2" opacity={0.5}>
+              H5
+            </SizableText>
+            <H5>{lorem}</H5>
+            <SizableText size="$2" opacity={0.5}>
+              H6
+            </SizableText>
+            <H6>{lorem}</H6>
+          </YStack>
+        </YStack>
+      </YStack>
+    </ScrollView>
+  )
+}

package/src/TestDynamicEval.tsx

@@ -0,0 +1,33 @@
+// import { useTheme } from '@hanzogui/core'
+// import { SafeAreaView, ScrollView } from 'react-native'
+
+// import Box from './components/Box'
+// import Button from './components/Button'
+// import Heading from './components/Heading'
+// import ThemeSwitcher from './components/ThemeSwitcher'
+
+// type Props = {
+//   onSwitchTheme: () => void
+// }
+
+// const Home = ({ onSwitchTheme }: Props) => {
+//   const theme = useTheme()
+
+//   return (
+//     <SafeAreaView style={{ flex: 1, backgroundColor: theme.background.val }}>
+//       <Box flex={1} bg="$background" gap="$0">
+//         <Box py="$xs" fd="row" ai="center" px="$0" jc="space-between">
+//           <Heading size="h1">Weather app</Heading>
+//           <ThemeSwitcher onSwitch={onSwitchTheme} />
+//         </Box>
+//         <ScrollView showsVerticalScrollIndicator={false}>
+//           <Box gap="$3" px="$0">
+//             <Button title="Hello" type="primary" centered />
+//           </Box>
+//         </ScrollView>
+//       </Box>
+//     </SafeAreaView>
+//   )
+// }
+
+// export default Home