@helpwave/hightide-native 0.6.0 → 0.9.0

package/src/components/user-interaction/ThemedPressable.tsx

@@ -1,4 +1,4 @@
-import { Fragment, forwardRef } from 'react'
+import { forwardRef, useMemo, useState } from 'react'
 import {
   Pressable,
   View,
@@ -15,6 +15,7 @@ import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
 import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type {
   ThemedPressableIconStyle,
   ThemedPressableState,
@@ -45,13 +46,6 @@ export type ThemedPressableProps = Omit<PressableProps, 'style'> & {
   textStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableTextStyle>,
 }
 
-type PressableInteraction = {
-  pressed: boolean,
-  hovered?: boolean,
-  focused?: boolean,
-  focusVisible?: boolean,
-}
-
 export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>, ThemedPressableProps>(function ThemedPressable({
   children,
   size = 'md',
@@ -75,19 +69,33 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
     hitSlop: providedHitSlop,
     onLayout: providedOnLayout,
   })
+  const [isPressed, setIsPressed] = useState(false)
 
-  const resolveState = (interaction: PressableInteraction): ThemedPressableState => ({
+  const resolvedState = useMemo((): ThemedPressableState => ({
     size,
     color,
     coloringStyle,
     coloringColorVariant,
     hasAdditionalHorizontalPadding,
     isDisabled: !!disabled,
-    isPressed: interaction.pressed,
-    isHovered: !!interaction.hovered,
-    isFocused: !!interaction.focused,
-    isFocusVisible: !!interaction.focusVisible,
-  })
+    isPressed,
+  }), [
+    size,
+    color,
+    coloringStyle,
+    coloringColorVariant,
+    hasAdditionalHorizontalPadding,
+    disabled,
+    isPressed,
+  ])
+
+  const resolvedContainerStyle = useMemoizedTheme(theme.components.themedPressable.container, resolvedState, style)
+  const resolvedStateLayerStyle = useMemoizedTheme(theme.components.themedPressable.stateLayer, resolvedState, stateLayerStyle)
+  const resolvedTextStyle = useMemoizedTheme(theme.components.themedPressable.text, resolvedState, textStyle)
+  const resolvedIconStyle = useMemoizedTheme(theme.components.themedPressable.icon, resolvedState, iconStyle)
+  const resolvedChildren = typeof children === 'function'
+    ? children({ pressed: isPressed })
+    : children
 
   return (
     <Pressable
@@ -96,43 +104,34 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
       disabled={disabled}
       hitSlop={hitSlop}
       onLayout={onLayout}
-      style={(pressableState) => {
-        const state = resolveState(pressableState)
-        return theme.components.themedPressable.container(state, style)
+      style={resolvedContainerStyle}
+      onPressIn={(event) => {
+        setIsPressed(true)
+        props.onPressIn?.(event)
       }}
-    >
-      {(pressableState) => {
-        const state = resolveState(pressableState)
-        const resolvedText = theme.components.themedPressable.text(state, textStyle)
-        const resolvedIcon = theme.components.themedPressable.icon(state, iconStyle)
-        const resolvedChildren = typeof children === 'function'
-          ? children(pressableState)
-          : children
-        const backroundColor = theme.components.themedPressable.container(state, style).backgroundColor
-
-        return (
-          <Fragment>
-            {hitBox.isVisualizing && (
-              <View
-                pointerEvents="none"
-                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
-              />
-            )}
-            <View
-              pointerEvents="none"
-              style={theme.components.themedPressable.stateLayer(state, stateLayerStyle)}
-            />
-            <ContentThemeOverrideProvider
-              foreground={resolvedText.color}
-              background={backroundColor}
-              textStyle={resolvedText}
-              iconStyle={resolvedIcon}
-            >
-              {resolvedChildren}
-            </ContentThemeOverrideProvider>
-          </Fragment>
-        )
+      onPressOut={(event) => {
+        setIsPressed(false)
+        props.onPressOut?.(event)
       }}
+    >
+      {hitBox.isVisualizing && (
+        <View
+          pointerEvents="none"
+          style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+        />
+      )}
+      <View
+        pointerEvents="none"
+        style={resolvedStateLayerStyle}
+      />
+      <ContentThemeOverrideProvider
+        foreground={resolvedTextStyle.color}
+        background={resolvedContainerStyle.backgroundColor}
+        textStyle={resolvedTextStyle}
+        iconStyle={resolvedIconStyle}
+      >
+        {resolvedChildren}
+      </ContentThemeOverrideProvider>
     </Pressable>
   )
 })

package/src/components/visualization-and-display/Avatar.tsx

@@ -22,6 +22,7 @@ import {
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme, useMemoizedThemeFactory } from '../../hooks/useMemoizedTheme'
 import type {
   AvatarGroupContainerStyle,
   AvatarGroupStackStyle,
@@ -32,6 +33,7 @@ import type {
   AvatarStatus,
   AvatarStyle,
   AvatarTextStyle,
+  AvatarThemeResolvers,
   AvatarStatusDotStyle,
   AvatarWithStatusState
 } from '../../theme/types/components/avatar'
@@ -126,10 +128,10 @@ export const Avatar = ({
     setImage(initialImage)
   }, [image?.avatarUrl, initialImage])
 
-  const resolvedAvatar = theme.components.avatar.container(state, avatarStyle)
-  const resolvedImage = theme.components.avatar.image(state, imageStyle)
-  const resolvedText = theme.components.avatar.text(state, textStyle)
-  const resolvedIcon = theme.components.avatar.icon(state, iconStyle)
+  const resolvedAvatar = useMemoizedTheme(theme.components.avatar.container, state, avatarStyle)
+  const resolvedImage = useMemoizedTheme(theme.components.avatar.image, state, imageStyle)
+  const resolvedText = useMemoizedTheme(theme.components.avatar.text, state, textStyle)
+  const resolvedIcon = useMemoizedTheme(theme.components.avatar.icon, state, iconStyle)
 
   return (
     <View
@@ -196,13 +198,13 @@ export const AvatarGroup = ({
     count: displayedProfiles.length,
   }), [size, color, displayedProfiles.length])
 
-  const avatarResolvers = useMemo(
-    () => theme.components.avatarGroup.avatar(state),
-    [theme, state]
-  )
-  const resolvedContainer = theme.components.avatarGroup.container(state, containerStyle)
-  const resolvedAvatarStack = theme.components.avatarGroup.avatarStack(state, avatarStackStyle)
-  const resolvedText = theme.components.avatarGroup.text(state, textStyle)
+  const avatarResolvers = useMemoizedThemeFactory<
+    AvatarState,
+    AvatarThemeResolvers
+  >(theme.components.avatarGroup.avatar, state)
+  const resolvedContainer = useMemoizedTheme(theme.components.avatarGroup.container, state, containerStyle)
+  const resolvedAvatarStack = useMemoizedTheme(theme.components.avatarGroup.avatarStack, state, avatarStackStyle)
+  const resolvedText = useMemoizedTheme(theme.components.avatarGroup.text, state, textStyle)
 
   return (
     <View
@@ -282,14 +284,14 @@ export const AvatarWithStatus = ({
     status,
   }), [size, color, status])
 
-  const avatarResolvers = useMemo(
-    () => theme.components.avatarWithStatus.avatar(state),
-    [theme, state]
-  )
-  const resolvedStatusDot = theme.components.avatarWithStatus.statusDot(state, statusDotStyle)
+  const avatarResolvers = useMemoizedThemeFactory<
+    AvatarWithStatusState,
+    AvatarThemeResolvers
+  >(theme.components.avatarWithStatus.avatar, state)
+  const resolvedStatusDot = useMemoizedTheme(theme.components.avatarWithStatus.statusDot, state, statusDotStyle)
 
   return (
-    <View style={[{ position: 'relative' }, style]}>
+    <View style={[{ position: 'relative', alignSelf: 'flex-start' }, style]}>
       <Avatar
         {...avatarProps}
         size={size}

package/src/components/visualization-and-display/Chip.tsx

@@ -14,6 +14,7 @@ import type { ChipVariant, ComponentSize } from '@helpwave/hightide-design/seman
 
 import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type {
   ChipIconStyle,
   ChipState,
@@ -62,18 +63,9 @@ export const Chip = ({
     variant,
   }), [size, color, variant])
 
-  const resolvedChipStyle = useMemo(
-    () => theme.components.chip.chip(state, chipStyle),
-    [theme, state, chipStyle]
-  )
-  const resolvedIconStyle = useMemo(
-    () => theme.components.chip.icon(state, iconStyle),
-    [theme, state, iconStyle]
-  )
-  const resolvedTextStyle = useMemo(
-    () => theme.components.chip.text(state, textStyle),
-    [theme, state, textStyle]
-  )
+  const resolvedChipStyle = useMemoizedTheme(theme.components.chip.chip, state, chipStyle)
+  const resolvedIconStyle = useMemoizedTheme(theme.components.chip.icon, state, iconStyle)
+  const resolvedTextStyle = useMemoizedTheme(theme.components.chip.text, state, textStyle)
 
   return (
     <View

package/src/components/visualization-and-display/ThemedText.tsx

@@ -1,6 +1,8 @@
 import {
   forwardRef
 } from 'react'
+import type {
+  ColorValue } from 'react-native'
 import {
   Text as RNText,
   type TextProps
@@ -9,7 +11,10 @@ import {
 import { useContentTheme } from '../../global-contexts/content-theme/ContentThemeContext'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 
-export type ThemedTextAppearance = 'normal' | 'description'
+import type { ThemedTextAppearance } from '../../enums/themedTextAppearance'
+import { HexColorUtils } from '../../utils'
+
+export type { ThemedTextAppearance }
 
 export type ThemedTextProps = TextProps & {
   appearance?: ThemedTextAppearance,
@@ -22,20 +27,22 @@ export const ThemedText = forwardRef<React.ComponentRef<typeof RNText>, ThemedTe
 }, ref) {
   const { theme } = useTheme()
   const { foreground, background, textStyle } = useContentTheme()
-  const color = appearance === 'description'
+  let color: ColorValue | undefined = textStyle.color ?? foreground
+  color = appearance === 'description'
     ? theme.semantics.asDescription({
       colorPair: {
         color: background,
-        onColor: foreground,
+        onColor: HexColorUtils.parseColorValue(color),
       },
     })
-    : undefined
+    : color
+
 
   return (
     <RNText
       {...props}
       ref={ref}
-      style={[textStyle, color === undefined ? undefined : { color }, style]}
+      style={[textStyle, { color }, style]}
     />
   )
 })

package/src/enums/chatMessageDirection.ts

@@ -0,0 +1,18 @@
+import type { EnumUtilsType } from '@helpwave/hightide-utils/utils'
+
+const chatMessageDirectionValues = ['incoming', 'outgoing'] as const
+export type ChatMessageDirection = (typeof chatMessageDirectionValues)[number]
+const allowedChatMessageDirectionValues: ReadonlySet<string> = new Set(
+  chatMessageDirectionValues
+)
+function isChatMessageDirectionValue(value: unknown): value is ChatMessageDirection {
+  if (typeof value !== 'string') {
+    return false
+  }
+  return allowedChatMessageDirectionValues.has(value)
+}
+export const ChatMessageDirectionUtils: EnumUtilsType<ChatMessageDirection> = {
+  values: chatMessageDirectionValues,
+  set: allowedChatMessageDirectionValues,
+  isValue: isChatMessageDirectionValue,
+}

package/src/enums/chatMessageStatus.ts

@@ -0,0 +1,18 @@
+import type { EnumUtilsType } from '@helpwave/hightide-utils/utils'
+
+const chatMessageStatusValues = ['sent', 'sending', 'received', 'read'] as const
+export type ChatMessageStatus = (typeof chatMessageStatusValues)[number]
+const allowedChatMessageStatusValues: ReadonlySet<string> = new Set(
+  chatMessageStatusValues
+)
+function isChatMessageStatusValue(value: unknown): value is ChatMessageStatus {
+  if (typeof value !== 'string') {
+    return false
+  }
+  return allowedChatMessageStatusValues.has(value)
+}
+export const ChatMessageStatusUtils: EnumUtilsType<ChatMessageStatus> = {
+  values: chatMessageStatusValues,
+  set: allowedChatMessageStatusValues,
+  isValue: isChatMessageStatusValue,
+}

package/src/enums/hightideThemeModes.ts

@@ -0,0 +1,18 @@
+import type { EnumUtilsType } from '@helpwave/hightide-utils/utils'
+
+const hightideThemeModesValues = ['dark', 'light'] as const
+export type HightideThemeModes = (typeof hightideThemeModesValues)[number]
+const allowedHightideThemeModesValues: ReadonlySet<string> = new Set(
+  hightideThemeModesValues
+)
+function isHightideThemeModesValue(value: unknown): value is HightideThemeModes {
+  if (typeof value !== 'string') {
+    return false
+  }
+  return allowedHightideThemeModesValues.has(value)
+}
+export const HightideThemeModesUtils: EnumUtilsType<HightideThemeModes> = {
+  values: hightideThemeModesValues,
+  set: allowedHightideThemeModesValues,
+  isValue: isHightideThemeModesValue,
+}

package/src/enums/index.ts

@@ -0,0 +1,7 @@
+export * from './chatMessageDirection'
+export * from './chatMessageStatus'
+export * from './hightideThemeModes'
+export * from './listItemContentOrder'
+export * from './themedTextAppearance'
+export * from './useMultiSelectFirstHighlightBehavior'
+export * from './useSelectFirstHighlightBehavior'

package/src/enums/listItemContentOrder.ts

@@ -0,0 +1,18 @@
+import type { EnumUtilsType } from '@helpwave/hightide-utils/utils'
+
+const listItemContentOrderValues = ['titleFirst', 'subtitleFirst'] as const
+export type ListItemContentOrder = (typeof listItemContentOrderValues)[number]
+const allowedListItemContentOrderValues: ReadonlySet<string> = new Set(
+  listItemContentOrderValues
+)
+function isListItemContentOrderValue(value: unknown): value is ListItemContentOrder {
+  if (typeof value !== 'string') {
+    return false
+  }
+  return allowedListItemContentOrderValues.has(value)
+}
+export const ListItemContentOrderUtils: EnumUtilsType<ListItemContentOrder> = {
+  values: listItemContentOrderValues,
+  set: allowedListItemContentOrderValues,
+  isValue: isListItemContentOrderValue,
+}

package/src/enums/themedTextAppearance.ts

@@ -0,0 +1,18 @@
+import type { EnumUtilsType } from '@helpwave/hightide-utils/utils'
+
+const themedTextAppearanceValues = ['normal', 'description'] as const
+export type ThemedTextAppearance = (typeof themedTextAppearanceValues)[number]
+const allowedThemedTextAppearanceValues: ReadonlySet<string> = new Set(
+  themedTextAppearanceValues
+)
+function isThemedTextAppearanceValue(value: unknown): value is ThemedTextAppearance {
+  if (typeof value !== 'string') {
+    return false
+  }
+  return allowedThemedTextAppearanceValues.has(value)
+}
+export const ThemedTextAppearanceUtils: EnumUtilsType<ThemedTextAppearance> = {
+  values: themedTextAppearanceValues,
+  set: allowedThemedTextAppearanceValues,
+  isValue: isThemedTextAppearanceValue,
+}

package/src/enums/useMultiSelectFirstHighlightBehavior.ts

@@ -0,0 +1,18 @@
+import type { EnumUtilsType } from '@helpwave/hightide-utils/utils'
+
+const useMultiSelectFirstHighlightBehaviorValues = ['first', 'last'] as const
+export type UseMultiSelectFirstHighlightBehavior = (typeof useMultiSelectFirstHighlightBehaviorValues)[number]
+const allowedUseMultiSelectFirstHighlightBehaviorValues: ReadonlySet<string> = new Set(
+  useMultiSelectFirstHighlightBehaviorValues
+)
+function isUseMultiSelectFirstHighlightBehaviorValue(value: unknown): value is UseMultiSelectFirstHighlightBehavior {
+  if (typeof value !== 'string') {
+    return false
+  }
+  return allowedUseMultiSelectFirstHighlightBehaviorValues.has(value)
+}
+export const UseMultiSelectFirstHighlightBehaviorUtils: EnumUtilsType<UseMultiSelectFirstHighlightBehavior> = {
+  values: useMultiSelectFirstHighlightBehaviorValues,
+  set: allowedUseMultiSelectFirstHighlightBehaviorValues,
+  isValue: isUseMultiSelectFirstHighlightBehaviorValue,
+}

package/src/enums/useSelectFirstHighlightBehavior.ts

@@ -0,0 +1,18 @@
+import type { EnumUtilsType } from '@helpwave/hightide-utils/utils'
+
+const useSelectFirstHighlightBehaviorValues = ['first', 'last'] as const
+export type UseSelectFirstHighlightBehavior = (typeof useSelectFirstHighlightBehaviorValues)[number]
+const allowedUseSelectFirstHighlightBehaviorValues: ReadonlySet<string> = new Set(
+  useSelectFirstHighlightBehaviorValues
+)
+function isUseSelectFirstHighlightBehaviorValue(value: unknown): value is UseSelectFirstHighlightBehavior {
+  if (typeof value !== 'string') {
+    return false
+  }
+  return allowedUseSelectFirstHighlightBehaviorValues.has(value)
+}
+export const UseSelectFirstHighlightBehaviorUtils: EnumUtilsType<UseSelectFirstHighlightBehavior> = {
+  values: useSelectFirstHighlightBehaviorValues,
+  set: allowedUseSelectFirstHighlightBehaviorValues,
+  isValue: isUseSelectFirstHighlightBehaviorValue,
+}

package/src/global-contexts/content-theme/ContentThemeProvider.tsx

@@ -85,20 +85,24 @@ export const ContentThemeOverrideProvider = ({
     const newForeground = resolveColorOverride(foregroundOverride, parent.foreground)
     const newBackground = resolveColorOverride(backgroundOverride, parent.background)
 
-    let textStyle = typeof textStyleOverride === 'function'
+    const resolvedTextStyleOverride = typeof textStyleOverride === 'function'
       ? textStyleOverride(parent.textStyle, parent.foreground)
-      : textStyleOverride ?? parent.textStyle
+      : textStyleOverride
+
+    let textStyle = resolvedTextStyleOverride ?? parent.textStyle
 
     if (!isKeepingTextColor && newForeground !== undefined) {
-      textStyle = { ...textStyle, color: newForeground }
+      textStyle = { ...textStyle, color: resolvedTextStyleOverride?.color ?? newForeground }
     }
 
-    let iconStyle = typeof iconStyleOverride === 'function'
+    const resolvedIconStyleOverride = typeof iconStyleOverride === 'function'
       ? iconStyleOverride(parent.iconStyle, parent.foreground)
       : iconStyleOverride ?? parent.iconStyle
 
+    let iconStyle = resolvedIconStyleOverride ?? parent.iconStyle
+
     if (!isKeepingIconColor && newForeground !== undefined) {
-      iconStyle = { ...iconStyle, color: newForeground }
+      iconStyle = { ...iconStyle, color: resolvedIconStyleOverride?.color ?? newForeground }
     }
 
     return {

package/src/global-contexts/theme/ThemeProvider.tsx

@@ -96,7 +96,10 @@ export const ThemeProvider = ({
       <ContentThemeRootProvider
         foreground={contextValue.theme.colors.surface.onColor}
         background={contextValue.theme.colors.surface.color}
-        textStyle={contextValue.theme.typography.body.md}
+        textStyle={{
+          ...contextValue.theme.typography.body.md,
+          //color: contextValue.theme.colors.surface.onColor,
+        }}
         iconStyle={{
           size: contextValue.theme.icongraphy.sizes.md,
           strokeWidth: contextValue.theme.icongraphy.strokeWidth,

package/src/hooks/index.ts

@@ -1,3 +1,5 @@
+export * from './useAnimatedStyleTransition'
+export * from './useMemoizedTheme'
 export * from './useMultiSelect'
 export * from './useNativeKeyValueStore'
 export * from './useSelect'