@hanzogui/kitchen-sink 3.0.5

package/src/features/testcases/screen.tsx

@@ -0,0 +1,59 @@
+import { ChevronRight } from '@hanzogui/lucide-icons-2'
+import { ScrollView } from 'react-native'
+import type { UseLinkProps } from 'solito/link'
+import { useLink } from 'solito/link'
+import type { ListItemProps } from '@hanzo/gui'
+import { H2, ListItem, YGroup, YStack } from '@hanzo/gui'
+
+import * as TestCases from '../../usecases'
+
+export function TestCasesScreen() {
+  return (
+    <ScrollView testID="test-cases-scroll-view">
+      <YStack bg="$background" p="$3" pt="$6" pb="$8" flex={1} gap="$4">
+        <H2>All Test Cases</H2>
+        <YStack gap="$4" maxW={600}>
+          <YGroup size="$4">
+            {Object.keys(TestCases).map((page) => {
+              return (
+                <YGroup.Item key={page}>
+                  <LinkListItem
+                    href={`/test/${page}`}
+                    size="$4"
+                    testID={`test-case-${page}`}
+                  >
+                    {page}
+                  </LinkListItem>
+                </YGroup.Item>
+              )
+            })}
+          </YGroup>
+        </YStack>
+      </YStack>
+    </ScrollView>
+  )
+}
+
+const LinkListItem = ({
+  children,
+  href,
+  as,
+  shallow,
+  ...props
+}: UseLinkProps & ListItemProps) => {
+  const linkProps = useLink({ href, as, shallow })
+
+  return (
+    <ListItem
+      {...linkProps}
+      backgroundColor="$color1"
+      onPress={(e) => {
+        linkProps.onPress(e)
+      }}
+      {...props}
+      iconAfter={ChevronRight}
+    >
+      {children}
+    </ListItem>
+  )
+}

package/src/features/testcases/test-screen.tsx

@@ -0,0 +1,50 @@
+import { ScrollView } from 'react-native'
+import { createParam } from 'solito'
+import { H1, YStack } from '@hanzo/gui'
+
+import * as UseCases from '../../usecases'
+
+const { useParam } = createParam<{ id: string }>()
+
+const nameMap = {
+  Inputs: 'Inputs',
+}
+
+export function TestScreen() {
+  const [id] = useParam('id')
+
+  if (!id) {
+    return null
+  }
+
+  const name = id
+    .split('-')
+    .map((segment) => {
+      return segment[0].toUpperCase() + segment.slice(1)
+    })
+    .join('')
+
+  const testName = `${nameMap[name] || name}`
+  const DemoComponent = UseCases[testName] ?? NotFound
+
+  return (
+    <ScrollView style={{ height: '100%' }}>
+      <YStack
+        outlineStyle="solid"
+        outlineColor="red"
+        outlineWidth="$2"
+        flex={1}
+        justify="center"
+        items="center"
+        bg="$background"
+        gap="$4"
+      >
+        <YStack minW={200} maxW={600} items="center" p="$4" rounded="$6">
+          <DemoComponent />
+        </YStack>
+      </YStack>
+    </ScrollView>
+  )
+}
+
+const NotFound = () => <H1>Not found!</H1>

package/src/generatedV5Theme.ts

@@ -0,0 +1,112 @@
+/**
+ * This file was generated by the gui.hanzo.ai/theme builder.
+ * It tests that the v5 theme builder output works correctly.
+ *
+ * To test with your own theme:
+ * 1. Go to gui.hanzo.ai/theme and create your theme
+ * 2. Export the generated code and replace this file's contents
+ * 3. Run: yarn start:web and open http://localhost:9000/?test=V5ThemeBuilderOutput&generatedV5=true
+ */
+import { createV5Theme, defaultChildrenThemes } from '@hanzogui/config/v5'
+import { v5ComponentThemes } from '@hanzogui/themes/v5'
+import { yellow, yellowDark, red, redDark, green, greenDark } from '@hanzogui/colors'
+
+const darkPalette = [
+  'hsla(0, 15%, 1%, 1)',
+  'hsla(0, 15%, 6%, 1)',
+  'hsla(0, 15%, 12%, 1)',
+  'hsla(0, 15%, 17%, 1)',
+  'hsla(0, 15%, 23%, 1)',
+  'hsla(0, 15%, 28%, 1)',
+  'hsla(0, 15%, 34%, 1)',
+  'hsla(0, 15%, 39%, 1)',
+  'hsla(0, 15%, 45%, 1)',
+  'hsla(0, 15%, 50%, 1)',
+  'hsla(0, 15%, 93%, 1)',
+  'hsla(0, 15%, 99%, 1)',
+]
+const lightPalette = [
+  'hsla(0, 15%, 99%, 1)',
+  'hsla(0, 15%, 94%, 1)',
+  'hsla(0, 15%, 88%, 1)',
+  'hsla(0, 15%, 83%, 1)',
+  'hsla(0, 15%, 77%, 1)',
+  'hsla(0, 15%, 72%, 1)',
+  'hsla(0, 15%, 66%, 1)',
+  'hsla(0, 15%, 61%, 1)',
+  'hsla(0, 15%, 55%, 1)',
+  'hsla(0, 15%, 50%, 1)',
+  'hsla(0, 15%, 15%, 1)',
+  'hsla(0, 15%, 1%, 1)',
+]
+
+// Your custom accent color theme
+const accentLight = {
+  accent1: 'hsla(250, 50%, 40%, 1)',
+  accent2: 'hsla(250, 50%, 43%, 1)',
+  accent3: 'hsla(250, 50%, 46%, 1)',
+  accent4: 'hsla(250, 50%, 48%, 1)',
+  accent5: 'hsla(250, 50%, 51%, 1)',
+  accent6: 'hsla(250, 50%, 54%, 1)',
+  accent7: 'hsla(250, 50%, 57%, 1)',
+  accent8: 'hsla(250, 50%, 59%, 1)',
+  accent9: 'hsla(250, 50%, 62%, 1)',
+  accent10: 'hsla(250, 50%, 65%, 1)',
+  accent11: 'hsla(250, 50%, 95%, 1)',
+  accent12: 'hsla(250, 50%, 95%, 1)',
+}
+
+const accentDark = {
+  accent1: 'hsla(250, 50%, 35%, 1)',
+  accent2: 'hsla(250, 50%, 38%, 1)',
+  accent3: 'hsla(250, 50%, 41%, 1)',
+  accent4: 'hsla(250, 50%, 43%, 1)',
+  accent5: 'hsla(250, 50%, 46%, 1)',
+  accent6: 'hsla(250, 50%, 49%, 1)',
+  accent7: 'hsla(250, 50%, 52%, 1)',
+  accent8: 'hsla(250, 50%, 54%, 1)',
+  accent9: 'hsla(250, 50%, 57%, 1)',
+  accent10: 'hsla(250, 50%, 60%, 1)',
+  accent11: 'hsla(250, 50%, 90%, 1)',
+  accent12: 'hsla(250, 50%, 95%, 1)',
+}
+
+const builtThemes = createV5Theme({
+  darkPalette,
+  lightPalette,
+  componentThemes: v5ComponentThemes,
+  accent: {
+    light: accentLight,
+    dark: accentDark,
+  },
+  childrenThemes: {
+    // Include default color themes (blue, red, green, yellow, etc.)
+    ...defaultChildrenThemes,
+
+    // Semantic color themes for warnings, errors, and success states
+    warning: {
+      light: yellow,
+      dark: yellowDark,
+    },
+    error: {
+      light: red,
+      dark: redDark,
+    },
+    success: {
+      light: green,
+      dark: greenDark,
+    },
+  },
+})
+
+export type Themes = typeof builtThemes
+
+// the process.env conditional here is optional but saves web client-side bundle
+// size by leaving out themes JS. hanzo-gui automatically hydrates themes from CSS
+// back into JS for you, and the bundler plugins set HANZO_GUI_ENVIRONMENT. so
+// long as you are using the Vite, Next, Webpack plugins this should just work,
+// but if not you can just export builtThemes directly as themes:
+export const themes: Themes =
+  process.env.HANZO_GUI_ENVIRONMENT === 'client' && process.env.NODE_ENV === 'production'
+    ? ({} as any)
+    : (builtThemes as any)

package/src/gui.config.ts

@@ -0,0 +1,411 @@
+import { createAnimations as createAnimationsCSS } from '@hanzogui/animations-css'
+import { createAnimations as createAnimationsMotion } from '@hanzogui/animations-motion'
+import { createAnimations as createAnimationsNative } from '@hanzogui/animations-react-native'
+import { createAnimations as createAnimationsReanimated } from '@hanzogui/animations-reanimated'
+import { config } from '@hanzogui/config/v3'
+import { defaultConfig as configV4, shorthands } from '@hanzogui/config/v4'
+import { defaultConfig } from '@hanzogui/config/v5'
+import { guiThemes } from '@hanzogui/themes/v4'
+import { createGui, type CreateGuiProps } from '@hanzo/gui'
+// TODO just move this into this folder
+import { config as guiDevConfig } from '../../packages/gui-dev-config/src/index'
+import { themeDev } from '../../packages/gui-dev-config/src/theme.dev'
+// Generated theme from v5 theme builder for testing
+import { themes as generatedV5Themes } from './generatedV5Theme'
+
+export const animationsCSS = createAnimationsCSS({
+  '0ms': '0ms linear',
+  '30ms': '30ms linear',
+  '50ms': '50ms linear',
+  '75ms': '75ms linear',
+  '100ms': '100ms ease-out',
+  '200ms': '200ms linear',
+  '250ms': '250ms ease-out',
+  '300ms': '300ms ease-out',
+  '400ms': '400ms ease-out',
+  '500ms': '500ms ease-out',
+  '1000ms': '1000ms linear',
+  bouncy: 'ease-in 200ms',
+  lazy: 'ease-in 600ms',
+  slow: 'ease-in 500ms',
+  quick: 'ease-in 100ms',
+  quicker: 'cubic-bezier(0.215, 0.610, 0.355, 1.000) 300ms',
+  quickest: 'ease-in 50ms',
+  tooltip: 'ease-in 400ms',
+  medium: 'ease-in 400ms',
+})
+
+export const animationsMotion = createAnimationsMotion({
+  '0ms': {
+    duration: 0,
+  },
+  '30ms': {
+    duration: 30,
+  },
+  '50ms': {
+    duration: 50,
+  },
+  '75ms': {
+    duration: 75,
+  },
+  '100ms': {
+    duration: 100,
+  },
+  '200ms': {
+    duration: 200,
+  },
+  '250ms': {
+    duration: 250,
+  },
+  '300ms': {
+    duration: 300,
+  },
+  '400ms': {
+    duration: 400,
+  },
+  '500ms': {
+    duration: 500,
+  },
+  '1000ms': {
+    duration: 1000,
+  },
+  bouncy: {
+    type: 'spring',
+    damping: 9,
+    mass: 0.9,
+    stiffness: 150,
+  },
+  lazy: {
+    type: 'spring',
+    damping: 18,
+    stiffness: 50,
+  },
+  slow: {
+    type: 'spring',
+    damping: 15,
+    stiffness: 40,
+  },
+  quick: {
+    type: 'spring',
+    damping: 20,
+    mass: 1.2,
+    stiffness: 250,
+  },
+  quicker: {
+    type: 'spring',
+    damping: 20,
+    mass: 1,
+    stiffness: 300,
+  },
+  quickest: {
+    type: 'spring',
+    damping: 14,
+    mass: 0.1,
+    stiffness: 380,
+  },
+  medium: {
+    damping: 15,
+    stiffness: 120,
+    mass: 1,
+  },
+  tooltip: {
+    type: 'spring',
+    damping: 10,
+    mass: 0.9,
+    stiffness: 100,
+  },
+})
+
+export const animationsNative = createAnimationsNative({
+  '0ms': {
+    type: 'timing',
+    duration: 0,
+  },
+  '30ms': {
+    type: 'timing',
+    duration: 30,
+  },
+  '50ms': {
+    type: 'timing',
+    duration: 50,
+  },
+  '75ms': {
+    type: 'timing',
+    duration: 75,
+  },
+  '100ms': {
+    type: 'timing',
+    duration: 100,
+  },
+  '200ms': {
+    type: 'timing',
+    duration: 200,
+  },
+  '250ms': {
+    type: 'timing',
+    duration: 250,
+  },
+  '300ms': {
+    type: 'timing',
+    duration: 300,
+  },
+  '400ms': {
+    type: 'timing',
+    duration: 400,
+  },
+  '500ms': {
+    type: 'timing',
+    duration: 500,
+  },
+  '1000ms': {
+    type: 'timing',
+    duration: 1000,
+  },
+  bouncy: {
+    type: 'spring',
+    damping: 9,
+    mass: 0.9,
+    stiffness: 150,
+  },
+  lazy: {
+    type: 'spring',
+    damping: 18,
+    stiffness: 50,
+  },
+  slow: {
+    type: 'spring',
+    damping: 15,
+    stiffness: 40,
+  },
+  quick: {
+    type: 'spring',
+    damping: 20,
+    mass: 1.2,
+    stiffness: 250,
+  },
+  quicker: {
+    type: 'spring',
+    damping: 20,
+    mass: 1,
+    stiffness: 300,
+  },
+  quickest: {
+    type: 'spring',
+    damping: 14,
+    mass: 0.1,
+    stiffness: 380,
+  },
+  medium: {
+    damping: 15,
+    stiffness: 120,
+    mass: 1,
+  },
+  tooltip: {
+    type: 'spring',
+    damping: 10,
+    mass: 0.9,
+    stiffness: 100,
+  },
+})
+
+export const animationsReanimated = createAnimationsReanimated({
+  '0ms': {
+    type: 'timing',
+    duration: 0,
+  },
+  '30ms': {
+    type: 'timing',
+    duration: 30,
+  },
+  '50ms': {
+    type: 'timing',
+    duration: 50,
+  },
+  '75ms': {
+    type: 'timing',
+    duration: 75,
+  },
+  '100ms': {
+    type: 'timing',
+    duration: 100,
+  },
+  '200ms': {
+    type: 'timing',
+    duration: 200,
+  },
+  '250ms': {
+    type: 'timing',
+    duration: 250,
+  },
+  '300ms': {
+    type: 'timing',
+    duration: 300,
+  },
+  '400ms': {
+    type: 'timing',
+    duration: 400,
+  },
+  '500ms': {
+    type: 'timing',
+    duration: 500,
+  },
+  '1000ms': {
+    type: 'timing',
+    duration: 1000,
+  },
+  bouncy: {
+    type: 'spring',
+    damping: 9,
+    mass: 0.9,
+    stiffness: 150,
+  },
+  lazy: {
+    type: 'spring',
+    damping: 18,
+    stiffness: 50,
+  },
+  slow: {
+    type: 'spring',
+    damping: 15,
+    stiffness: 40,
+  },
+  quick: {
+    type: 'spring',
+    damping: 20,
+    mass: 1.2,
+    stiffness: 250,
+  },
+  quicker: {
+    type: 'spring',
+    damping: 20,
+    mass: 1,
+    stiffness: 300,
+  },
+  quickest: {
+    type: 'spring',
+    damping: 14,
+    mass: 0.1,
+    stiffness: 380,
+  },
+  medium: {
+    damping: 15,
+    stiffness: 120,
+    mass: 1,
+  },
+  tooltip: {
+    type: 'spring',
+    damping: 10,
+    mass: 0.9,
+    stiffness: 100,
+  },
+})
+
+// this is used by the button test...
+config.themes = {
+  ...config.themes,
+
+  // @ts-ignore
+  light_green_Button: {
+    // @ts-ignore
+    ...config.themes.light_green_Button,
+    background: 'green',
+  },
+
+  // @ts-ignore
+  light_MyLabel: {
+    color: 'red',
+  },
+
+  // Test theme for Issue #3620: color tokens should be fallbacks, not overrides
+  // This theme overrides customRed to be green, to verify theme values take precedence
+  // @ts-ignore
+  light_ColorTokenTest: {
+    background: '#ffffff',
+    customRed: '#00ff00', // Override the color token (which is #ff0000) with green
+  },
+}
+
+const search = (typeof window !== 'undefined' && globalThis.location?.search) || ''
+
+const useV4Themes = search.includes('v4theme=true')
+const v5config = search.includes('v5config')
+const tamav5Config = search.includes('tamav5config')
+const generatedV5 = search.includes('generatedV5')
+
+const tokens = {
+  ...config.tokens,
+  color: {
+    ...config.tokens.color,
+    testsomethingdifferent: '#ff0000',
+    customRed: '#ff0000',
+    customBlue: '#0000ff',
+    customGreen: '#00ff00',
+  },
+  // size: {
+  //   0: 10,
+  // },
+}
+
+// multi-driver config for testing animatedBy prop and driver selection
+const animationsMultiDriver = {
+  default: animationsMotion,
+  css: animationsCSS,
+}
+
+const animations = search.includes('animationDriver=css')
+  ? animationsCSS
+  : search.includes('animationDriver=native')
+    ? animationsNative
+    : search.includes('animationDriver=motion')
+      ? animationsMotion
+      : search.includes('animationDriver=multi')
+        ? animationsMultiDriver
+        : animationsReanimated
+
+const tamaConf = createGui({
+  ...config,
+  // Use v4 themes when ?v4theme=true is in the URL
+  themes: useV4Themes
+    ? guiThemes
+    : {
+        ...config.themes,
+        ...themeDev,
+      },
+  shorthands: shorthands,
+  settings: {
+    defaultFont: '$body',
+    allowedStyleValues: 'somewhat-strict',
+    autocompleteSpecificTokens: 'except-special',
+    fastSchemeChange: true,
+  },
+  tokens,
+  media: {
+    ...configV4.media, // adds max queries
+    ...config.media,
+  },
+  animations, // default reanimated
+
+  defaultProps: {
+    Square: {
+      backgroundColor: 'violet',
+    },
+  },
+})
+
+export type Conf = typeof tamaConf
+
+declare module '@hanzo/gui' {
+  interface GuiCustomConfig extends Conf {}
+
+  interface TypeOverride {
+    groupNames(): 'testy'
+  }
+}
+
+export default tamav5Config
+  ? createGui(guiDevConfig)
+  : generatedV5
+    ? createGui({ ...defaultConfig, themes: generatedV5Themes, animations })
+    : v5config
+      ? createGui({ ...defaultConfig, animations })
+      : tamaConf

package/src/index.tsx

@@ -0,0 +1,6 @@
+import { createRoot } from 'react-dom/client'
+
+import App from './App'
+
+// AppRegistry.registerComponent('main', () => App)
+createRoot(document.querySelector('#root')!).render(<App />)

package/src/provider/index.tsx

@@ -0,0 +1,18 @@
+import type { GuiProviderProps } from '@hanzo/gui'
+import { GuiProvider } from '@hanzo/gui'
+import { ToastProvider } from '@hanzogui/toast'
+
+import config from '../gui.config'
+
+export function Provider({
+  children,
+  ...rest
+}: Omit<Partial<GuiProviderProps>, 'config'>) {
+  return (
+    <GuiProvider config={config} defaultTheme="light" {...rest}>
+      <ToastProvider swipeDirection="horizontal" duration={5000}>
+        {children}
+      </ToastProvider>
+    </GuiProvider>
+  )
+}

package/src/test-gui-stack.tsx

@@ -0,0 +1,11 @@
+import { AppRegistry, View } from 'react-native'
+
+AppRegistry.registerComponent('main', () => Root)
+
+function Root() {
+  return (
+    <>
+      <View style={{ backgroundColor: 'red', width: 100, height: 100 }} />
+    </>
+  )
+}

package/src/test.tsx

@@ -0,0 +1,3 @@
+import { View } from '@hanzo/gui'
+
+export default () => <View style={{ backgroundColor: 'red' }} />

package/src/useKitchenSinkTheme.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import type { ColorSchemeName } from 'react-native'
+import { Appearance } from 'react-native'
+
+export type ThemeMode = 'system' | 'light' | 'dark'
+
+export const ThemeContext = React.createContext({
+  mode: 'system' as ThemeMode,
+  resolvedTheme: Appearance.getColorScheme() as ColorSchemeName,
+  set(next: ThemeMode) {},
+})
+
+export const useThemeControl = () => {
+  return React.useContext(ThemeContext)
+}