@helpwave/hightide-native 0.0.1 → 0.0.2

package/src/components/chat/ChatMessageComposer.tsx

@@ -0,0 +1,110 @@
+import { useMemo, type ReactNode } from 'react'
+import {
+  TextInput,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+import { SendHorizontal } from 'lucide-react-native'
+import { useControlledState } from '@helpwave/hightide-utils/hooks'
+import { IconButton } from '../user-interaction/IconButton'
+import { useTheme } from '../../global-contexts/theme'
+import type {
+  ChatMessageComposerInputStyle,
+  ChatMessageComposerStyle,
+  StyleOverwrite
+} from '../../theme'
+
+export type ChatMessageComposerProps = Omit<ViewProps, 'style'> & {
+  value?: string,
+  initialValue?: string,
+  onValueChange?: (value: string) => void,
+  onSend: (value: string) => void,
+  placeholder?: string,
+  sendLabel?: string,
+  disabled?: boolean,
+  actions?: ReactNode,
+  trailing?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  composerStyle?: StyleOverwrite<Record<string, never>, ChatMessageComposerStyle>,
+  inputStyle?: StyleOverwrite<Record<string, never>, ChatMessageComposerInputStyle>,
+}
+
+export const ChatMessageComposer = ({
+  value: controlledValue,
+  initialValue,
+  onValueChange,
+  onSend,
+  placeholder,
+  sendLabel = 'Send',
+  disabled = false,
+  actions,
+  trailing,
+  style,
+  composerStyle,
+  inputStyle,
+  ...props
+}: ChatMessageComposerProps) => {
+  const { theme } = useTheme()
+  const [value, setValue] = useControlledState({
+    value: controlledValue,
+    onValueChange,
+    defaultValue: initialValue ?? '',
+  })
+  const state = useMemo(() => ({}), [])
+
+  const resolvedComposerStyle = useMemo(
+    () => theme.components.chat.messageComposer(state, composerStyle),
+    [theme, state, composerStyle]
+  )
+  const resolvedInputStyle = useMemo(
+    () => theme.components.chat.messageComposerInput(state, inputStyle),
+    [theme, state, inputStyle]
+  )
+  const placeholderColor = useMemo(
+    () => theme.components.chat.messageComposerPlaceholderColor(state),
+    [theme, state]
+  )
+
+  const send = () => {
+    const trimmed = (value ?? '').trim()
+    if (!trimmed || disabled) {
+      return
+    }
+    onSend(trimmed)
+    setValue('')
+  }
+
+  return (
+    <View {...props} style={[resolvedComposerStyle, style]}>
+      {actions != null && (
+        <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+          {actions}
+        </View>
+      )}
+      <TextInput
+        value={value ?? ''}
+        onChangeText={setValue}
+        placeholder={placeholder}
+        placeholderTextColor={placeholderColor}
+        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>
+  )
+}

package/src/components/chat/ChatMessageList.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useMemo, useRef, type ReactNode } from 'react'
+import {
+  ScrollView,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+import { useTheme } from '../../global-contexts/theme'
+import type { ChatMessageListStyle, StyleOverwrite } from '../../theme'
+
+export type ChatMessageListProps = {
+  autoScroll?: boolean,
+  children?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  listStyle?: StyleOverwrite<Record<string, never>, ChatMessageListStyle>,
+  contentContainerStyle?: StyleProp<ViewStyle>,
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void,
+}
+
+export const ChatMessageList = ({
+  autoScroll = true,
+  children,
+  style,
+  listStyle,
+  contentContainerStyle,
+  onScroll,
+}: ChatMessageListProps) => {
+  const { theme } = useTheme()
+  const scrollRef = useRef<ScrollView>(null)
+  const state = useMemo(() => ({}), [])
+
+  const resolvedListStyle = useMemo(
+    () => theme.components.chat.messageList(state, listStyle),
+    [theme, state, listStyle]
+  )
+  const listGap = useMemo(
+    () => (theme.components.chat.messageList(state) as ViewStyle).gap,
+    [theme, state]
+  )
+
+  useEffect(() => {
+    if (autoScroll) {
+      scrollRef.current?.scrollToEnd({ animated: true })
+    }
+  }, [autoScroll, children])
+
+  return (
+    <ScrollView
+      ref={scrollRef}
+      style={[resolvedListStyle, style]}
+      contentContainerStyle={[{ gap: listGap }, contentContainerStyle]}
+      onScroll={onScroll}
+      scrollEventThrottle={16}
+    >
+      {children}
+    </ScrollView>
+  )
+}

package/src/components/chat/ChatQuickReplyChip.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react'
+import {
+  Pressable,
+  Text,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+import { useTheme } from '../../global-contexts/theme'
+import type {
+  ChatQuickReplyChipState,
+  ChatQuickReplyChipStyle,
+  ChatQuickReplyChipTextStyle,
+  StyleOverwrite
+} from '../../theme'
+
+export type ChatQuickReplyChipProps = Omit<PressableProps, 'children' | 'style'> & {
+  isActive?: boolean,
+  children?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  chipStyle?: StyleOverwrite<ChatQuickReplyChipState, ChatQuickReplyChipStyle>,
+  textStyle?: StyleOverwrite<ChatQuickReplyChipState, ChatQuickReplyChipTextStyle>,
+}
+
+type PressableInteraction = {
+  pressed: boolean,
+  hovered?: boolean,
+  focused?: boolean,
+}
+
+export const ChatQuickReplyChip = ({
+  isActive = false,
+  children,
+  disabled,
+  style,
+  chipStyle,
+  textStyle,
+  ...props
+}: ChatQuickReplyChipProps) => {
+  const { theme } = useTheme()
+
+  const resolveState = (interaction: PressableInteraction): ChatQuickReplyChipState => ({
+    isActive,
+    isDisabled: !!disabled,
+    isPressed: interaction.pressed,
+    isHovered: !!interaction.hovered,
+    isFocused: !!interaction.focused,
+  })
+
+  return (
+    <Pressable
+      {...props}
+      disabled={disabled}
+      style={(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return [theme.components.chat.quickReplyChip(state, chipStyle), style]
+      }}
+    >
+      {(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        const resolvedText = theme.components.chat.quickReplyChipText(state, textStyle)
+
+        if (typeof children === 'string' || typeof children === 'number') {
+          return <Text style={resolvedText}>{children}</Text>
+        }
+
+        return children
+      }}
+    </Pressable>
+  )
+}

package/src/components/chat/ChatSystemLine.tsx

@@ -0,0 +1,57 @@
+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 type { ColoringType } from '@helpwave/hightide-design'
+import { useTheme } from '../../global-contexts/theme'
+import type {
+  ChatSystemLineState,
+  ChatSystemLineStyle,
+  ChatSystemLineTextStyle,
+  StyleOverwrite
+} from '../../theme'
+
+export type ChatSystemLineProps = Omit<ViewProps, 'children' | 'style'> & {
+  icon?: ReactNode,
+  color?: ColoringType,
+  children?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  lineStyle?: StyleOverwrite<ChatSystemLineState, ChatSystemLineStyle>,
+  textStyle?: StyleOverwrite<ChatSystemLineState, ChatSystemLineTextStyle>,
+}
+
+export const ChatSystemLine = ({
+  icon,
+  color = 'primary',
+  children,
+  style,
+  lineStyle,
+  textStyle,
+  ...props
+}: ChatSystemLineProps) => {
+  const { theme } = useTheme()
+  const state = useMemo(() => ({ color }), [color])
+
+  const resolvedLineStyle = useMemo(
+    () => theme.components.chat.systemLine(state, lineStyle),
+    [theme, state, lineStyle]
+  )
+  const resolvedTextStyle = useMemo(
+    () => theme.components.chat.systemLineText(state, textStyle),
+    [theme, state, textStyle]
+  )
+  const resolvedIcon = useMemo(
+    () => theme.components.chat.systemLineIcon(state),
+    [theme, state]
+  )
+
+  return (
+    <View {...props} style={[resolvedLineStyle, style]}>
+      {icon ?? <CheckCheck size={14} color={resolvedIcon.color} />}
+      {typeof children === 'string' || typeof children === 'number' ? (
+        <Text style={resolvedTextStyle}>{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  )
+}

package/src/components/chat/ChatThreadHeader.tsx

@@ -0,0 +1,80 @@
+import { useMemo, type ReactNode } from 'react'
+import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import { useTheme } from '../../global-contexts/theme'
+import type {
+  ChatThreadHeaderStyle,
+  ChatThreadHeaderSubtitleStyle,
+  ChatThreadHeaderTitleStyle,
+  StyleOverwrite
+} from '../../theme'
+
+export type ChatThreadHeaderProps = Omit<ViewProps, 'style'> & {
+  avatar?: ReactNode,
+  title: ReactNode,
+  subtitle?: ReactNode,
+  leftActions?: ReactNode,
+  rightActions?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  headerStyle?: StyleOverwrite<Record<string, never>, ChatThreadHeaderStyle>,
+  titleStyle?: StyleOverwrite<Record<string, never>, ChatThreadHeaderTitleStyle>,
+  subtitleStyle?: StyleOverwrite<Record<string, never>, ChatThreadHeaderSubtitleStyle>,
+}
+
+export const ChatThreadHeader = ({
+  avatar,
+  title,
+  subtitle,
+  leftActions,
+  rightActions,
+  style,
+  headerStyle,
+  titleStyle,
+  subtitleStyle,
+  ...props
+}: ChatThreadHeaderProps) => {
+  const { theme } = useTheme()
+  const state = useMemo(() => ({}), [])
+
+  const resolvedHeaderStyle = useMemo(
+    () => theme.components.chat.threadHeader(state, headerStyle),
+    [theme, state, headerStyle]
+  )
+  const resolvedTitleStyle = useMemo(
+    () => theme.components.chat.threadHeaderTitle(state, titleStyle),
+    [theme, state, titleStyle]
+  )
+  const resolvedSubtitleStyle = useMemo(
+    () => theme.components.chat.threadHeaderSubtitle(state, subtitleStyle),
+    [theme, state, subtitleStyle]
+  )
+
+  return (
+    <View {...props} style={[resolvedHeaderStyle, style]}>
+      {leftActions != null && (
+        <View style={{ flexDirection: 'row', alignItems: 'center', flexShrink: 0 }}>
+          {leftActions}
+        </View>
+      )}
+      {avatar}
+      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        {typeof title === 'string' || typeof title === 'number' ? (
+          <Text style={resolvedTitleStyle} numberOfLines={1}>{title}</Text>
+        ) : (
+          title
+        )}
+        {subtitle != null && (
+          typeof subtitle === 'string' || typeof subtitle === 'number' ? (
+            <Text style={resolvedSubtitleStyle} numberOfLines={1}>{subtitle}</Text>
+          ) : (
+            subtitle
+          )
+        )}
+      </View>
+      {rightActions != null && (
+        <View style={{ flexDirection: 'row', alignItems: 'center', flexShrink: 0 }}>
+          {rightActions}
+        </View>
+      )}
+    </View>
+  )
+}

package/src/components/chat/index.ts

@@ -0,0 +1,11 @@
+export * from './ChatAttachmentCard'
+export * from './ChatConversationList'
+export * from './ChatConversationRow'
+export * from './ChatDateDivider'
+export * from './ChatMessageBubble'
+export * from './ChatMessageCard'
+export * from './ChatMessageComposer'
+export * from './ChatMessageList'
+export * from './ChatQuickReplyChip'
+export * from './ChatSystemLine'
+export * from './ChatThreadHeader'

package/src/components/index.ts

@@ -1,7 +1,4 @@
-export * from './Button'
-export * from './Checkbox'
-export * from './Chip'
-export * from './IconButton'
-export * from './Input'
-export * from './MultiSelect'
-export * from './Select'
+export * from './chat'
+export * from './menu'
+export * from './user-interaction'
+export * from './visualization-and-display'

package/src/components/menu/Menu.tsx

@@ -0,0 +1,51 @@
+import { useMemo, type ReactNode } from 'react'
+import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import { useTheme } from '../../global-contexts/theme'
+import type {
+  MenuCardStyle,
+  MenuSectionStyle,
+  MenuSectionTitleStyle,
+  StyleOverwrite
+} from '../../theme'
+
+export type MenuProps = Omit<ViewProps, 'children' | 'style'> & {
+  title: string,
+  children?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  sectionStyle?: StyleOverwrite<Record<string, never>, MenuSectionStyle>,
+  titleStyle?: StyleOverwrite<Record<string, never>, MenuSectionTitleStyle>,
+  cardStyle?: StyleOverwrite<Record<string, never>, MenuCardStyle>,
+}
+
+export const Menu = ({
+  title,
+  children,
+  style,
+  sectionStyle,
+  titleStyle,
+  cardStyle,
+  ...props
+}: MenuProps) => {
+  const { theme } = useTheme()
+  const state = useMemo(() => ({}), [])
+
+  const resolvedSectionStyle = useMemo(
+    () => theme.components.menu.section(state, sectionStyle),
+    [theme, state, sectionStyle]
+  )
+  const resolvedTitleStyle = useMemo(
+    () => theme.components.menu.sectionTitle(state, titleStyle),
+    [theme, state, titleStyle]
+  )
+  const resolvedCardStyle = useMemo(
+    () => theme.components.menu.card(state, cardStyle),
+    [theme, state, cardStyle]
+  )
+
+  return (
+    <View {...props} style={[resolvedSectionStyle, style]}>
+      <Text style={resolvedTitleStyle}>{title}</Text>
+      <View style={resolvedCardStyle}>{children}</View>
+    </View>
+  )
+}

package/src/components/menu/MenuActionItem.tsx

@@ -0,0 +1,85 @@
+import { Fragment, useMemo, type ReactNode } from 'react'
+import {
+  Pressable,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+import { useTheme } from '../../global-contexts/theme'
+import type {
+  MenuActionItemLabelStyle,
+  MenuActionItemState,
+  MenuActionItemStyle,
+  StyleOverwrite
+} from '../../theme'
+
+export type MenuActionItemProps = Omit<PressableProps, 'children' | 'style'> & {
+  label: string,
+  leading?: ReactNode,
+  trailing?: ReactNode,
+  danger?: boolean,
+  style?: StyleProp<ViewStyle>,
+  itemStyle?: StyleOverwrite<MenuActionItemState, MenuActionItemStyle>,
+  labelStyle?: StyleOverwrite<MenuActionItemState, MenuActionItemLabelStyle>,
+}
+
+type PressableInteraction = {
+  pressed: boolean,
+  hovered?: boolean,
+  focused?: boolean,
+}
+
+export const MenuActionItem = ({
+  label,
+  leading,
+  trailing,
+  danger = false,
+  disabled,
+  style,
+  itemStyle,
+  labelStyle,
+  ...props
+}: MenuActionItemProps) => {
+  const { theme } = useTheme()
+
+  const resolveState = (interaction: PressableInteraction): MenuActionItemState => ({
+    isDanger: danger,
+    isDisabled: !!disabled,
+    isPressed: interaction.pressed,
+    isHovered: !!interaction.hovered,
+    isFocused: !!interaction.focused,
+  })
+
+  const resolvedContentStyle = useMemo(
+    () => theme.components.menu.actionItemContent({}),
+    [theme]
+  )
+
+  return (
+    <Pressable
+      {...props}
+      disabled={disabled}
+      style={(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return [theme.components.menu.actionItem(state, itemStyle), style]
+      }}
+    >
+      {(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        const resolvedLabelStyle = theme.components.menu.actionItemLabel(state, labelStyle)
+
+        return (
+          <Fragment>
+            {leading}
+            <View style={resolvedContentStyle}>
+              <Text style={resolvedLabelStyle}>{label}</Text>
+            </View>
+            {trailing}
+          </Fragment>
+        )
+      }}
+    </Pressable>
+  )
+}

package/src/components/menu/MenuItem.tsx

@@ -0,0 +1,63 @@
+import { useMemo, type ReactNode } from 'react'
+import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import { useTheme } from '../../global-contexts/theme'
+import type {
+  MenuItemLabelStyle,
+  MenuItemStyle,
+  MenuItemValueStyle,
+  StyleOverwrite
+} from '../../theme'
+
+export type MenuItemProps = Omit<ViewProps, 'style'> & {
+  label: string,
+  value: string,
+  leading?: ReactNode,
+  trailing?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  itemStyle?: StyleOverwrite<Record<string, never>, MenuItemStyle>,
+  labelStyle?: StyleOverwrite<Record<string, never>, MenuItemLabelStyle>,
+  valueStyle?: StyleOverwrite<Record<string, never>, MenuItemValueStyle>,
+}
+
+export const MenuItem = ({
+  label,
+  value,
+  leading,
+  trailing,
+  style,
+  itemStyle,
+  labelStyle,
+  valueStyle,
+  ...props
+}: MenuItemProps) => {
+  const { theme } = useTheme()
+  const state = useMemo(() => ({}), [])
+
+  const resolvedItemStyle = useMemo(
+    () => theme.components.menu.item(state, itemStyle),
+    [theme, state, itemStyle]
+  )
+  const resolvedContentStyle = useMemo(
+    () => theme.components.menu.itemContent(state),
+    [theme, state]
+  )
+  const resolvedLabelStyle = useMemo(
+    () => theme.components.menu.itemLabel(state, labelStyle),
+    [theme, state, labelStyle]
+  )
+  const resolvedValueStyle = useMemo(
+    () => theme.components.menu.itemValue(state, valueStyle),
+    [theme, state, valueStyle]
+  )
+
+  return (
+    <View {...props} style={[resolvedItemStyle, style]}>
+      {leading}
+      <View style={resolvedContentStyle}>
+        <Text style={resolvedLabelStyle}>{label}</Text>
+        <Text style={resolvedValueStyle}>{value}</Text>
+      </View>
+      {trailing}
+    </View>
+  )
+}

package/src/components/menu/MenuNavigationItem.tsx

@@ -0,0 +1,85 @@
+import { ChevronRight } from 'lucide-react-native'
+import { Fragment, useMemo, type ReactNode } from 'react'
+import {
+  Pressable,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+import { useTheme } from '../../global-contexts/theme'
+import type {
+  MenuActionItemLabelStyle,
+  MenuActionItemState,
+  MenuActionItemStyle,
+  StyleOverwrite
+} from '../../theme'
+
+export type MenuNavigationItemProps = Omit<PressableProps, 'children' | 'style'> & {
+  label: string,
+  leading?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  itemStyle?: StyleOverwrite<MenuActionItemState, MenuActionItemStyle>,
+  labelStyle?: StyleOverwrite<MenuActionItemState, MenuActionItemLabelStyle>,
+}
+
+type PressableInteraction = {
+  pressed: boolean,
+  hovered?: boolean,
+  focused?: boolean,
+}
+
+export const MenuNavigationItem = ({
+  label,
+  leading,
+  disabled,
+  style,
+  itemStyle,
+  labelStyle,
+  ...props
+}: MenuNavigationItemProps) => {
+  const { theme } = useTheme()
+
+  const resolveState = (interaction: PressableInteraction): MenuActionItemState => ({
+    isDisabled: !!disabled,
+    isPressed: interaction.pressed,
+    isHovered: !!interaction.hovered,
+    isFocused: !!interaction.focused,
+  })
+
+  const resolvedContentStyle = useMemo(
+    () => theme.components.menu.navigationItemContent({}),
+    [theme]
+  )
+  const trailingColor = useMemo(
+    () => theme.components.menu.navigationItemTrailing({}).color,
+    [theme]
+  )
+
+  return (
+    <Pressable
+      {...props}
+      disabled={disabled}
+      style={(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return [theme.components.menu.navigationItem(state, itemStyle), style]
+      }}
+    >
+      {(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        const resolvedLabelStyle = theme.components.menu.navigationItemLabel(state, labelStyle)
+
+        return (
+          <Fragment>
+            {leading}
+            <View style={resolvedContentStyle}>
+              <Text style={resolvedLabelStyle}>{label}</Text>
+            </View>
+            <ChevronRight size={16} color={trailingColor} />
+          </Fragment>
+        )
+      }}
+    </Pressable>
+  )
+}

package/src/components/menu/index.ts

@@ -0,0 +1,4 @@
+export * from './Menu'
+export * from './MenuActionItem'
+export * from './MenuItem'
+export * from './MenuNavigationItem'