@helpwave/hightide-native 0.2.0 → 0.3.1

package/package.json

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

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/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/user-interaction/MultiSelect.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { Fragment, useMemo } from 'react'
 import {
   FlatList,
   Modal,
@@ -128,44 +128,72 @@ export const MultiSelect = ({
           })
         }}
       >
-        {selectedOptions.length > 0
-          ? (
-            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6, flex: 1 }}>
-              {selectedOptions.map((option) => (
-                <Chip key={option.id} size="md" color={color} variant="tonal">
-                  <ThemedText>{option.label ?? option.id}</ThemedText>
-                  {!state.isReadonly && (
-                    <View
-                      style={{
-                        position: 'relative',
-                        width: theme.icongraphy.sizes.sm,
-                      }}
-                    >
-                      <IconButton
-                        accessibilityLabel={translation('remove')}
-                        size="sm"
-                        color={theme.colors.negative}
-                        variant="foreground"
-                        disabled={!interactive}
-                        onPress={() => multiSelect.toggleSelection(option.id, false)}
-                        style={{
-                          position: 'absolute',
-                          left: '50%',
-                          top: '50%',
-                          transform: [
-                            { translateX: '-50%' },
-                            { translateY: '-50%' },
-                          ],
-                        }}
-                        icon={HightideIconRegistry.X}
-                      />
-                    </View>
-                  )}
-                </Chip>
-              ))}
-            </View>
+        {(pressableState) => {
+          const interaction = pressableState as {
+            pressed: boolean,
+            hovered?: boolean,
+            focused?: boolean,
+            focusVisible?: boolean,
+          }
+          const triggerState = {
+            ...state,
+            isPressed: interaction.pressed,
+            isHovered: !!interaction.hovered,
+            isFocused: !!interaction.focused,
+            isFocusVisible: !!interaction.focusVisible,
+          }
+
+          return (
+            <Fragment>
+              <View
+                pointerEvents="none"
+                style={multiSelectTheme.stateLayer(triggerState)}
+              />
+              {selectedOptions.length > 0
+                ? (
+                  <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6, flex: 1 }}>
+                    {selectedOptions.map((option) => (
+                      <Chip key={option.id} size="md" color={color} variant="tonal">
+                        <ThemedText>{option.label ?? option.id}</ThemedText>
+                        {!state.isReadonly && (
+                          <View
+                            style={{
+                              position: 'relative',
+                              width: theme.icongraphy.sizes.sm,
+                            }}
+                          >
+                            <IconButton
+                              accessibilityLabel={translation('remove')}
+                              size="sm"
+                              color={theme.colors.negative}
+                              variant="foreground"
+                              disabled={!interactive}
+                              onPress={() => multiSelect.toggleSelection(option.id, false)}
+                              style={{
+                                position: 'absolute',
+                                left: '50%',
+                                top: '50%',
+                                transform: [
+                                  { translateX: '-50%' },
+                                  { translateY: '-50%' },
+                                ],
+                              }}
+                              icon={HightideIconRegistry.X}
+                            />
+                          </View>
+                        )}
+                      </Chip>
+                    ))}
+                  </View>
+                )
+                : (
+                  <ThemedText style={multiSelectTheme.triggerText(triggerState)}>
+                    {placeholder}
+                  </ThemedText>
+                )}
+            </Fragment>
           )
-          : <ThemedText style={multiSelectTheme.triggerText(state)}>{placeholder}</ThemedText>}
+        }}
       </Pressable>
 
       <Modal

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

@@ -149,6 +149,10 @@ export const Select = ({
 
           return (
             <Fragment>
+              <View
+                pointerEvents="none"
+                style={selectTheme.stateLayer(triggerState)}
+              />
               <ThemedText style={[selectTheme.triggerText(triggerState), { flex: 1 }]}>
                 {selectedLabel}
               </ThemedText>

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

@@ -151,11 +151,15 @@ export const Switch = ({
         const resolvedThumbActive = theme.components.switch.thumb(activeState, thumbStyle)
         const trackWidth = toNumber(resolvedTrackStyle.width as string | number | undefined, 40)
         const trackHeight = toNumber(resolvedTrackStyle.height as string | number | undefined, 28)
-        const trackBorderWidth = toNumber(resolvedTrackStyle.borderWidth, 0)
+        const fallbackBorderWidth = toNumber(resolvedTrackStyle.borderWidth, 0)
+        const trackBorderTop = toNumber(resolvedTrackStyle.borderTopWidth, fallbackBorderWidth)
+        const trackBorderRight = toNumber(resolvedTrackStyle.borderRightWidth, fallbackBorderWidth)
+        const trackBorderBottom = toNumber(resolvedTrackStyle.borderBottomWidth, fallbackBorderWidth)
+        const trackBorderLeft = toNumber(resolvedTrackStyle.borderLeftWidth, fallbackBorderWidth)
         const thumbInactiveSize = toNumber(resolvedThumbInactive.width as string | number | undefined, 16)
         const thumbActiveSize = toNumber(resolvedThumbActive.width as string | number | undefined, 20)
-        const trackInnerWidth = trackWidth - (trackBorderWidth * 2)
-        const trackInnerHeight = trackHeight - (trackBorderWidth * 2)
+        const trackInnerWidth = trackWidth - trackBorderLeft - trackBorderRight
+        const trackInnerHeight = trackHeight - trackBorderTop - trackBorderBottom
         const thumbOffsetInactive = (trackInnerHeight - thumbInactiveSize) / 2
         const thumbOffsetActive = trackInnerWidth - thumbActiveSize - (
           (trackInnerHeight - thumbActiveSize) / 2

package/src/global-contexts/HightideProvider.tsx

@@ -8,10 +8,6 @@ import { hightideTranslation } from '@helpwave/hightide-utils/i18n'
 import { ArrayUtil } from '@helpwave/hightide-utils/utils'
 
 import { HightideContext } from './HightideContext'
-import {
-  DebugProvider,
-  type DebugProviderProps
-} from './debug'
 import {
   LocalizationProvider,
   type LocalizationProviderProps
@@ -31,7 +27,6 @@ export type HightideProviderProps = PropsWithChildren & {
   theme?: Omit<ThemeProviderProps<HightideTheme>, 'children'>,
   locale?: Omit<LocalizationProviderProps, 'children'>,
   translation?: Omit<TranslationProviderProps, 'children' | 'locale'>,
-  debug?: Omit<DebugProviderProps, 'children'>,
 }
 
 const HightideContextBridge = ({ children }: PropsWithChildren) => {
@@ -55,7 +50,6 @@ export const HightideProvider = ({
   theme,
   locale,
   translation,
-  debug,
 }: HightideProviderProps) => {
   const resolvedTranslations = useMemo(() => [
     ...ArrayUtil.resolveSingleOrArray(translation?.translation ?? []),
@@ -63,16 +57,14 @@ export const HightideProvider = ({
   ], [translation?.translation])
 
   return (
-    <DebugProvider {...debug}>
-      <LocalizationProvider {...locale}>
-        <TranslationProvider {...translation} translation={resolvedTranslations}>
-          <ThemeProvider {...theme}>
-            <HightideContextBridge>
-              {children}
-            </HightideContextBridge>
-          </ThemeProvider>
-        </TranslationProvider>
-      </LocalizationProvider>
-    </DebugProvider>
+    <LocalizationProvider {...locale}>
+      <TranslationProvider {...translation} translation={resolvedTranslations}>
+        <ThemeProvider {...theme}>
+          <HightideContextBridge>
+            {children}
+          </HightideContextBridge>
+        </ThemeProvider>
+      </TranslationProvider>
+    </LocalizationProvider>
   )
 }

package/src/theme/adapters/index.ts

@@ -1,4 +1 @@
-export * from './container-adapter'
-export * from './defined'
-export * from './icon-style-adapter'
-export * from './text-style-adapter'
+export * from './style-adapter-utils'