@momo-kits/foundation 0.80.8 → 0.81.1

package/Input/InputDropDown.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useContext, useRef} from 'react';
+import React, {useContext} from 'react';
 import {TextInput, TouchableOpacity, View} from 'react-native';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
@@ -8,117 +8,113 @@ import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {Styles} from '../Consts';
 
-const InputDropDown = forwardRef(
-  (
-    {
-      value,
-      floatingValue,
-      floatingIcon,
-      size,
-      onPress,
-      placeholder,
-      errorMessage,
-      icon = 'arrow_chevron_down_small',
-      disabled,
-      floatingIconColor,
-      iconColor,
-      required,
-      errorSpacing,
-      loading,
-      leadingIcon,
-      leadingIconColor,
-      ...props
-    }: InputDropDownProps,
-    ref,
-  ) => {
-    const {theme} = useContext(ApplicationContext);
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const full = !!value || !!placeholder;
-    const renderIcon = (color: string | undefined) => {
-      if (loading) {
-        return <Loader type={'spinner'} color={color} />;
-      }
-      if (icon) {
-        return <Icon color={color} source={icon} size={24} />;
-      }
-    };
+const InputDropDown = ({
+  value,
+  floatingValue,
+  floatingIcon,
+  size,
+  onPress,
+  placeholder,
+  errorMessage,
+  icon = 'arrow_chevron_down_small',
+  disabled,
+  floatingIconColor,
+  iconColor,
+  required,
+  errorSpacing,
+  loading,
+  leadingIcon,
+  leadingIconColor,
+  style,
+  ...props
+}: InputDropDownProps) => {
+  const {theme} = useContext(ApplicationContext);
+  const full = !!value || !!placeholder;
+  const accessibilityLabel = `InputDropDown/${floatingValue ?? placeholder}`;
 
-    const renderInputView = () => {
-      const disabledColor = theme.colors.text.disable;
-      let textColor = theme.colors.text.default;
-      let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = iconColor;
+  const renderIcon = (color: string | undefined) => {
+    if (loading) {
+      return <Loader type={'spinner'} color={color} />;
+    }
+    if (icon) {
+      return <Icon color={color} source={icon} size={24} />;
+    }
+  };
 
-      if (disabled) {
-        textColor = disabledColor;
-        placeholderColor = disabledColor;
-        iconTintColor = disabledColor;
-      }
+  const renderInputView = () => {
+    const disabledColor = theme.colors.text.disable;
+    let textColor = theme.colors.text.default;
+    let placeholderColor = theme.colors.text.hint;
+    let iconTintColor = iconColor;
 
-      return (
-        <View
-          style={[
-            styles.inputWrapper,
-            {backgroundColor: theme.colors.background.surface},
-            getSizeStyle(size),
-            getBorderColor(theme, false, errorMessage, disabled),
-          ]}>
-          <FloatingView
-            floatingValue={floatingValue}
-            floatingIconColor={floatingIconColor}
-            disabled={disabled}
-            required={required}
-            floatingIcon={floatingIcon}
-          />
-          <View style={full ? styles.inputView : Styles.row}>
-            {!!leadingIcon && (
-              <View style={styles.leadingIconContainer}>
-                <Icon
-                  color={leadingIconColor}
-                  source={leadingIcon}
-                  size={size === 'small' ? 24 : 32}
-                />
-              </View>
-            )}
-            {full && (
-              <TextInput
-                {...props}
-                onPressIn={onPress}
-                accessibilityLabel={`TextInput`}
-                editable={false}
-                textAlignVertical="top"
-                ref={inputRef}
-                style={[
-                  styles.input,
-                  {
-                    color: textColor,
-                    fontFamily: `${theme.font}-Regular`,
-                  },
-                ]}
-                textBreakStrategy="highQuality"
-                value={value}
-                placeholder={placeholder}
-                selectionColor={theme.colors.primary}
-                placeholderTextColor={placeholderColor}
-              />
-            )}
-          </View>
-          <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
-        </View>
-      );
-    };
+    if (disabled) {
+      textColor = disabledColor;
+      placeholderColor = disabledColor;
+      iconTintColor = disabledColor;
+    }
 
     return (
-      <TouchableOpacity
-        onPress={onPress}
-        style={full && styles.wrapper}
-        accessibilityLabel={`InputDropDown/${floatingValue}`}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </TouchableOpacity>
+      <View
+        style={[
+          styles.inputWrapper,
+          {backgroundColor: theme.colors.background.surface},
+          getSizeStyle(size),
+          getBorderColor(theme, false, errorMessage, disabled),
+        ]}>
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled}
+          required={required}
+          floatingIcon={floatingIcon}
+        />
+        <View style={full ? styles.inputView : Styles.row}>
+          {!!leadingIcon && (
+            <View style={styles.leadingIconContainer}>
+              <Icon
+                color={leadingIconColor}
+                source={leadingIcon}
+                size={size === 'small' ? 24 : 32}
+              />
+            </View>
+          )}
+          {full && (
+            <TextInput
+              {...props}
+              onPressIn={onPress}
+              accessibilityLabel={accessibilityLabel}
+              editable={false}
+              textAlignVertical="top"
+              style={[
+                styles.input,
+                {
+                  color: textColor,
+                  fontFamily: `${theme.font}-Regular`,
+                },
+              ]}
+              textBreakStrategy="highQuality"
+              value={value}
+              placeholder={placeholder}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+            />
+          )}
+        </View>
+        <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
+      </View>
     );
-  },
-);
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[style, full && styles.wrapper]}
+      accessibilityLabel={accessibilityLabel}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+    </TouchableOpacity>
+  );
+};
 
 InputDropDown.defaultProps = {
   size: 'small',

package/Input/InputMoney.tsx

@@ -29,6 +29,7 @@ const InputMoney = forwardRef(
       iconColor,
       required,
       errorSpacing,
+      style,
       ...props
     }: InputMoneyProps,
     ref,
@@ -37,6 +38,8 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const [value, setValue] = useState('');
+    const accessibilityLabel = `InputMoney/${floatingValue}`;
+
     const onClearText = () => {
       inputRef?.current?.clear();
       setValue('');
@@ -91,7 +94,7 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={`TextInput`}
+              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -131,8 +134,8 @@ const InputMoney = forwardRef(
 
     return (
       <View
-        style={styles.wrapper}
-        accessibilityLabel={`InputMoney/${floatingValue}`}>
+        style={[style, styles.wrapper]}
+        accessibilityLabel={accessibilityLabel}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/InputOTP.tsx

@@ -1,7 +1,6 @@
 import React, {FC, useContext, useEffect, useRef, useState} from 'react';
 import {
   Animated,
-  KeyboardType,
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
@@ -69,6 +68,7 @@ const InputOTP: FC<InputOTPProps> = ({
   onFocus,
   onBlur,
   dataType = 'number',
+  style,
   ...props
 }) => {
   const MAX_LENGTH = 10;
@@ -76,6 +76,7 @@ const InputOTP: FC<InputOTPProps> = ({
   const [focused, setFocused] = useState(false);
   const inputRef = useRef<TextInput>(null);
   const {theme} = useContext(ApplicationContext);
+  const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
 
   const onFocusInput = () => {
     setFocused(true);
@@ -157,9 +158,6 @@ const InputOTP: FC<InputOTPProps> = ({
   };
 
   const renderInputView = () => {
-    let placeholderColor = theme.colors.text.hint;
-    const keyboardType: KeyboardType =
-      dataType === 'number' ? 'number-pad' : 'default';
     return (
       <View
         style={[
@@ -182,16 +180,16 @@ const InputOTP: FC<InputOTPProps> = ({
         <View style={styles.inputView}>
           <TextInput
             {...props}
-            accessibilityLabel={`TextInput`}
+            accessibilityLabel={accessibilityLabel}
             ref={inputRef}
             value={value}
             onChangeText={_onChangeText}
-            keyboardType={keyboardType}
+            keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
             onFocus={onFocusInput}
             onBlur={onBlurInput}
             style={{opacity: 0}}
             selectionColor={theme.colors.primary}
-            placeholderTextColor={placeholderColor}
+            placeholderTextColor={theme.colors.text.hint}
           />
         </View>
       </View>
@@ -202,8 +200,8 @@ const InputOTP: FC<InputOTPProps> = ({
     <TouchableOpacity
       activeOpacity={1}
       onPress={onFocusInput}
-      style={styles.otpWrapper}
-      accessibilityLabel={`Input/${floatingValue}`}>
+      style={[style, styles.otpWrapper]}
+      accessibilityLabel={accessibilityLabel}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
     </TouchableOpacity>

package/Input/InputSearch.tsx

@@ -37,7 +37,7 @@ const InputSearch = forwardRef(
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    let iconTintColor = iconColor;
+    const accessibilityLabel = `InputMoney/${placeholder}`;
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -60,19 +60,16 @@ const InputSearch = forwardRef(
     };
 
     const renderInputView = () => {
-      let textColor = theme.colors.text.default;
-      let placeholderColor = theme.colors.text.hint;
-
       return (
         <TextInput
           {...props}
-          accessibilityLabel={`TextInput`}
+          accessibilityLabel={accessibilityLabel}
           textAlignVertical="top"
           ref={inputRef}
           style={[
             styles.searchInput,
             {
-              color: textColor,
+              color: theme.colors.text.default,
             },
           ]}
           value={value}
@@ -81,7 +78,7 @@ const InputSearch = forwardRef(
           onBlur={_onBlur}
           placeholder={placeholder}
           selectionColor={theme.colors.primary}
-          placeholderTextColor={placeholderColor}
+          placeholderTextColor={theme.colors.text.hint}
         />
       );
     };
@@ -112,7 +109,7 @@ const InputSearch = forwardRef(
                 ]}
               />
               <Icon
-                color={iconTintColor}
+                color={iconColor}
                 source={icon}
                 style={styles.iconSearchInput}
               />
@@ -124,7 +121,7 @@ const InputSearch = forwardRef(
     return (
       <View
         style={[style, styles.searchInputContainer]}
-        accessibilityLabel={`InputSearch/${placeholder}`}>
+        accessibilityLabel={accessibilityLabel}>
         <View
           style={[
             styles.searchInputWrapper,

package/Input/InputTextArea.tsx

@@ -37,6 +37,7 @@ const InputTextArea = forwardRef(
       maxLength,
       required,
       errorSpacing,
+      style,
       ...props
     }: InputTextAreaProps,
     ref,
@@ -45,6 +46,7 @@ const InputTextArea = forwardRef(
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const accessibilityLabel = `InputTextArea/${floatingValue ?? placeholder}`;
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -106,7 +108,7 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                accessibilityLabel={`TextInput`}
+                accessibilityLabel={accessibilityLabel}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
@@ -147,8 +149,8 @@ const InputTextArea = forwardRef(
 
     return (
       <View
-        style={styles.wrapper}
-        accessibilityLabel={`InputTextArea/${floatingValue}`}>
+        style={[style, styles.wrapper]}
+        accessibilityLabel={accessibilityLabel}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/common.tsx

@@ -1,6 +1,6 @@
 import {View, ViewStyle} from 'react-native';
 import styles from './styles';
-import {Text} from '../Text';
+import {scaleSize, Text} from '../Text';
 import React, {FC, useContext} from 'react';
 import {ApplicationContext} from '../Application';
 import {Icon} from '../Icon';
@@ -16,7 +16,7 @@ type FloatingViewProps = {
   style?: ViewStyle;
 };
 
-export const DEFAULT_HEIGHT = 112;
+export const DEFAULT_HEIGHT = scaleSize(104);
 export const MAX_LENGTH = 300;
 
 export const getBorderColor = (

package/Input/index.tsx

@@ -4,7 +4,7 @@ import InputSearch from './InputSearch';
 import InputMoney from './InputMoney';
 import InputOTP from './InputOTP';
 import InputDropDown from './InputDropDown';
-import {TextInputProps} from 'react-native';
+import {TextInputProps, ViewStyle} from 'react-native';
 
 export interface InputProps extends TextInputProps {
   /**
@@ -123,73 +123,95 @@ export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
 export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
 
 export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
+  /**
+   * Optional. Defines the length of the OTP (One Time Password) input.
+   * Can be 2, 4, 6, 8, or 10.
+   */
   length?: OTPInputLength;
+
+  /**
+   * Optional. Defines the data type of the OTP input.
+   * 'string' - The OTP input will be treated as a string.
+   * 'number' - The OTP input will be treated as a number.
+   */
   dataType?: 'string' | 'number';
 }
 
 export type CaretProps = {
+  /**
+   * Optional. The index of the caret in the input field.
+   * Represents the position where the caret is located.
+   */
   index?: number;
+
+  /**
+   * Optional. The total length of the input field in which the caret is present.
+   * This dictates the maximum value of the 'index' property.
+   */
   length?: number;
 };
 
-export type InputDropDownProps = {
+export interface InputDropDownProps {
   /**
-   *  Optional. Defines the size of the Input component.
+   * Optional. Defines the size of the InputDropDown component.
+   * 'small' - A smaller, less prominent input.
+   * 'large' - A larger, more prominent input.
    */
   size?: 'small' | 'large';
 
   /**
-   *  Optional. Defines the value of InputDropDown.
+   * Optional. The current value of the InputDropDown.
    */
   value?: string;
 
   /**
-   *  Optional. Defines the placeholder of InputDropDown.
+   * Optional. Text that is displayed when there is no value set in the InputDropDown.
    */
   placeholder?: string;
 
   /**
-   *  Optional. Defines the onPress of InputDropDown.
+   * Optional. Function to be called when the InputDropDown is pressed.
    */
   onPress?: () => void;
+
   /**
-   * Optional. Represents the value for the floating title in the Input component.
+   * Optional. Represents the value for the floating title in the InputDropDown component.
    */
   floatingValue?: string;
 
   /**
-   * Optional. Represents the name or key of the floating icon to be displayed in the Input component.
+   * Optional. Represents the name or key of the floating icon to be displayed in the InputDropDown component.
    */
   floatingIcon?: string;
 
   /**
-   * Optional. Represents the error message to be displayed below the Input component when there is an error.
+   * Optional. Represents the error message to be displayed below the InputDropDown component when there is an error.
    */
   errorMessage?: string;
 
   /**
-   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   * Optional. Represents the name or key of the icon to be displayed in the InputDropDown component.
    */
   icon?: string;
 
   /**
-   * Optional. Represents the color of the icon in the Input component.
+   * Optional. Represents the color of the icon in the InputDropDown component.
    */
   iconColor?: string;
 
   /**
-   * Optional. If `true`, the user won't be able to interact with the Input component.
+   * Optional. If `true`, the user won't be able to interact with the InputDropDown component.
    * Defaults to `false` if not provided.
    */
   disabled?: boolean;
 
   /**
-   * Optional. Represents the color of the floating icon in the Input component.
+   * Optional. Represents the color of the floating icon in the InputDropDown component.
    */
   floatingIconColor?: string;
 
   /**
-   * Optional. If `true`, the Input component is marked as required,
+   * Optional. If `true`, the InputDropDown component is marked as required,
    * indicating that the user must provide a value before submitting a form.
    * Defaults to `false` if not provided.
    */
@@ -197,25 +219,27 @@ export type InputDropDownProps = {
 
   /**
    * Optional. If `true`,
-   * include spacing when Input not have error message.
+   * includes spacing when InputDropDown does not have an error message.
    * Defaults to `false` if not provided.
    */
   errorSpacing?: boolean;
 
   /**
-   *  If true, the icon of input will use be show indicator loading.
+   * If `true`, the icon of the input will show an indicator for loading.
    */
   loading?: boolean;
 
   /**
-   *  Optional. Represents the leading icon in the Input component.
+   * Optional. Represents the leading icon in the InputDropDown component.
    */
   leadingIcon?: string;
 
   /**
-   * Optional. Represents the color of the leading icon in the Input component.
+   * Optional. Represents the color of the leading icon in the InputDropDown component.
    */
   leadingIconColor?: string;
-};
+
+  style: ViewStyle | ViewStyle[];
+}
 
 export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};

package/Layout/Card.tsx

@@ -7,16 +7,23 @@ import Item from './Item';
 import {Image} from '../Image';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
-import {Colors, Spacing} from '../Consts';
+import {Colors, Shadow, Spacing} from '../Consts';
 
 export interface CardProps extends ViewProps {
   /**
    * Optional. Background image for the card.
    */
   backgroundImage?: string;
+
+  useShadow?: boolean;
 }
 
-const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
+const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  backgroundImage,
+  useShadow = false,
+}) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
@@ -127,6 +134,7 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
     return element;
   };
 
+  const {theme} = useContext(ApplicationContext);
   return (
     <GridContext.Provider value={gridContext}>
       <View
@@ -137,12 +145,14 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
           {
             width: widthSection,
             marginHorizontal: gridContext.margin,
+            backgroundColor: theme.colors.background.surface,
           },
+          useShadow && Shadow.Light,
         ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}
-            style={[style, styles.imageBackground]}
+            style={styles.imageBackground}
           />
         )}
         {renderView(validateChildren(children, [Item]))}