@helpwave/hightide-native 0.0.8 → 0.1.1

package/src/utils/hitBoxOverlay.ts

@@ -0,0 +1,44 @@
+import type { Insets, PressableProps, ViewStyle } from 'react-native'
+
+export const resolveHitSlopInsets = (hitSlop: PressableProps['hitSlop']): Insets => {
+  if (hitSlop === undefined || hitSlop === null) {
+    return {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    }
+  }
+
+  if (typeof hitSlop === 'number') {
+    return {
+      top: hitSlop,
+      right: hitSlop,
+      bottom: hitSlop,
+      left: hitSlop,
+    }
+  }
+
+  return {
+    top: hitSlop.top ?? 0,
+    right: hitSlop.right ?? 0,
+    bottom: hitSlop.bottom ?? 0,
+    left: hitSlop.left ?? 0,
+  }
+}
+
+export const createHitBoxOverlayStyle = (
+  hitSlop: PressableProps['hitSlop'],
+  color: string
+): ViewStyle => {
+  const insets = resolveHitSlopInsets(hitSlop)
+
+  return {
+    position: 'absolute',
+    top: -(insets.top ?? 0),
+    right: -(insets.right ?? 0),
+    bottom: -(insets.bottom ?? 0),
+    left: -(insets.left ?? 0),
+    backgroundColor: color,
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './hitBoxOverlay'
+export * from './minimumTouchTargetHitSlop'

package/src/utils/minimumTouchTargetHitSlop.ts

@@ -0,0 +1,68 @@
+import { useCallback, useState } from 'react'
+import type {
+  Insets,
+  LayoutChangeEvent,
+  PressableProps
+} from 'react-native'
+
+export const computeMinimumTouchTargetHitSlop = (
+  layout: { width: number, height: number },
+  touchTargetSize: number
+): Insets => {
+  const horizontal = Math.max(0, touchTargetSize - layout.width) / 2
+  const vertical = Math.max(0, touchTargetSize - layout.height) / 2
+
+  return {
+    top: vertical,
+    bottom: vertical,
+    left: horizontal,
+    right: horizontal,
+  }
+}
+
+const areInsetsEqual = (a: Insets | undefined, b: Insets): boolean => (
+  a !== undefined
+  && a.top === b.top
+  && a.bottom === b.bottom
+  && a.left === b.left
+  && a.right === b.right
+)
+
+export type UseMinimumTouchTargetHitSlopOptions = {
+  touchTargetSize: number,
+  hitSlop?: PressableProps['hitSlop'],
+  onLayout?: PressableProps['onLayout'],
+}
+
+export type UseMinimumTouchTargetHitSlopResult = {
+  hitSlop: PressableProps['hitSlop'],
+  onLayout: NonNullable<PressableProps['onLayout']>,
+}
+
+export const useMinimumTouchTargetHitSlop = ({
+  touchTargetSize,
+  hitSlop: providedHitSlop,
+  onLayout: providedOnLayout,
+}: UseMinimumTouchTargetHitSlopOptions): UseMinimumTouchTargetHitSlopResult => {
+  const [autoHitSlop, setAutoHitSlop] = useState<Insets | undefined>()
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    providedOnLayout?.(event)
+
+    if (providedHitSlop !== undefined) {
+      return
+    }
+
+    const { width, height } = event.nativeEvent.layout
+    const nextHitSlop = computeMinimumTouchTargetHitSlop({ width, height }, touchTargetSize)
+
+    setAutoHitSlop((prev) => (
+      areInsetsEqual(prev, nextHitSlop) ? prev : nextHitSlop
+    ))
+  }, [providedHitSlop, providedOnLayout, touchTargetSize])
+
+  return {
+    hitSlop: providedHitSlop !== undefined ? providedHitSlop : autoHitSlop,
+    onLayout,
+  }
+}

package/src/components/chat/ChatAttachmentCard.tsx

@@ -1,110 +0,0 @@
-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 '../user-interaction/IconButton'
-import { useTheme } from '../../global-contexts/theme/ThemeContext'
-import type {
-  ChatAttachmentCardMetadataStyle,
-  ChatAttachmentCardNameStyle,
-  ChatAttachmentCardState,
-  ChatAttachmentCardStyle,
-  ChatMessageDirection
-} from '../../theme/types/components/chat'
-import type { StyleOverwrite } from '../../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/ChatMessageCard.tsx

@@ -1,118 +0,0 @@
-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/utils'
-
-import { useTheme } from '../../global-contexts/theme/ThemeContext'
-import type {
-  ChatMessageCardState,
-  ChatMessageCardStyle,
-  ChatMessageCardSubtitleStyle,
-  ChatMessageCardTitleStyle,
-  ChatMessageDirection
-} from '../../theme/types/components/chat'
-import type { StyleOverwrite } from '../../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>
-  )
-}

package/src/components/menu/Menu.tsx

@@ -1,61 +0,0 @@
-import {
-  useMemo,
-  type ReactNode
-} from 'react'
-import {
-  Text,
-  View,
-  type StyleProp,
-  type ViewProps,
-  type ViewStyle
-} from 'react-native'
-
-import { useTheme } from '../../global-contexts/theme/ThemeContext'
-import type {
-  MenuCardStyle,
-  MenuSectionStyle,
-  MenuSectionTitleStyle
-} from '../../theme/types/components/menu'
-import type { StyleOverwrite } from '../../theme/types/resolver'
-
-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

@@ -1,90 +0,0 @@
-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/ThemeContext'
-import type {
-  MenuActionItemLabelStyle,
-  MenuActionItemState,
-  MenuActionItemStyle
-} from '../../theme/types/components/menu'
-import type { StyleOverwrite } from '../../theme/types/resolver'
-
-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

@@ -1,73 +0,0 @@
-import {
-  useMemo,
-  type ReactNode
-} from 'react'
-import {
-  Text,
-  View,
-  type StyleProp,
-  type ViewProps,
-  type ViewStyle
-} from 'react-native'
-
-import { useTheme } from '../../global-contexts/theme/ThemeContext'
-import type {
-  MenuItemLabelStyle,
-  MenuItemStyle,
-  MenuItemValueStyle
-} from '../../theme/types/components/menu'
-import type { StyleOverwrite } from '../../theme/types/resolver'
-
-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

@@ -1,90 +0,0 @@
-import {
-  Fragment,
-  useMemo,
-  type ReactNode
-} from 'react'
-import {
-  Pressable,
-  Text,
-  View,
-  type PressableProps,
-  type StyleProp,
-  type ViewStyle
-} from 'react-native'
-import { ChevronRight } from 'lucide-react-native'
-
-import { useTheme } from '../../global-contexts/theme/ThemeContext'
-import type {
-  MenuActionItemLabelStyle,
-  MenuActionItemState,
-  MenuActionItemStyle
-} from '../../theme/types/components/menu'
-import type { StyleOverwrite } from '../../theme/types/resolver'
-
-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

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

package/src/components/visualization-and-display/Icon.tsx

@@ -1,27 +0,0 @@
-import type { LucideIcon } from 'lucide-react-native'
-
-import type { ElementSize } from '@helpwave/hightide-design/types'
-
-import { useTheme } from '../../global-contexts/theme/ThemeContext'
-
-export type IconProps = {
-  icon: LucideIcon,
-  size?: ElementSize,
-  color?: string,
-}
-
-export const Icon = ({
-  icon: IconComponent,
-  size = 'md',
-  color,
-}: IconProps) => {
-  const { theme } = useTheme()
-
-  return (
-    <IconComponent
-      size={theme.layout.icon[size].size}
-      strokeWidth={theme.layout.icon[size].strokeWidth}
-      color={color}
-    />
-  )
-}