@helpwave/hightide-native 0.0.1 → 0.0.2

package/src/theme/resolvers/chat.ts

@@ -0,0 +1,384 @@
+import { StyleSheet } from 'react-native'
+import {
+  hexWithAlpha,
+  remToPx,
+  type ColoringTokensDefinitions,
+  type ComponentColors,
+  type DesignTheme as DesignTokensTheme,
+  type SemanticColors
+} from '@helpwave/hightide-design'
+import type {
+  ChatAttachmentCardState,
+  ChatConversationRowState,
+  ChatMessageBubbleState,
+  ChatMessageCardState,
+  ChatQuickReplyChipState,
+  ChatSystemLineState,
+  ChatTheme
+} from '../types'
+import { createStyleResolver, createValueResolver } from '../types/resolver'
+
+export type CreateChatThemeOptions = {
+  semantic: SemanticColors,
+  component: ComponentColors,
+  coloring: ColoringTokensDefinitions,
+}
+
+export const createChatTheme = ({
+  semantic,
+  component,
+  coloring,
+}: CreateChatThemeOptions): ChatTheme => {
+  const resolveConversationRow = (state: ChatConversationRowState) => {
+    const pressed = !!state.isPressed && !state.isDisabled
+
+    return {
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
+      gap: remToPx('0.75rem'),
+      width: '100%' as const,
+      paddingHorizontal: remToPx('0.875rem'),
+      paddingVertical: remToPx('0.75rem'),
+      backgroundColor: state.isSelected
+        ? semantic.background
+        : pressed
+          ? semantic.surfaceHover
+          : ('transparent' as const),
+      borderLeftWidth: state.isSelected ? remToPx('0.25rem') : 0,
+      borderLeftColor: state.isSelected ? semantic.primary : ('transparent' as const),
+      borderRadius: remToPx('0.375rem'),
+    }
+  }
+
+  return {
+    conversationRow: createStyleResolver(resolveConversationRow),
+    conversationRowTitle: createStyleResolver((state) => ({
+      flex: 1,
+      color: semantic.onSurface,
+      fontSize: remToPx('1rem'),
+      fontWeight: state.isUnread ? '700' : '500',
+    })),
+    conversationRowTimestamp: createStyleResolver((state) => ({
+      color: state.isUnread ? semantic.primary : semantic.description,
+      fontSize: remToPx('0.75rem'),
+      fontWeight: state.isUnread ? '500' : '400',
+      flexShrink: 0,
+    })),
+    conversationRowPreview: createStyleResolver((state) => ({
+      flex: 1,
+      color: state.isUnread ? semantic.onSurface : semantic.description,
+      fontSize: remToPx('0.875rem'),
+      fontWeight: '300',
+    })),
+    conversationRowUnreadBadge: createStyleResolver(() => ({
+      minWidth: remToPx('1.25rem'),
+      height: remToPx('1.25rem'),
+      paddingHorizontal: remToPx('0.375rem'),
+      borderRadius: 999,
+      backgroundColor: semantic.primary,
+      alignItems: 'center',
+      justifyContent: 'center',
+    })),
+    conversationRowUnreadBadgeText: createStyleResolver(() => ({
+      color: semantic.onPrimary,
+      fontSize: remToPx('0.6875rem'),
+      fontWeight: '700',
+    })),
+    conversationRowSentIndicator: createValueResolver(() => ({
+      color: semantic.primary,
+    })),
+    conversationList: createStyleResolver(() => ({
+      flex: 1,
+      backgroundColor: semantic.surface,
+    })),
+    conversationListHeader: createStyleResolver(() => ({
+      paddingHorizontal: remToPx('0.875rem'),
+      paddingVertical: remToPx('0.875rem'),
+      gap: remToPx('0.75rem'),
+    })),
+    conversationListFooter: createStyleResolver(() => ({
+      paddingHorizontal: remToPx('0.875rem'),
+      paddingVertical: remToPx('0.5rem'),
+    })),
+    threadHeader: createStyleResolver(() => ({
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: remToPx('0.75rem'),
+      paddingHorizontal: remToPx('0.875rem'),
+      paddingVertical: remToPx('0.75rem'),
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: component.divider,
+      backgroundColor: semantic.surface,
+    })),
+    threadHeaderTitle: createStyleResolver(() => ({
+      color: semantic.onSurface,
+      fontSize: remToPx('1rem'),
+      fontWeight: '700',
+    })),
+    threadHeaderSubtitle: createStyleResolver(() => ({
+      color: semantic.description,
+      fontSize: remToPx('0.75rem'),
+      fontWeight: '300',
+    })),
+    messageList: createStyleResolver(() => ({
+      flex: 1,
+      paddingHorizontal: remToPx('1rem'),
+      paddingVertical: remToPx('1.125rem'),
+      gap: remToPx('0.75rem'),
+      backgroundColor: semantic.background,
+    })),
+    messageBubbleContainer: createStyleResolver((state: ChatMessageBubbleState) => ({
+      maxWidth: remToPx('17.5rem'),
+      gap: remToPx('0.25rem'),
+      alignSelf: state.direction === 'outgoing' ? 'flex-end' : 'flex-start',
+      alignItems: state.direction === 'outgoing' ? 'flex-end' : 'flex-start',
+    })),
+    messageBubble: createStyleResolver((state: ChatMessageBubbleState) => {
+      const outgoing = state.direction === 'outgoing'
+      const radius = remToPx('0.75rem')
+      const corner = remToPx('0.25rem')
+
+      return {
+        paddingHorizontal: remToPx('0.9375rem'),
+        paddingVertical: remToPx('0.6875rem'),
+        backgroundColor: outgoing ? semantic.primary : semantic.neutral,
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        borderBottomLeftRadius: outgoing ? radius : corner,
+        borderBottomRightRadius: outgoing ? corner : radius,
+      }
+    }),
+    messageBubbleContent: createStyleResolver((state: ChatMessageBubbleState) => ({
+      color: state.direction === 'outgoing' ? semantic.onPrimary : semantic.onNeutral,
+      fontSize: remToPx('1rem'),
+      fontWeight: '300',
+      lineHeight: remToPx('1.4rem'),
+    })),
+    messageBubbleTimestamp: createStyleResolver((state: ChatMessageBubbleState) => ({
+      marginTop: remToPx('0.3125rem'),
+      color: state.direction === 'outgoing'
+        ? hexWithAlpha(semantic.onPrimary, 0.75)
+        : semantic.description,
+      fontSize: remToPx('0.6875rem'),
+      fontWeight: '500',
+      textAlign: 'right',
+    })),
+    messageBubbleReceipt: createStyleResolver(() => ({
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: remToPx('0.3125rem'),
+    })),
+    messageBubbleReceiptText: createStyleResolver(() => ({
+      color: semantic.description,
+      fontSize: remToPx('0.6875rem'),
+      fontWeight: '500',
+    })),
+    messageBubbleReceiptIcon: createValueResolver(() => ({
+      color: semantic.primary,
+    })),
+    messageCard: createStyleResolver((state: ChatMessageCardState) => {
+      const outgoing = state.direction === 'outgoing'
+      const radius = remToPx('0.75rem')
+      const corner = remToPx('0.25rem')
+
+      return {
+        width: remToPx('18.125rem'),
+        maxWidth: remToPx('18.75rem'),
+        backgroundColor: semantic.surface,
+        borderWidth: 1,
+        borderColor: component.divider,
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        borderBottomLeftRadius: outgoing ? radius : corner,
+        borderBottomRightRadius: outgoing ? corner : radius,
+        overflow: 'hidden',
+        alignSelf: outgoing ? 'flex-end' : 'flex-start',
+      }
+    }),
+    messageCardHeader: createStyleResolver(() => ({
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: remToPx('0.625rem'),
+      paddingHorizontal: remToPx('0.9375rem'),
+      paddingVertical: remToPx('0.75rem'),
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: component.divider,
+    })),
+    messageCardIcon: createStyleResolver((state: ChatMessageCardState) => {
+      const color = state.color ?? 'primary'
+      const tokens = coloring[color]
+
+      return {
+        width: remToPx('2.25rem'),
+        height: remToPx('2.25rem'),
+        borderRadius: remToPx('0.375rem'),
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: hexWithAlpha(tokens.tonalBackground ?? tokens.color, 0.2),
+      }
+    }),
+    messageCardIconColor: createValueResolver((state: ChatMessageCardState) => {
+      const color = state.color ?? 'primary'
+      const tokens = coloring[color]
+
+      return {
+        color: tokens.tonalText ?? tokens.color,
+      }
+    }),
+    messageCardTitle: createStyleResolver((state: ChatMessageCardState) => {
+      const color = state.color ?? 'primary'
+      const tokens = coloring[color]
+
+      return {
+        color: tokens.text ?? tokens.color,
+        fontSize: remToPx('0.875rem'),
+        fontWeight: '700',
+      }
+    }),
+    messageCardSubtitle: createStyleResolver(() => ({
+      color: semantic.description,
+      fontSize: remToPx('0.75rem'),
+    })),
+    messageCardBody: createStyleResolver(() => ({
+      paddingHorizontal: remToPx('0.9375rem'),
+      paddingVertical: remToPx('0.75rem'),
+      gap: remToPx('0.25rem'),
+    })),
+    messageCardActions: createStyleResolver(() => ({
+      flexDirection: 'row',
+      gap: remToPx('0.625rem'),
+      paddingHorizontal: remToPx('0.9375rem'),
+      paddingBottom: remToPx('0.9375rem'),
+    })),
+    attachmentCard: createStyleResolver((state: ChatAttachmentCardState) => {
+      const outgoing = state.direction === 'outgoing'
+      const radius = remToPx('0.75rem')
+      const corner = remToPx('0.25rem')
+
+      return {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: remToPx('0.75rem'),
+        maxWidth: remToPx('17.5rem'),
+        padding: remToPx('0.75rem'),
+        backgroundColor: semantic.surface,
+        borderWidth: 1,
+        borderColor: component.divider,
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        borderBottomLeftRadius: outgoing ? radius : corner,
+        borderBottomRightRadius: outgoing ? corner : radius,
+        alignSelf: outgoing ? 'flex-end' : 'flex-start',
+      }
+    }),
+    attachmentCardIcon: createStyleResolver(() => ({
+      width: remToPx('2.75rem'),
+      height: remToPx('2.75rem'),
+      borderRadius: remToPx('0.375rem'),
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: hexWithAlpha(semantic.negative, 0.2),
+    })),
+    attachmentCardIconColor: createValueResolver(() => ({
+      color: semantic.negative,
+    })),
+    attachmentCardName: createStyleResolver(() => ({
+      color: semantic.onSurface,
+      fontSize: remToPx('0.875rem'),
+      fontWeight: '500',
+    })),
+    attachmentCardMetadata: createStyleResolver(() => ({
+      color: semantic.description,
+      fontSize: remToPx('0.75rem'),
+    })),
+    systemLine: createStyleResolver(() => ({
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      alignSelf: 'center',
+      gap: remToPx('0.375rem'),
+    })),
+    systemLineText: createStyleResolver((state: ChatSystemLineState) => {
+      const color = state.color ?? 'primary'
+      const tokens = coloring[color]
+
+      return {
+        color: tokens.text ?? tokens.color,
+        fontSize: remToPx('0.75rem'),
+        fontWeight: '500',
+      }
+    }),
+    systemLineIcon: createValueResolver((state: ChatSystemLineState) => {
+      const color = state.color ?? 'primary'
+      const tokens = coloring[color]
+
+      return {
+        color: tokens.text ?? tokens.color,
+      }
+    }),
+    dateDivider: createStyleResolver(() => ({
+      alignSelf: 'center',
+      paddingHorizontal: remToPx('0.875rem'),
+      paddingVertical: remToPx('0.25rem'),
+      borderRadius: 999,
+      backgroundColor: semantic.surface,
+    })),
+    dateDividerText: createStyleResolver(() => ({
+      color: semantic.description,
+      fontSize: remToPx('0.75rem'),
+      fontWeight: '500',
+    })),
+    quickReplyChip: createStyleResolver((state: ChatQuickReplyChipState) => {
+      const pressed = !!state.isPressed && !state.isDisabled
+
+      return {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        gap: remToPx('0.375rem'),
+        paddingHorizontal: remToPx('0.875rem'),
+        paddingVertical: remToPx('0.375rem'),
+        borderRadius: 999,
+        borderWidth: 1,
+        borderColor: state.isActive ? semantic.primary : component.divider,
+        backgroundColor: pressed ? semantic.surfaceHover : semantic.surface,
+      }
+    }),
+    quickReplyChipText: createStyleResolver((state: ChatQuickReplyChipState) => ({
+      color: state.isActive ? semantic.primary : semantic.description,
+      fontSize: remToPx('0.875rem'),
+      fontWeight: '500',
+    })),
+    messageComposer: createStyleResolver(() => ({
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      width: '100%',
+      gap: remToPx('0.5rem'),
+      paddingHorizontal: remToPx('0.875rem'),
+      paddingVertical: remToPx('0.75rem'),
+      backgroundColor: semantic.surface,
+      borderTopWidth: StyleSheet.hairlineWidth,
+      borderTopColor: component.divider,
+    })),
+    messageComposerInput: createStyleResolver(() => ({
+      flex: 1,
+      minHeight: remToPx('2.75rem'),
+      maxHeight: remToPx('2.75rem') * 7,
+      paddingHorizontal: remToPx('0.75rem'),
+      paddingVertical: remToPx('0.75rem'),
+      borderRadius: remToPx('0.375rem'),
+      backgroundColor: semantic.surfaceVariant,
+      color: semantic.onSurface,
+      fontSize: remToPx('0.9375rem'),
+    })),
+    messageComposerPlaceholderColor: createValueResolver(() => semantic.placeholder),
+  }
+}
+
+export const createChatThemeFromDesign = (theme: DesignTokensTheme): ChatTheme => {
+  return createChatTheme({
+    semantic: theme.semantic,
+    component: theme.component,
+    coloring: theme.coloring,
+  })
+}

package/src/theme/resolvers/checkbox.ts

@@ -6,12 +6,13 @@ import {
   type ElementSize,
   type SemanticColors
 } from '@helpwave/hightide-design'
+import type { ViewStyle } from 'react-native'
 import type {
   CheckboxSize,
   CheckboxState,
-  CheckboxStyle,
   CheckboxTheme
 } from '../types'
+import { createStyleResolver, createValueResolver } from '../types/resolver'
 
 const checkboxSizes: Record<CheckboxSize, number> = {
   sm: remToPx('1.25rem'),
@@ -50,7 +51,7 @@ export const createCheckboxTheme = ({
       ? semantic.disabled
       : (isActive ? semantic.primary : component.input.background)
 
-    const checkbox: CheckboxStyle = {
+    const checkbox: ViewStyle = {
       width: dimension,
       height: dimension,
       alignItems: 'center',
@@ -73,8 +74,8 @@ export const createCheckboxTheme = ({
   }
 
   return {
-    checkbox: (state) => resolveState(state).checkbox,
-    icon: (state) => resolveState(state).icon,
+    checkbox: createStyleResolver((state) => resolveState(state).checkbox),
+    icon: createValueResolver((state) => resolveState(state).icon),
   }
 }
 

package/src/theme/resolvers/chip.ts

@@ -5,7 +5,9 @@ import {
   type DesignTheme as DesignTokensTheme,
   type SemanticColors
 } from '@helpwave/hightide-design'
-import type { ChipState, ChipStyle, ChipTextStyle, ChipTheme } from '../types'
+import type { TextStyle, ViewStyle } from 'react-native'
+import type { ChipState, ChipTheme } from '../types'
+import { createStyleResolver } from '../types/resolver'
 import { resolveColoringStyles } from './coloring'
 
 export type CreateChipThemeOptions = {
@@ -25,7 +27,7 @@ export const createChipTheme = ({
     const resolved = resolveColoringStyles(tokens, coloringStyle, semantic, state)
     const layout = componentLayouts.chip[size]
 
-    const chip: ChipStyle = {
+    const chip: ViewStyle = {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
@@ -41,7 +43,7 @@ export const createChipTheme = ({
       opacity: state.isDisabled ? 0.6 : 1,
     }
 
-    const text: ChipTextStyle = {
+    const text: TextStyle = {
       color: resolved.color,
       fontSize: toPx(layout.fontSize),
       fontWeight: '600',
@@ -51,8 +53,8 @@ export const createChipTheme = ({
   }
 
   return {
-    chip: (state) => resolveState(state).chip,
-    text: (state) => resolveState(state).text,
+    chip: createStyleResolver((state) => resolveState(state).chip),
+    text: createStyleResolver((state) => resolveState(state).text),
   }
 }
 

package/src/theme/resolvers/iconButton.ts

@@ -5,7 +5,9 @@ import {
   type DesignTheme as DesignTokensTheme,
   type SemanticColors
 } from '@helpwave/hightide-design'
-import type { IconButtonState, IconButtonStyle, IconButtonTheme } from '../types'
+import type { ViewStyle } from 'react-native'
+import type { IconButtonState, IconButtonTheme } from '../types'
+import { createStyleResolver, createValueResolver } from '../types/resolver'
 import { isOutlineColoringStyle, resolveColoringStyles } from './coloring'
 
 export type CreateIconButtonThemeOptions = {
@@ -30,7 +32,7 @@ export const createIconButtonTheme = ({
       ? resolved.borderWidth
       : (isOutlineColoringStyle(coloringStyle) ? outlineWidth : 0)
 
-    const button: IconButtonStyle = {
+    const button: ViewStyle = {
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: resolved.backgroundColor,
@@ -49,8 +51,8 @@ export const createIconButtonTheme = ({
   }
 
   return {
-    button: (state) => resolveState(state).button,
-    icon: (state) => resolveState(state).icon,
+    button: createStyleResolver((state) => resolveState(state).button),
+    icon: createValueResolver((state) => resolveState(state).icon),
   }
 }
 

package/src/theme/resolvers/index.ts

@@ -1,8 +1,10 @@
 export * from './button'
+export * from './chat'
 export * from './checkbox'
 export * from './chip'
 export * from './coloring'
 export * from './iconButton'
 export * from './input'
+export * from './menu'
 export * from './multiSelect'
 export * from './select'

package/src/theme/resolvers/input.ts

@@ -5,7 +5,9 @@ import {
   type DesignTheme as DesignTokensTheme,
   type SemanticColors
 } from '@helpwave/hightide-design'
-import type { InputState, InputStyle, InputTheme } from '../types'
+import type { TextStyle } from 'react-native'
+import type { InputState, InputTheme } from '../types'
+import { createStyleResolver, createValueResolver } from '../types/resolver'
 
 export type CreateInputThemeOptions = {
   semantic: SemanticColors,
@@ -16,7 +18,7 @@ export const createInputTheme = ({
   semantic,
   component,
 }: CreateInputThemeOptions): InputTheme => {
-  const resolveInput = (state: InputState): InputStyle => {
+  const resolveInput = (state: InputState): TextStyle => {
     const sizing = inputElementSizes.md
     const borderColor = state.isInvalid ? semantic.negative : component.border
 
@@ -35,8 +37,8 @@ export const createInputTheme = ({
   }
 
   return {
-    input: resolveInput,
-    placeholderColor: () => semantic.placeholder,
+    input: createStyleResolver(resolveInput),
+    placeholderColor: createValueResolver(() => semantic.placeholder),
   }
 }
 

package/src/theme/resolvers/menu.ts

@@ -0,0 +1,112 @@
+import { StyleSheet } from 'react-native'
+import {
+  remToPx,
+  type ComponentColors,
+  type DesignTheme as DesignTokensTheme,
+  type SemanticColors
+} from '@helpwave/hightide-design'
+import type { MenuActionItemState, MenuTheme } from '../types'
+import { createStyleResolver, createValueResolver } from '../types/resolver'
+
+export type CreateMenuThemeOptions = {
+  semantic: SemanticColors,
+  component: ComponentColors,
+}
+
+export const createMenuTheme = ({
+  semantic,
+  component,
+}: CreateMenuThemeOptions): MenuTheme => {
+  const resolveActionItem = (state: MenuActionItemState) => {
+    const pressed = !!state.isPressed && !state.isDisabled
+
+    return {
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
+      minHeight: 64,
+      gap: remToPx('0.75rem'),
+      paddingHorizontal: remToPx('1rem'),
+      paddingVertical: remToPx('0.5rem'),
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: component.divider,
+      backgroundColor: pressed ? semantic.surfaceHover : ('transparent' as const),
+      opacity: state.isDisabled ? 0.6 : 1,
+    }
+  }
+
+  const resolveItemContent = () => ({
+    flex: 1,
+    gap: remToPx('0.25rem'),
+    justifyContent: 'center' as const,
+  })
+
+  const resolveActionLabel = (state: MenuActionItemState) => ({
+    color: state.isDanger ? semantic.negative : semantic.onSurface,
+    fontSize: remToPx('0.9375rem'),
+    fontWeight: '500' as const,
+  })
+
+  const resolveActionIcon = (state: MenuActionItemState) => ({
+    color: state.isDanger ? semantic.negative : semantic.primary,
+  })
+
+  return {
+    section: createStyleResolver(() => ({
+      marginBottom: remToPx('1.25rem'),
+      gap: remToPx('0.5rem'),
+    })),
+    sectionTitle: createStyleResolver(() => ({
+      color: semantic.description,
+      fontSize: remToPx('0.75rem'),
+      fontWeight: '700',
+      letterSpacing: 0.4,
+      textTransform: 'uppercase',
+      paddingHorizontal: remToPx('0.25rem'),
+    })),
+    card: createStyleResolver(() => ({
+      backgroundColor: semantic.surface,
+      borderRadius: remToPx('0.75rem'),
+      borderWidth: 1,
+      borderColor: component.border,
+      overflow: 'hidden',
+    })),
+    item: createStyleResolver(() => ({
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
+      minHeight: 64,
+      paddingHorizontal: remToPx('1rem'),
+      paddingVertical: remToPx('0.5rem'),
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: component.divider,
+      gap: remToPx('0.75rem'),
+    })),
+    itemContent: createStyleResolver(resolveItemContent),
+    itemLabel: createStyleResolver(() => ({
+      color: semantic.description,
+      fontSize: remToPx('0.75rem'),
+    })),
+    itemValue: createStyleResolver(() => ({
+      color: semantic.onSurface,
+      fontSize: remToPx('0.9375rem'),
+      fontWeight: '500',
+    })),
+    actionItem: createStyleResolver(resolveActionItem),
+    actionItemContent: createStyleResolver(resolveItemContent),
+    actionItemLabel: createStyleResolver(resolveActionLabel),
+    actionItemIcon: createValueResolver(resolveActionIcon),
+    navigationItem: createStyleResolver(resolveActionItem),
+    navigationItemContent: createStyleResolver(resolveItemContent),
+    navigationItemLabel: createStyleResolver(resolveActionLabel),
+    navigationItemIcon: createValueResolver(resolveActionIcon),
+    navigationItemTrailing: createValueResolver(() => ({
+      color: semantic.description,
+    })),
+  }
+}
+
+export const createMenuThemeFromDesign = (theme: DesignTokensTheme): MenuTheme => {
+  return createMenuTheme({
+    semantic: theme.semantic,
+    component: theme.component,
+  })
+}