@hanzogui/web 2.0.0

package/src/helpers/createStyledContext.tsx

@@ -0,0 +1,98 @@
+import type { Context, ReactNode } from 'react'
+import React from 'react'
+import type { StyledContext } from '../types'
+import { mergeProps } from './mergeProps'
+import { objectIdentityKey } from './objectIdentityKey'
+
+// use const (not function declaration) to prevent esbuild from hoisting
+// above __esm lazy init - function declarations get hoisted before
+// import_react is initialized, causing undefined.default errors in SSR
+export const createStyledContext = <VariantProps extends Record<string, any>>(
+  defaultValues?: VariantProps,
+  namespace = ''
+): StyledContext<VariantProps> => {
+  // avoid react compiler - we aren't breaking its rules but it mis-interprets
+  // how we change the context value
+  'use no memo'
+
+  // lazy initialization fixes vite ssr hmr - module-level assignments can fail
+  // when React is undefined during __esm re-initialization order issues.
+  // also React.createContext is optimized oddly by React compiler and our
+  // uncommon usage confuses it, so we use dynamic access
+  const createReactContext = React[
+    Math.random() ? 'createContext' : 'createContext'
+  ] as typeof React.createContext
+  const useReactMemo = React[
+    Math.random() ? 'useMemo' : 'useMemo'
+  ] as typeof React.useMemo
+  const useReactContext = React[
+    Math.random() ? 'useContext' : 'useContext'
+  ] as typeof React.useContext
+
+  const OGContext = createReactContext<VariantProps | undefined>(defaultValues)
+  const OGProvider = OGContext.Provider
+  const Context = OGContext as any as StyledContext<VariantProps>
+  const scopedContexts = new Map<string, Context<VariantProps | undefined>>()
+  const LastScopeInNamespace = createReactContext<string>(namespace)
+
+  function getOrCreateScopedContext(scope: string) {
+    let ScopedContext = scopedContexts.get(scope)
+    if (!ScopedContext) {
+      ScopedContext = createReactContext<VariantProps | undefined>(defaultValues)
+      scopedContexts.set(scope, ScopedContext)
+    }
+    return ScopedContext!
+  }
+
+  const getNamespacedScope = (scope: string) =>
+    namespace ? `${namespace}--${scope}` : scope
+
+  const Provider = ({
+    children,
+    scope: scopeIn,
+    // performance: avoid creating objects
+    __disableMergeDefaultValues,
+    ...values
+  }: VariantProps & { children?: ReactNode; scope: string }) => {
+    const scope = getNamespacedScope(scopeIn)
+
+    const next = useReactMemo(() => {
+      if (__disableMergeDefaultValues) {
+        // we already merged and want to keep ordering
+        return values
+      }
+      return mergeProps(defaultValues!, values)
+    }, [objectIdentityKey(values)])
+
+    let ScopedProvider = OGProvider
+    if (scope) {
+      ScopedProvider = getOrCreateScopedContext(scope).Provider
+    }
+    return (
+      <LastScopeInNamespace.Provider value={scope}>
+        <ScopedProvider value={next as VariantProps}>{children}</ScopedProvider>
+      </LastScopeInNamespace.Provider>
+    )
+  }
+
+  // use consumerComponent just to give a better error message
+  const useStyledContext = (scopeIn = '') => {
+    const lastScopeInNamespace = useReactContext(LastScopeInNamespace)
+    const scope = namespace
+      ? scopeIn
+        ? getNamespacedScope(scopeIn)
+        : lastScopeInNamespace
+      : scopeIn
+    const context = scope ? getOrCreateScopedContext(scope) : OGContext
+    const value = useReactContext(context!) as VariantProps
+    return value
+  }
+
+  // @ts-expect-error we are overriding default provider
+  Context.Provider = Provider
+  Context.props = defaultValues
+  Context.context = OGContext as Context<VariantProps>
+  Context.useStyledContext = useStyledContext
+
+  return Context
+}

package/src/helpers/defaultAnimationDriver.tsx

@@ -0,0 +1,23 @@
+import type { AnimationDriver } from '../types'
+
+const noAnimationDriver = (method: string): any => {
+  console.warn(
+    `No animation driver configured. To use ${method}, you must pass \`animations\` to createGui. See: https://gui.hanzo.ai/docs/core/animations`
+  )
+}
+
+const createEmptyAnimationDriver = (): AnimationDriver => ({
+  isReactNative: false,
+  inputStyle: 'css',
+  outputStyle: 'css',
+  isStub: true,
+  animations: {},
+  useAnimations: () => noAnimationDriver('animations'),
+  usePresence: () => noAnimationDriver('usePresence'),
+  ResetPresence: () => noAnimationDriver('ResetPresence'),
+  useAnimatedNumber: () => noAnimationDriver('useAnimatedNumber'),
+  useAnimatedNumberStyle: () => noAnimationDriver('useAnimatedNumberStyle'),
+  useAnimatedNumberReaction: () => noAnimationDriver('useAnimatedNumberReaction'),
+})
+
+export const defaultAnimationDriver = createEmptyAnimationDriver()

package/src/helpers/defaultOffset.ts

@@ -0,0 +1 @@
+export const defaultOffset = { height: 0, width: 0 }

package/src/helpers/expandStyle.ts

@@ -0,0 +1,204 @@
+/**
+ * Some parts adapted from react-native-web
+ * Copyright (c) Nicolas Gallagher licensed under the MIT license.
+ */
+
+import { isAndroid, isWeb } from '@hanzogui/constants'
+
+import { getSetting } from '../config'
+import type { PropMappedValue } from '../types'
+import { parseBorderShorthand } from './parseBorderShorthand'
+import { parseOutlineShorthand } from './parseOutlineShorthand'
+
+const neg1Flex = [
+  ['flexGrow', 0],
+  ['flexShrink', 1],
+  ['flexBasis', 'auto'],
+] satisfies PropMappedValue
+
+export function expandStyle(key: string, value: any): PropMappedValue {
+  if (process.env.HANZO_GUI_TARGET === 'web') {
+    if (key === 'flex') {
+      if (value === -1) {
+        return neg1Flex
+      }
+      return [
+        ['flexGrow', value],
+        ['flexShrink', 1],
+        ['flexBasis', getSetting('styleCompat') === 'legacy' ? 'auto' : 0],
+      ]
+    }
+
+    switch (key) {
+      case 'writingDirection': {
+        return [['direction', value]]
+      }
+      // some safari-based browsers seem not to support without -webkit prefix
+      case 'backdropFilter': {
+        return [
+          ['backdropFilter', value],
+          ['WebkitBackdropFilter', value],
+        ]
+      }
+    }
+  }
+
+  if (process.env.HANZO_GUI_TARGET === 'native') {
+    if (isAndroid && key === 'elevationAndroid') {
+      return [['elevation', value]]
+    }
+
+    // native-only value transforms
+    switch (key) {
+      case 'objectFit': {
+        const resizeMode = resizeModeMap[value] || 'cover'
+        return [['resizeMode', resizeMode]]
+      }
+      case 'verticalAlign': {
+        return [['textAlignVertical', verticalAlignMap[value] || 'auto']]
+      }
+      case 'position': {
+        // position: fixed|sticky -> absolute on native
+        if (value === 'fixed' || value === 'sticky') {
+          return [['position', 'absolute']]
+        }
+        return
+      }
+      case 'backgroundImage': {
+        // RN 0.76+ uses experimental_backgroundImage
+        // value may be a parsed array (from parseNativeStyle) or a plain string
+        return [['experimental_backgroundImage', value]]
+      }
+      case 'border': {
+        // parse border shorthand string to individual properties
+        // on native, only supports a single border (all sides)
+        if (typeof value === 'string') {
+          const parsed = parseBorderShorthand(value)
+          if (parsed) {
+            return parsed
+          }
+        }
+        return
+      }
+      case 'outline': {
+        if (typeof value === 'string') {
+          const parsed = parseOutlineShorthand(value)
+          if (parsed) {
+            return parsed
+          }
+        }
+        return
+      }
+    }
+
+    // native-only key expansions (logical properties)
+    if (key in nativeExpansions) {
+      return nativeExpansions[key].map((k) => [k, value])
+    }
+  }
+
+  if (key in EXPANSIONS) {
+    return EXPANSIONS[key].map((k) => [k, value])
+  }
+}
+
+// native value transforms
+const resizeModeMap: Record<string, string> = {
+  fill: 'stretch',
+  none: 'center',
+  'scale-down': 'contain',
+  contain: 'contain',
+  cover: 'cover',
+}
+
+const verticalAlignMap: Record<string, string> = {
+  top: 'top',
+  middle: 'center',
+  bottom: 'bottom',
+  auto: 'auto',
+}
+
+// shared expansions
+const all = ['Top', 'Right', 'Bottom', 'Left']
+const horiz = ['Right', 'Left']
+const vert = ['Top', 'Bottom']
+const xy = ['X', 'Y']
+
+const EXPANSIONS: Record<string, string[]> = {
+  borderColor: ['TopColor', 'RightColor', 'BottomColor', 'LeftColor'],
+  borderRadius: [
+    'TopLeftRadius',
+    'TopRightRadius',
+    'BottomRightRadius',
+    'BottomLeftRadius',
+  ],
+  borderWidth: ['TopWidth', 'RightWidth', 'BottomWidth', 'LeftWidth'],
+  margin: all,
+  marginHorizontal: horiz,
+  marginVertical: vert,
+  padding: all,
+  paddingHorizontal: horiz,
+  paddingVertical: vert,
+  ...(isWeb && {
+    // react-native only supports borderStyle
+    borderStyle: ['TopStyle', 'RightStyle', 'BottomStyle', 'LeftStyle'],
+    // react-native doesn't support X / Y
+    overflow: xy,
+    overscrollBehavior: xy,
+  }),
+}
+
+for (const parent in EXPANSIONS) {
+  const prefix = parent.slice(0, /[A-Z]/.exec(parent)?.index ?? parent.length)
+  EXPANSIONS[parent] = EXPANSIONS[parent].map((k) => `${prefix}${k}`)
+}
+
+// native-only expansions (logical properties not supported in RN)
+const nativeExpansions: Record<string, string[]> = {
+  // logical border properties
+  borderBlockColor: ['borderTopColor', 'borderBottomColor'],
+  borderInlineColor: ['borderEndColor', 'borderStartColor'],
+  borderBlockWidth: ['borderTopWidth', 'borderBottomWidth'],
+  borderInlineWidth: ['borderEndWidth', 'borderStartWidth'],
+  borderBlockStyle: ['borderTopStyle', 'borderBottomStyle'],
+  borderInlineStyle: ['borderEndStyle', 'borderStartStyle'],
+  borderBlockStartColor: ['borderTopColor'],
+  borderBlockEndColor: ['borderBottomColor'],
+  borderInlineStartColor: ['borderStartColor'],
+  borderInlineEndColor: ['borderEndColor'],
+  borderBlockStartWidth: ['borderTopWidth'],
+  borderBlockEndWidth: ['borderBottomWidth'],
+  borderInlineStartWidth: ['borderStartWidth'],
+  borderInlineEndWidth: ['borderEndWidth'],
+  borderBlockStartStyle: ['borderTopStyle'],
+  borderBlockEndStyle: ['borderBottomStyle'],
+  borderInlineStartStyle: ['borderStartStyle'],
+  borderInlineEndStyle: ['borderEndStyle'],
+  // logical margin/padding
+  marginBlock: ['marginTop', 'marginBottom'],
+  marginInline: ['marginEnd', 'marginStart'],
+  paddingBlock: ['paddingTop', 'paddingBottom'],
+  paddingInline: ['paddingEnd', 'paddingStart'],
+  marginBlockStart: ['marginTop'],
+  marginBlockEnd: ['marginBottom'],
+  marginInlineStart: ['marginStart'],
+  marginInlineEnd: ['marginEnd'],
+  paddingBlockStart: ['paddingTop'],
+  paddingBlockEnd: ['paddingBottom'],
+  paddingInlineStart: ['paddingStart'],
+  paddingInlineEnd: ['paddingEnd'],
+  // logical sizing
+  minBlockSize: ['minHeight'],
+  maxBlockSize: ['maxHeight'],
+  minInlineSize: ['minWidth'],
+  maxInlineSize: ['maxWidth'],
+  blockSize: ['height'],
+  inlineSize: ['width'],
+  // inset
+  inset: ['top', 'right', 'bottom', 'left'],
+  insetBlock: ['top', 'bottom'],
+  insetBlockStart: ['top'],
+  insetBlockEnd: ['bottom'],
+  insetInlineStart: ['left'],
+  insetInlineEnd: ['right'],
+}

package/src/helpers/expandStyles.ts

@@ -0,0 +1,42 @@
+import { isWeb } from '@hanzogui/constants'
+import { normalizeShadow } from './normalizeShadow'
+
+export function fixStyles(style: Record<string, any>) {
+  if (process.env.HANZO_GUI_TARGET === 'native') {
+    if ('elevationAndroid' in style) {
+      // @ts-ignore
+      style['elevation'] = style.elevationAndroid
+      // @ts-ignore
+      delete style.elevationAndroid
+    }
+  }
+
+  // TODO deprecate for web-style shadows
+  if (
+    style.shadowRadius != null ||
+    style.shadowColor ||
+    style.shadowOpacity != null ||
+    style.shadowOffset
+  ) {
+    Object.assign(style, normalizeShadow(style))
+  }
+
+  // could be optimized better
+  // ensure border style set by default to solid
+  for (const key in borderDefaults) {
+    if (key in style) {
+      style[borderDefaults[key]] ||= 'solid'
+    }
+  }
+}
+
+// native doesn't support specific border edge style
+const nativeStyle = isWeb ? null : 'borderStyle'
+const borderDefaults = {
+  borderWidth: 'borderStyle',
+  borderBottomWidth: nativeStyle || 'borderBottomStyle',
+  borderTopWidth: nativeStyle || 'borderTopStyle',
+  borderLeftWidth: nativeStyle || 'borderLeftStyle',
+  borderRightWidth: nativeStyle || 'borderRightStyle',
+  // TODO: need to add borderBlock and borderInline here, but they are alot and might impact performance
+}

package/src/helpers/getCSSStylesAtomic.native.ts

@@ -0,0 +1,7 @@
+const empty = () => {
+  console.warn('no-op native')
+}
+
+export const getCSSStylesAtomic = empty
+export const getStyleAtomic = empty
+export const styleToCSS = empty

package/src/helpers/getCSSStylesAtomic.ts

@@ -0,0 +1,263 @@
+/**
+ * Some parts adapted from react-native-web
+ * Copyright (c) Nicolas Gallagher licensed under the MIT license.
+ */
+
+import type { StyleObject } from '@hanzogui/helpers'
+import { cssShorthandLonghands, simpleHash } from '@hanzogui/helpers'
+import { getConfigMaybe } from '../config'
+import { isMediaKey } from '../hooks/useMedia'
+import type { GuiInternalConfig, ViewStyleWithPseudos } from '../types'
+import { defaultOffset } from './defaultOffset'
+import { normalizeColor } from './normalizeColor'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty'
+import type { PseudoDescriptor } from './pseudoDescriptors'
+import { pseudoDescriptors } from './pseudoDescriptors'
+import { transformsToString } from './transformsToString'
+
+// refactor this file away next...
+
+export function getCSSStylesAtomic(style: ViewStyleWithPseudos) {
+  styleToCSS(style)
+  const out: StyleObject[] = []
+  for (const key in style) {
+    if (key === '$$css') continue
+    const val = style[key]
+    if (key in pseudoDescriptors) {
+      if (val) {
+        out.push(...getStyleAtomic(val, pseudoDescriptors[key]))
+      }
+    } else if (isMediaKey(key)) {
+      for (const subKey in val) {
+        const so = getStyleObject(val, subKey)
+        if (so) {
+          so[0] = key // set the property to be eg $platform-web so we can use it above
+          out.push(so)
+        }
+      }
+    } else {
+      const so = getStyleObject(style, key)
+      if (so) {
+        out.push(so)
+      }
+    }
+  }
+  return out
+}
+
+export const getStyleAtomic = (
+  style: ViewStyleWithPseudos,
+  pseudo?: PseudoDescriptor
+): StyleObject[] => {
+  styleToCSS(style)
+  const out: StyleObject[] = []
+  for (const key in style) {
+    const so = getStyleObject(style, key, pseudo)
+    if (so) {
+      out.push(so)
+    }
+  }
+  return out
+}
+
+let conf: GuiInternalConfig | null = null
+
+// this could be cached for performance?
+const getStyleObject = (
+  style: ViewStyleWithPseudos,
+  key: string,
+  pseudo?: PseudoDescriptor
+): StyleObject | undefined => {
+  let val = style[key]
+  if (val == null) return
+  // transform
+  if (key === 'transform' && Array.isArray(style.transform)) {
+    val = transformsToString(val)
+  }
+  const value = normalizeValueWithProperty(val, key)
+  const hash = simpleHash(typeof value === 'string' ? value : `${value}`)
+  const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''
+  conf ||= getConfigMaybe()
+  const shortProp = conf?.inverseShorthands[key] || key
+  let identifier = `_${shortProp}-${pseudoPrefix}${hash}`
+  if (key === 'pointerEvents' && !pseudo) {
+    if (value === 'box-none') identifier = '_pe-boxnone'
+    else if (value === 'box-only') identifier = '_pe-boxonly'
+  }
+  const rules = createAtomicRules(identifier, key, value, pseudo)
+  return [
+    // array for performance
+    key,
+    value,
+    identifier,
+    pseudo?.name as any,
+    rules,
+  ]
+}
+
+export function styleToCSS(style: Record<string, any>) {
+  // box-shadow
+  const { shadowOffset, shadowRadius, shadowColor, shadowOpacity } = style
+  if (
+    shadowRadius != null ||
+    shadowColor ||
+    shadowOffset != null ||
+    shadowOpacity != null
+  ) {
+    const offset = shadowOffset || defaultOffset
+    const width = normalizeValueWithProperty(offset.width)
+    const height = normalizeValueWithProperty(offset.height)
+    const radius = normalizeValueWithProperty(shadowRadius)
+    const color = normalizeColor(shadowColor, shadowOpacity)
+    if (color) {
+      const shadow = `${width} ${height} ${radius} ${color}`
+      style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow
+    }
+    delete style.shadowOffset
+    delete style.shadowRadius
+    delete style.shadowColor
+    delete style.shadowOpacity
+  }
+
+  // text-shadow
+  const { textShadowColor, textShadowOffset, textShadowRadius } = style
+  if (textShadowColor || textShadowOffset || textShadowRadius) {
+    const { height, width } = textShadowOffset || defaultOffset
+    const radius = textShadowRadius || 0
+    const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')
+    if (color && (height !== 0 || width !== 0 || radius !== 0)) {
+      const blurRadius = normalizeValueWithProperty(radius)
+      const offsetX = normalizeValueWithProperty(width)
+      const offsetY = normalizeValueWithProperty(height)
+      style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`
+    }
+    delete style.textShadowColor
+    delete style.textShadowOffset
+    delete style.textShadowRadius
+  }
+}
+
+function createDeclarationBlock(style: [string, any][], important = false) {
+  let next = ''
+  for (const [key, value] of style) {
+    next += `${hyphenateStyleName(key)}:${value}${important ? ' !important' : ''};`
+  }
+  return `{${next}}`
+}
+
+const hcache = {}
+const toHyphenLower = (match: string) => `-${match.toLowerCase()}`
+const hyphenateStyleName = (key: string) => {
+  if (key in hcache) return hcache[key]
+  const val = key.replace(/[A-Z]/g, toHyphenLower)
+  hcache[key] = val
+  return val
+}
+
+// adding one more :root so we always override react native web styles :/
+const selectorPriority = (() => {
+  const res: Record<string, string> = {}
+  for (const key in pseudoDescriptors) {
+    const pseudo = pseudoDescriptors[key]
+    res[pseudo.name] = `${[...Array(pseudo.priority)].map(() => ':root').join('')} `
+  }
+  return res
+})()
+
+function createAtomicRules(
+  identifier: string,
+  property: string,
+  value: any,
+  pseudo?: PseudoDescriptor
+): string[] {
+  const pseudoIdPostfix = pseudo
+    ? pseudo.name === 'disabled'
+      ? `[aria-disabled]`
+      : `:${pseudo.name}`
+    : ''
+  const pseudoSelector = pseudo?.selector
+
+  // longhands get .cls.cls for higher specificity over shorthands
+  const cls =
+    property in cssShorthandLonghands ? `.${identifier}.${identifier}` : `.${identifier}`
+
+  let selector = pseudo
+    ? pseudoSelector
+      ? `${pseudoSelector} ${cls}`
+      : `${selectorPriority[pseudo.name]} ${cls}${pseudoIdPostfix}`
+    : `:root ${cls}`
+
+  // enter style on css driver needs both:
+  //   .t_unmounted .selector
+  //   .selector.t_unmounted
+  if (pseudoSelector === pseudoDescriptors.enterStyle.selector) {
+    selector = `${selector}, .${identifier}${pseudoSelector}`
+  }
+
+  const important = !!pseudo
+
+  let rules: string[] = []
+
+  // Handle non-standard properties and object values that require multiple
+  // CSS rules to be created.
+  switch (property) {
+    // Equivalent to using '::placeholder'
+    case 'placeholderTextColor': {
+      const block = createDeclarationBlock(
+        [
+          ['color', value],
+          ['opacity', 1],
+        ],
+        important
+      )
+      rules.push(`${selector}::placeholder${block}`)
+      break
+    }
+
+    // all webkit prefixed rules
+    case 'backgroundClip':
+    case 'userSelect': {
+      const propertyCapitalized = `${property[0].toUpperCase()}${property.slice(1)}`
+      const webkitProperty = `Webkit${propertyCapitalized}`
+      const block = createDeclarationBlock(
+        [
+          [property, value],
+          [webkitProperty, value],
+        ],
+        important
+      )
+      rules.push(`${selector}${block}`)
+      break
+    }
+
+    // Polyfill for additional 'pointer-events' values
+    case 'pointerEvents': {
+      let finalValue = value
+      if (value === 'auto' || value === 'box-only') {
+        finalValue = 'auto'
+      } else if (value === 'none' || value === 'box-none') {
+        finalValue = 'none'
+      }
+      const block = createDeclarationBlock([['pointerEvents', finalValue]], true)
+      rules.push(`${selector}${block}`)
+      break
+    }
+
+    default: {
+      const block = createDeclarationBlock([[property, value]], important)
+      rules.push(`${selector}${block}`)
+      break
+    }
+  }
+
+  // hover styles need to be conditional
+  // perhaps this can be generalized but for now lets just shortcut
+  // and hardcode for hover styles, if we need to later we can
+  // WEIRD SYNTAX, SEE:
+  //   https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover
+  if (pseudo?.name === 'hover') {
+    rules = rules.map((r) => `@media (hover) {${r}}`)
+  }
+
+  return rules
+}

package/src/helpers/getDefaultProps.ts

@@ -0,0 +1,28 @@
+import { getConfig } from '../config'
+import type { StaticConfig } from '../types'
+
+// merge both default props, styled context props, and default text props
+export const getDefaultProps = (
+  staticConfig: StaticConfig,
+  propsComponentName?: string
+) => {
+  let defaultProps = staticConfig?.defaultProps
+
+  const conf = getConfig()
+  const name =
+    propsComponentName ||
+    staticConfig?.componentName ||
+    // important: this is how we end up getting the defaultProps we set in createGui
+    (staticConfig.isText ? 'Text' : 'View')
+
+  const userDefaultProps = conf?.defaultProps?.[name]
+
+  if (userDefaultProps) {
+    // component's staticConfig.defaultProps wins over global config defaults
+    defaultProps = defaultProps
+      ? { ...userDefaultProps, ...defaultProps }
+      : userDefaultProps
+  }
+
+  return defaultProps
+}