@helpwave/hightide-native 0.5.0 → 0.7.0

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "type": "module",
   "files": [
     "src"
@@ -47,8 +47,8 @@
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-design": "0.5.0",
-    "@helpwave/hightide-utils": "0.1.0"
+    "@helpwave/hightide-utils": "0.1.1",
+    "@helpwave/hightide-design": "0.7.0"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=2.0.0",

package/src/components/card/Card.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type { CardStyle } from '../../theme/types/components/card'
 import type { StyleOverwrite } from '../../theme/types/resolver'
 
@@ -28,10 +29,7 @@ export const Card = ({
   const { theme } = useTheme()
   const state = useMemo(() => ({}), [])
 
-  const resolvedCardStyle = useMemo(
-    () => theme.components.card.container(state, cardStyle),
-    [theme, state, cardStyle]
-  )
+  const resolvedCardStyle = useMemoizedTheme(theme.components.card.container, state, cardStyle)
 
   return (
     <View {...props} style={[resolvedCardStyle, style]}>

package/src/components/chat/ChatAttachmentMessageBubble.tsx

@@ -3,16 +3,20 @@ import {
   type ReactNode
 } from 'react'
 import {
+  Pressable,
+  StyleSheet,
   View,
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
-import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
-import { ThemedText } from '../visualization-and-display/ThemedText'
-import { ThemedPressable } from '../user-interaction/ThemedPressable'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
+import {
+  useMemoizedTheme,
+  useMemoizedThemeFactory
+} from '../../hooks/useMemoizedTheme'
 import type {
+  ChatAttachmentMessageBubbleFileIconStyle,
   ChatAttachmentMessageBubbleFileMetadataTextStyle,
   ChatAttachmentMessageBubbleFileNameTextStyle,
   ChatAttachmentMessageBubbleState,
@@ -24,9 +28,15 @@ import type {
   ChatMessageBubbleMetaDataTextStyle,
   ChatMessageBubbleState,
   PressableContainerStyle,
-  PressableState
+  PressableIconStyle,
+  PressableState,
+  PressableStateLayerStyle,
+  PressableTextStyle
 } from '../../theme/types/components/chat'
-import type { StyleOverwrite } from '../../theme/types/resolver'
+import type { StyleOverwrite, StyleResolverFunction } from '../../theme/types/resolver'
+import type { PressableInteractionState } from '../../utils/pressableInteraction'
+import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
+import { ThemedText } from '../visualization-and-display/ThemedText'
 import {
   ChatMessageBubble,
   type ChatMessageBubbleProps
@@ -39,6 +49,7 @@ export type ChatAttachmentMessageBubbleProps = Omit<ChatMessageBubbleProps, 'chi
   icon?: ReactNode,
   downloadLabel?: string,
   onDownload?: () => void,
+  style?: ChatMessageBubbleProps['style'],
   contentContainerStyle?: StyleOverwrite<
     PressableState,
     PressableContainerStyle
@@ -53,6 +64,20 @@ export type ChatAttachmentMessageBubbleProps = Omit<ChatMessageBubbleProps, 'chi
   >,
 }
 
+type AttachmentContentPressableResolvers = {
+  container: StyleResolverFunction<PressableState, PressableContainerStyle>,
+  stateLayer: StyleResolverFunction<PressableState, PressableStateLayerStyle>,
+  text: StyleResolverFunction<PressableState, PressableTextStyle>,
+  icon: StyleResolverFunction<PressableState, PressableIconStyle>,
+}
+
+const toPressableThemeState = (interaction: PressableInteractionState): PressableState => ({
+  isPressed: interaction.pressed,
+  isHovered: !!interaction.hovered,
+  isFocused: !!interaction.focused,
+  isFocusVisible: !!interaction.focusVisible,
+})
+
 const mergeBubbleStyleOverwrite = <TStyle extends StyleProp<ViewStyle> | object>(
   tokenOverride: TStyle,
   userOverwrite?: StyleOverwrite<ChatMessageBubbleState, TStyle>
@@ -78,6 +103,85 @@ const mergeBubbleStyleOverwrite = <TStyle extends StyleProp<ViewStyle> | object>
     }
   )
 
+type AttachmentDownloadContentProps = {
+  pressableState: PressableInteractionState,
+  contentResolvers: AttachmentContentPressableResolvers,
+  contentContainerStyle?: StyleOverwrite<PressableState, PressableContainerStyle>,
+  name: ReactNode,
+  metadata?: ReactNode,
+  icon?: ReactNode,
+  resolvedFileIconContainerStyle: StyleProp<ViewStyle>,
+  resolvedFileIcon: ChatAttachmentMessageBubbleFileIconStyle,
+  resolvedDownloadIconContainerStyle: StyleProp<ViewStyle>,
+  resolvedDownloadIcon: ChatAttachmentMessageBubbleFileIconStyle,
+  resolvedFileNameTextStyle: StyleProp<ViewStyle>,
+  resolvedFileMetadataTextStyle: StyleProp<ViewStyle>,
+  spacingXs: number,
+}
+
+const AttachmentDownloadContent = ({
+  pressableState,
+  contentResolvers,
+  contentContainerStyle,
+  name,
+  metadata,
+  icon,
+  resolvedFileIconContainerStyle,
+  resolvedFileIcon,
+  resolvedDownloadIconContainerStyle,
+  resolvedDownloadIcon,
+  resolvedFileNameTextStyle,
+  resolvedFileMetadataTextStyle,
+  spacingXs,
+}: AttachmentDownloadContentProps) => {
+  const pressableThemeState = useMemo(() => toPressableThemeState(pressableState),
+    [pressableState])
+
+  const resolvedContainerStyle = useMemoizedTheme(contentResolvers.container, pressableThemeState, contentContainerStyle)
+  const resolvedStateLayerStyle = useMemoizedTheme(contentResolvers.stateLayer, pressableThemeState)
+  const resolvedTextStyle = useMemoizedTheme(contentResolvers.text, pressableThemeState)
+
+  return (
+    <View style={resolvedContainerStyle}>
+      <View pointerEvents="none" style={resolvedStateLayerStyle} />
+      <View style={resolvedFileIconContainerStyle}>
+        {icon ?? (
+          <ThemedIcon
+            icon={HightideIconRegistry.FileText}
+            size={resolvedFileIcon.size}
+            strokeWidth={resolvedFileIcon.strokeWidth}
+            color={resolvedFileIcon.color}
+          />
+        )}
+      </View>
+      <View style={{ gap: spacingXs }}>
+        {typeof name === 'string' || typeof name === 'number' ? (
+          <ThemedText style={[resolvedFileNameTextStyle, resolvedTextStyle]} numberOfLines={1}>{name}</ThemedText>
+        ) : (
+          name
+        )}
+        {metadata != null && (
+          typeof metadata === 'string' || typeof metadata === 'number' ? (
+            <ThemedText appearance="description" style={[resolvedFileMetadataTextStyle, resolvedTextStyle]}>
+              {metadata}
+            </ThemedText>
+          ) : (
+            metadata
+          )
+        )}
+      </View>
+      <View style={resolvedDownloadIconContainerStyle}>
+        <ThemedIcon
+          icon={HightideIconRegistry.Download}
+          size={resolvedDownloadIcon.size}
+          strokeWidth={resolvedDownloadIcon.strokeWidth}
+          color={resolvedDownloadIcon.color}
+        />
+      </View>
+    </View>
+  )
+}
+
 export const ChatAttachmentMessageBubble = ({
   children,
   name,
@@ -87,9 +191,8 @@ export const ChatAttachmentMessageBubble = ({
   downloadLabel = 'Download',
   onDownload,
   timestamp,
-  readReceipt,
+  messageStatus,
   style,
-  containerStyle,
   bodyStyle,
   bodyTextStyle,
   metaDataContainerStyle,
@@ -104,74 +207,62 @@ export const ChatAttachmentMessageBubble = ({
   const state = useMemo(() => ({ direction }), [direction])
   const attachment = theme.components.chat.attachmentMessageBubble
   const bubbleOverrides = attachment.chatMessageBubbleOverrides
-  const contentResolvers = useMemo(
-    () => attachment.contentContainer(state),
-    [attachment, state]
-  )
+  const contentResolvers = useMemoizedThemeFactory<
+    ChatAttachmentMessageBubbleState,
+    AttachmentContentPressableResolvers
+  >(attachment.contentContainer, state)
 
-  const resolvedFileIconContainerStyle = useMemo(
-    () => attachment.fileIconContainer(state),
-    [attachment, state]
-  )
-  const resolvedFileIcon = useMemo(
-    () => attachment.fileIcon(state),
-    [attachment, state]
-  )
-  const resolvedDownloadIconContainerStyle = useMemo(
-    () => attachment.downloadIconContainer(state),
-    [attachment, state]
-  )
-  const resolvedDownloadIcon = useMemo(
-    () => attachment.downloadIcon(state),
-    [attachment, state]
-  )
-  const resolvedFileNameTextStyle = useMemo(
-    () => attachment.fileNameText(state, fileNameTextStyle),
-    [attachment, state, fileNameTextStyle]
-  )
-  const resolvedFileMetadataTextStyle = useMemo(
-    () => attachment.fileMetadataText(state, fileMetadataTextStyle),
-    [attachment, state, fileMetadataTextStyle]
-  )
+  const resolvedFileIconContainerStyle = useMemoizedTheme(attachment.fileIconContainer, state)
+  const resolvedFileIcon = useMemoizedTheme<
+    ChatAttachmentMessageBubbleState,
+    ChatAttachmentMessageBubbleFileIconStyle
+  >(attachment.fileIcon, state)
+  const resolvedDownloadIconContainerStyle = useMemoizedTheme(attachment.downloadIconContainer, state)
+  const resolvedDownloadIcon = useMemoizedTheme<
+    ChatAttachmentMessageBubbleState,
+    ChatAttachmentMessageBubbleFileIconStyle
+  >(attachment.downloadIcon, state)
+  const resolvedFileNameTextStyle = useMemoizedTheme(attachment.fileNameText, state, fileNameTextStyle)
+  const resolvedFileMetadataTextStyle = useMemoizedTheme(attachment.fileMetadataText, state, fileMetadataTextStyle)
 
   const resolvedContainerStyle = useMemo(
     () => mergeBubbleStyleOverwrite<ChatMessageBubbleContainerStyle>(
-      bubbleOverrides.container(state),
-      containerStyle
+      StyleSheet.flatten(bubbleOverrides.container(state)) as ChatMessageBubbleContainerStyle,
+      style
     ),
-    [bubbleOverrides, state, containerStyle]
+    [bubbleOverrides, state, style]
   )
   const resolvedBodyStyle = useMemo(
     () => mergeBubbleStyleOverwrite<ChatMessageBubbleBodyStyle>(
-      bubbleOverrides.body(state),
+      StyleSheet.flatten(bubbleOverrides.body(state)) as ChatMessageBubbleBodyStyle,
       bodyStyle
     ),
     [bubbleOverrides, state, bodyStyle]
   )
   const resolvedBodyTextStyle = useMemo(
     () => mergeBubbleStyleOverwrite<ChatMessageBubbleBodyTextStyle>(
-      bubbleOverrides.bodyText(state),
+      StyleSheet.flatten(bubbleOverrides.bodyText(state)) as ChatMessageBubbleBodyTextStyle,
       bodyTextStyle
     ),
     [bubbleOverrides, state, bodyTextStyle]
   )
   const resolvedMetaDataContainerStyle = useMemo(
     () => mergeBubbleStyleOverwrite<ChatMessageBubbleMetaDataContainerStyle>(
-      bubbleOverrides.metaDataContainer(state),
+      StyleSheet.flatten(bubbleOverrides.metaDataContainer(state)) as ChatMessageBubbleMetaDataContainerStyle,
       metaDataContainerStyle
     ),
     [bubbleOverrides, state, metaDataContainerStyle]
   )
   const resolvedMetaDataStatusContainerStyle = useMemo(
     () => mergeBubbleStyleOverwrite<ChatMessageBubbleMetaDataStatusContainerStyle>(
-      bubbleOverrides.metaDataStatusContainer(state),
+      StyleSheet.flatten(bubbleOverrides.metaDataStatusContainer(state)) as ChatMessageBubbleMetaDataStatusContainerStyle,
       metaDataStatusContainerStyle
     ),
     [bubbleOverrides, state, metaDataStatusContainerStyle]
   )
   const resolvedMetaDataTextStyle = useMemo(
     () => mergeBubbleStyleOverwrite<ChatMessageBubbleMetaDataTextStyle>(
-      bubbleOverrides.metaDataText(state),
+      StyleSheet.flatten(bubbleOverrides.metaDataText(state)) as ChatMessageBubbleMetaDataTextStyle,
       metaDataTextStyle
     ),
     [bubbleOverrides, state, metaDataTextStyle]
@@ -182,9 +273,8 @@ export const ChatAttachmentMessageBubble = ({
       {...props}
       direction={direction}
       timestamp={timestamp}
-      readReceipt={readReceipt}
-      style={style}
-      containerStyle={resolvedContainerStyle}
+      messageStatus={messageStatus}
+      style={resolvedContainerStyle}
       bodyStyle={resolvedBodyStyle}
       bodyTextStyle={resolvedBodyTextStyle}
       metaDataContainerStyle={resolvedMetaDataContainerStyle}
@@ -192,58 +282,29 @@ export const ChatAttachmentMessageBubble = ({
       metaDataTextStyle={resolvedMetaDataTextStyle}
     >
       {children}
-      <ThemedPressable
+      <Pressable
         accessibilityLabel={downloadLabel}
         disabled={onDownload == null}
         onPress={onDownload}
-        style={(pressableState) => (
-          contentResolvers.container(pressableState, contentContainerStyle)
-        )}
-        stateLayerStyle={(pressableState) => (
-          contentResolvers.stateLayer(pressableState)
-        )}
-        textStyle={(pressableState) => (
-          contentResolvers.text(pressableState)
-        )}
-        iconStyle={(pressableState) => (
-          contentResolvers.icon(pressableState)
-        )}
       >
-        <View style={resolvedFileIconContainerStyle}>
-          {icon ?? (
-            <ThemedIcon
-              icon={HightideIconRegistry.FileText}
-              size={resolvedFileIcon.size}
-              strokeWidth={resolvedFileIcon.strokeWidth}
-              color={resolvedFileIcon.color}
-            />
-          )}
-        </View>
-        <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
-          {typeof name === 'string' || typeof name === 'number' ? (
-            <ThemedText style={resolvedFileNameTextStyle} numberOfLines={1}>{name}</ThemedText>
-          ) : (
-            name
-          )}
-          {metadata != null && (
-            typeof metadata === 'string' || typeof metadata === 'number' ? (
-              <ThemedText appearance="description" style={resolvedFileMetadataTextStyle}>
-                {metadata}
-              </ThemedText>
-            ) : (
-              metadata
-            )
-          )}
-        </View>
-        <View style={resolvedDownloadIconContainerStyle}>
-          <ThemedIcon
-            icon={HightideIconRegistry.Download}
-            size={resolvedDownloadIcon.size}
-            strokeWidth={resolvedDownloadIcon.strokeWidth}
-            color={resolvedDownloadIcon.color}
+        {(pressableState) => (
+          <AttachmentDownloadContent
+            pressableState={pressableState as PressableInteractionState}
+            contentResolvers={contentResolvers}
+            contentContainerStyle={contentContainerStyle}
+            name={name}
+            metadata={metadata}
+            icon={icon}
+            resolvedFileIconContainerStyle={resolvedFileIconContainerStyle}
+            resolvedFileIcon={resolvedFileIcon}
+            resolvedDownloadIconContainerStyle={resolvedDownloadIconContainerStyle}
+            resolvedDownloadIcon={resolvedDownloadIcon}
+            resolvedFileNameTextStyle={resolvedFileNameTextStyle}
+            resolvedFileMetadataTextStyle={resolvedFileMetadataTextStyle}
+            spacingXs={theme.spacing.xs}
           />
-        </View>
-      </ThemedPressable>
+        )}
+      </Pressable>
     </ChatMessageBubble>
   )
 }

package/src/components/chat/ChatConversationList.tsx

@@ -11,6 +11,7 @@ import {
 } from 'react-native'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type {
   ChatConversationListFooterStyle,
   ChatConversationListHeaderStyle,
@@ -43,18 +44,9 @@ export const ChatConversationList = ({
   const { theme } = useTheme()
   const state = useMemo(() => ({}), [])
 
-  const resolvedListStyle = useMemo(
-    () => theme.components.chat.conversationList.container(state, listStyle),
-    [theme, state, listStyle]
-  )
-  const resolvedHeaderStyle = useMemo(
-    () => theme.components.chat.conversationList.header(state, headerStyle),
-    [theme, state, headerStyle]
-  )
-  const resolvedFooterStyle = useMemo(
-    () => theme.components.chat.conversationList.footer(state, footerStyle),
-    [theme, state, footerStyle]
-  )
+  const resolvedListStyle = useMemoizedTheme(theme.components.chat.conversationList.container, state, listStyle)
+  const resolvedHeaderStyle = useMemoizedTheme(theme.components.chat.conversationList.header, state, headerStyle)
+  const resolvedFooterStyle = useMemoizedTheme(theme.components.chat.conversationList.footer, state, footerStyle)
 
   return (
     <View {...props} style={[resolvedListStyle, style]}>