@chem-po/react-native 0.0.38 → 0.0.40

package/src/components/button/DeleteButton.tsx

@@ -1,10 +1,12 @@
 import { useBackgroundColor, useColorModeValue, useToast } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ActivityIndicator, Animated, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
 import { Pressable } from 'react-native-gesture-handler'
 import { Modal, Portal } from 'react-native-paper'
 import { Txt } from '../text/Txt'
+import { ActionButton, ActionButtonProps } from './ActionButton'
+import { ButtonText } from './ButtonText'
 
 const defaultAlertBodyText = "Are you sure? You can't undo this action afterwards."
 
@@ -61,19 +63,17 @@ export const DeleteConfirmAlert = ({
   )
 }
 
-export const DeleteButton: React.FC<{
+export interface DeleteButtonProps extends Omit<ActionButtonProps, 'onPress' | 'loading'> {
   onDelete: (() => Promise<any>) | (() => void)
   itemName: string
   actionName?: string
   noConfirm?: boolean
   text?: string
   alertBody?: string | ReactNode
-  style?: ViewStyle
-  color?: string
-  variant?: 'outline' | 'solid'
   iconSize?: number
   iconProps?: React.ComponentProps<typeof Ionicons>
-}> = ({
+}
+export const DeleteButton: React.FC<DeleteButtonProps> = ({
   onDelete,
   itemName,
   noConfirm,
@@ -85,19 +85,17 @@ export const DeleteButton: React.FC<{
   variant = 'outline',
   iconSize = 18,
   iconProps,
+  ...buttonProps
 }) => {
+  const { size, disabledColor, textStyle } = buttonProps
   const { showError } = useToast()
   const [deleteLoading, setDeleteLoading] = useState(false)
   const [confirmActive, setConfirmActive] = useState(false)
   const confirmTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   const isMounted = useRef(true)
-  const contentOpacity = useRef(new Animated.Value(1)).current
-  const loaderOpacity = useRef(new Animated.Value(0)).current
   const defaultColor = useColorModeValue('#dd2222', '#ff7777')
   const color = colorProp ?? defaultColor
 
-  const textColor = useMemo(() => (variant === 'solid' ? 'white' : color), [variant, color])
-
   useEffect(() => {
     isMounted.current = true
 
@@ -106,30 +104,11 @@ export const DeleteButton: React.FC<{
     }
   }, [])
 
-  const animateLoading = useCallback(
-    (isLoading: boolean) => {
-      Animated.parallel([
-        Animated.timing(contentOpacity, {
-          toValue: isLoading ? 0 : 1,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-        Animated.timing(loaderOpacity, {
-          toValue: isLoading ? 1 : 0,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-      ]).start()
-    },
-    [contentOpacity, loaderOpacity],
-  )
-
   const handleDelete = useCallback(async () => {
     if (confirmTimer.current) clearTimeout(confirmTimer.current)
     setConfirmActive(false)
     if (onDelete) {
       setDeleteLoading(true)
-      animateLoading(true)
       try {
         await onDelete()
       } catch (err: any) {
@@ -138,86 +117,51 @@ export const DeleteButton: React.FC<{
       }
       if (isMounted.current) {
         setDeleteLoading(false)
-        animateLoading(false)
       }
     } else {
       console.error('No delete function')
     }
-  }, [onDelete, animateLoading, showError])
+  }, [onDelete, showError])
 
   return (
     <>
-      {text ? (
-        <Pressable
-          style={[
-            styles.button,
-            {
-              borderColor: color,
-              backgroundColor: variant === 'solid' ? color : 'transparent',
-              borderWidth: variant === 'outline' ? 1 : 0,
-            },
-            style,
-          ]}
-          onPress={() => {
-            if (noConfirm) handleDelete()
-            else setConfirmActive(true)
-          }}
-          disabled={deleteLoading}>
-          <View style={styles.buttonContent}>
-            <Animated.View style={[styles.contentContainer, { opacity: contentOpacity }]}>
-              <Ionicons
-                name="trash"
-                size={iconSize}
-                color={textColor}
-                {...iconProps}
-                style={[variant === 'solid' ? styles.shadow : {}, iconProps?.style]}
-              />
-              <Text
-                style={[
-                  styles.buttonText,
-                  { color: textColor },
-                  variant === 'solid' ? styles.shadow : undefined,
-                ]}>
-                {text}
-              </Text>
-            </Animated.View>
-            <Animated.View style={[styles.loaderContainer, { opacity: loaderOpacity }]}>
-              <ActivityIndicator color={textColor} size="small" />
-            </Animated.View>
-          </View>
-        </Pressable>
-      ) : (
-        <Pressable
-          style={[
-            styles.iconButton,
-            {
-              borderColor: color,
-              borderWidth: variant === 'outline' ? 1 : 0,
-              backgroundColor: variant === 'solid' ? color : 'transparent',
-            },
-            style,
-          ]}
-          onPress={() => {
-            if (noConfirm) handleDelete()
-            else setConfirmActive(true)
-          }}
-          disabled={deleteLoading}>
-          <View style={styles.iconButtonContent}>
-            <Animated.View style={[styles.contentContainer, { opacity: contentOpacity }]}>
-              <Ionicons
-                name="trash"
-                size={iconSize}
-                color={textColor}
-                {...iconProps}
-                style={[variant === 'solid' ? styles.shadow : {}, iconProps?.style]}
-              />
-            </Animated.View>
-            <Animated.View style={[styles.loaderContainer, { opacity: loaderOpacity }]}>
-              <ActivityIndicator color={textColor} size="small" />
-            </Animated.View>
-          </View>
-        </Pressable>
-      )}
+      <ActionButton
+        style={[
+          {
+            borderColor: color,
+            backgroundColor: variant === 'solid' ? color : 'transparent',
+            borderWidth: variant === 'outline' ? 1 : 0,
+          },
+          style,
+        ]}
+        variant={variant}
+        onPress={() => {
+          if (noConfirm) handleDelete()
+          else setConfirmActive(true)
+        }}
+        loading={deleteLoading}
+        disabled={deleteLoading}
+        {...buttonProps}>
+        <View style={styles.contentContainer}>
+          <Ionicons
+            name="trash"
+            size={iconSize}
+            color={variant === 'solid' ? 'white' : color}
+            {...iconProps}
+            style={[variant === 'solid' ? styles.shadow : {}, iconProps?.style]}
+          />
+          {text ? (
+            <ButtonText
+              variant={variant}
+              color={color}
+              disabledColor={disabledColor}
+              size={size}
+              style={textStyle}>
+              {text}
+            </ButtonText>
+          ) : null}
+        </View>
+      </ActionButton>
       {noConfirm ? null : (
         <DeleteConfirmAlert
           confirmActive={confirmActive}
@@ -261,6 +205,7 @@ const styles = StyleSheet.create({
   },
   buttonContainer: {
     flexDirection: 'row',
+    alignItems: 'center',
     justifyContent: 'space-between',
     width: '100%',
   },
@@ -299,22 +244,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderRadius: 4,
   },
-  buttonContent: {
-    flexDirection: 'row',
-    gap: 3,
-    paddingHorizontal: 13,
-    paddingVertical: 5,
-    borderRadius: 4,
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: 34,
-    position: 'relative',
-  },
   contentContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 3,
+    gap: 4,
   },
   loaderContainer: {
     ...StyleSheet.absoluteFillObject,

package/src/components/button/LoadingButton.tsx

@@ -1,53 +1,17 @@
-import { useTextColor, useToast } from '@chem-po/react'
-import { Ionicons } from '@expo/vector-icons'
-import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import {
-  ActivityIndicator,
-  Animated,
-  StyleProp,
-  StyleSheet,
-  Text,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
+import { useToast } from '@chem-po/react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { ActionButton, ActionButtonProps } from './ActionButton'
 
-export interface LoadingButtonProps {
-  onPress: (() => Promise<any>) | (() => void)
-  children: ReactNode
-  style?: StyleProp<ViewStyle>
-  contentStyle?: StyleProp<ViewStyle>
-  textStyle?: StyleProp<TextStyle>
-  color?: string
-  variant?: 'outline' | 'solid'
-  icon?: {
-    name: React.ComponentProps<typeof Ionicons>['name']
-    size?: number
-  }
-  disabled?: boolean
-  iconProps?: React.ComponentProps<typeof Ionicons>
+export interface LoadingButtonProps<ReturnType = any>
+  extends Omit<ActionButtonProps, 'onPress' | 'loading'> {
+  onPress: () => Promise<ReturnType>
 }
 
-export const LoadingButton: React.FC<LoadingButtonProps> = ({
-  onPress,
-  children,
-  style,
-  contentStyle,
-  textStyle,
-  color: colorProp,
-  variant = 'outline',
-  icon,
-  disabled = false,
-  iconProps,
-}) => {
+export const LoadingButton: React.FC<LoadingButtonProps> = ({ onPress, ...props }) => {
   const [loading, setLoading] = useState(false)
-  const isMounted = useRef(true)
-  const contentOpacity = useRef(new Animated.Value(1)).current
-  const loaderOpacity = useRef(new Animated.Value(0)).current
-
   const { showError } = useToast()
 
+  const isMounted = useRef(true)
   useEffect(() => {
     isMounted.current = true
 
@@ -56,28 +20,9 @@ export const LoadingButton: React.FC<LoadingButtonProps> = ({
     }
   }, [])
 
-  const animateLoading = useCallback(
-    (isLoading: boolean) => {
-      Animated.parallel([
-        Animated.timing(contentOpacity, {
-          toValue: isLoading ? 0 : 1,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-        Animated.timing(loaderOpacity, {
-          toValue: isLoading ? 1 : 0,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-      ]).start()
-    },
-    [contentOpacity, loaderOpacity],
-  )
-
   const handlePress = useCallback(async () => {
     if (onPress) {
       setLoading(true)
-      animateLoading(true)
       try {
         await onPress()
       } catch (err: any) {
@@ -86,100 +31,9 @@ export const LoadingButton: React.FC<LoadingButtonProps> = ({
       }
       if (isMounted.current) {
         setLoading(false)
-        animateLoading(false)
       }
     }
-  }, [onPress, animateLoading, showError])
-
-  const fallbackColor = useTextColor()
-  const color = useMemo(() => colorProp ?? fallbackColor, [colorProp, fallbackColor])
-  const textColor = useMemo(() => (variant === 'solid' ? 'white' : color), [variant, color])
-  const backgroundColor = useMemo(
-    () => (variant === 'solid' ? color : 'transparent'),
-    [variant, color],
-  )
-  return (
-    <Pressable
-      style={[
-        styles.button,
-        {
-          opacity: disabled ? 0.6 : 1,
-          borderColor: color,
-          borderWidth: variant === 'outline' ? 1 : 0,
-          backgroundColor,
-        },
-        style,
-      ]}
-      onPress={() => {
-        handlePress()
-      }}
-      disabled={loading || disabled}>
-      <View
-        style={[styles.buttonContent, { borderColor: disabled ? '#ccc' : color }, contentStyle]}>
-        <Animated.View style={[styles.contentContainer, { opacity: contentOpacity }]}>
-          {icon && (
-            <Ionicons
-              name={icon.name}
-              size={icon.size ?? 20}
-              color={textColor}
-              {...iconProps}
-              style={[variant === 'solid' ? styles.shadow : {}, iconProps?.style]}
-            />
-          )}
-          {typeof children === 'string' ? (
-            <Text
-              style={[
-                styles.buttonText,
-                { color: textColor },
-                variant === 'solid' ? styles.shadow : {},
-                textStyle,
-              ]}>
-              {children}
-            </Text>
-          ) : (
-            children
-          )}
-        </Animated.View>
+  }, [onPress, showError])
 
-        <Animated.View style={[styles.loaderContainer, { opacity: loaderOpacity }]}>
-          <ActivityIndicator color={textColor} size="small" />
-        </Animated.View>
-      </View>
-    </Pressable>
-  )
+  return <ActionButton onPress={() => void handlePress()} loading={loading} {...props} />
 }
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'transparent',
-    borderRadius: 4,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-  },
-  buttonContent: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative',
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 4,
-  },
-  loaderContainer: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  buttonText: {
-    fontWeight: 'bold',
-  },
-  shadow: {
-    textShadowColor: 'rgba(0, 0, 0, 0.3)',
-    textShadowOffset: { width: 1, height: 1 },
-    textShadowRadius: 4,
-  },
-})

package/src/components/button/hooks.ts

@@ -0,0 +1,66 @@
+import { ButtonColors } from '@chem-po/core'
+import { useTheme } from '@chem-po/react'
+import { useMemo } from 'react'
+import { useFont } from '../../hooks/useFont'
+
+export const useButtonFont = (size: 'lg' | 'md' | 'sm' | 'xs') => {
+  const fontSize = useMemo(() => (size === 'xs' ? 'sm' : size), [size])
+  const font = useFont('display', fontSize)
+  return font
+}
+
+export const useButtonColors = (variant: 'solid' | 'outline') => {
+  const { buttons } = useTheme()
+  return useMemo(() => buttons[variant], [buttons, variant])
+}
+
+export const useButtonTextColor = (
+  colors: ButtonColors,
+  variant: 'solid' | 'outline',
+  buttonColor: string | undefined,
+  disabled: boolean,
+  disabledColor: string | undefined,
+) => {
+  return useMemo(() => {
+    if (disabled) {
+      if (disabledColor && variant === 'outline') return disabledColor
+      return colors.disabled.text
+    }
+    if (buttonColor && variant === 'outline') return buttonColor
+    return colors.text
+  }, [variant, buttonColor, disabledColor, disabled, colors])
+}
+
+export const useButtonBackgroundColor = (
+  colors: ButtonColors,
+  variant: 'solid' | 'outline',
+  buttonColor: string | undefined,
+  disabled: boolean,
+  disabledColor: string | undefined,
+) => {
+  return useMemo(() => {
+    if (disabled) {
+      if (disabledColor && variant === 'solid') return disabledColor
+      return colors.disabled.background
+    }
+    if (buttonColor && variant === 'solid') return buttonColor
+    return colors.background
+  }, [variant, buttonColor, disabledColor, disabled, colors])
+}
+
+export const useButtonBorderColor = (
+  colors: ButtonColors,
+  variant: 'solid' | 'outline',
+  buttonColor: string | undefined,
+  disabled: boolean,
+  disabledColor: string | undefined,
+) => {
+  return useMemo(() => {
+    if (disabled) {
+      if (disabledColor && variant === 'outline') return disabledColor
+      return colors.disabled.border
+    }
+    if (buttonColor && variant === 'outline') return buttonColor
+    return colors.border
+  }, [variant, buttonColor, disabledColor, disabled, colors])
+}

package/src/components/button/index.ts

@@ -1,4 +1,5 @@
 export * from './ActionButton'
+export * from './ButtonText'
 export * from './DeleteButton'
 export * from './LoadingButton'
 export * from './Toggle'

package/src/components/form/input/hooks/useInputStyles.ts

@@ -2,6 +2,7 @@ import { InputSize } from '@chem-po/core'
 import { useBackgroundColor, useTextColor } from '@chem-po/react'
 import { useMemo } from 'react'
 import { StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
+import { useFont } from '../../../../hooks/useFont'
 
 export const inputStyles = StyleSheet.create({
   input: {
@@ -26,15 +27,6 @@ export const inputStyles = StyleSheet.create({
     padding: 14,
     borderRadius: 8,
   },
-  inputTextSmall: {
-    fontSize: 14,
-  },
-  inputTextMedium: {
-    fontSize: 16,
-  },
-  inputTextLarge: {
-    fontSize: 18,
-  },
   buttonContainer: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -74,12 +66,6 @@ const editableInputSizeMap = {
   lg: inputStyles.inputMedium,
 }
 
-const inputTextSizeMap = {
-  sm: inputStyles.inputTextSmall,
-  md: inputStyles.inputTextMedium,
-  lg: inputStyles.inputTextLarge,
-}
-
 const buttonContainerSizeMap = {
   sm: inputStyles.buttonContainerSmall,
   md: inputStyles.buttonContainerMedium,
@@ -106,9 +92,10 @@ export const useInputStyles = (
   )
   const textColor = useTextColor()
   const usedSize = size ?? formSize
+  const textFont = useFont('body', usedSize)
   return {
     text: {
-      ...inputTextSizeMap[usedSize],
+      ...textFont,
       paddingTop: 0,
       paddingBottom: 0,
       color: textColor,

package/src/components/loading/CircularProgress.tsx

@@ -9,6 +9,12 @@ import {
   ViewStyle,
 } from 'react-native'
 
+export interface CircularProgressProps extends ActivityIndicatorProps {
+  trackColor?: string
+  viewStyle?: StyleProp<ViewStyle>
+  visible?: boolean
+}
+
 export const CircularProgress = ({
   color,
   trackColor,
@@ -16,11 +22,7 @@ export const CircularProgress = ({
   visible = true,
   viewStyle,
   ...props
-}: ActivityIndicatorProps & {
-  trackColor?: string
-  viewStyle?: StyleProp<ViewStyle>
-  visible?: boolean
-}) => {
+}: CircularProgressProps) => {
   const defaultTrackColor = useColorModeValue('#959595', '#575757')
   const opacity = useRef(new Animated.Value(visible ? 1 : 0)).current
 

package/src/components/loading/LoadingOverlay.tsx

@@ -1,25 +1,31 @@
 import React, { useMemo } from 'react'
 import { Animated, StyleProp, StyleSheet, ViewStyle } from 'react-native'
 import { FadeInOptions, useFadeIn } from '../../hooks/useFadeIn'
-import { CircularProgress } from './CircularProgress'
+import { CircularProgress, CircularProgressProps } from './CircularProgress'
 
 const loadingFadeInProps: FadeInOptions = {
-  activeOpacity: 0.5,
+  activeOpacity: 0.8,
   duration: 100,
 }
 interface LoadingOverlayProps {
   loading: boolean
   fadeOptions?: FadeInOptions
   style?: StyleProp<ViewStyle>
+  indicatorProps?: CircularProgressProps
 }
-export const LoadingOverlay = ({ loading, fadeOptions, style }: LoadingOverlayProps) => {
+export const LoadingOverlay = ({
+  loading,
+  fadeOptions,
+  style,
+  indicatorProps,
+}: LoadingOverlayProps) => {
   const opts = useMemo(() => ({ ...loadingFadeInProps, ...fadeOptions }), [fadeOptions])
   const opacity = useFadeIn(loading, opts)
 
   return (
     <Animated.View
       style={[styles.overlay, style, { opacity, pointerEvents: loading ? 'auto' : 'none' }]}>
-      <CircularProgress />
+      <CircularProgress {...indicatorProps} />
     </Animated.View>
   )
 }
@@ -32,11 +38,13 @@ export const WithLoadingOverlay = ({
   children,
   style,
   overlayStyle,
+  indicatorProps,
 }: {
   loading: boolean
   children: React.ReactNode
   style?: StyleProp<ViewStyle>
   overlayStyle?: StyleProp<ViewStyle>
+  indicatorProps?: CircularProgressProps
 }) => {
   const bodyOpacity = useFadeIn(!loading, withOverlayLoadingFadeIn)
   return (
@@ -46,6 +54,7 @@ export const WithLoadingOverlay = ({
         fadeOptions={withOverlayLoadingFadeIn}
         loading={loading}
         style={overlayStyle}
+        indicatorProps={indicatorProps}
       />
     </>
   )

package/src/contexts/fonts.tsx

@@ -0,0 +1,23 @@
+import React, { createContext, PropsWithChildren, useContext } from 'react'
+import { MD3Typescale } from 'react-native-paper/lib/typescript/types'
+
+export interface ChempoFontsProviderProps {
+  fonts: MD3Typescale
+}
+
+export const ChempoFontsContext = createContext<ChempoFontsProviderProps | null>(null)
+
+export const ChempoFontsProvider = ({
+  children,
+  fonts,
+}: PropsWithChildren<ChempoFontsProviderProps>) => {
+  return <ChempoFontsContext.Provider value={{ fonts }}>{children}</ChempoFontsContext.Provider>
+}
+
+export const useChempoFonts = () => {
+  const context = useContext(ChempoFontsContext)
+  if (!context) {
+    throw new Error('useChempoFonts must be used within a ChempoFontsProvider')
+  }
+  return context
+}