@chem-po/react-native 0.0.28 → 0.0.30

package/src/components/form/input/text/index.tsx

@@ -8,49 +8,67 @@ import { useInputStyles } from '../hooks/useInputStyles'
 import { TextAreaComponent } from './textarea'
 
 export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
-  ({ input, inEditable, meta, field, style, formSize }, ref) => {
+  ({ input, inEditable, meta, field, style, formSize, inputStyle }, ref) => {
     const { placeholder, type } = field
     const [isHidden, setIsHidden] = useState(type === 'password')
     const { value, onChange, ...inputProps } = input
     const inputRef = useRef<TextInput>(null)
-    const { container: inputStyles } = useInputStyles(inEditable, field.size, formSize)
+    const { container: conatinerStyles, text: inputStyles } = useInputStyles(
+      inEditable,
+      field.size,
+      formSize,
+    )
 
     useImperativeHandle(ref, () => ({
       focus: () => {
         inputRef.current?.focus()
       },
       blur: () => {
-        inputRef.current?.blur()
+        inputRef.current?.clear()
       },
     }))
 
     const placeholderColor = usePlaceholderColor()
     const color = useTextColor()
-    const body =
-      type === 'textarea' ? (
-        <TextAreaComponent inEditable={inEditable} field={field} input={input} meta={meta} />
-      ) : (
-        <TextInput
+
+    if (type === 'textarea') {
+      return (
+        <TextAreaComponent
           ref={inputRef}
-          style={[inputStyles, { color }, style]}
-          secureTextEntry={isHidden}
-          placeholderTextColor={placeholderColor}
-          placeholder={placeholder}
-          value={value ?? ''}
-          onChangeText={onChange}
-          {...inputProps}
+          formSize={formSize}
+          inputStyle={inputStyle}
+          inEditable={inEditable}
+          field={field}
+          style={style}
+          input={input}
+          meta={meta}
         />
       )
+    }
+
+    const body = (
+      <TextInput
+        ref={inputRef}
+        style={[inputStyles, { color }, inputStyle]}
+        secureTextEntry={isHidden}
+        selectTextOnFocus={inEditable}
+        placeholderTextColor={placeholderColor}
+        placeholder={placeholder}
+        value={value ?? ''}
+        onChangeText={onChange}
+        {...inputProps}
+      />
+    )
 
     return type === 'password' ? (
-      <View style={styles.passwordContainer}>
+      <View style={[conatinerStyles, styles.passwordContainer, style]}>
         {body}
         <TouchableOpacity style={styles.eyeIcon} onPress={() => setIsHidden(!isHidden)}>
           <Ionicons name={isHidden ? 'eye' : 'eye-off'} size={20} color="#666" />
         </TouchableOpacity>
       </View>
     ) : (
-      body
+      <View style={[conatinerStyles, style]}>{body}</View>
     )
   },
 )

package/src/components/form/input/text/textarea.tsx

@@ -1,38 +1,25 @@
-import { InputRef } from '@chem-po/core'
 import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
-import React, { forwardRef, useImperativeHandle, useRef } from 'react'
-import { StyleSheet, TextInput, View } from 'react-native'
+import React, { forwardRef } from 'react'
+import { TextInput, View } from 'react-native'
 import { FieldProps } from '../../types'
 import { useInputStyles } from '../hooks/useInputStyles'
+import { AutoResizeTextarea } from './AutoResizeTextarea'
 
-export const TextAreaComponent = forwardRef<InputRef, FieldProps<TextField>>(
-  ({ input, field, inEditable, formSize }, ref) => {
-    const inputRef = useRef<TextInput>(null)
-    const { container: inputStyles } = useInputStyles(inEditable, field.size, formSize)
+export const TextAreaComponent = forwardRef<TextInput, FieldProps<TextField>>(
+  ({ input, field, inEditable, formSize, inputStyle, style }, ref) => {
+    const { text, container } = useInputStyles(inEditable, field.size, formSize)
     const { value, onChange, ...inputProps } = input
-
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        inputRef.current?.focus()
-      },
-      blur: () => {
-        inputRef.current?.blur()
-      },
-    }))
-
     const placeholderColor = usePlaceholderColor()
     const color = useTextColor()
 
     return (
-      <View style={inputStyles}>
-        <TextInput
-          ref={inputRef}
-          style={[styles.textarea, inEditable && styles.inEditable, { color }]}
+      <View style={[container, style]}>
+        <AutoResizeTextarea
+          ref={ref}
+          style={[{ color, ...text }, inputStyle]}
           placeholder={field.placeholder}
           placeholderTextColor={placeholderColor}
           multiline
-          maxLength={200}
-          textAlignVertical="top"
           value={value ?? ''}
           onChangeText={onChange}
           {...inputProps}
@@ -43,16 +30,3 @@ export const TextAreaComponent = forwardRef<InputRef, FieldProps<TextField>>(
 )
 
 TextAreaComponent.displayName = 'TextAreaComponent'
-
-const styles = StyleSheet.create({
-  textarea: {
-    width: '100%',
-    minHeight: 80,
-    backgroundColor: 'transparent',
-    textAlignVertical: 'top',
-  },
-  inEditable: {
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-  },
-})

package/src/components/form/input/text/useWebAutoResize.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Platform, StyleProp, StyleSheet, TextStyle } from 'react-native'
+
+// creates a span element with the text and style and returns the height
+const getWebTextHeight = (text: string, spanRef: React.RefObject<HTMLSpanElement | null>) => {
+  if (!spanRef.current) return null
+  const span = spanRef.current
+  span.innerText = `${text}\n`
+  document.body.appendChild(span)
+  const height = span.offsetHeight
+  document.body.removeChild(span)
+  return height
+}
+
+const updateSpanStyle = (span: HTMLSpanElement, style: TextStyle | undefined) => {
+  span.style.whiteSpace = 'pre-wrap'
+  if (style?.fontFamily) {
+    span.style.fontFamily = style.fontFamily
+  }
+  if (style?.fontSize) {
+    span.style.fontSize = style.fontSize.toString() + 'px'
+  }
+  if (style?.fontWeight) {
+    span.style.fontWeight = style.fontWeight.toString()
+  }
+  if (style?.lineHeight) {
+    span.style.lineHeight = style.lineHeight.toString()
+  }
+  if (style?.letterSpacing) {
+    span.style.letterSpacing = style.letterSpacing.toString()
+  }
+  if (style?.textAlign) {
+    span.style.textAlign = style.textAlign
+  }
+}
+
+export const useWebAutoResize = (
+  onChangeText: ((e: string) => void) | undefined,
+  style: StyleProp<TextStyle> | undefined,
+) => {
+  const flattenedStyle = useMemo(() => StyleSheet.flatten(style), [style])
+  const [height, setHeight] = useState((flattenedStyle.fontSize ?? 18) + 4)
+  const spanRef = useRef<HTMLSpanElement>(
+    Platform.OS === 'web' ? document.createElement('span') : null,
+  )
+
+  useEffect(() => {
+    if (Platform.OS === 'web' && spanRef.current) {
+      updateSpanStyle(spanRef.current, flattenedStyle)
+    }
+  }, [flattenedStyle])
+  const handleChange = useMemo(
+    () =>
+      Platform.OS === 'web'
+        ? (e: string) => {
+            if (spanRef.current) {
+              const height = getWebTextHeight(e, spanRef)
+              setHeight((height ?? 18) + 4)
+              if (onChangeText) onChangeText(e)
+            }
+          }
+        : onChangeText,
+    [onChangeText],
+  )
+  return {
+    getWebTextHeight,
+    handleChange,
+    height,
+    setHeight,
+  }
+}

package/src/components/form/types.ts

@@ -1,4 +1,8 @@
 import { BaseFieldProps, Field } from '@chem-po/react'
-import { StyleProp } from 'react-native'
+import { StyleProp, TextStyle, ViewStyle } from 'react-native'
 
-export type FieldProps<T extends Field> = BaseFieldProps<StyleProp<any>, T>
+export type FieldProps<
+  T extends Field,
+  ContainerStyle extends ViewStyle = ViewStyle,
+  InputStyle extends TextStyle = TextStyle,
+> = BaseFieldProps<StyleProp<ContainerStyle>, StyleProp<InputStyle>, T>

package/src/components/form/view/file.tsx

@@ -1,8 +1,10 @@
 import { ImageViewOptions, InputSize } from '@chem-po/core'
-import { FileField } from '@chem-po/react'
+import { FileField, usePlaceholderColor } from '@chem-po/react'
 import React, { useMemo } from 'react'
 import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { Txt } from '../../text/Txt'
 import { FileView } from '../input/file'
+import { useInputStyles } from '../input/hooks/useInputStyles'
 
 const styles = StyleSheet.create({
   container: {
@@ -16,9 +18,6 @@ const styles = StyleSheet.create({
     opacity: 0.7,
     fontWeight: '600',
   },
-  emptyText: {
-    opacity: 0.7,
-  },
   fileContainer: {
     padding: 4,
   },
@@ -59,6 +58,9 @@ export const FileFieldView = ({
     [imageOptions, size, sizeProp],
   )
 
+  const { text, container } = useInputStyles(false, field.size, sizeProp)
+  const placeholderColor = usePlaceholderColor()
+
   return (
     <View style={[value ? styles.container : styles.rowContainer, style]}>
       {!noLabel && <Text style={styles.label}>{placeholder}</Text>}
@@ -67,7 +69,9 @@ export const FileFieldView = ({
           <FileView imageOptions={options} value={value} />
         </View>
       ) : (
-        <Text style={styles.emptyText}>None</Text>
+        <View style={container}>
+          <Txt style={[text, { color: placeholderColor }]}>None</Txt>
+        </View>
       )}
     </View>
   )

package/src/components/form/view/index.tsx

@@ -1,5 +1,5 @@
 import { displayField, InputSize } from '@chem-po/core'
-import { Field, FormatField } from '@chem-po/react'
+import { Field, FormatField, usePlaceholderColor } from '@chem-po/react'
 import React, { useMemo } from 'react'
 import { StyleSheet, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text'
@@ -22,30 +22,33 @@ const DefaultFieldView = ({
   noLabel,
   style,
   size: sizeProp,
+  inEditable,
 }: {
   field: Field
   value: any
   noLabel?: boolean
   style?: ViewStyle
   size?: InputSize
+  inEditable?: boolean
 }) => {
   const { placeholder } = field
 
-  const { text } = useInputStyles(false, field.size, sizeProp)
+  const { text, container: containerStyles } = useInputStyles(inEditable, field.size, sizeProp)
   const formatted = useMemo(() => {
     const format = displayField[field._type] as FormatField<Field>
     if (!format) return value
     return format(field, value)
   }, [value, field])
 
+  const placeholderColor = usePlaceholderColor()
   const hasValue = useMemo(() => {
     return value !== null && value !== undefined && value !== ''
   }, [value])
 
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.container, containerStyles, { backgroundColor: 'transparent' }, style]}>
       {!noLabel && <Txt style={[inputViewStyles.label, text]}>{placeholder}</Txt>}
-      <Txt style={[hasValue ? inputViewStyles.value : inputViewStyles.valueEmpty, text]}>
+      <Txt style={[text, { color: hasValue ? undefined : placeholderColor }]}>
         {hasValue ? formatted : 'None'}
       </Txt>
     </View>
@@ -58,17 +61,26 @@ export const FieldView = ({
   noLabel,
   style,
   size,
+  inEditable,
 }: {
   field: Field
-  value: any
+  value?: any
   noLabel?: boolean
   style?: ViewStyle
   size?: InputSize
+  inEditable?: boolean
 }) => {
   switch (field._type) {
     case 'select':
       return (
-        <SelectFieldView style={style} field={field} value={value} noLabel={noLabel} size={size} />
+        <SelectFieldView
+          style={style}
+          field={field}
+          value={value}
+          noLabel={noLabel}
+          size={size}
+          inEditable={inEditable}
+        />
       )
     case 'multipleSelect':
       return (
@@ -86,7 +98,14 @@ export const FieldView = ({
       )
     default:
       return (
-        <DefaultFieldView style={style} field={field} value={value} noLabel={noLabel} size={size} />
+        <DefaultFieldView
+          style={style}
+          field={field}
+          value={value}
+          noLabel={noLabel}
+          size={size}
+          inEditable={inEditable}
+        />
       )
   }
 }

package/src/components/form/view/multipleSelect.tsx

@@ -1,7 +1,8 @@
 import { InputSize } from '@chem-po/core'
-import { MultipleSelectField, useColorMode } from '@chem-po/react'
+import { MultipleSelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
 import { useMemo } from 'react'
 import React, { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { Txt } from '../../text/Txt'
 import { useInputStyles } from '../input/hooks/useInputStyles'
 import { SelectedOptionContainer } from '../input/multipleSelect'
 import { DefaultRenderOption } from './select'
@@ -12,6 +13,7 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     alignItems: 'center',
     maxWidth: '100%',
+    backgroundColor: 'transparent',
   },
   label: {
     paddingRight: 8,
@@ -27,9 +29,6 @@ const styles = StyleSheet.create({
     marginTop: 2,
     marginHorizontal: 2,
   },
-  emptyText: {
-    opacity: 0.6,
-  },
 })
 
 export const MultipleSelectFieldView = <F extends MultipleSelectField>({
@@ -48,13 +47,14 @@ export const MultipleSelectFieldView = <F extends MultipleSelectField>({
   const { placeholder, renderOption: customRender, options } = field
   const selectedOptions = options.filter(o => value?.includes(o.value))
   const colorMode = useColorMode()
-  const { size, container: inputStyles, text } = useInputStyles(undefined, field.size, sizeProp)
+  const { size, text, container } = useInputStyles(true, field.size, sizeProp)
+  const placeholderColor = usePlaceholderColor()
   const selectedOptionStyle = useMemo<ViewStyle>(() => {
     return {
-      paddingHorizontal: inputStyles.paddingHorizontal,
-      paddingVertical: inputStyles.paddingVertical,
+      paddingHorizontal: container.paddingHorizontal,
+      paddingVertical: container.paddingVertical,
     }
-  }, [inputStyles])
+  }, [container])
   const RenderOption = useMemo(() => customRender ?? DefaultRenderOption, [customRender])
   return (
     <View style={[styles.container, style]}>
@@ -74,7 +74,9 @@ export const MultipleSelectFieldView = <F extends MultipleSelectField>({
           ))}
         </View>
       ) : (
-        <Text style={[styles.emptyText, text]}>None</Text>
+        <View style={container}>
+          <Txt style={[text, { color: placeholderColor }]}>None</Txt>
+        </View>
       )}
     </View>
   )

package/src/components/form/view/select.tsx

@@ -10,6 +10,7 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
+    backgroundColor: 'transparent',
   },
   label: {
     paddingRight: 10,
@@ -32,17 +33,19 @@ export const SelectFieldView = ({
   noLabel,
   style,
   size: sizeProp,
+  inEditable,
 }: {
   field: SelectField
   value: any
   noLabel?: boolean
   style?: ViewStyle
   size?: InputSize
+  inEditable?: boolean
 }) => {
   const { placeholder, renderOption: customRender } = field
   const colorMode = useColorMode()
   const placeholderColor = usePlaceholderColor()
-  const { size, text } = useInputStyles(false, field.size, sizeProp)
+  const { size, text, container } = useInputStyles(inEditable, field.size, sizeProp)
   const selectedOption = field.options.find(o => o.value === value)
   const RenderOption = customRender ?? DefaultRenderOption
   return (
@@ -59,7 +62,9 @@ export const SelectFieldView = ({
           size={size}
         />
       ) : (
-        <Txt style={inputViewStyles.valueEmpty}>None</Txt>
+        <View style={container}>
+          <Txt style={[text, { color: placeholderColor }]}>None</Txt>
+        </View>
       )}
     </View>
   )

package/src/components/form/view/styles.ts

@@ -9,7 +9,4 @@ export const inputViewStyles = StyleSheet.create({
   value: {
     opacity: 1,
   },
-  valueEmpty: {
-    opacity: 0.6,
-  },
 })

package/src/components/layout/CollapseHorizontal.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback } from 'react'
+import { LayoutChangeEvent, StyleProp, View, ViewStyle } from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated'
+
+export const CollapseHorizontal = ({
+  children,
+  in: isIn,
+  duration = 200,
+  style,
+}: {
+  children: React.ReactNode
+  in: boolean
+  duration?: number
+  style?: StyleProp<ViewStyle>
+}) => {
+  const contentWidth = useSharedValue(0)
+  const width = useSharedValue(0)
+  const opacity = useSharedValue(0)
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      contentWidth.value = event.nativeEvent.layout.width
+      // Initialize width if component is initially visible
+      if (isIn && width.value === 0) {
+        width.value = contentWidth.value
+        opacity.value = 1
+      }
+    },
+    [isIn, contentWidth, width, opacity],
+  )
+
+  React.useEffect(() => {
+    if (isIn) {
+      // Fade in: width first, then opacity
+      width.value = withTiming(contentWidth.value, {
+        duration,
+      })
+      opacity.value = withSequence(
+        withTiming(0, { duration: 0 }), // Reset opacity
+        withTiming(1, {
+          duration,
+        }),
+      )
+    } else {
+      // Fade out: opacity first, then width
+      opacity.value = withTiming(0, {
+        duration,
+      })
+      width.value = withSequence(
+        withTiming(width.value, { duration: 0 }), // Ensure we start from current width
+        withTiming(0, {
+          duration,
+        }),
+      )
+    }
+  }, [isIn, contentWidth.value, duration, width, opacity])
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: width.value,
+    opacity: opacity.value,
+  }))
+
+  return (
+    <Animated.View
+      style={[
+        {
+          overflow: 'hidden',
+          pointerEvents: isIn ? 'auto' : 'none',
+        },
+        animatedStyle,
+      ]}>
+      <View style={[{ position: 'absolute' }, style]} onLayout={handleLayout}>
+        {children}
+      </View>
+    </Animated.View>
+  )
+}

package/src/contexts/root.tsx

@@ -1,24 +1,121 @@
 import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core'
-import { ChempoProps, ChempoProvider } from '@chem-po/react'
+import { ChempoProps, ChempoProvider, useTheme } from '@chem-po/react'
 import React, { PropsWithChildren, useMemo } from 'react'
 import { NotifierWrapper } from 'react-native-notifier'
+import { configureFonts, PaperProvider, Props as PaperProviderProps } from 'react-native-paper'
 import { en, registerTranslation } from 'react-native-paper-dates'
+import { MD3Type, MD3TypescaleKey } from 'react-native-paper/lib/typescript/types'
 import { nativeToast } from '../constants/toast'
 import { useThemeState } from '../hooks/useThemeState'
 import { initializeScreen } from '../store/useScreen'
 
 registerTranslation('en', en)
 
+export type FontConfig = Partial<Record<MD3TypescaleKey, Partial<MD3Type>>>
 export interface ChempoNativeProviderProps<BackendAdapter extends BackendAdapterInterface>
   extends PropsWithChildren<Pick<ChempoProps<BackendAdapter>, 'backendAdapter' | 'assets'>> {
   theme?: Theme
+  fonts?: FontConfig
   initialColorMode?: ColorMode
 }
+const createPaperTheme = (
+  theme: Theme,
+  fonts: FontConfig | undefined,
+  colorMode: ColorMode,
+): PaperProviderProps['theme'] => {
+  const { colors } = theme
+
+  return {
+    dark: colorMode === 'dark',
+    colors: {
+      primary: colors.accent[300],
+      onPrimary: colors.text[900],
+      primaryContainer: colors.accent[800],
+      onPrimaryContainer: colors.text[150],
+
+      secondary: colors.background[150],
+      onSecondary: colors.text[100],
+      secondaryContainer: colors.accent[950],
+      onSecondaryContainer: colors.text[150],
+
+      tertiary: colors.accent[600],
+      onTertiary: colors.text[50],
+      tertiaryContainer: colors.accent[300],
+      onTertiaryContainer: colors.text[700],
+
+      error: colors.error[500],
+      onError: colors.text[50],
+      errorContainer: colors.error[100],
+      onErrorContainer: colors.error[900],
+
+      background: colors.background[50],
+      onBackground: colors.text[100],
+      surface: colors.background[100],
+      onSurface: colors.text[100],
+      surfaceVariant: colors.background[200],
+      onSurfaceVariant: colors.text[300],
+      outline: colors.text[500],
+      outlineVariant: colors.accent[300],
+
+      surfaceDisabled: colors.background[200],
+      onSurfaceDisabled: colors.text[400],
+      backdrop: '#000000aa', // 60% opacity
+
+      inverseSurface: colors.background[900],
+      inverseOnSurface: colors.text[50],
+      inversePrimary: colors.accent[200],
+      shadow: '#00000099',
+      scrim: '#00000099', // Semi-transparent dark overlay
+
+      elevation: {
+        level0: 'transparent',
+        level1: colors.background[100],
+        level2: colors.background[200],
+        level3: colors.background[300],
+        level4: colors.background[400],
+        level5: colors.background[500],
+      },
+    },
+    roundness: 4,
+    animation: {
+      scale: 1.0,
+    },
+    fonts: configureFonts({
+      config: {
+        ...fonts,
+        bodyLarge: {
+          fontSize: 18,
+          ...fonts?.bodyLarge,
+        },
+        bodyMedium: {
+          fontSize: 17,
+          ...fonts?.bodyMedium,
+        },
+        bodySmall: {
+          fontSize: 16,
+          ...fonts?.bodySmall,
+        },
+      },
+    }),
+  }
+}
+
+const ChempoPaperProvider = ({ children, fonts }: PropsWithChildren<{ fonts?: FontConfig }>) => {
+  const { theme, colorMode } = useTheme()
+
+  const paperTheme = useMemo(
+    () => createPaperTheme(theme, fonts, colorMode),
+    [theme, fonts, colorMode],
+  )
+  return <PaperProvider theme={paperTheme}>{children}</PaperProvider>
+}
 export const ChempoNativeProvider = <
   BackendAdapter extends BackendAdapterInterface<any, any, any, any, any, any>,
 >({
   theme: themeProp,
   initialColorMode,
+  children,
+  fonts,
   ...props
 }: ChempoNativeProviderProps<BackendAdapter>) => {
   const useThemeProps = useMemo(
@@ -32,8 +129,9 @@ export const ChempoNativeProvider = <
         toast={nativeToast}
         theme={theme}
         initializeScreen={initializeScreen}
-        {...props}
-      />
+        {...props}>
+        <ChempoPaperProvider fonts={fonts}>{children}</ChempoPaperProvider>
+      </ChempoProvider>
     </NotifierWrapper>
   )
 }