@helpwave/hightide-native 0.0.1 → 0.0.5

package/src/theme/resolvers/chat.ts

@@ -0,0 +1,418 @@
+import {
+  StyleSheet,
+  type TextStyle,
+  type ViewStyle
+} from 'react-native'
+
+import { hexWithAlpha } from '@helpwave/hightide-design/helpers'
+import { fontWeights } from '@helpwave/hightide-design/tokens'
+import type {
+  ComponentColorTokens,
+  HightideDesignTokens as DesignTokensTheme
+} from '@helpwave/hightide-design/types'
+
+import type {
+  Color,
+  HightideSemanticColors
+} from '@/src/theme/types/color'
+import type {
+  ChatAttachmentCardState,
+  ChatConversationRowState,
+  ChatMessageBubbleState,
+  ChatMessageCardState,
+  ChatQuickReplyChipState,
+  ChatSystemLineState,
+  ChatTheme
+} from '@/src/theme/types/components/chat'
+import type { HightideComponentThemes } from '@/src/theme/types/components/hightide'
+import {
+  createStyleResolver,
+  createValueResolver
+} from '@/src/theme/types/resolver'
+
+export type CreateChatThemeOptions = {
+  semantic: HightideSemanticColors,
+  component: ComponentColorTokens,
+  coloring: HightideComponentThemes['coloring'],
+}
+
+export const createChatTheme = ({
+  semantic,
+  component,
+  coloring,
+}: CreateChatThemeOptions): ChatTheme => {
+  const resolveConversationRow = (state: ChatConversationRowState): ViewStyle => {
+    const pressed = !!state.isPressed && !state.isDisabled
+
+    return {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      width: '100%',
+      paddingHorizontal: 14,
+      paddingVertical: 12,
+      backgroundColor: state.isSelected
+        ? semantic.background
+        : pressed
+          ? semantic.surfaceHover
+          : 'transparent',
+      borderLeftWidth: state.isSelected ? 4 : 0,
+      borderLeftColor: state.isSelected ? semantic.primary : 'transparent',
+      borderRadius: 6,
+    }
+  }
+
+  return {
+    conversationRow: {
+      container: createStyleResolver<ChatConversationRowState, ViewStyle>(resolveConversationRow),
+      title: createStyleResolver<ChatConversationRowState, TextStyle>((state) => ({
+        flex: 1,
+        color: semantic.onSurface,
+        fontSize: 16,
+        fontWeight: state.isUnread ? fontWeights.bold : fontWeights.medium,
+      })),
+      timestamp: createStyleResolver<ChatConversationRowState, TextStyle>((state) => ({
+        color: state.isUnread ? semantic.primary : semantic.description,
+        fontSize: 12,
+        fontWeight: state.isUnread ? fontWeights.medium : fontWeights.base,
+        flexShrink: 0,
+      })),
+      preview: createStyleResolver<ChatConversationRowState, TextStyle>((state) => ({
+        flex: 1,
+        color: state.isUnread ? semantic.onSurface : semantic.description,
+        fontSize: 14,
+        fontWeight: fontWeights.light,
+      })),
+      unreadBadge: createStyleResolver<Record<string, never>, ViewStyle>(() => ({
+        minWidth: 20,
+        height: 20,
+        paddingHorizontal: 6,
+        borderRadius: 999,
+        backgroundColor: semantic.primary,
+        alignItems: 'center',
+        justifyContent: 'center',
+      })),
+      unreadBadgeText: createStyleResolver<Record<string, never>, TextStyle>(() => ({
+        color: semantic.onPrimary,
+        fontSize: 11,
+        fontWeight: fontWeights.bold,
+      })),
+      sentIndicator: createValueResolver<Record<string, never>, { color: Color }>(() => ({
+        color: semantic.primary,
+      })),
+    },
+    conversationList: {
+      container: createStyleResolver<Record<string, never>, ViewStyle>(() => ({
+        flex: 1,
+        backgroundColor: semantic.surface,
+      })),
+      header: createStyleResolver<Record<string, never>, ViewStyle>(() => ({
+        paddingHorizontal: 14,
+        paddingVertical: 14,
+        gap: 12,
+      })),
+      footer: createStyleResolver<Record<string, never>, ViewStyle>(() => ({
+        paddingHorizontal: 14,
+        paddingVertical: 8,
+      })),
+    },
+    threadHeader: {
+      container: createStyleResolver<Record<string, never>, ViewStyle>(() => ({
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: component.divider,
+        backgroundColor: semantic.surface,
+      })),
+      title: createStyleResolver<Record<string, never>, TextStyle>(() => ({
+        color: semantic.onSurface,
+        fontSize: 16,
+        fontWeight: fontWeights.bold,
+      })),
+      subtitle: createStyleResolver<Record<string, never>, TextStyle>(() => ({
+        color: semantic.description,
+        fontSize: 12,
+        fontWeight: fontWeights.light,
+      })),
+    },
+    messageList: {
+      container: createStyleResolver<Record<string, never>, ViewStyle>(() => ({
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingVertical: 18,
+        gap: 12,
+        backgroundColor: semantic.background,
+      })),
+    },
+    messageBubble: {
+      container: createStyleResolver<ChatMessageBubbleState, ViewStyle>((state) => ({
+        maxWidth: 280,
+        gap: 4,
+        alignSelf: state.direction === 'outgoing' ? 'flex-end' : 'flex-start',
+        alignItems: state.direction === 'outgoing' ? 'flex-end' : 'flex-start',
+      })),
+      bubble: createStyleResolver<ChatMessageBubbleState, ViewStyle>((state) => {
+        const outgoing = state.direction === 'outgoing'
+        const radius = 12
+        const corner = 4
+
+        return {
+          paddingHorizontal: 15,
+          paddingVertical: 11,
+          backgroundColor: outgoing ? semantic.primary : semantic.neutral,
+          borderTopLeftRadius: radius,
+          borderTopRightRadius: radius,
+          borderBottomLeftRadius: outgoing ? radius : corner,
+          borderBottomRightRadius: outgoing ? corner : radius,
+        }
+      }),
+      content: createStyleResolver<ChatMessageBubbleState, TextStyle>((state) => ({
+        color: state.direction === 'outgoing' ? semantic.onPrimary : semantic.onNeutral,
+        fontSize: 16,
+        fontWeight: fontWeights.light,
+        lineHeight: 22.4,
+      })),
+      timestamp: createStyleResolver<ChatMessageBubbleState, TextStyle>((state) => ({
+        marginTop: 5,
+        color: state.direction === 'outgoing'
+          ? hexWithAlpha(semantic.onPrimary, 0.75)
+          : semantic.description,
+        fontSize: 11,
+        fontWeight: fontWeights.medium,
+        textAlign: 'right',
+      })),
+      receipt: createStyleResolver<Record<string, never>, ViewStyle>(() => ({
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+      })),
+      receiptText: createStyleResolver<Record<string, never>, TextStyle>(() => ({
+        color: semantic.description,
+        fontSize: 11,
+        fontWeight: fontWeights.medium,
+      })),
+      receiptIcon: createValueResolver<Record<string, never>, { color: Color }>(() => ({
+        color: semantic.primary,
+      })),
+    },
+    messageCard: {
+      container: createStyleResolver<ChatMessageCardState, ViewStyle>((state) => {
+        const outgoing = state.direction === 'outgoing'
+        const radius = 12
+        const corner = 4
+
+        return {
+          width: 290,
+          maxWidth: 300,
+          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',
+        }
+      }),
+      header: createStyleResolver<Record<string, never>, ViewStyle>(() => ({
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        paddingHorizontal: 15,
+        paddingVertical: 12,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: component.divider,
+      })),
+      icon: createStyleResolver<ChatMessageCardState, ViewStyle>((state) => {
+        const color = state.color ?? 'primary'
+        const tokens = coloring[color]
+
+        return {
+          width: 36,
+          height: 36,
+          borderRadius: 6,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: hexWithAlpha(tokens.tonalBackground ?? tokens.color, 0.2),
+        }
+      }),
+      iconColor: createValueResolver<ChatMessageCardState, { color: Color }>((state) => {
+        const color = state.color ?? 'primary'
+        const tokens = coloring[color]
+
+        return {
+          color: tokens.tonalText ?? tokens.color,
+        }
+      }),
+      title: createStyleResolver<ChatMessageCardState, TextStyle>((state) => {
+        const color = state.color ?? 'primary'
+        const tokens = coloring[color]
+
+        return {
+          color: tokens.text ?? tokens.color,
+          fontSize: 14,
+          fontWeight: fontWeights.bold,
+        }
+      }),
+      subtitle: createStyleResolver<Record<string, never>, TextStyle>(() => ({
+        color: semantic.description,
+        fontSize: 12,
+      })),
+      body: createStyleResolver<Record<string, never>, ViewStyle>(() => ({
+        paddingHorizontal: 15,
+        paddingVertical: 12,
+        gap: 4,
+      })),
+      actions: createStyleResolver<Record<string, never>, ViewStyle>(() => ({
+        flexDirection: 'row',
+        gap: 10,
+        paddingHorizontal: 15,
+        paddingBottom: 15,
+      })),
+    },
+    attachmentCard: {
+      container: createStyleResolver<ChatAttachmentCardState, ViewStyle>((state) => {
+        const outgoing = state.direction === 'outgoing'
+        const radius = 12
+        const corner = 4
+
+        return {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 12,
+          maxWidth: 280,
+          padding: 12,
+          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',
+        }
+      }),
+      icon: createStyleResolver<Record<string, never>, ViewStyle>(() => ({
+        width: 44,
+        height: 44,
+        borderRadius: 6,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: hexWithAlpha(semantic.negative, 0.2),
+      })),
+      iconColor: createValueResolver<Record<string, never>, { color: Color }>(() => ({
+        color: semantic.negative,
+      })),
+      name: createStyleResolver<Record<string, never>, TextStyle>(() => ({
+        color: semantic.onSurface,
+        fontSize: 14,
+        fontWeight: fontWeights.medium,
+      })),
+      metadata: createStyleResolver<Record<string, never>, TextStyle>(() => ({
+        color: semantic.description,
+        fontSize: 12,
+      })),
+    },
+    systemLine: {
+      container: createStyleResolver<ChatSystemLineState, ViewStyle>(() => ({
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center',
+        gap: 6,
+      })),
+      text: createStyleResolver<ChatSystemLineState, TextStyle>((state) => {
+        const color = state.color ?? 'primary'
+        const tokens = coloring[color]
+
+        return {
+          color: tokens.text ?? tokens.color,
+          fontSize: 12,
+          fontWeight: fontWeights.medium,
+        }
+      }),
+      icon: createValueResolver<ChatSystemLineState, { color: Color }>((state) => {
+        const color = state.color ?? 'primary'
+        const tokens = coloring[color]
+
+        return {
+          color: tokens.text ?? tokens.color,
+        }
+      }),
+    },
+    dateDivider: {
+      container: createStyleResolver<Record<string, never>, ViewStyle>(() => ({
+        alignSelf: 'center',
+        paddingHorizontal: 14,
+        paddingVertical: 4,
+        borderRadius: 999,
+        backgroundColor: semantic.surface,
+      })),
+      text: createStyleResolver<Record<string, never>, TextStyle>(() => ({
+        color: semantic.description,
+        fontSize: 12,
+        fontWeight: fontWeights.medium,
+      })),
+    },
+    quickReplyChip: {
+      container: createStyleResolver<ChatQuickReplyChipState, ViewStyle>((state) => {
+        const pressed = !!state.isPressed && !state.isDisabled
+
+        return {
+          flexDirection: 'row',
+          alignItems: 'center',
+          alignSelf: 'flex-start',
+          gap: 6,
+          paddingHorizontal: 14,
+          paddingVertical: 6,
+          borderRadius: 999,
+          borderWidth: 1,
+          borderColor: state.isActive ? semantic.primary : component.divider,
+          backgroundColor: pressed ? semantic.surfaceHover : semantic.surface,
+        }
+      }),
+      text: createStyleResolver<ChatQuickReplyChipState, TextStyle>((state) => ({
+        color: state.isActive ? semantic.primary : semantic.description,
+        fontSize: 14,
+        fontWeight: fontWeights.medium,
+      })),
+    },
+    messageComposer: {
+      container: createStyleResolver<Record<string, never>, ViewStyle>(() => ({
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        width: '100%',
+        gap: 8,
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+        backgroundColor: semantic.surface,
+        borderTopWidth: StyleSheet.hairlineWidth,
+        borderTopColor: component.divider,
+      })),
+      input: createStyleResolver<Record<string, never>, TextStyle>(() => ({
+        flex: 1,
+        minHeight: 44,
+        maxHeight: 44 * 7,
+        paddingHorizontal: 12,
+        paddingVertical: 12,
+        borderRadius: 6,
+        backgroundColor: semantic.surfaceVariant,
+        color: semantic.onSurface,
+        fontSize: 15,
+      })),
+      placeholderColor: createValueResolver<Record<string, never>, Color>(() => semantic.placeholder),
+    },
+  }
+}
+
+export const createChatThemeFromDesign = (theme: DesignTokensTheme): ChatTheme => {
+  return createChatTheme({
+    semantic: theme.semanticColors,
+    component: theme.componentColors,
+    coloring: theme.coloring as HightideComponentThemes['coloring'],
+  })
+}

package/src/theme/resolvers/checkbox.ts

@@ -1,22 +1,27 @@
-import {
-  remToPx,
-  spacing,
-  type ComponentColors,
-  type DesignTheme as DesignTokensTheme,
-  type ElementSize,
-  type SemanticColors
-} from '@helpwave/hightide-design'
+import type { ViewStyle } from 'react-native'
+
+import { componentLayouts } from '@helpwave/hightide-design/tokens'
+import type {
+  ComponentColorTokens,
+  HightideDesignTokens as DesignTokensTheme,
+  ElementSize
+} from '@helpwave/hightide-design/types'
+
+import type { HightideSemanticColors } from '@/src/theme/types/color'
 import type {
   CheckboxSize,
   CheckboxState,
-  CheckboxStyle,
   CheckboxTheme
-} from '../types'
+} from '@/src/theme/types/components/checkbox'
+import {
+  createStyleResolver,
+  createValueResolver
+} from '@/src/theme/types/resolver'
 
 const checkboxSizes: Record<CheckboxSize, number> = {
-  sm: remToPx('1.25rem'),
-  md: remToPx('1.5rem'),
-  lg: remToPx('2rem'),
+  sm: 20,
+  md: 24,
+  lg: 32,
 }
 
 const checkboxIconSizes: Record<CheckboxSize, Exclude<ElementSize, 'xs'>> = {
@@ -26,8 +31,8 @@ const checkboxIconSizes: Record<CheckboxSize, Exclude<ElementSize, 'xs'>> = {
 }
 
 export type CreateCheckboxThemeOptions = {
-  semantic: SemanticColors,
-  component: ComponentColors,
+  semantic: HightideSemanticColors,
+  component: ComponentColorTokens,
 }
 
 export const createCheckboxTheme = ({
@@ -50,12 +55,12 @@ export const createCheckboxTheme = ({
       ? semantic.disabled
       : (isActive ? semantic.primary : component.input.background)
 
-    const checkbox: CheckboxStyle = {
+    const checkbox: ViewStyle = {
       width: dimension,
       height: dimension,
       alignItems: 'center',
       justifyContent: 'center',
-      borderWidth: remToPx(spacing.coloringOutlineWidth),
+      borderWidth: componentLayouts.shared.coloringOutlineWidth,
       borderColor,
       borderRadius: state.isRounded ? dimension / 2 : 6,
       backgroundColor,
@@ -73,14 +78,14 @@ 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),
   }
 }
 
 export const createCheckboxThemeFromDesign = (theme: DesignTokensTheme): CheckboxTheme => {
   return createCheckboxTheme({
-    semantic: theme.semantic,
-    component: theme.component,
+    semantic: theme.semanticColors,
+    component: theme.componentColors,
   })
 }

package/src/theme/resolvers/chip.ts

@@ -1,16 +1,26 @@
+import type {
+  TextStyle,
+  ViewStyle
+} from 'react-native'
+
 import {
   componentLayouts,
-  toPx,
-  type ColoringTokensDefinitions,
-  type DesignTheme as DesignTokensTheme,
-  type SemanticColors
-} from '@helpwave/hightide-design'
-import type { ChipState, ChipStyle, ChipTextStyle, ChipTheme } from '../types'
-import { resolveColoringStyles } from './coloring'
+  fontWeights
+} from '@helpwave/hightide-design/tokens'
+import type { HightideDesignTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
+
+import { resolveColoringStyles } from '@/src/theme/resolvers/coloring'
+import type { HightideSemanticColors } from '@/src/theme/types/color'
+import type {
+  ChipState,
+  ChipTheme
+} from '@/src/theme/types/components/chip'
+import type { HightideComponentThemes } from '@/src/theme/types/components/hightide'
+import { createStyleResolver } from '@/src/theme/types/resolver'
 
 export type CreateChipThemeOptions = {
-  semantic: SemanticColors,
-  coloring: ColoringTokensDefinitions,
+  semantic: HightideSemanticColors,
+  coloring: HightideComponentThemes['coloring'],
 }
 
 export const createChipTheme = ({
@@ -25,7 +35,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',
@@ -33,32 +43,32 @@ export const createChipTheme = ({
       backgroundColor: resolved.backgroundColor,
       borderColor: resolved.borderColor,
       borderWidth: resolved.borderWidth,
-      paddingVertical: toPx(layout.paddingVertical),
-      paddingHorizontal: toPx(layout.paddingHorizontal),
-      gap: toPx(layout.gap),
-      minHeight: toPx(layout.minHeight),
-      borderRadius: toPx(layout.borderRadius),
+      paddingVertical: layout.paddingVertical,
+      paddingHorizontal: layout.paddingHorizontal,
+      gap: layout.gap,
+      minHeight: layout.minHeight,
+      borderRadius: layout.borderRadius,
       opacity: state.isDisabled ? 0.6 : 1,
     }
 
-    const text: ChipTextStyle = {
+    const text: TextStyle = {
       color: resolved.color,
-      fontSize: toPx(layout.fontSize),
-      fontWeight: '600',
+      fontSize: layout.fontSize,
+      fontWeight: fontWeights.semibold,
     }
 
     return { chip, text }
   }
 
   return {
-    chip: (state) => resolveState(state).chip,
-    text: (state) => resolveState(state).text,
+    chip: createStyleResolver((state) => resolveState(state).chip),
+    text: createStyleResolver((state) => resolveState(state).text),
   }
 }
 
 export const createChipThemeFromDesign = (theme: DesignTokensTheme): ChipTheme => {
   return createChipTheme({
-    semantic: theme.semantic,
-    coloring: theme.coloring,
+    semantic: theme.semanticColors,
+    coloring: theme.coloring as HightideComponentThemes['coloring'],
   })
 }

package/src/theme/resolvers/coloring.ts

@@ -1,20 +1,24 @@
 import {
-  componentLayouts,
-  hexWithAlpha,
-  toPx,
-  type ButtonColoringStyle,
-  type ChipColoringStyle,
-  type ColorValue,
-  type ColoringToken,
-  type ColoringStyle,
-  type SemanticColors
-} from '@helpwave/hightide-design'
-import type { InteractionState } from '../types'
+  hexWithAlpha
+} from '@helpwave/hightide-design/helpers'
+import { componentLayouts } from '@helpwave/hightide-design/tokens'
+import type {
+  ButtonColoringStyle,
+  ChipColoringStyle,
+  ColoringStyle
+} from '@helpwave/hightide-design/types'
+
+import type {
+  Color,
+  HightideSemanticColors
+} from '@/src/theme/types/color'
+import type { ColoringDefinition } from '@/src/theme/types/components/hightide'
+import type { InteractionState } from '@/src/theme/types/resolver'
 
 export type ResolvedColoringStyles = {
-  backgroundColor: ColorValue | 'transparent',
-  color: ColorValue,
-  borderColor?: ColorValue,
+  backgroundColor: Color | 'transparent',
+  color: Color,
+  borderColor?: Color,
   borderWidth: number,
 }
 
@@ -23,12 +27,12 @@ const usesHover = (state: InteractionState): boolean => {
 }
 
 export const resolveColoringStyles = (
-  tokens: ColoringToken,
+  tokens: ColoringDefinition,
   coloringStyle: ColoringStyle,
-  semantic: SemanticColors,
+  semantic: HightideSemanticColors,
   state: InteractionState = {}
 ): ResolvedColoringStyles => {
-  const outlineWidth = toPx(componentLayouts.shared.coloringOutlineWidth)
+  const outlineWidth = componentLayouts.shared.coloringOutlineWidth
   const hovered = usesHover(state)
 
   if (state.isDisabled) {