@helpwave/hightide-native 0.0.1 → 0.0.5

package/README.md

@@ -0,0 +1,56 @@
+# @helpwave/hightide-native
+
+React Native components, theme resolvers, and providers for helpwave apps.
+
+## Install
+
+```bash
+pnpm add @helpwave/hightide-native
+```
+
+Peer dependencies (install in your app if not already present):
+
+```bash
+pnpm add react react-native react-native-svg @react-native-async-storage/async-storage
+```
+
+## Setup
+
+Wrap your app with `HightideProvider`:
+
+```tsx
+import { HightideProvider } from "@helpwave/hightide-native/global-contexts";
+
+<HightideProvider theme={{ theme: "system" }} locale={{ locale: "system" }}>
+  {children}
+</HightideProvider>;
+```
+
+## Usage
+
+Import from the package subpaths (there is no root export):
+
+```tsx
+import { Button, Input, Select } 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";
+```
+
+| Subpath | Contents |
+| --- | --- |
+| `@helpwave/hightide-native/components` | UI components (`Button`, `Checkbox`, `Chip`, `Input`, …) |
+| `@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/theme` | Theme factories and style resolvers |
+| `@helpwave/hightide-native/types` | Shared TypeScript types |
+
+## Development
+
+From the monorepo root:
+
+```bash
+pnpm --filter @helpwave/hightide-native run init
+pnpm --filter @helpwave/hightide-native run storybook
+```

package/package.json

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

package/src/components/chat/ChatAttachmentCard.tsx

@@ -0,0 +1,110 @@
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+import {
+  Download,
+  FileText
+} from 'lucide-react-native'
+
+import { IconButton } from '@/src/components/user-interaction/IconButton'
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import type {
+  ChatAttachmentCardMetadataStyle,
+  ChatAttachmentCardNameStyle,
+  ChatAttachmentCardState,
+  ChatAttachmentCardStyle,
+  ChatMessageDirection
+} from '@/src/theme/types/components/chat'
+import type { StyleOverwrite } from '@/src/theme/types/resolver'
+
+export type ChatAttachmentCardProps = Omit<ViewProps, 'style'> & {
+  name: ReactNode,
+  metadata?: ReactNode,
+  icon?: ReactNode,
+  direction?: ChatMessageDirection,
+  downloadLabel?: string,
+  onDownload?: () => void,
+  style?: StyleProp<ViewStyle>,
+  cardStyle?: StyleOverwrite<ChatAttachmentCardState, ChatAttachmentCardStyle>,
+  nameStyle?: StyleOverwrite<Record<string, never>, ChatAttachmentCardNameStyle>,
+  metadataStyle?: StyleOverwrite<Record<string, never>, ChatAttachmentCardMetadataStyle>,
+}
+
+export const ChatAttachmentCard = ({
+  name,
+  metadata,
+  icon,
+  direction = 'incoming',
+  downloadLabel = 'Download',
+  onDownload,
+  style,
+  cardStyle,
+  nameStyle,
+  metadataStyle,
+  ...props
+}: ChatAttachmentCardProps) => {
+  const { theme } = useTheme()
+  const state = useMemo(() => ({ direction }), [direction])
+  const staticState = useMemo(() => ({}), [])
+
+  const resolvedCardStyle = useMemo(
+    () => theme.components.chat.attachmentCard.container(state, cardStyle),
+    [theme, state, cardStyle]
+  )
+  const resolvedIconStyle = useMemo(
+    () => theme.components.chat.attachmentCard.icon(staticState),
+    [theme, staticState]
+  )
+  const resolvedIconColor = useMemo(
+    () => theme.components.chat.attachmentCard.iconColor(staticState),
+    [theme, staticState]
+  )
+  const resolvedNameStyle = useMemo(
+    () => theme.components.chat.attachmentCard.name(staticState, nameStyle),
+    [theme, staticState, nameStyle]
+  )
+  const resolvedMetadataStyle = useMemo(
+    () => theme.components.chat.attachmentCard.metadata(staticState, metadataStyle),
+    [theme, staticState, metadataStyle]
+  )
+
+  return (
+    <View {...props} style={[resolvedCardStyle, style]}>
+      <View style={resolvedIconStyle}>
+        {icon ?? <FileText size={22} color={resolvedIconColor.color} />}
+      </View>
+      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        {typeof name === 'string' || typeof name === 'number' ? (
+          <Text style={resolvedNameStyle} numberOfLines={1}>{name}</Text>
+        ) : (
+          name
+        )}
+        {metadata != null && (
+          typeof metadata === 'string' || typeof metadata === 'number' ? (
+            <Text style={resolvedMetadataStyle}>{metadata}</Text>
+          ) : (
+            metadata
+          )
+        )}
+      </View>
+      {onDownload && (
+        <IconButton
+          accessibilityLabel={downloadLabel}
+          size="sm"
+          color="primary"
+          coloringStyle="text"
+          onPress={onDownload}
+          icon={Download}
+        />
+      )}
+    </View>
+  )
+}

package/src/components/chat/ChatConversationList.tsx

@@ -0,0 +1,72 @@
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  ScrollView,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import type {
+  ChatConversationListFooterStyle,
+  ChatConversationListHeaderStyle,
+  ChatConversationListStyle
+} from '@/src/theme/types/components/chat'
+import type { StyleOverwrite } from '@/src/theme/types/resolver'
+
+export type ChatConversationListProps = Omit<ViewProps, 'children' | 'style'> & {
+  header?: ReactNode,
+  footer?: ReactNode,
+  children?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  listStyle?: StyleOverwrite<Record<string, never>, ChatConversationListStyle>,
+  headerStyle?: StyleOverwrite<Record<string, never>, ChatConversationListHeaderStyle>,
+  contentStyle?: StyleProp<ViewStyle>,
+  footerStyle?: StyleOverwrite<Record<string, never>, ChatConversationListFooterStyle>,
+}
+
+export const ChatConversationList = ({
+  header,
+  footer,
+  children,
+  style,
+  listStyle,
+  headerStyle,
+  contentStyle,
+  footerStyle,
+  ...props
+}: ChatConversationListProps) => {
+  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]
+  )
+
+  return (
+    <View {...props} style={[resolvedListStyle, style]}>
+      {header != null && (
+        <View style={resolvedHeaderStyle}>{header}</View>
+      )}
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={contentStyle}>
+        {children}
+      </ScrollView>
+      {footer != null && (
+        <View style={resolvedFooterStyle}>{footer}</View>
+      )}
+    </View>
+  )
+}

package/src/components/chat/ChatConversationRow.tsx

@@ -0,0 +1,153 @@
+import {
+  Fragment,
+  useMemo,
+  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 { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import type {
+  ChatConversationRowPreviewStyle,
+  ChatConversationRowState,
+  ChatConversationRowStyle,
+  ChatConversationRowTimestampStyle,
+  ChatConversationRowTitleStyle
+} from '@/src/theme/types/components/chat'
+import type { StyleOverwrite } from '@/src/theme/types/resolver'
+
+export type ChatConversationSentIndicator = 'sent' | 'sentAndReceived'
+
+export type ChatConversationRowProps = Omit<PressableProps, 'children' | 'style'> & {
+  avatar: ReactNode,
+  title: ReactNode,
+  timestamp?: ReactNode,
+  preview?: ReactNode,
+  unreadCount?: number,
+  isSelected?: boolean,
+  sentIndicator?: ChatConversationSentIndicator,
+  style?: StyleProp<ViewStyle>,
+  rowStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowStyle>,
+  titleStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowTitleStyle>,
+  timestampStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowTimestampStyle>,
+  previewStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowPreviewStyle>,
+}
+
+type PressableInteraction = {
+  pressed: boolean,
+  hovered?: boolean,
+  focused?: boolean,
+}
+
+export const ChatConversationRow = ({
+  avatar,
+  title,
+  timestamp,
+  preview,
+  unreadCount,
+  isSelected = false,
+  sentIndicator,
+  disabled,
+  style,
+  rowStyle,
+  titleStyle,
+  timestampStyle,
+  previewStyle,
+  ...props
+}: ChatConversationRowProps) => {
+  const { theme } = useTheme()
+  const isUnread = (unreadCount ?? 0) > 0
+  const SentIndicatorIcon = sentIndicator === 'sentAndReceived' ? CheckCheck : Check
+
+  const resolveState = (interaction: PressableInteraction): ChatConversationRowState => ({
+    isUnread,
+    isSelected,
+    isDisabled: !!disabled,
+    isPressed: interaction.pressed,
+    isHovered: !!interaction.hovered,
+    isFocused: !!interaction.focused,
+  })
+
+  const staticState = useMemo(() => ({}), [])
+  const unreadBadge = useMemo(
+    () => theme.components.chat.conversationRow.unreadBadge(staticState),
+    [theme, staticState]
+  )
+  const unreadBadgeText = useMemo(
+    () => theme.components.chat.conversationRow.unreadBadgeText(staticState),
+    [theme, staticState]
+  )
+  const sentIndicatorColor = useMemo(
+    () => theme.components.chat.conversationRow.sentIndicator(staticState).color,
+    [theme, staticState]
+  )
+
+  return (
+    <Pressable
+      {...props}
+      disabled={disabled}
+      style={(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return [theme.components.chat.conversationRow.container(state, rowStyle), style]
+      }}
+    >
+      {(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        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: 'baseline', justifyContent: 'space-between', gap: 8 }}>
+                {typeof title === 'string' || typeof title === 'number' ? (
+                  <Text style={resolvedTitle} numberOfLines={1}>{title}</Text>
+                ) : (
+                  title
+                )}
+                {timestamp != null && (
+                  typeof timestamp === 'string' || typeof timestamp === 'number' ? (
+                    <Text style={resolvedTimestamp}>{timestamp}</Text>
+                  ) : (
+                    timestamp
+                  )
+                )}
+              </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 && (
+                    <SentIndicatorIcon size={14} color={sentIndicatorColor} />
+                  )}
+                  {preview != null && (
+                    typeof preview === 'string' || typeof preview === 'number' ? (
+                      <Text style={resolvedPreview} numberOfLines={1}>{preview}</Text>
+                    ) : (
+                      preview
+                    )
+                  )}
+                </View>
+                {isUnread && (
+                  <View style={unreadBadge}>
+                    <Text style={unreadBadgeText}>{unreadCount}</Text>
+                  </View>
+                )}
+              </View>
+            </View>
+          </Fragment>
+        )
+      }}
+    </Pressable>
+  )
+}

package/src/components/chat/ChatDateDivider.tsx

@@ -0,0 +1,55 @@
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import type {
+  ChatDateDividerStyle,
+  ChatDateDividerTextStyle
+} from '@/src/theme/types/components/chat'
+import type { StyleOverwrite } from '@/src/theme/types/resolver'
+
+export type ChatDateDividerProps = Omit<ViewProps, 'children' | 'style'> & {
+  children?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  dividerStyle?: StyleOverwrite<Record<string, never>, ChatDateDividerStyle>,
+  textStyle?: StyleOverwrite<Record<string, never>, ChatDateDividerTextStyle>,
+}
+
+export const ChatDateDivider = ({
+  children,
+  style,
+  dividerStyle,
+  textStyle,
+  ...props
+}: ChatDateDividerProps) => {
+  const { theme } = useTheme()
+  const state = useMemo(() => ({}), [])
+
+  const resolvedDividerStyle = useMemo(
+    () => theme.components.chat.dateDivider.container(state, dividerStyle),
+    [theme, state, dividerStyle]
+  )
+  const resolvedTextStyle = useMemo(
+    () => theme.components.chat.dateDivider.text(state, textStyle),
+    [theme, state, textStyle]
+  )
+
+  return (
+    <View {...props} style={[resolvedDividerStyle, style]}>
+      {typeof children === 'string' || typeof children === 'number' ? (
+        <Text style={resolvedTextStyle}>{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  )
+}

package/src/components/chat/ChatMessageBubble.tsx

@@ -0,0 +1,112 @@
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+import { CheckCheck } from 'lucide-react-native'
+
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import type {
+  ChatMessageBubbleContainerStyle,
+  ChatMessageBubbleContentStyle,
+  ChatMessageBubbleState,
+  ChatMessageBubbleStyle,
+  ChatMessageBubbleTimestampStyle,
+  ChatMessageDirection
+} from '@/src/theme/types/components/chat'
+import type { StyleOverwrite } from '@/src/theme/types/resolver'
+
+export type { ChatMessageDirection }
+
+export type ChatMessageBubbleProps = Omit<ViewProps, 'children' | 'style'> & {
+  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>,
+}
+
+export const ChatMessageBubble = ({
+  direction = 'incoming',
+  timestamp,
+  readReceipt,
+  children,
+  style,
+  containerStyle,
+  bubbleStyle,
+  contentStyle,
+  timestampStyle,
+  ...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 resolvedContentStyle = useMemo(
+    () => theme.components.chat.messageBubble.content(state, contentStyle),
+    [theme, state, contentStyle]
+  )
+  const resolvedTimestampStyle = useMemo(
+    () => theme.components.chat.messageBubble.timestamp(state, timestampStyle),
+    [theme, state, timestampStyle]
+  )
+  const resolvedReceiptStyle = useMemo(
+    () => theme.components.chat.messageBubble.receipt(staticState),
+    [theme, staticState]
+  )
+  const resolvedReceiptTextStyle = useMemo(
+    () => theme.components.chat.messageBubble.receiptText(staticState),
+    [theme, staticState]
+  )
+  const resolvedReceiptIcon = useMemo(
+    () => theme.components.chat.messageBubble.receiptIcon(staticState),
+    [theme, staticState]
+  )
+
+  return (
+    <View {...props} style={[resolvedContainerStyle, style]}>
+      <View style={resolvedBubbleStyle}>
+        {typeof children === 'string' || typeof children === 'number' ? (
+          <Text style={resolvedContentStyle}>{children}</Text>
+        ) : (
+          children
+        )}
+        {timestamp != null && (
+          typeof timestamp === 'string' || typeof timestamp === 'number' ? (
+            <Text style={resolvedTimestampStyle}>{timestamp}</Text>
+          ) : (
+            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/ChatMessageCard.tsx

@@ -0,0 +1,118 @@
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+
+import type { ColoringType } from '@helpwave/hightide-design/helpers'
+
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import type {
+  ChatMessageCardState,
+  ChatMessageCardStyle,
+  ChatMessageCardSubtitleStyle,
+  ChatMessageCardTitleStyle,
+  ChatMessageDirection
+} from '@/src/theme/types/components/chat'
+import type { StyleOverwrite } from '@/src/theme/types/resolver'
+
+export type ChatMessageCardProps = Omit<ViewProps, 'children' | 'style'> & {
+  icon?: ReactNode,
+  title: ReactNode,
+  subtitle?: ReactNode,
+  badge?: ReactNode,
+  actions?: ReactNode,
+  color?: ColoringType,
+  direction?: ChatMessageDirection,
+  children?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  cardStyle?: StyleOverwrite<ChatMessageCardState, ChatMessageCardStyle>,
+  titleStyle?: StyleOverwrite<ChatMessageCardState, ChatMessageCardTitleStyle>,
+  subtitleStyle?: StyleOverwrite<Record<string, never>, ChatMessageCardSubtitleStyle>,
+}
+
+export const ChatMessageCard = ({
+  icon,
+  title,
+  subtitle,
+  badge,
+  actions,
+  color = 'primary',
+  direction = 'incoming',
+  children,
+  style,
+  cardStyle,
+  titleStyle,
+  subtitleStyle,
+  ...props
+}: ChatMessageCardProps) => {
+  const { theme } = useTheme()
+  const state = useMemo(() => ({ direction, color }), [direction, color])
+  const staticState = useMemo(() => ({}), [])
+
+  const resolvedCardStyle = useMemo(
+    () => theme.components.chat.messageCard.container(state, cardStyle),
+    [theme, state, cardStyle]
+  )
+  const resolvedHeaderStyle = useMemo(
+    () => theme.components.chat.messageCard.header(staticState),
+    [theme, staticState]
+  )
+  const resolvedIconStyle = useMemo(
+    () => theme.components.chat.messageCard.icon(state),
+    [theme, state]
+  )
+  const resolvedTitleStyle = useMemo(
+    () => theme.components.chat.messageCard.title(state, titleStyle),
+    [theme, state, titleStyle]
+  )
+  const resolvedSubtitleStyle = useMemo(
+    () => theme.components.chat.messageCard.subtitle(staticState, subtitleStyle),
+    [theme, staticState, subtitleStyle]
+  )
+  const resolvedBodyStyle = useMemo(
+    () => theme.components.chat.messageCard.body(staticState),
+    [theme, staticState]
+  )
+  const resolvedActionsStyle = useMemo(
+    () => theme.components.chat.messageCard.actions(staticState),
+    [theme, staticState]
+  )
+
+  return (
+    <View {...props} style={[resolvedCardStyle, style]}>
+      <View style={resolvedHeaderStyle}>
+        {icon != null && (
+          <View style={resolvedIconStyle}>{icon}</View>
+        )}
+        <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+          {typeof title === 'string' || typeof title === 'number' ? (
+            <Text style={resolvedTitleStyle}>{title}</Text>
+          ) : (
+            title
+          )}
+          {subtitle != null && (
+            typeof subtitle === 'string' || typeof subtitle === 'number' ? (
+              <Text style={resolvedSubtitleStyle}>{subtitle}</Text>
+            ) : (
+              subtitle
+            )
+          )}
+        </View>
+        {badge}
+      </View>
+      {children != null && (
+        <View style={resolvedBodyStyle}>{children}</View>
+      )}
+      {actions != null && (
+        <View style={resolvedActionsStyle}>{actions}</View>
+      )}
+    </View>
+  )
+}