@helpwave/hightide-native 0.0.8 → 0.1.0

package/src/components/chat/ChatMessageBubble.tsx

@@ -3,21 +3,23 @@ import {
   type ReactNode
 } from 'react'
 import {
-  Text,
   View,
   type StyleProp,
   type ViewProps,
   type ViewStyle
 } from 'react-native'
-import { CheckCheck } from 'lucide-react-native'
-
+import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
+import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
+import { ThemedText } from '../visualization-and-display/ThemedText'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
+  ChatMessageBubbleBodyStyle,
+  ChatMessageBubbleBodyTextStyle,
   ChatMessageBubbleContainerStyle,
-  ChatMessageBubbleContentStyle,
+  ChatMessageBubbleMetaDataContainerStyle,
+  ChatMessageBubbleMetaDataStatusContainerStyle,
+  ChatMessageBubbleMetaDataTextStyle,
   ChatMessageBubbleState,
-  ChatMessageBubbleStyle,
-  ChatMessageBubbleTimestampStyle,
   ChatMessageDirection
 } from '../../theme/types/components/chat'
 import type { StyleOverwrite } from '../../theme/types/resolver'
@@ -25,88 +27,96 @@ import type { StyleOverwrite } from '../../theme/types/resolver'
 export type { ChatMessageDirection }
 
 export type ChatMessageBubbleProps = Omit<ViewProps, 'children' | 'style'> & {
-  direction?: ChatMessageDirection,
-  timestamp?: ReactNode,
+  direction: ChatMessageDirection,
+  timestamp: ReactNode,
   readReceipt?: ReactNode,
   children?: ReactNode,
   style?: StyleProp<ViewStyle>,
   containerStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleContainerStyle>,
-  bubbleStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleStyle>,
-  contentStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleContentStyle>,
-  timestampStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleTimestampStyle>,
+  bodyStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleBodyStyle>,
+  bodyTextStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleBodyTextStyle>,
+  metaDataContainerStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleMetaDataContainerStyle>,
+  metaDataStatusContainerStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleMetaDataStatusContainerStyle>,
+  metaDataTextStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleMetaDataTextStyle>,
 }
 
 export const ChatMessageBubble = ({
-  direction = 'incoming',
+  direction,
   timestamp,
   readReceipt,
   children,
   style,
   containerStyle,
-  bubbleStyle,
-  contentStyle,
-  timestampStyle,
+  bodyStyle,
+  bodyTextStyle,
+  metaDataContainerStyle,
+  metaDataStatusContainerStyle,
+  metaDataTextStyle,
   ...props
 }: ChatMessageBubbleProps) => {
   const { theme } = useTheme()
   const state = useMemo(() => ({ direction }), [direction])
-  const staticState = useMemo(() => ({}), [])
 
   const resolvedContainerStyle = useMemo(
     () => theme.components.chat.messageBubble.container(state, containerStyle),
     [theme, state, containerStyle]
   )
-  const resolvedBubbleStyle = useMemo(
-    () => theme.components.chat.messageBubble.bubble(state, bubbleStyle),
-    [theme, state, bubbleStyle]
+  const resolvedBodyStyle = useMemo(
+    () => theme.components.chat.messageBubble.body(state, bodyStyle),
+    [theme, state, bodyStyle]
   )
-  const resolvedContentStyle = useMemo(
-    () => theme.components.chat.messageBubble.content(state, contentStyle),
-    [theme, state, contentStyle]
+  const resolvedBodyTextStyle = useMemo(
+    () => theme.components.chat.messageBubble.bodyText(state, bodyTextStyle),
+    [theme, state, bodyTextStyle]
   )
-  const resolvedTimestampStyle = useMemo(
-    () => theme.components.chat.messageBubble.timestamp(state, timestampStyle),
-    [theme, state, timestampStyle]
+  const resolvedMetaDataContainerStyle = useMemo(
+    () => theme.components.chat.messageBubble.metaDataContainer(state, metaDataContainerStyle),
+    [theme, state, metaDataContainerStyle]
   )
-  const resolvedReceiptStyle = useMemo(
-    () => theme.components.chat.messageBubble.receipt(staticState),
-    [theme, staticState]
+  const resolvedMetaDataStatusContainerStyle = useMemo(
+    () => theme.components.chat.messageBubble.metaDataStatusContainer(state, metaDataStatusContainerStyle),
+    [theme, state, metaDataStatusContainerStyle]
   )
-  const resolvedReceiptTextStyle = useMemo(
-    () => theme.components.chat.messageBubble.receiptText(staticState),
-    [theme, staticState]
+  const resolvedMetaDataTextStyle = useMemo(
+    () => theme.components.chat.messageBubble.metaDataText(state, metaDataTextStyle),
+    [theme, state, metaDataTextStyle]
   )
-  const resolvedReceiptIcon = useMemo(
-    () => theme.components.chat.messageBubble.receiptIcon(staticState),
-    [theme, staticState]
+  const resolvedMetaDataIcon = useMemo(
+    () => theme.components.chat.messageBubble.metaDataIcon(state),
+    [theme, state]
   )
 
   return (
     <View {...props} style={[resolvedContainerStyle, style]}>
-      <View style={resolvedBubbleStyle}>
+      <View style={resolvedBodyStyle}>
         {typeof children === 'string' || typeof children === 'number' ? (
-          <Text style={resolvedContentStyle}>{children}</Text>
+          <ThemedText style={resolvedBodyTextStyle}>{children}</ThemedText>
         ) : (
           children
         )}
-        {timestamp != null && (
-          typeof timestamp === 'string' || typeof timestamp === 'number' ? (
-            <Text style={resolvedTimestampStyle}>{timestamp}</Text>
-          ) : (
-            timestamp
-          )
+      </View>
+      <View style={resolvedMetaDataContainerStyle}>
+        {readReceipt != null && (
+          <View style={resolvedMetaDataStatusContainerStyle}>
+            <ThemedIcon
+              icon={HightideIconRegistry.CheckCheck}
+              size={resolvedMetaDataIcon.size}
+              strokeWidth={resolvedMetaDataIcon.strokeWidth}
+              color={resolvedMetaDataIcon.color}
+            />
+            {typeof readReceipt === 'string' || typeof readReceipt === 'number' ? (
+              <ThemedText style={resolvedMetaDataTextStyle}>{readReceipt}</ThemedText>
+            ) : (
+              readReceipt
+            )}
+          </View>
+        )}
+        {typeof timestamp === 'string' || typeof timestamp === 'number' ? (
+          <ThemedText style={resolvedMetaDataTextStyle}>{timestamp}</ThemedText>
+        ) : (
+          timestamp
         )}
       </View>
-      {readReceipt != null && (
-        <View style={resolvedReceiptStyle}>
-          <CheckCheck size={14} color={resolvedReceiptIcon.color} />
-          {typeof readReceipt === 'string' || typeof readReceipt === 'number' ? (
-            <Text style={resolvedReceiptTextStyle}>{readReceipt}</Text>
-          ) : (
-            readReceipt
-          )}
-        </View>
-      )}
     </View>
   )
 }

package/src/components/chat/ChatMessageComposer.tsx

@@ -9,10 +9,10 @@ import {
   type ViewProps,
   type ViewStyle
 } from 'react-native'
-import { SendHorizontal } from 'lucide-react-native'
 
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 
+import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import { IconButton } from '../user-interaction/IconButton'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
@@ -84,7 +84,7 @@ export const ChatMessageComposer = ({
   return (
     <View {...props} style={[resolvedComposerStyle, style]}>
       {actions != null && (
-        <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+        <View style={{ flexDirection: 'row' }}>
           {actions}
         </View>
       )}
@@ -92,24 +92,26 @@ export const ChatMessageComposer = ({
         value={value ?? ''}
         onChangeText={setValue}
         placeholder={placeholder}
-        placeholderTextColor={placeholderColor}
+        placeholderTextColor={placeholderColor.color}
         editable={!disabled}
         multiline
         style={resolvedInputStyle}
         onSubmitEditing={send}
         returnKeyType="send"
       />
-      {trailing}
-      <IconButton
-        accessibilityLabel={sendLabel}
-        color="primary"
-        coloringStyle="solid"
-        disabled={disabled || !(value ?? '').trim()}
-        size="md"
-        onPress={send}
-        icon={SendHorizontal}
-        buttonStyle={(prev) => ({ ...prev, borderRadius: 999 })}
-      />
+      <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
+        {trailing}
+        <IconButton
+          icon={HightideIconRegistry.SendHorizontal}
+          accessibilityLabel={sendLabel}
+          variant="filled"
+          disabled={disabled || !(value ?? '').trim()}
+          size="sm"
+          onPress={send}
+          containerStyle={(prev) => ({ ...prev, borderRadius: 999 })}
+          stateLayerStyle={(prev) => ({ ...prev, borderRadius: 999 })}
+        />
+      </View>
     </View>
   )
 }

package/src/components/chat/ChatQuickReplyChip.tsx

@@ -1,32 +1,32 @@
-import type { ReactNode } from 'react'
 import {
-  Pressable,
-  Text,
-  type PressableProps,
-  type StyleProp,
-  type ViewStyle
-} from 'react-native'
+  useMemo,
+  type ReactNode
+} from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import {
+  ThemedPressable,
+  type ThemedPressableProps
+} from '../user-interaction/ThemedPressable'
+import { ThemedText } from '../visualization-and-display/ThemedText'
 import type {
   ChatQuickReplyChipState,
-  ChatQuickReplyChipStyle,
-  ChatQuickReplyChipTextStyle
+  PressableContainerStyle,
+  PressableState,
+  PressableTextStyle
 } from '../../theme/types/components/chat'
 import type { StyleOverwrite } from '../../theme/types/resolver'
 
-export type ChatQuickReplyChipProps = Omit<PressableProps, 'children' | 'style'> & {
+export type ChatQuickReplyChipProps = Omit<
+  ThemedPressableProps,
+  'children' | 'containerStyle' | 'textStyle' | 'stateLayerStyle'
+> & {
   isActive?: boolean,
   children?: ReactNode,
   style?: StyleProp<ViewStyle>,
-  chipStyle?: StyleOverwrite<ChatQuickReplyChipState, ChatQuickReplyChipStyle>,
-  textStyle?: StyleOverwrite<ChatQuickReplyChipState, ChatQuickReplyChipTextStyle>,
-}
-
-type PressableInteraction = {
-  pressed: boolean,
-  hovered?: boolean,
-  focused?: boolean,
+  containerStyle?: StyleOverwrite<PressableState, PressableContainerStyle>,
+  textStyle?: StyleOverwrite<PressableState, PressableTextStyle>,
 }
 
 export const ChatQuickReplyChip = ({
@@ -34,39 +34,37 @@ export const ChatQuickReplyChip = ({
   children,
   disabled,
   style,
-  chipStyle,
+  containerStyle,
   textStyle,
   ...props
 }: ChatQuickReplyChipProps) => {
   const { theme } = useTheme()
-
-  const resolveState = (interaction: PressableInteraction): ChatQuickReplyChipState => ({
-    isActive,
-    isDisabled: !!disabled,
-    isPressed: interaction.pressed,
-    isHovered: !!interaction.hovered,
-    isFocused: !!interaction.focused,
-  })
+  const state = useMemo((): ChatQuickReplyChipState => ({ isActive }), [isActive])
+  const pressableResolvers = useMemo(
+    () => theme.components.chat.quickReplyChip.pressable(state),
+    [theme, state]
+  )
 
   return (
-    <Pressable
+    <ThemedPressable
       {...props}
       disabled={disabled}
-      style={(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        return [theme.components.chat.quickReplyChip.container(state, chipStyle), style]
-      }}
+      style={style}
+      containerStyle={(_, pressableState) => (
+        pressableResolvers.container(pressableState, containerStyle)
+      )}
+      stateLayerStyle={(_, pressableState) => (
+        pressableResolvers.stateLayer(pressableState)
+      )}
+      textStyle={(_, pressableState) => (
+        pressableResolvers.text(pressableState, textStyle)
+      )}
     >
-      {(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        const resolvedText = theme.components.chat.quickReplyChip.text(state, textStyle)
-
-        if (typeof children === 'string' || typeof children === 'number') {
-          return <Text style={resolvedText}>{children}</Text>
-        }
-
-        return children
-      }}
-    </Pressable>
+      {typeof children === 'string' || typeof children === 'number' ? (
+        <ThemedText>{children}</ThemedText>
+      ) : (
+        children
+      )}
+    </ThemedPressable>
   )
 }

package/src/components/chat/ChatSystemLine.tsx

@@ -3,16 +3,17 @@ import {
   type ReactNode
 } from 'react'
 import {
-  Text,
   View,
   type StyleProp,
   type ViewProps,
   type ViewStyle
 } from 'react-native'
-import { CheckCheck } from 'lucide-react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/utils'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
+import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
+import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
+import { ThemedText } from '../visualization-and-display/ThemedText'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ChatSystemLineState,
@@ -23,7 +24,7 @@ import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatSystemLineProps = Omit<ViewProps, 'children' | 'style'> & {
   icon?: ReactNode,
-  color?: ColoringType,
+  color?: ColorPairToken,
   children?: ReactNode,
   style?: StyleProp<ViewStyle>,
   lineStyle?: StyleOverwrite<ChatSystemLineState, ChatSystemLineStyle>,
@@ -32,7 +33,7 @@ export type ChatSystemLineProps = Omit<ViewProps, 'children' | 'style'> & {
 
 export const ChatSystemLine = ({
   icon,
-  color = 'primary',
+  color,
   children,
   style,
   lineStyle,
@@ -57,9 +58,15 @@ export const ChatSystemLine = ({
 
   return (
     <View {...props} style={[resolvedLineStyle, style]}>
-      {icon ?? <CheckCheck size={14} color={resolvedIcon.color} />}
+      {icon ?? (
+        <ThemedIcon
+          icon={HightideIconRegistry.CheckCheck}
+          size={14}
+          color={resolvedIcon.color}
+        />
+      )}
       {typeof children === 'string' || typeof children === 'number' ? (
-        <Text style={resolvedTextStyle}>{children}</Text>
+        <ThemedText style={resolvedTextStyle}>{children}</ThemedText>
       ) : (
         children
       )}

package/src/components/chat/ChatThreadHeader.tsx

@@ -3,7 +3,6 @@ import {
   type ReactNode
 } from 'react'
 import {
-  Text,
   View,
   type StyleProp,
   type ViewProps,
@@ -11,7 +10,13 @@ import {
 } from 'react-native'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { ThemedText } from '../visualization-and-display/ThemedText'
+import {
+  Avatar,
+  type AvatarProps
+} from '../visualization-and-display/Avatar'
 import type {
+  ChatThreadHeaderContentRowStyle,
   ChatThreadHeaderStyle,
   ChatThreadHeaderSubtitleStyle,
   ChatThreadHeaderTitleStyle
@@ -19,13 +24,14 @@ import type {
 import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatThreadHeaderProps = Omit<ViewProps, 'style'> & {
-  avatar?: ReactNode,
+  avatar?: AvatarProps,
   title: ReactNode,
   subtitle?: ReactNode,
   leftActions?: ReactNode,
   rightActions?: ReactNode,
   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>,
 }
@@ -38,17 +44,25 @@ export const ChatThreadHeader = ({
   rightActions,
   style,
   headerStyle,
+  contentRowStyle,
   titleStyle,
   subtitleStyle,
   ...props
 }: ChatThreadHeaderProps) => {
   const { theme } = useTheme()
   const state = useMemo(() => ({}), [])
+  const resolvedAvatar = useMemo(() => ({
+    ...avatar,
+  }), [avatar])
 
   const resolvedHeaderStyle = useMemo(
     () => theme.components.chat.threadHeader.container(state, headerStyle),
     [theme, state, headerStyle]
   )
+  const resolvedContentRowStyle = useMemo(
+    () => theme.components.chat.threadHeader.contentRow(state, contentRowStyle),
+    [theme, state, contentRowStyle]
+  )
   const resolvedTitleStyle = useMemo(
     () => theme.components.chat.threadHeader.title(state, titleStyle),
     [theme, state, titleStyle]
@@ -58,6 +72,16 @@ export const ChatThreadHeader = ({
     [theme, state, subtitleStyle]
   )
 
+  const avatarThemeState = useMemo(() => ({
+    size: resolvedAvatar.size,
+    color: resolvedAvatar.color,
+  }), [resolvedAvatar.size, resolvedAvatar.color])
+
+  const avatarTheme = useMemo(
+    () => theme.components.chat.threadHeader.avatar(avatarThemeState),
+    [theme, avatarThemeState]
+  )
+
   return (
     <View {...props} style={[resolvedHeaderStyle, style]}>
       {leftActions != null && (
@@ -65,16 +89,46 @@ export const ChatThreadHeader = ({
           {leftActions}
         </View>
       )}
-      {avatar}
-      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+      <Avatar
+        {...resolvedAvatar}
+        avatarStyle={(_, avatarState) => avatarTheme.container(
+          {
+            ...avatarState,
+            size: resolvedAvatar.size,
+          },
+          resolvedAvatar.avatarStyle
+        )}
+        imageStyle={(_, avatarState) => avatarTheme.image(
+          {
+            ...avatarState,
+            size: resolvedAvatar.size,
+          },
+          resolvedAvatar.imageStyle
+        )}
+        textStyle={(_, avatarState) => avatarTheme.text(
+          {
+            ...avatarState,
+            size: resolvedAvatar.size,
+          },
+          resolvedAvatar.textStyle
+        )}
+        iconStyle={(_, avatarState) => avatarTheme.icon(
+          {
+            ...avatarState,
+            size: resolvedAvatar.size,
+          },
+          resolvedAvatar.iconStyle
+        )}
+      />
+      <View style={resolvedContentRowStyle}>
         {typeof title === 'string' || typeof title === 'number' ? (
-          <Text style={resolvedTitleStyle} numberOfLines={1}>{title}</Text>
+          <ThemedText style={resolvedTitleStyle} numberOfLines={1}>{title}</ThemedText>
         ) : (
           title
         )}
         {subtitle != null && (
           typeof subtitle === 'string' || typeof subtitle === 'number' ? (
-            <Text style={resolvedSubtitleStyle} numberOfLines={1}>{subtitle}</Text>
+            <ThemedText style={resolvedSubtitleStyle} numberOfLines={1}>{subtitle}</ThemedText>
           ) : (
             subtitle
           )

package/src/components/chat/index.ts

@@ -1,9 +1,8 @@
-export * from './ChatAttachmentCard'
+export * from './ChatAttachmentMessageBubble'
 export * from './ChatConversationList'
 export * from './ChatConversationRow'
 export * from './ChatDateDivider'
 export * from './ChatMessageBubble'
-export * from './ChatMessageCard'
 export * from './ChatMessageComposer'
 export * from './ChatMessageList'
 export * from './ChatQuickReplyChip'

package/src/components/index.ts

@@ -1,4 +1,6 @@
+export * from './card'
 export * from './chat'
-export * from './menu'
+export * from './layout'
+export * from './list'
 export * from './user-interaction'
 export * from './visualization-and-display'

package/src/components/layout/Divider.tsx

@@ -0,0 +1,60 @@
+import {
+  forwardRef,
+  useMemo
+} from 'react'
+import {
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+
+import type { ColorToken } from '@helpwave/hightide-design/primitive-tokens'
+import type { DividerDirection } from '@helpwave/hightide-design/component-token-resolvers'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type {
+  DividerState,
+  DividerStyle
+} from '../../theme/types/components/divider'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+
+export type DividerProps = Omit<ViewProps, 'style'> & {
+  direction?: DividerDirection,
+  color?: ColorToken,
+  width?: number,
+  margin?: number,
+  style?: StyleProp<ViewStyle>,
+  dividerStyle?: StyleOverwrite<DividerState, DividerStyle>,
+}
+
+export const Divider = forwardRef<View, DividerProps>(function Divider({
+  direction = 'horizontal',
+  color,
+  width,
+  margin,
+  style,
+  dividerStyle,
+  ...props
+}, ref) {
+  const { theme } = useTheme()
+  const state = useMemo((): DividerState => ({
+    direction,
+    color,
+    width,
+    margin,
+  }), [direction, color, width, margin])
+
+  const resolvedDividerStyle = useMemo(
+    () => theme.components.divider.container(state, dividerStyle),
+    [theme, state, dividerStyle]
+  )
+
+  return (
+    <View
+      {...props}
+      ref={ref}
+      style={[resolvedDividerStyle, style]}
+    />
+  )
+})

package/src/components/layout/index.ts

@@ -0,0 +1 @@
+export * from './Divider'