@hanzogui/web 2.0.0

package/src/insertFont.ts

@@ -0,0 +1,81 @@
+import { setConfigFont } from './config'
+import { FONT_DATA_ATTRIBUTE_NAME } from './constants/constants'
+import { createFont } from './createFont'
+import type { DeepVariableObject } from './createVariables'
+import { createVariables } from './createVariables'
+import { registerCSSVariable, variableToCSS } from './helpers/registerCSSVariable'
+import type { GenericFont, Variable } from './types'
+
+/**
+ * Runtime dynamic insert font
+ */
+export function insertFont<A extends GenericFont>(
+  name: string,
+  fontIn: A
+): DeepVariableObject<A> {
+  const font = createFont(fontIn)
+  const tokened = createVariables(font, name) as GenericFont
+  const parsed = parseFont(tokened) as DeepVariableObject<A>
+  if (process.env.HANZO_GUI_TARGET === 'web' && typeof document !== 'undefined') {
+    const fontVars = registerFontVariables(parsed)
+    const styleElement: HTMLStyleElement =
+      document.querySelector(`style[${FONT_DATA_ATTRIBUTE_NAME}="${name}"]`) ||
+      document.createElement('style')
+    styleElement.innerText = `:root .font_${name} {${fontVars.join(';')}}`
+    styleElement.setAttribute(FONT_DATA_ATTRIBUTE_NAME, name)
+    document.head.appendChild(styleElement)
+  }
+  setConfigFont(name, tokened, parsed)
+  return parsed
+}
+
+export const updateFont = insertFont
+
+export function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {
+  const parsed: any = {}
+  for (const attrKey in definition) {
+    const attr = definition[attrKey]
+    if (attrKey === 'family' || attrKey === 'face') {
+      parsed[attrKey] = attr
+    } else {
+      parsed[attrKey] = {}
+      for (const key in attr) {
+        let val = attr[key] as any
+        // is a theme reference
+        if (val.val?.[0] === '$') {
+          val = val.val
+        }
+        parsed[attrKey][`$${key}`] = val
+      }
+    }
+  }
+  return parsed
+}
+
+export function registerFontVariables(parsedFont: any) {
+  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+    const response: string[] = []
+
+    for (const fkey in parsedFont) {
+      if (fkey === 'face') continue
+      if (fkey === 'family') {
+        const val = parsedFont[fkey] as Variable
+        registerCSSVariable(val)
+        response.push(variableToCSS(val))
+      } else {
+        for (const fskey in parsedFont[fkey]) {
+          const fval = parsedFont[fkey][fskey]
+          if (typeof fval === 'string') {
+            // no need to add its a theme reference like "$borderColor"
+          } else {
+            const val = parsedFont[fkey][fskey] as Variable
+            registerCSSVariable(val)
+            response.push(variableToCSS(val))
+          }
+        }
+      }
+    }
+    return response
+  }
+  return []
+}

package/src/interfaces/CSSColorNames.tsx

@@ -0,0 +1,149 @@
+export type CSSColorNames =
+  | 'aliceblue'
+  | 'antiquewhite'
+  | 'aqua'
+  | 'aquamarine'
+  | 'azure'
+  | 'beige'
+  | 'bisque'
+  | 'black'
+  | 'blanchedalmond'
+  | 'blue'
+  | 'blueviolet'
+  | 'brown'
+  | 'burlywood'
+  | 'cadetblue'
+  | 'chartreuse'
+  | 'chocolate'
+  | 'coral'
+  | 'cornflowerblue'
+  | 'cornsilk'
+  | 'crimson'
+  | 'cyan'
+  | 'darkblue'
+  | 'darkcyan'
+  | 'darkgoldenrod'
+  | 'darkgray'
+  | 'darkgreen'
+  | 'darkgrey'
+  | 'darkkhaki'
+  | 'darkmagenta'
+  | 'darkolivegreen'
+  | 'darkorange'
+  | 'darkorchid'
+  | 'darkred'
+  | 'darksalmon'
+  | 'darkseagreen'
+  | 'darkslateblue'
+  | 'darkslategray'
+  | 'darkslategrey'
+  | 'darkturquoise'
+  | 'darkviolet'
+  | 'deeppink'
+  | 'deepskyblue'
+  | 'dimgray'
+  | 'dimgrey'
+  | 'dodgerblue'
+  | 'firebrick'
+  | 'floralwhite'
+  | 'forestgreen'
+  | 'fuchsia'
+  | 'gainsboro'
+  | 'ghostwhite'
+  | 'gold'
+  | 'goldenrod'
+  | 'gray'
+  | 'green'
+  | 'greenyellow'
+  | 'grey'
+  | 'honeydew'
+  | 'hotpink'
+  | 'indianred '
+  | 'indigo'
+  | 'ivory'
+  | 'khaki'
+  | 'lavender'
+  | 'lavenderblush'
+  | 'lawngreen'
+  | 'lemonchiffon'
+  | 'lightblue'
+  | 'lightcoral'
+  | 'lightcyan'
+  | 'lightgoldenrodyellow'
+  | 'lightgray'
+  | 'lightgreen'
+  | 'lightgrey'
+  | 'lightpink'
+  | 'lightsalmon'
+  | 'lightseagreen'
+  | 'lightskyblue'
+  | 'lightslategray'
+  | 'lightslategrey'
+  | 'lightsteelblue'
+  | 'lightyellow'
+  | 'lime'
+  | 'limegreen'
+  | 'linen'
+  | 'magenta'
+  | 'maroon'
+  | 'mediumaquamarine'
+  | 'mediumblue'
+  | 'mediumorchid'
+  | 'mediumpurple'
+  | 'mediumseagreen'
+  | 'mediumslateblue'
+  | 'mediumspringgreen'
+  | 'mediumturquoise'
+  | 'mediumvioletred'
+  | 'midnightblue'
+  | 'mintcream'
+  | 'mistyrose'
+  | 'moccasin'
+  | 'navajowhite'
+  | 'navy'
+  | 'oldlace'
+  | 'olive'
+  | 'olivedrab'
+  | 'orange'
+  | 'orangered'
+  | 'orchid'
+  | 'palegoldenrod'
+  | 'palegreen'
+  | 'paleturquoise'
+  | 'palevioletred'
+  | 'papayawhip'
+  | 'peachpuff'
+  | 'peru'
+  | 'pink'
+  | 'plum'
+  | 'powderblue'
+  | 'purple'
+  | 'rebeccapurple'
+  | 'red'
+  | 'rosybrown'
+  | 'royalblue'
+  | 'saddlebrown'
+  | 'salmon'
+  | 'sandybrown'
+  | 'seagreen'
+  | 'seashell'
+  | 'sienna'
+  | 'silver'
+  | 'skyblue'
+  | 'slateblue'
+  | 'slategray'
+  | 'slategrey'
+  | 'snow'
+  | 'springgreen'
+  | 'steelblue'
+  | 'tan'
+  | 'teal'
+  | 'thistle'
+  | 'tomato'
+  | 'turquoise'
+  | 'violet'
+  | 'wheat'
+  | 'white'
+  | 'whitesmoke'
+  | 'yellow'
+  | 'yellowgreen'

package/src/interfaces/GetRef.tsx

@@ -0,0 +1,24 @@
+import type { Component, JSX, JSXElementConstructor, Ref } from 'react'
+
+import type { GuiComponent } from '../types'
+
+// gets the ref type of any type of react component
+
+export type GetRef<C> =
+  C extends GuiComponent<any, infer Ref>
+    ? Ref
+    : C extends new (props: any) => Component
+      ? InstanceType<C>
+      : C extends abstract new (...args: any) => any
+        ? InstanceType<C>
+        : C extends Component
+          ? C
+          : (
+                C extends JSXElementConstructor<{ ref?: infer R }>
+                  ? R
+                  : C extends keyof JSX.IntrinsicElements
+                    ? JSX.IntrinsicElements[C]['ref']
+                    : unknown
+              ) extends Ref<infer T> | string | undefined
+            ? T
+            : unknown

package/src/interfaces/GuiComponentEvents.tsx

@@ -0,0 +1,18 @@
+export type GuiComponentEvents = {
+  cancelable?: boolean | undefined
+  disabled?: any
+  hitSlop?: any
+  delayLongPress?: any
+  delayPressIn?: any
+  delayPressOut?: any
+  focusable?: any
+  minPressDuration?: number | undefined
+  onPressIn: ((e: any) => void) | undefined
+  onPress: ((e: any) => void) | undefined
+  onLongPress?: ((e: any) => void) | undefined
+  onMouseEnter?: ((e: any) => void) | undefined
+  onMouseLeave?: ((e: any) => void) | undefined
+  onPressOut: ((e: any) => void) | undefined
+  onFocus?: ((e: any) => void) | undefined
+  onBlur?: ((e: any) => void) | undefined
+}

package/src/interfaces/GuiComponentPropsBaseBase.tsx

@@ -0,0 +1,124 @@
+import type {
+  DebugProp,
+  ThemeName,
+  GroupNames,
+  Role,
+  GuiComponentState,
+} from '../types'
+
+export type GuiComponentPropsBaseBase = {
+  target?: string
+
+  htmlFor?: string
+
+  /**
+   * When truthy passes through all props to a single child element, and avoids rendering its own element.
+   * Must pass just one child React element that will receive all the props.
+   *
+   * The option "except-style" will avoid passing any style related props.
+   *
+   * The option "web" will map all React Native style props to web props (onPress becomes onClick).
+   *
+   * The option "except-style-web" combines the except-style and web options.
+   *
+   */
+  asChild?: boolean | 'except-style' | 'except-style-web' | 'web'
+
+  dangerouslySetInnerHTML?: { __html: string }
+  children?: any | any[]
+
+  debug?: DebugProp
+
+  disabled?: boolean
+
+  /**
+   * Same as the web className property, useful for applying styles from CSS on web only
+   */
+  className?: string
+
+  /**
+   * If given a theme it will only apply to this element, instead of passing down to children
+   */
+  themeShallow?: boolean
+
+  /**
+   * Same as the web id property for setting a uid on an element
+   */
+  id?: string
+
+  /**
+   * Controls the rendered element on web.
+   * - String: renders as that HTML element (e.g., `render="button"`)
+   * - JSX Element: clones element with merged props (e.g., `render={<a href="/" />}`)
+   * - Function: full control with props and state (e.g., `render={(props) => <Custom {...props} />}`)
+   */
+  render?:
+    | keyof HTMLElementTagNameMap
+    | (string & {})
+    | React.ReactElement
+    | ((
+        props: Record<string, any> & { ref?: React.Ref<any> },
+        state: GuiComponentState
+      ) => React.ReactElement)
+
+  /**
+   * Applies a theme to this element
+   */
+  theme?: ThemeName | null
+
+  /**
+   * Marks this component as a group for use in styling children based on parents named group
+   * See: https://gui.hanzo.ai/docs/intro/props
+   */
+  group?: GroupNames | boolean
+
+  /**
+   * Works only alongside group, when children of the group are using container based sizing on native you can hide them until parent is measured.
+   * See: https://gui.hanzo.ai/docs/intro/props
+   */
+  untilMeasured?: 'hide' | 'show'
+
+  /**
+   * Equivalent to "name" property on styled() for automatically applying a theme
+   */
+  componentName?: string
+
+  /**
+   * Used for controlling the order of focus with keyboard or assistive device enavigation
+   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
+  tabIndex?: string | number
+
+  /**
+   * Equivalent to role="" attribute on web for accessibility
+   */
+  role?: Role
+
+  /**
+   * Disable all compiler optimization
+   */
+  disableOptimization?: boolean
+
+  /**
+   * Forces the pseudo style state to be on
+   */
+  forceStyle?: 'hover' | 'press' | 'focus' | 'focusVisible' | 'focusWithin'
+
+  /**
+   * Disables className output of styles, instead using only inline styles
+   */
+  disableClassName?: boolean
+
+  /**
+   * Adds some area outside the typical bounds of the component for touch actions to register.
+   * Hanzo GUI uses Pressable internally so it supports `number | Insets` rather than just `Insets`
+   */
+  hitSlop?: number | Insets | null
+}
+
+export interface Insets {
+  top?: number
+  left?: number
+  bottom?: number
+  right?: number
+}

package/src/interfaces/RNExclusiveTypes.ts

@@ -0,0 +1,59 @@
+import type {
+  GestureResponderHandlers,
+  LayoutChangeEvent,
+  TextLayoutEventData,
+  NativeSyntheticEvent,
+} from 'react-native'
+
+type OnLayout = ((event: LayoutChangeEvent) => void) | undefined
+type OnTextLayout =
+  | ((event: NativeSyntheticEvent<TextLayoutEventData>) => void)
+  | undefined
+
+export interface RNExtraProps {
+  onScrollShouldSetResponder?: unknown
+  onScrollShouldSetResponderCapture?: unknown
+  onSelectionChangeShouldSetResponder?: unknown
+  onSelectionChangeShouldSetResponderCapture?: unknown
+  onLayout?: OnLayout
+  elevationAndroid?: number | string
+}
+
+export interface RNViewProps extends GestureResponderHandlers, RNExtraProps {
+  rel?: any
+  download?: any
+}
+
+export interface RNTextProps extends RNExtraProps {
+  dir?: 'ltr' | 'rtl' | 'auto'
+  onTextLayout?: OnTextLayout
+}
+
+// KEEP IN SYNC WITH ^
+export type RNOnlyProps =
+  | 'onStartShouldSetResponder'
+  | 'onScrollShouldSetResponder'
+  | 'onScrollShouldSetResponderCapture'
+  | 'onSelectionChangeShouldSetResponder'
+  | 'onSelectionChangeShouldSetResponderCapture'
+  | 'onLayout'
+  | 'onTextLayout'
+  | 'href'
+  | 'hrefAttrs'
+  | 'elevationAndroid'
+  | 'rel'
+  | 'download'
+  | 'dir'
+  // GestureResponderHandlers
+  | 'onStartShouldSetResponder'
+  | 'onMoveShouldSetResponder'
+  | 'onResponderEnd'
+  | 'onResponderGrant'
+  | 'onResponderReject'
+  | 'onResponderMove'
+  | 'onResponderRelease'
+  | 'onResponderStart'
+  | 'onResponderTerminationRequest'
+  | 'onResponderTerminate'
+  | 'onStartShouldSetResponderCapture'
+  | 'onMoveShouldSetResponderCapture'

package/src/setupHooks.ts

@@ -0,0 +1,27 @@
+import type { GuiComponentStateRef } from './types'
+
+export const hooks: InternalHooks = {}
+
+// internal hooks setup
+export function setupHooks(next: InternalHooks) {
+  Object.assign(hooks, next)
+}
+
+type InternalHooks = {
+  usePropsTransform?: (
+    elementType: any,
+    props: Record<string, any>,
+    stateRef: { current: GuiComponentStateRef },
+    willHydrate?: boolean
+  ) => any
+
+  setElementProps?: (node?: any) => void
+
+  useChildren?: (elementType: any, children: any, viewProps: Record<string, any>) => any
+
+  getBaseViews?: () => {
+    View: any
+    Text: any
+    TextAncestor: any
+  }
+}

package/src/setupReactNative.ts

@@ -0,0 +1,60 @@
+import type { StaticConfig } from './types'
+
+const ReactNativeStaticConfigs = new WeakMap<any, Partial<StaticConfig> | null>()
+
+export function getReactNativeConfig(Component: any) {
+  if (!Component) return
+
+  if (process.env.HANZO_GUI_TARGET === 'native') {
+    if (Component.propTypes?.onTextInput || Component.propTypes?.onChangeText) {
+      return RNConfigs.TextInput
+    }
+    if (Component.getSizeWithHeaders) {
+      return RNConfigs.Image
+    }
+    if (Component.propTypes?.textBreakStrategy) {
+      return RNConfigs.Text
+    }
+
+    // can optimize plain View or Text to not be react native specific
+
+    // can assume everything else is react native on native
+    return RNConfigs.default
+  }
+  if (Component.getSize && Component.prefetch) {
+    return RNConfigs.Image
+  }
+  if (Component.displayName === 'Text' && Component.render) {
+    return RNConfigs.Text
+  }
+  if (
+    Component.render &&
+    (Component.displayName === 'ScrollView' || Component.displayName === 'View')
+  ) {
+    return RNConfigs.default
+  }
+  if (Component.State?.blurTextInput) {
+    return RNConfigs.TextInput
+  }
+
+  return ReactNativeStaticConfigs.get(Component)
+}
+
+const RNConfigs = {
+  Image: {
+    isReactNative: true,
+    inlineProps: new Set(['src', 'width', 'height']),
+  },
+  Text: {
+    isReactNative: true,
+    isText: true,
+  },
+  TextInput: {
+    isReactNative: true,
+    isInput: true,
+    isText: true,
+  },
+  default: {
+    isReactNative: true,
+  },
+} satisfies Record<string, Partial<StaticConfig>>