@helpwave/hightide-native 0.0.7 → 0.1.0

package/README.md

@@ -31,18 +31,18 @@ import { HightideProvider } from "@helpwave/hightide-native/global-contexts";
 Import from the package subpaths (there is no root export):
 
 ```tsx
-import { Button, Input, Select } from "@helpwave/hightide-native/components";
+import { Button, Input, Select, ThemedIcon } from "@helpwave/hightide-native/components";
 import { HightideProvider } from "@helpwave/hightide-native/global-contexts";
 import { useSelect } from "@helpwave/hightide-native/hooks";
-import { Icon } from "@helpwave/hightide-native/icons";
+import { HightideIconRegistry } from "@helpwave/hightide-native/icons";
 ```
 
 | Subpath | Contents |
 | --- | --- |
-| `@helpwave/hightide-native/components` | UI components (`Button`, `Checkbox`, `Chip`, `Input`, …) |
+| `@helpwave/hightide-native/components` | UI components (`Button`, `Checkbox`, `Chip`, `Input`, `ThemedText`, `ThemedIcon`, …) |
 | `@helpwave/hightide-native/global-contexts` | `HightideProvider` and related context providers |
 | `@helpwave/hightide-native/hooks` | Native hooks (`useSelect`, `useMultiSelect`, …) |
-| `@helpwave/hightide-native/icons` | Icon components |
+| `@helpwave/hightide-native/icons` | Icon registry (`HightideIconRegistry`) |
 | `@helpwave/hightide-native/theme` | Theme factories and style resolvers |
 | `@helpwave/hightide-native/types` | Shared TypeScript types |
 

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "type": "module",
   "files": [
     "src"
@@ -43,8 +43,8 @@
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-design": "0.0.5",
-    "@helpwave/hightide-utils": "0.0.5"
+    "@helpwave/hightide-design": "0.1.0",
+    "@helpwave/hightide-utils": "0.1.0"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=2.0.0",
@@ -55,22 +55,13 @@
   "devDependencies": {
     "@helpwave/eslint-config": "0.0.11",
     "@react-native-async-storage/async-storage": "2.2.0",
-    "@storybook/addon-docs": "10.4.5",
-    "@storybook/addon-links": "10.4.5",
-    "@storybook/react-native-web-vite": "10.4.5",
-    "@types/react": "19.2.3",
-    "@types/react-dom": "19.2.3",
+    "@types/react": "19.0.10",
     "eslint": "9.31.0",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-storybook": "10.4.5",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "react-native": "0.79.2",
+    "react": "19.0.0",
+    "react-native": "0.79.6",
     "react-native-svg": "15.12.0",
-    "react-native-web": "0.20.0",
-    "storybook": "10.4.5",
-    "typescript": "5.7.2",
-    "vite": "7.3.5"
+    "typescript": "5.7.2"
   },
   "keywords": [
     "react-native",
@@ -81,13 +72,11 @@
     "url": "https://github.com/helpwave/hightide/issues"
   },
   "scripts": {
-    "clean": "pnpm run barrel -- --clean && rm -rf node_modules storybook-static",
+    "clean": "pnpm run barrel -- --clean && rm -rf node_modules",
     "init": "pnpm run barrel",
     "barrel": "node node_modules/@helpwave/hightide-utils/scripts/barrel.js",
     "barrel:check": "node node_modules/@helpwave/hightide-utils/scripts/barrel.js --check",
     "build": "pnpm run barrel",
-    "storybook": "storybook dev -p 6007",
-    "build-storybook": "storybook build",
     "lint": "eslint .",
     "test": "node -e \"process.exit(0)\""
   }

package/src/components/card/Card.tsx

@@ -0,0 +1,41 @@
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type { CardStyle } from '../../theme/types/components/card'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+
+export type CardProps = Omit<ViewProps, 'children' | 'style'> & {
+  children?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  cardStyle?: StyleOverwrite<Record<string, never>, CardStyle>,
+}
+
+export const Card = ({
+  children,
+  style,
+  cardStyle,
+  ...props
+}: CardProps) => {
+  const { theme } = useTheme()
+  const state = useMemo(() => ({}), [])
+
+  const resolvedCardStyle = useMemo(
+    () => theme.components.card.container(state, cardStyle),
+    [theme, state, cardStyle]
+  )
+
+  return (
+    <View {...props} style={[resolvedCardStyle, style]}>
+      {children}
+    </View>
+  )
+}

package/src/components/card/index.ts

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

package/src/components/chat/ChatAttachmentMessageBubble.tsx

@@ -0,0 +1,246 @@
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  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 type {
+  ChatAttachmentMessageBubbleFileMetadataTextStyle,
+  ChatAttachmentMessageBubbleFileNameTextStyle,
+  ChatAttachmentMessageBubbleState,
+  ChatMessageBubbleBodyStyle,
+  ChatMessageBubbleBodyTextStyle,
+  ChatMessageBubbleContainerStyle,
+  ChatMessageBubbleMetaDataContainerStyle,
+  ChatMessageBubbleMetaDataStatusContainerStyle,
+  ChatMessageBubbleMetaDataTextStyle,
+  ChatMessageBubbleState,
+  PressableContainerStyle,
+  PressableState
+} from '../../theme/types/components/chat'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+import {
+  ChatMessageBubble,
+  type ChatMessageBubbleProps
+} from './ChatMessageBubble'
+
+export type ChatAttachmentMessageBubbleProps = Omit<ChatMessageBubbleProps, 'children'> & {
+  children?: ReactNode,
+  name: ReactNode,
+  metadata?: ReactNode,
+  icon?: ReactNode,
+  downloadLabel?: string,
+  onDownload?: () => void,
+  contentContainerStyle?: StyleOverwrite<
+    PressableState,
+    PressableContainerStyle
+  >,
+  fileNameTextStyle?: StyleOverwrite<
+    ChatAttachmentMessageBubbleState,
+    ChatAttachmentMessageBubbleFileNameTextStyle
+  >,
+  fileMetadataTextStyle?: StyleOverwrite<
+    ChatAttachmentMessageBubbleState,
+    ChatAttachmentMessageBubbleFileMetadataTextStyle
+  >,
+}
+
+const mergeBubbleStyleOverwrite = <TStyle extends StyleProp<ViewStyle> | object>(
+  tokenOverride: TStyle,
+  userOverwrite?: StyleOverwrite<ChatMessageBubbleState, TStyle>
+): StyleOverwrite<ChatMessageBubbleState, TStyle> => (
+    (prev, state) => {
+      const withTokenOverride = {
+        ...(prev as object),
+        ...(tokenOverride as object),
+      } as TStyle
+
+      if (userOverwrite === undefined) {
+        return withTokenOverride
+      }
+
+      if (typeof userOverwrite === 'function') {
+        return userOverwrite(withTokenOverride, state)
+      }
+
+      return {
+        ...(withTokenOverride as object),
+        ...(userOverwrite as object),
+      } as TStyle
+    }
+  )
+
+export const ChatAttachmentMessageBubble = ({
+  children,
+  name,
+  metadata,
+  icon,
+  direction,
+  downloadLabel = 'Download',
+  onDownload,
+  timestamp,
+  readReceipt,
+  style,
+  containerStyle,
+  bodyStyle,
+  bodyTextStyle,
+  metaDataContainerStyle,
+  metaDataStatusContainerStyle,
+  metaDataTextStyle,
+  contentContainerStyle,
+  fileNameTextStyle,
+  fileMetadataTextStyle,
+  ...props
+}: ChatAttachmentMessageBubbleProps) => {
+  const { theme } = useTheme()
+  const state = useMemo(() => ({ direction }), [direction])
+  const attachment = theme.components.chat.attachmentMessageBubble
+  const bubbleOverrides = attachment.chatMessageBubbleOverrides
+  const contentResolvers = useMemo(
+    () => attachment.contentContainer(state),
+    [attachment, 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 resolvedContainerStyle = useMemo(
+    () => mergeBubbleStyleOverwrite<ChatMessageBubbleContainerStyle>(
+      bubbleOverrides.container(state),
+      containerStyle
+    ),
+    [bubbleOverrides, state, containerStyle]
+  )
+  const resolvedBodyStyle = useMemo(
+    () => mergeBubbleStyleOverwrite<ChatMessageBubbleBodyStyle>(
+      bubbleOverrides.body(state),
+      bodyStyle
+    ),
+    [bubbleOverrides, state, bodyStyle]
+  )
+  const resolvedBodyTextStyle = useMemo(
+    () => mergeBubbleStyleOverwrite<ChatMessageBubbleBodyTextStyle>(
+      bubbleOverrides.bodyText(state),
+      bodyTextStyle
+    ),
+    [bubbleOverrides, state, bodyTextStyle]
+  )
+  const resolvedMetaDataContainerStyle = useMemo(
+    () => mergeBubbleStyleOverwrite<ChatMessageBubbleMetaDataContainerStyle>(
+      bubbleOverrides.metaDataContainer(state),
+      metaDataContainerStyle
+    ),
+    [bubbleOverrides, state, metaDataContainerStyle]
+  )
+  const resolvedMetaDataStatusContainerStyle = useMemo(
+    () => mergeBubbleStyleOverwrite<ChatMessageBubbleMetaDataStatusContainerStyle>(
+      bubbleOverrides.metaDataStatusContainer(state),
+      metaDataStatusContainerStyle
+    ),
+    [bubbleOverrides, state, metaDataStatusContainerStyle]
+  )
+  const resolvedMetaDataTextStyle = useMemo(
+    () => mergeBubbleStyleOverwrite<ChatMessageBubbleMetaDataTextStyle>(
+      bubbleOverrides.metaDataText(state),
+      metaDataTextStyle
+    ),
+    [bubbleOverrides, state, metaDataTextStyle]
+  )
+
+  return (
+    <ChatMessageBubble
+      {...props}
+      direction={direction}
+      timestamp={timestamp}
+      readReceipt={readReceipt}
+      style={style}
+      containerStyle={resolvedContainerStyle}
+      bodyStyle={resolvedBodyStyle}
+      bodyTextStyle={resolvedBodyTextStyle}
+      metaDataContainerStyle={resolvedMetaDataContainerStyle}
+      metaDataStatusContainerStyle={resolvedMetaDataStatusContainerStyle}
+      metaDataTextStyle={resolvedMetaDataTextStyle}
+    >
+      {children}
+      <ThemedPressable
+        accessibilityLabel={downloadLabel}
+        disabled={onDownload == null}
+        onPress={onDownload}
+        containerStyle={(_, pressableState) => (
+          contentResolvers.container(pressableState, contentContainerStyle)
+        )}
+        stateLayerStyle={(_, pressableState) => (
+          contentResolvers.stateLayer(pressableState)
+        )}
+        textStyle={(_, pressableState) => (
+          contentResolvers.text(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}
+          />
+        </View>
+      </ThemedPressable>
+    </ChatMessageBubble>
+  )
+}

package/src/components/chat/ChatConversationRow.tsx

@@ -4,18 +4,14 @@ import {
   type ReactNode
 } from 'react'
 import {
-  Pressable,
-  Text,
   View,
   type PressableProps,
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import {
-  Check,
-  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 {
   ChatConversationRowPreviewStyle,
@@ -25,6 +21,7 @@ import type {
   ChatConversationRowTitleStyle
 } from '../../theme/types/components/chat'
 import type { StyleOverwrite } from '../../theme/types/resolver'
+import { ThemedPressable } from '../user-interaction'
 
 export type ChatConversationSentIndicator = 'sent' | 'sentAndReceived'
 
@@ -47,6 +44,7 @@ type PressableInteraction = {
   pressed: boolean,
   hovered?: boolean,
   focused?: boolean,
+  focusVisible?: boolean,
 }
 
 export const ChatConversationRow = ({
@@ -67,7 +65,9 @@ export const ChatConversationRow = ({
 }: ChatConversationRowProps) => {
   const { theme } = useTheme()
   const isUnread = (unreadCount ?? 0) > 0
-  const SentIndicatorIcon = sentIndicator === 'sentAndReceived' ? CheckCheck : Check
+  const sentIndicatorIcon = sentIndicator === 'sentAndReceived'
+    ? HightideIconRegistry.CheckCheck
+    : HightideIconRegistry.Check
 
   const resolveState = (interaction: PressableInteraction): ChatConversationRowState => ({
     isUnread,
@@ -76,6 +76,7 @@ export const ChatConversationRow = ({
     isPressed: interaction.pressed,
     isHovered: !!interaction.hovered,
     isFocused: !!interaction.focused,
+    isFocusVisible: !!interaction.focusVisible,
   })
 
   const staticState = useMemo(() => ({}), [])
@@ -93,7 +94,7 @@ export const ChatConversationRow = ({
   )
 
   return (
-    <Pressable
+    <ThemedPressable
       {...props}
       disabled={disabled}
       style={(pressableState) => {
@@ -111,15 +112,15 @@ export const ChatConversationRow = ({
           <Fragment>
             {avatar}
             <View style={{ flex: 1, minWidth: 0, gap: 5 }}>
-              <View style={{ flexDirection: 'row', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                 {typeof title === 'string' || typeof title === 'number' ? (
-                  <Text style={resolvedTitle} numberOfLines={1}>{title}</Text>
+                  <ThemedText style={resolvedTitle} numberOfLines={1}>{title}</ThemedText>
                 ) : (
                   title
                 )}
                 {timestamp != null && (
                   typeof timestamp === 'string' || typeof timestamp === 'number' ? (
-                    <Text style={resolvedTimestamp}>{timestamp}</Text>
+                    <ThemedText style={resolvedTimestamp}>{timestamp}</ThemedText>
                   ) : (
                     timestamp
                   )
@@ -128,11 +129,15 @@ export const ChatConversationRow = ({
               <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                 <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 4, minWidth: 0 }}>
                   {sentIndicator && (
-                    <SentIndicatorIcon size={14} color={sentIndicatorColor} />
+                    <ThemedIcon
+                      icon={sentIndicatorIcon}
+                      size={16}
+                      color={sentIndicatorColor}
+                    />
                   )}
                   {preview != null && (
                     typeof preview === 'string' || typeof preview === 'number' ? (
-                      <Text style={resolvedPreview} numberOfLines={1}>{preview}</Text>
+                      <ThemedText style={resolvedPreview} numberOfLines={1}>{preview}</ThemedText>
                     ) : (
                       preview
                     )
@@ -140,7 +145,7 @@ export const ChatConversationRow = ({
                 </View>
                 {isUnread && (
                   <View style={unreadBadge}>
-                    <Text style={unreadBadgeText}>{unreadCount}</Text>
+                    <ThemedText style={unreadBadgeText}>{unreadCount}</ThemedText>
                   </View>
                 )}
               </View>
@@ -148,6 +153,6 @@ export const ChatConversationRow = ({
           </Fragment>
         )
       }}
-    </Pressable>
+    </ThemedPressable>
   )
 }

package/src/components/chat/ChatDateDivider.tsx

@@ -3,7 +3,6 @@ import {
   type ReactNode
 } from 'react'
 import {
-  Text,
   View,
   type StyleProp,
   type ViewProps,
@@ -11,6 +10,7 @@ import {
 } from 'react-native'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { ThemedText } from '../visualization-and-display/ThemedText'
 import type {
   ChatDateDividerStyle,
   ChatDateDividerTextStyle
@@ -46,7 +46,7 @@ export const ChatDateDivider = ({
   return (
     <View {...props} style={[resolvedDividerStyle, style]}>
       {typeof children === 'string' || typeof children === 'number' ? (
-        <Text style={resolvedTextStyle}>{children}</Text>
+        <ThemedText style={resolvedTextStyle}>{children}</ThemedText>
       ) : (
         children
       )}