@helpwave/hightide-native 0.1.1 → 0.3.0

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "type": "module",
   "files": [
     "src"
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-design": "0.1.1",
+    "@helpwave/hightide-design": "0.3.0",
     "@helpwave/hightide-utils": "0.1.0"
   },
   "peerDependencies": {

package/src/components/chat/ChatAttachmentMessageBubble.tsx

@@ -205,6 +205,9 @@ export const ChatAttachmentMessageBubble = ({
         textStyle={(_, pressableState) => (
           contentResolvers.text(pressableState)
         )}
+        iconStyle={(_, pressableState) => (
+          contentResolvers.icon(pressableState)
+        )}
       >
         <View style={resolvedFileIconContainerStyle}>
           {icon ?? (

package/src/components/chat/ChatConversationRow.tsx

@@ -1,6 +1,9 @@
 import {
+  cloneElement,
   Fragment,
+  isValidElement,
   useMemo,
+  type ReactElement,
   type ReactNode
 } from 'react'
 import {
@@ -14,14 +17,24 @@ import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
 import { ThemedText } from '../visualization-and-display/ThemedText'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
+  AvatarState,
+  AvatarStyle
+} from '../../theme/types/components/avatar'
+import type {
+  ChatConversationRowContentContainerStyle,
+  ChatConversationRowHeaderRowStyle,
+  ChatConversationRowMessageRowStyle,
   ChatConversationRowPreviewStyle,
+  ChatConversationRowSentIndicatorStyle,
   ChatConversationRowState,
-  ChatConversationRowStyle,
   ChatConversationRowTimestampStyle,
-  ChatConversationRowTitleStyle
+  ChatConversationRowTitleStyle,
+  PressableContainerStyle,
+  PressableState
 } from '../../theme/types/components/chat'
 import type { StyleOverwrite } from '../../theme/types/resolver'
 import { ThemedPressable } from '../user-interaction'
+import type { AvatarProps } from '../visualization-and-display/Avatar'
 
 export type ChatConversationSentIndicator = 'sent' | 'sentAndReceived'
 
@@ -34,10 +47,15 @@ export type ChatConversationRowProps = Omit<PressableProps, 'children' | 'style'
   isSelected?: boolean,
   sentIndicator?: ChatConversationSentIndicator,
   style?: StyleProp<ViewStyle>,
-  rowStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowStyle>,
+  rowStyle?: StyleOverwrite<PressableState, PressableContainerStyle>,
+  contentContainerStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowContentContainerStyle>,
+  headerRowStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowHeaderRowStyle>,
+  messageRowStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowMessageRowStyle>,
   titleStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowTitleStyle>,
   timestampStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowTimestampStyle>,
   previewStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowPreviewStyle>,
+  sentIndicatorStyle?: StyleOverwrite<Record<string, never>, ChatConversationRowSentIndicatorStyle>,
+  avatarStyle?: StyleOverwrite<AvatarState, AvatarStyle>,
 }
 
 type PressableInteraction = {
@@ -47,6 +65,14 @@ type PressableInteraction = {
   focusVisible?: boolean,
 }
 
+type AvatarElementProps = AvatarProps & {
+  avatarStyle?: AvatarProps['avatarStyle'],
+}
+
+const toNumericSize = (value: unknown): number | undefined => (
+  typeof value === 'number' ? value : undefined
+)
+
 export const ChatConversationRow = ({
   avatar,
   title,
@@ -58,9 +84,14 @@ export const ChatConversationRow = ({
   disabled,
   style,
   rowStyle,
+  contentContainerStyle,
+  headerRowStyle,
+  messageRowStyle,
   titleStyle,
   timestampStyle,
   previewStyle,
+  sentIndicatorStyle,
+  avatarStyle,
   ...props
 }: ChatConversationRowProps) => {
   const { theme } = useTheme()
@@ -88,31 +119,101 @@ export const ChatConversationRow = ({
     () => theme.components.chat.conversationRow.unreadBadgeText(staticState),
     [theme, staticState]
   )
-  const sentIndicatorColor = useMemo(
-    () => theme.components.chat.conversationRow.sentIndicator(staticState).color,
+  const resolvedSentIndicator = useMemo(
+    () => theme.components.chat.conversationRow.sentIndicator(staticState, sentIndicatorStyle),
+    [theme, staticState, sentIndicatorStyle]
+  )
+  const avatarTheme = useMemo(
+    () => theme.components.chat.conversationRow.avatar(staticState),
     [theme, staticState]
   )
+  const avatarSize = useMemo(
+    () => toNumericSize(avatarTheme.container({}).width),
+    [avatarTheme]
+  )
+
+  const resolvedAvatar = useMemo(() => {
+    if (!isValidElement(avatar) || avatarSize === undefined) {
+      return avatar
+    }
+
+    const avatarElement = avatar as ReactElement<AvatarElementProps>
+
+    return cloneElement(avatarElement, {
+      size: avatarSize,
+      avatarStyle: (_, avatarState) => avatarTheme.container(
+        {
+          ...avatarState,
+          size: avatarSize,
+        },
+        avatarStyle ?? avatarElement.props.avatarStyle
+      ),
+      imageStyle: (_, avatarState) => avatarTheme.image(
+        {
+          ...avatarState,
+          size: avatarSize,
+        },
+        avatarElement.props.imageStyle
+      ),
+      textStyle: (_, avatarState) => avatarTheme.text(
+        {
+          ...avatarState,
+          size: avatarSize,
+        },
+        avatarElement.props.textStyle
+      ),
+      iconStyle: (_, avatarState) => avatarTheme.icon(
+        {
+          ...avatarState,
+          size: avatarSize,
+        },
+        avatarElement.props.iconStyle
+      ),
+    })
+  }, [avatar, avatarSize, avatarStyle, avatarTheme])
 
   return (
     <ThemedPressable
       {...props}
       disabled={disabled}
-      style={(pressableState) => {
+      style={style}
+      containerStyle={(_, pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
-        return [theme.components.chat.conversationRow.container(state, rowStyle), style]
+        return theme.components.chat.conversationRow.pressable(state).container(
+          pressableState,
+          rowStyle
+        )
+      }}
+      stateLayerStyle={(_, pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return theme.components.chat.conversationRow.pressable(state).stateLayer(pressableState)
+      }}
+      textStyle={(_, pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return theme.components.chat.conversationRow.pressable(state).text(pressableState)
+      }}
+      iconStyle={(_, pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return theme.components.chat.conversationRow.pressable(state).icon(pressableState)
       }}
     >
       {(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
+        const resolvedContentContainer = theme.components.chat.conversationRow.contentContainer(
+          state,
+          contentContainerStyle
+        )
+        const resolvedHeaderRow = theme.components.chat.conversationRow.headerRow(state, headerRowStyle)
+        const resolvedMessageRow = theme.components.chat.conversationRow.messageRow(state, messageRowStyle)
         const resolvedTitle = theme.components.chat.conversationRow.title(state, titleStyle)
         const resolvedTimestamp = theme.components.chat.conversationRow.timestamp(state, timestampStyle)
         const resolvedPreview = theme.components.chat.conversationRow.preview(state, previewStyle)
 
         return (
           <Fragment>
-            {avatar}
-            <View style={{ flex: 1, minWidth: 0, gap: 5 }}>
-              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+            {resolvedAvatar}
+            <View style={resolvedContentContainer}>
+              <View style={resolvedHeaderRow}>
                 {typeof title === 'string' || typeof title === 'number' ? (
                   <ThemedText style={resolvedTitle} numberOfLines={1}>{title}</ThemedText>
                 ) : (
@@ -126,23 +227,22 @@ export const ChatConversationRow = ({
                   )
                 )}
               </View>
-              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-                <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 4, minWidth: 0 }}>
-                  {sentIndicator && (
-                    <ThemedIcon
-                      icon={sentIndicatorIcon}
-                      size={16}
-                      color={sentIndicatorColor}
-                    />
-                  )}
-                  {preview != null && (
-                    typeof preview === 'string' || typeof preview === 'number' ? (
-                      <ThemedText style={resolvedPreview} numberOfLines={1}>{preview}</ThemedText>
-                    ) : (
-                      preview
-                    )
-                  )}
-                </View>
+              <View style={resolvedMessageRow}>
+                {sentIndicator && (
+                  <ThemedIcon
+                    icon={sentIndicatorIcon}
+                    size={resolvedSentIndicator.size}
+                    strokeWidth={resolvedSentIndicator.strokeWidth}
+                    color={resolvedSentIndicator.color}
+                  />
+                )}
+                {preview != null && (
+                  typeof preview === 'string' || typeof preview === 'number' ? (
+                    <ThemedText style={resolvedPreview} numberOfLines={1}>{preview}</ThemedText>
+                  ) : (
+                    preview
+                  )
+                )}
                 {isUnread && (
                   <View style={unreadBadge}>
                     <ThemedText style={unreadBadgeText}>{unreadCount}</ThemedText>

package/src/components/chat/ChatQuickReplyChip.tsx

@@ -13,6 +13,7 @@ import { ThemedText } from '../visualization-and-display/ThemedText'
 import type {
   ChatQuickReplyChipState,
   PressableContainerStyle,
+  PressableIconStyle,
   PressableState,
   PressableTextStyle
 } from '../../theme/types/components/chat'
@@ -20,13 +21,14 @@ import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatQuickReplyChipProps = Omit<
   ThemedPressableProps,
-  'children' | 'containerStyle' | 'textStyle' | 'stateLayerStyle'
+  'children' | 'containerStyle' | 'textStyle' | 'stateLayerStyle' | 'iconStyle'
 > & {
   isActive?: boolean,
   children?: ReactNode,
   style?: StyleProp<ViewStyle>,
   containerStyle?: StyleOverwrite<PressableState, PressableContainerStyle>,
   textStyle?: StyleOverwrite<PressableState, PressableTextStyle>,
+  iconStyle?: StyleOverwrite<PressableState, PressableIconStyle>,
 }
 
 export const ChatQuickReplyChip = ({
@@ -36,6 +38,7 @@ export const ChatQuickReplyChip = ({
   style,
   containerStyle,
   textStyle,
+  iconStyle,
   ...props
 }: ChatQuickReplyChipProps) => {
   const { theme } = useTheme()
@@ -59,6 +62,9 @@ export const ChatQuickReplyChip = ({
       textStyle={(_, pressableState) => (
         pressableResolvers.text(pressableState, textStyle)
       )}
+      iconStyle={(_, pressableState) => (
+        pressableResolvers.icon(pressableState, iconStyle)
+      )}
     >
       {typeof children === 'string' || typeof children === 'number' ? (
         <ThemedText>{children}</ThemedText>

package/src/components/chat/ChatThreadHeader.tsx

@@ -15,11 +15,17 @@ import {
   Avatar,
   type AvatarProps
 } from '../visualization-and-display/Avatar'
+import {
+  ThemedPressable,
+  type ThemedPressableProps
+} from '../user-interaction/ThemedPressable'
 import type {
   ChatThreadHeaderContentRowStyle,
   ChatThreadHeaderStyle,
   ChatThreadHeaderSubtitleStyle,
-  ChatThreadHeaderTitleStyle
+  ChatThreadHeaderTitleStyle,
+  PressableContainerStyle,
+  PressableState
 } from '../../theme/types/components/chat'
 import type { StyleOverwrite } from '../../theme/types/resolver'
 
@@ -29,11 +35,14 @@ export type ChatThreadHeaderProps = Omit<ViewProps, 'style'> & {
   subtitle?: ReactNode,
   leftActions?: ReactNode,
   rightActions?: ReactNode,
+  onPress?: ThemedPressableProps['onPress'],
+  disabled?: boolean,
   style?: StyleProp<ViewStyle>,
   headerStyle?: StyleOverwrite<Record<string, never>, ChatThreadHeaderStyle>,
   contentRowStyle?: StyleOverwrite<Record<string, never>, ChatThreadHeaderContentRowStyle>,
   titleStyle?: StyleOverwrite<Record<string, never>, ChatThreadHeaderTitleStyle>,
   subtitleStyle?: StyleOverwrite<Record<string, never>, ChatThreadHeaderSubtitleStyle>,
+  pressableContainerStyle?: StyleOverwrite<PressableState, PressableContainerStyle>,
 }
 
 export const ChatThreadHeader = ({
@@ -42,11 +51,14 @@ export const ChatThreadHeader = ({
   subtitle,
   leftActions,
   rightActions,
+  onPress,
+  disabled,
   style,
   headerStyle,
   contentRowStyle,
   titleStyle,
   subtitleStyle,
+  pressableContainerStyle,
   ...props
 }: ChatThreadHeaderProps) => {
   const { theme } = useTheme()
@@ -71,16 +83,26 @@ export const ChatThreadHeader = ({
     () => theme.components.chat.threadHeader.subtitle(state, subtitleStyle),
     [theme, state, subtitleStyle]
   )
-
-  const avatarThemeState = useMemo(() => ({
-    size: resolvedAvatar.size,
-    color: resolvedAvatar.color,
-  }), [resolvedAvatar.size, resolvedAvatar.color])
+  const pressableResolvers = useMemo(
+    () => theme.components.chat.threadHeader.pressable(state),
+    [theme, state]
+  )
 
   const avatarTheme = useMemo(
-    () => theme.components.chat.threadHeader.avatar(avatarThemeState),
-    [theme, avatarThemeState]
+    () => theme.components.chat.threadHeader.avatar({
+      size: resolvedAvatar.size,
+      color: resolvedAvatar.color,
+    }),
+    [theme, resolvedAvatar.size, resolvedAvatar.color]
   )
+  const avatarSize = useMemo(() => {
+    if (typeof resolvedAvatar.size === 'number' || typeof resolvedAvatar.size === 'string') {
+      return resolvedAvatar.size
+    }
+
+    const width = avatarTheme.container({}).width
+    return typeof width === 'number' ? width : resolvedAvatar.size
+  }, [avatarTheme, resolvedAvatar.size])
 
   return (
     <View {...props} style={[resolvedHeaderStyle, style]}>
@@ -89,51 +111,69 @@ export const ChatThreadHeader = ({
           {leftActions}
         </View>
       )}
-      <Avatar
-        {...resolvedAvatar}
-        avatarStyle={(_, avatarState) => avatarTheme.container(
-          {
-            ...avatarState,
-            size: resolvedAvatar.size,
-          },
-          resolvedAvatar.avatarStyle
+      <ThemedPressable
+        onPress={onPress}
+        disabled={disabled}
+        containerStyle={(_, pressableState) => (
+          pressableResolvers.container(pressableState, pressableContainerStyle)
         )}
-        imageStyle={(_, avatarState) => avatarTheme.image(
-          {
-            ...avatarState,
-            size: resolvedAvatar.size,
-          },
-          resolvedAvatar.imageStyle
+        stateLayerStyle={(_, pressableState) => (
+          pressableResolvers.stateLayer(pressableState)
         )}
-        textStyle={(_, avatarState) => avatarTheme.text(
-          {
-            ...avatarState,
-            size: resolvedAvatar.size,
-          },
-          resolvedAvatar.textStyle
+        textStyle={(_, pressableState) => (
+          pressableResolvers.text(pressableState)
         )}
-        iconStyle={(_, avatarState) => avatarTheme.icon(
-          {
-            ...avatarState,
-            size: resolvedAvatar.size,
-          },
-          resolvedAvatar.iconStyle
+        iconStyle={(_, pressableState) => (
+          pressableResolvers.icon(pressableState)
         )}
-      />
-      <View style={resolvedContentRowStyle}>
-        {typeof title === 'string' || typeof title === 'number' ? (
-          <ThemedText style={resolvedTitleStyle} numberOfLines={1}>{title}</ThemedText>
-        ) : (
-          title
-        )}
-        {subtitle != null && (
-          typeof subtitle === 'string' || typeof subtitle === 'number' ? (
-            <ThemedText style={resolvedSubtitleStyle} numberOfLines={1}>{subtitle}</ThemedText>
+      >
+        <Avatar
+          {...resolvedAvatar}
+          size={avatarSize}
+          avatarStyle={(_, avatarState) => avatarTheme.container(
+            {
+              ...avatarState,
+              size: avatarSize,
+            },
+            resolvedAvatar.avatarStyle
+          )}
+          imageStyle={(_, avatarState) => avatarTheme.image(
+            {
+              ...avatarState,
+              size: avatarSize,
+            },
+            resolvedAvatar.imageStyle
+          )}
+          textStyle={(_, avatarState) => avatarTheme.text(
+            {
+              ...avatarState,
+              size: avatarSize,
+            },
+            resolvedAvatar.textStyle
+          )}
+          iconStyle={(_, avatarState) => avatarTheme.icon(
+            {
+              ...avatarState,
+              size: avatarSize,
+            },
+            resolvedAvatar.iconStyle
+          )}
+        />
+        <View style={resolvedContentRowStyle}>
+          {typeof title === 'string' || typeof title === 'number' ? (
+            <ThemedText style={resolvedTitleStyle} numberOfLines={1}>{title}</ThemedText>
           ) : (
-            subtitle
-          )
-        )}
-      </View>
+            title
+          )}
+          {subtitle != null && (
+            typeof subtitle === 'string' || typeof subtitle === 'number' ? (
+              <ThemedText style={resolvedSubtitleStyle} numberOfLines={1}>{subtitle}</ThemedText>
+            ) : (
+              subtitle
+            )
+          )}
+        </View>
+      </ThemedPressable>
       {rightActions != null && (
         <View style={{ flexDirection: 'row', alignItems: 'center', flexShrink: 0 }}>
           {rightActions}

package/src/components/list/ListActionItem.tsx

@@ -12,23 +12,35 @@ import {
 
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
+import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
-import { ThemedText } from '../visualization-and-display/ThemedText'
 import type {
+  ListActionItemDescriptionStyle,
   ListActionItemState,
   ListActionItemStyle,
   ListActionItemTitleStyle
 } from '../../theme/types/components/listItem'
 import type { StyleOverwrite } from '../../theme/types/resolver'
+import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
+import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
+import { ListItemAccessory } from './ListItemAccessory'
+import {
+  ListItemTextContent,
+  type ListItemContentOrder
+} from './ListItemTextContent'
 
 export type ListActionItemProps = Omit<PressableProps, 'children' | 'style'> & {
-  label: string,
+  title?: string,
+  subtitle?: string,
+  content?: ReactNode,
+  contentOrder?: ListItemContentOrder,
   leading?: ReactNode,
   trailing?: ReactNode,
   color?: ColorPairToken,
   style?: StyleProp<ViewStyle>,
   itemStyle?: StyleOverwrite<ListActionItemState, ListActionItemStyle>,
-  labelStyle?: StyleOverwrite<ListActionItemState, ListActionItemTitleStyle>,
+  titleStyle?: StyleOverwrite<ListActionItemState, ListActionItemTitleStyle>,
+  subtitleStyle?: StyleOverwrite<ListActionItemState, ListActionItemDescriptionStyle>,
 }
 
 type PressableInteraction = {
@@ -39,17 +51,29 @@ type PressableInteraction = {
 }
 
 export const ListActionItem = ({
-  label,
+  title,
+  subtitle,
+  content,
+  contentOrder = 'titleFirst',
   leading,
   trailing,
   color,
   disabled,
   style,
   itemStyle,
-  labelStyle,
+  titleStyle,
+  subtitleStyle,
+  hitSlop: providedHitSlop,
+  onLayout: providedOnLayout,
   ...props
 }: ListActionItemProps) => {
   const { theme } = useTheme()
+  const { hitBox } = useDebugContext()
+  const { hitSlop, onLayout } = useMinimumTouchTargetHitSlop({
+    touchTargetSize: theme.semantics.touchTargetSize({}),
+    hitSlop: providedHitSlop,
+    onLayout: providedOnLayout,
+  })
 
   const resolveState = (interaction: PressableInteraction): ListActionItemState => ({
     color,
@@ -64,6 +88,8 @@ export const ListActionItem = ({
     <Pressable
       {...props}
       disabled={disabled}
+      hitSlop={hitSlop}
+      onLayout={onLayout}
       style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         return [theme.components.listItem.action.container(state, itemStyle), style]
@@ -74,22 +100,45 @@ export const ListActionItem = ({
         const resolvedLeadingItemContainerStyle = theme.components.listItem.action.leadingItemContainer(state)
         const resolvedContentStyle = theme.components.listItem.action.content(state)
         const resolvedTrailingItemContainerStyle = theme.components.listItem.action.trailingItemContainer(state)
-        const resolvedLabelStyle = theme.components.listItem.action.titleText(state, labelStyle)
+        const resolvedTitleStyle = theme.components.listItem.action.titleText(state, titleStyle)
+        const resolvedSubtitleStyle = theme.components.listItem.action.descriptionText(state, subtitleStyle)
+        const resolvedIconStyle = theme.components.listItem.action.icon(state)
 
         return (
           <Fragment>
+            {hitBox.isVisualizing && (
+              <View
+                pointerEvents="none"
+                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+              />
+            )}
             {leading != null && (
-              <View style={resolvedLeadingItemContainerStyle}>
+              <ListItemAccessory
+                style={resolvedLeadingItemContainerStyle}
+                foreground={color?.onColor}
+                iconStyle={resolvedIconStyle}
+              >
                 {leading}
-              </View>
+              </ListItemAccessory>
             )}
             <View style={resolvedContentStyle}>
-              <ThemedText style={resolvedLabelStyle}>{label}</ThemedText>
+              <ListItemTextContent
+                title={title}
+                subtitle={subtitle}
+                content={content}
+                contentOrder={contentOrder}
+                titleStyle={resolvedTitleStyle}
+                subtitleStyle={resolvedSubtitleStyle}
+              />
             </View>
             {trailing != null && (
-              <View style={resolvedTrailingItemContainerStyle}>
+              <ListItemAccessory
+                style={resolvedTrailingItemContainerStyle}
+                foreground={color?.onColor}
+                iconStyle={resolvedIconStyle}
+              >
                 {trailing}
-              </View>
+              </ListItemAccessory>
             )}
           </Fragment>
         )