@helpwave/hightide-native 0.5.0 → 0.6.0

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "files": [
     "src"
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-design": "0.5.0",
+    "@helpwave/hightide-design": "0.6.0",
     "@helpwave/hightide-utils": "0.1.0"
   },
   "peerDependencies": {

package/src/components/chat/ChatAttachmentMessageBubble.tsx

@@ -39,6 +39,7 @@ export type ChatAttachmentMessageBubbleProps = Omit<ChatMessageBubbleProps, 'chi
   icon?: ReactNode,
   downloadLabel?: string,
   onDownload?: () => void,
+  style: ChatMessageBubbleProps['style'],
   contentContainerStyle?: StyleOverwrite<
     PressableState,
     PressableContainerStyle
@@ -89,7 +90,6 @@ export const ChatAttachmentMessageBubble = ({
   timestamp,
   readReceipt,
   style,
-  containerStyle,
   bodyStyle,
   bodyTextStyle,
   metaDataContainerStyle,
@@ -137,9 +137,9 @@ export const ChatAttachmentMessageBubble = ({
   const resolvedContainerStyle = useMemo(
     () => mergeBubbleStyleOverwrite<ChatMessageBubbleContainerStyle>(
       bubbleOverrides.container(state),
-      containerStyle
+      style
     ),
-    [bubbleOverrides, state, containerStyle]
+    [bubbleOverrides, state, style]
   )
   const resolvedBodyStyle = useMemo(
     () => mergeBubbleStyleOverwrite<ChatMessageBubbleBodyStyle>(
@@ -183,8 +183,7 @@ export const ChatAttachmentMessageBubble = ({
       direction={direction}
       timestamp={timestamp}
       readReceipt={readReceipt}
-      style={style}
-      containerStyle={resolvedContainerStyle}
+      style={resolvedContainerStyle}
       bodyStyle={resolvedBodyStyle}
       bodyTextStyle={resolvedBodyTextStyle}
       metaDataContainerStyle={resolvedMetaDataContainerStyle}
@@ -219,7 +218,7 @@ export const ChatAttachmentMessageBubble = ({
             />
           )}
         </View>
-        <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        <View style={{ gap: theme.spacing.xs }}>
           {typeof name === 'string' || typeof name === 'number' ? (
             <ThemedText style={resolvedFileNameTextStyle} numberOfLines={1}>{name}</ThemedText>
           ) : (

package/src/components/chat/ChatMessageBubble.tsx

@@ -4,9 +4,7 @@ import {
 } from 'react'
 import {
   View,
-  type StyleProp,
-  type ViewProps,
-  type ViewStyle
+  type ViewProps
 } from 'react-native'
 import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
@@ -31,8 +29,7 @@ export type ChatMessageBubbleProps = Omit<ViewProps, 'children' | 'style'> & {
   timestamp: ReactNode,
   readReceipt?: ReactNode,
   children?: ReactNode,
-  style?: StyleProp<ViewStyle>,
-  containerStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleContainerStyle>,
+  style?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleContainerStyle>,
   bodyStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleBodyStyle>,
   bodyTextStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleBodyTextStyle>,
   metaDataContainerStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleMetaDataContainerStyle>,
@@ -46,7 +43,6 @@ export const ChatMessageBubble = ({
   readReceipt,
   children,
   style,
-  containerStyle,
   bodyStyle,
   bodyTextStyle,
   metaDataContainerStyle,
@@ -58,8 +54,8 @@ export const ChatMessageBubble = ({
   const state = useMemo(() => ({ direction }), [direction])
 
   const resolvedContainerStyle = useMemo(
-    () => theme.components.chat.messageBubble.container(state, containerStyle),
-    [theme, state, containerStyle]
+    () => theme.components.chat.messageBubble.container(state, style),
+    [theme, state, style]
   )
   const resolvedBodyStyle = useMemo(
     () => theme.components.chat.messageBubble.body(state, bodyStyle),
@@ -87,7 +83,7 @@ export const ChatMessageBubble = ({
   )
 
   return (
-    <View {...props} style={[resolvedContainerStyle, style]}>
+    <View {...props} style={resolvedContainerStyle}>
       <View style={resolvedBodyStyle}>
         {typeof children === 'string' || typeof children === 'number' ? (
           <ThemedText style={resolvedBodyTextStyle}>{children}</ThemedText>

package/src/components/user-interaction/Input.tsx

@@ -3,11 +3,12 @@ import {
   useMemo,
   useState
 } from 'react'
+import type {
+  TextStyle } from 'react-native'
 import {
+  StyleSheet,
   TextInput,
-  type StyleProp,
-  type TextInputProps,
-  type TextStyle
+  type TextInputProps
 } from 'react-native'
 
 import {
@@ -51,8 +52,7 @@ export type InputProps = Omit<TextInputProps, 'value' | 'style'>
     color?: ColorPairToken,
     editCompleteOptions?: EditCompleteOptions,
     initialValue?: string,
-    style?: StyleProp<TextStyle>,
-    containerStyle?: StyleOverwrite<InputState, InputContainerStyle>,
+    style?:  StyleOverwrite<InputState, InputContainerStyle>,
     textStyle?: StyleOverwrite<InputState, InputTextStyle>,
   }
 
@@ -68,7 +68,6 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
   onEditComplete,
   editCompleteOptions,
   style,
-  containerStyle,
   textStyle,
   ...props
 }, ref) {
@@ -108,8 +107,8 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
   }), [color, disabled, invalid, readOnly, interactive, isHovered, isPressed, isFocused])
 
   const resolvedContainerStyle = useMemo(
-    () => theme.components.input.container(state, containerStyle),
-    [theme, state, containerStyle]
+    () => theme.components.input.container(state, style),
+    [theme, state, style]
   )
   const resolvedTextStyle = useMemo(
     () => theme.components.input.text(state, textStyle),
@@ -120,6 +119,21 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
     [theme, state]
   )
 
+
+  const resolvedStyle = useMemo(
+    () => {
+      const resolvedSheet: TextStyle = StyleSheet.flatten<TextStyle>([
+        resolvedContainerStyle,
+        resolvedTextStyle,
+      ])
+      // this is required for android to work
+      // TODO find a better solution like separating container and text input
+      delete resolvedSheet['boxShadow']
+      return resolvedSheet
+    },
+    [resolvedContainerStyle, resolvedTextStyle]
+  )
+
   return (
     <TextInput
       {...props}
@@ -175,7 +189,7 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
         }
       }}
       placeholderTextColor={resolvedPlaceholderStyle.color}
-      style={[resolvedContainerStyle, resolvedTextStyle, style]}
+      style={resolvedStyle}
       accessibilityState={{ disabled, selected: required }}
     />
   )

package/src/components/user-interaction/MultiSelect.tsx

@@ -36,7 +36,7 @@ export type MultiSelectProps = Partial<FormFieldDataHandling<string[]>>
     value?: string[],
     initialValue?: string[],
     placeholder?: string,
-    showSearch?: boolean,
+    searchableThreshold?: number,
     color?: ColorPairToken,
     style?: StyleProp<ViewStyle>,
   }
@@ -46,7 +46,7 @@ export const MultiSelect = ({
   value: controlledValue,
   initialValue = [],
   placeholder = 'Select…',
-  showSearch = true,
+  searchableThreshold = 6,
   color,
   disabled = false,
   readOnly = false,
@@ -67,7 +67,7 @@ export const MultiSelect = ({
     onEditComplete,
   })
 
-  const isSearchVisible = showSearch && options.length >= 6
+  const isSearchVisible = options.length >= searchableThreshold
 
   const selectedOptions = useMemo(() => {
     return options.filter((option) => multiSelect.isSelected(option.id))
@@ -162,6 +162,7 @@ export const MultiSelect = ({
                             style={{
                               position: 'relative',
                               width: theme.icongraphy.sizes.sm,
+                              height: theme.icongraphy.sizes.sm,
                             }}
                           >
                             <IconButton

package/src/components/user-interaction/Select.tsx

@@ -37,7 +37,7 @@ export type SelectProps = Partial<FormFieldDataHandling<string>>
     value?: string | null,
     initialValue?: string | null,
     placeholder?: string,
-    showSearch?: boolean,
+    searchableThreshold?: number,
     color?: ColorPairToken,
     style?: StyleProp<ViewStyle>,
   }
@@ -47,7 +47,7 @@ export const Select = ({
   value: controlledValue,
   initialValue = null,
   placeholder = 'Select…',
-  showSearch = true,
+  searchableThreshold = 6,
   color,
   disabled = false,
   readOnly = false,
@@ -68,7 +68,7 @@ export const Select = ({
     onEditComplete,
   })
 
-  const isSearchVisible = showSearch && options.length >= 6
+  const isSearchVisible = options.length >= searchableThreshold
 
   const selectedLabel = useMemo(() => {
     const selected = options.find((option) => option.id === select.value)

package/src/components/user-interaction/Textarea.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react'
+import type { TextInput } from 'react-native'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { Input, type InputProps } from './Input'
+
+export type TextareaProps = InputProps
+
+export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea({
+  style,
+  textStyle,
+  ...props
+}, ref) {
+  const { theme } = useTheme()
+
+  return (
+    <Input
+      {...props}
+      ref={ref}
+      multiline
+      textAlignVertical="top"
+      style={(state) => theme.components.textarea.container(state, style)}
+      textStyle={(state) => theme.components.textarea.text(state, textStyle)}
+    />
+  )
+})

package/src/components/user-interaction/index.ts

@@ -6,4 +6,5 @@ export * from './MultiSelect'
 export * from './SearchBar'
 export * from './Select'
 export * from './Switch'
+export * from './Textarea'
 export * from './ThemedPressable'

package/src/theme/resolvers/index.ts

@@ -14,4 +14,5 @@ export * from './multiSelect'
 export * from './searchBar'
 export * from './select'
 export * from './switch'
+export * from './textarea'
 export * from './themedPressable'

package/src/theme/resolvers/multiSelect.ts

@@ -135,7 +135,6 @@ export const toMultiSelectThemeResolvers: ComponentThemeResolver<MultiSelectThem
     )),
     overlay: createSimpleStyleResolver((): SelectOverlayStyle => ({
       ...StyleAdapterUtils.container(resolve().overlay),
-      flex: 1,
     })),
     menu: createStyleResolver((state: SelectMenuState): SelectMenuStyle => (
       StyleAdapterUtils.container(resolve({ hasSearch: state.hasSearch }).menu)

package/src/theme/resolvers/textarea.ts

@@ -0,0 +1,14 @@
+import type { InputThemeResolvers } from '../types/components/input'
+import type { ComponentThemeResolver } from '../types/resolver'
+
+import { toInputThemeResolvers } from './input'
+
+export const toTextareaThemeResolvers: ComponentThemeResolver<InputThemeResolvers> = (params) => (
+  toInputThemeResolvers({
+    ...params,
+    componentTokens: {
+      ...params.componentTokens,
+      input: params.componentTokens.textarea,
+    },
+  })
+)

package/src/theme/themes/createHightideTheme.ts

@@ -29,6 +29,7 @@ import {
 import { toMultiSelectThemeResolvers } from '../resolvers/multiSelect'
 import { toSelectThemeResolvers } from '../resolvers/select'
 import { toSwitchThemeResolvers } from '../resolvers/switch'
+import { toTextareaThemeResolvers } from '../resolvers/textarea'
 import { toThemedPressableThemeResolvers } from '../resolvers/themedPressable'
 import type { HightideThemeSemantics } from '../types/semantics'
 import type { HightideTheme } from '../types/theme'
@@ -172,6 +173,11 @@ export const createHightideTheme = (themeTokens: ThemeTokens): HightideTheme =>
       semanticTokens: hightideSemanticTokenResolvers,
       componentTokens: componentTokenResolvers,
     }),
+    textarea: toTextareaThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
     searchBar: toSearchBarThemeResolvers({
       themeTokens,
       semanticTokens: hightideSemanticTokenResolvers,

package/src/theme/types/components/hightide.ts

@@ -19,6 +19,7 @@ import type { ListItemThemeResolvers } from './listItem'
 import type { MultiSelectThemeResolvers } from './multiSelect'
 import type { SelectThemeResolvers } from './select'
 import type { SwitchThemeResolvers } from './switch'
+import type { TextareaThemeResolvers } from './textarea'
 import type { ThemedPressableThemeResolvers } from './themedPressable'
 
 export type IconThemeResolvers = Record<IconSize, IconTokens>
@@ -31,6 +32,7 @@ export type HightideComponentThemes = {
   checkbox: CheckboxThemeResolvers,
   switch: SwitchThemeResolvers,
   input: InputThemeResolvers,
+  textarea: TextareaThemeResolvers,
   searchBar: SearchBarThemeResolvers,
   select: SelectThemeResolvers,
   multiSelect: MultiSelectThemeResolvers,

package/src/theme/types/components/index.ts

@@ -13,4 +13,5 @@ export * from './multiSelect'
 export * from './searchBar'
 export * from './select'
 export * from './switch'
+export * from './textarea'
 export * from './themedPressable'

package/src/theme/types/components/textarea.ts

@@ -0,0 +1,8 @@
+export type {
+  InputContainerStyle as TextareaContainerStyle,
+  InputIconStyle as TextareaIconStyle,
+  InputPlaceholderStyle as TextareaPlaceholderStyle,
+  InputState as TextareaState,
+  InputTextStyle as TextareaTextStyle,
+  InputThemeResolvers as TextareaThemeResolvers
+} from './input'