@momo-kits/foundation 0.92.2 → 0.92.3-beta.10

package/Input/InputOTP.tsx

@@ -19,18 +19,8 @@ import {CaretProps, InputOTPProps} from './index';
 import {scaleSize, Text} from '../Text';
 import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Spacing} from '../Consts';
-import {
-  cleanNameForTracking,
-  formatComponentName,
-  getAccessibilityID,
-} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
@@ -80,7 +70,7 @@ const InputOTP = forwardRef(
       length,
       errorMessage,
       errorSpacing,
-      floatingValue,
+      floatingValue = 'Label',
       floatingIconColor,
       floatingIcon,
       placeholder,
@@ -90,19 +80,16 @@ const InputOTP = forwardRef(
       dataType = 'number',
       params,
       style,
-      componentId,
+      accessibilityLabel,
       ...props
     }: InputOTPProps,
     ref,
   ) => {
     const MAX_LENGTH = 10;
-    const {appId, code} = useContext<any>(MiniAppContext);
-
     const [value, setValue] = useState('');
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
-    const screenInfo = useContext<any>(ScreenContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -195,12 +182,6 @@ const InputOTP = forwardRef(
       );
     };
 
-    const accessibilityID = getAccessibilityID(
-      `${appId}/${code}/${screenInfo.screenName}/input_${cleanNameForTracking(
-        floatingValue,
-      )}`,
-    );
-
     const renderInputView = () => {
       return (
         <View
@@ -215,7 +196,9 @@ const InputOTP = forwardRef(
                 styles.otpFloatingView,
                 {backgroundColor: theme.colors.background.surface},
               ]}>
-              <Text typography={'description_default_regular'}>
+              <Text
+                typography={'description_default_regular'}
+                color={theme.colors.text.hint}>
                 {floatingValue}
               </Text>
             </View>
@@ -226,7 +209,7 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              {...accessibilityID}
+              accessibilityLabel={accessibilityLabel}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
@@ -243,14 +226,13 @@ const InputOTP = forwardRef(
     };
 
     return (
-      <ScreenContext.Provider
+      <ComponentContext.Provider
         value={{
-          ...screenInfo,
           componentName: 'InputOTP',
           params,
-          componentLabel: formatComponentName(floatingValue || ''),
+          componentLabel: floatingValue,
           state: 'enabled',
-          componentId,
+          componentId: accessibilityLabel,
         }}>
         <TouchableOpacity
           activeOpacity={1}
@@ -259,7 +241,7 @@ const InputOTP = forwardRef(
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </TouchableOpacity>
-      </ScreenContext.Provider>
+      </ComponentContext.Provider>
     );
   },
 );

package/Input/InputSearch.tsx

@@ -7,17 +7,11 @@ import {
   View,
 } from 'react-native';
 import {InputSearchProps} from './index';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
-import {getAccessibilityID} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputSearch = forwardRef(
   (
@@ -35,18 +29,16 @@ const InputSearch = forwardRef(
       defaultValue,
       onPressButtonText,
       params,
-      componentId,
       hasColorBG = false,
+      accessibilityLabel,
       ...props
     }: InputSearchProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const screenInfo = useContext<any>(ScreenContext);
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -72,9 +64,7 @@ const InputSearch = forwardRef(
       return (
         <TextInput
           {...props}
-          {...getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_search`,
-          )}
+          accessibilityLabel={accessibilityLabel}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -145,13 +135,12 @@ const InputSearch = forwardRef(
       : theme.colors.background.surface;
 
     return (
-      <ScreenContext.Provider
+      <ComponentContext.Provider
         value={{
-          ...screenInfo,
           componentName: 'InputSearch',
           params,
           state: inputState,
-          componentId,
+          componentId: accessibilityLabel,
         }}>
         <View style={[style, styles.searchInputContainer]}>
           <View
@@ -179,7 +168,7 @@ const InputSearch = forwardRef(
             </TouchableOpacity>
           )}
         </View>
-      </ScreenContext.Provider>
+      </ComponentContext.Provider>
     );
   },
 );

package/Input/InputTextArea.tsx

@@ -18,12 +18,6 @@ import {
 import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
 import {ApplicationContext} from '../Application';
-import {cleanNameForTracking, getAccessibilityID} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputTextArea = forwardRef(
   (
@@ -44,13 +38,12 @@ const InputTextArea = forwardRef(
       required,
       errorSpacing,
       style,
+      accessibilityLabel,
       ...props
     }: InputTextAreaProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const screenInfo = useContext<any>(ScreenContext);
-    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -96,20 +89,6 @@ const InputTextArea = forwardRef(
         placeholderColor = disabledColor;
       }
 
-      const accessibilityID = disabled
-        ? getAccessibilityID(
-            `${appId}/${code}/${
-              screenInfo.screenName
-            }/input_${cleanNameForTracking(
-              floatingValue ?? placeholder,
-            )}_disabled`,
-          )
-        : getAccessibilityID(
-            `${appId}/${code}/${
-              screenInfo.screenName
-            }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
-          );
-
       return (
         <View
           style={[
@@ -131,7 +110,6 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                {...accessibilityID}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"

package/Input/index.tsx

@@ -82,7 +82,6 @@ export interface InputProps extends TextInputProps {
   onPressIcon?: () => void;
 
   params?: any;
-  componentId?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -130,8 +129,6 @@ export interface InputSearchProps extends TextInputProps {
   hasColorBG?: boolean;
 
   params?: any;
-
-  componentId?: string;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
@@ -169,7 +166,7 @@ export type CaretProps = {
   length?: number;
 };
 
-export interface InputDropDownProps {
+export interface InputDropDownProps extends InputProps {
   /**
    * Optional. Defines the size of the InputDropDown component.
    * 'small' - A smaller, less prominent input.
@@ -264,11 +261,6 @@ export interface InputDropDownProps {
     [key: string]: any;
   };
 
-  /**
-   * component id for element tracking.
-   */
-  componentId?: string;
-
   /**
    * Optional. Represents the style of the InputDropDown component.
    */

package/Input/styles.ts

@@ -53,7 +53,7 @@ export default StyleSheet.create({
     marginRight: Spacing.M,
   },
   icon: {
-    marginLeft: Spacing.S
+    marginLeft: Spacing.S,
   },
   iconWrapper: {
     width: 24,
@@ -145,7 +145,7 @@ export default StyleSheet.create({
   },
   otpFloatingView: {
     position: 'absolute',
-    top: -Spacing.S,
+    top: scaleSize(-Spacing.M + 2),
     alignSelf: 'center',
     paddingHorizontal: Spacing.S,
   },

package/Layout/Screen.tsx

@@ -18,7 +18,7 @@ import React, {
   useEffect,
   useRef,
 } from 'react';
-import {Colors, Spacing, Styles} from '../Consts';
+import {Colors, Shadow, Spacing, Styles} from '../Consts';
 import {Card, Section, validateChildren} from './index';
 import {
   ApplicationContext,
@@ -337,8 +337,9 @@ const Screen = forwardRef(
           {Footer && (
             <View
               style={[
-                styles.footerContainer,
+                Shadow.Dark,
                 {
+                  paddingTop: Spacing.S,
                   paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },

package/Layout/styles.ts

@@ -80,18 +80,4 @@ export default StyleSheet.create({
     paddingHorizontal: undefined,
     paddingVertical: undefined,
   },
-  footerContainer: {
-    paddingTop: Spacing.S,
-    ...Platform.select({
-      android: {
-        elevation: 4,
-      },
-      ios: {
-        shadowColor: Colors.black_20,
-        shadowOffset: {width: 0, height: -2},
-        shadowOpacity: 0.1,
-        shadowRadius: 3,
-      },
-    }),
-  },
 });

package/Popup/PopupNotify.tsx

@@ -4,14 +4,9 @@ import {PopupNotifyProps} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
-import {getAccessibilityID} from '../Application/utils';
-
-const {
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   id,
@@ -47,7 +42,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      ...context,
+      appId: context.appId,
+      code: context.code,
       screen_name,
       component_type: 'popup',
       component_name: id,
@@ -166,7 +162,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const buildCloseIcon = () => {
     return (
       <TouchableOpacity
-        {...getAccessibilityID?.('ic_popup_close')}
+        accessibilityLabel={'ic_popup_close'}
         style={styles.iconCloseContainer}
         onPress={() => {
           closeAction.current = 'icon_close';
@@ -192,7 +188,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   return (
     <View
-      {...getAccessibilityID?.(`pu_${context.code}_notify`)}
+      accessibilityLabel={'PopupNotify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -1,15 +1,10 @@
 import React, {useContext, useEffect, useRef} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
-import {getAccessibilityID} from '../Application/utils';
-
-const {
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   id,
@@ -31,7 +26,8 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      ...context,
+      appId: context.appId,
+      code: context.code,
       screen_name,
       component_type: 'popup',
       component_name: id,
@@ -54,10 +50,9 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    */
   const buildCloseIcon = () => {
     return (
-      <View
-        {...getAccessibilityID?.('ic_popup_close')}
-        style={styles.iconCloseContainer}>
+      <View style={styles.iconCloseContainer}>
         <TouchableOpacity
+          accessibilityLabel={'ic_popup_close'}
           onPress={() => {
             closeAction.current = 'icon_close';
             navigator?.pop();
@@ -84,7 +79,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View {...getAccessibilityID?.(`pu_${context.code}_promotion`)}>
+    <View accessibilityLabel={'PopupPromotion'}>
       <Image
         source={{
           uri: image,
@@ -120,8 +115,4 @@ const styles = StyleSheet.create({
   },
 });
 
-PopupPromotion.defaultProps = {
-  image: 'https://google.com',
-};
-
 export default PopupPromotion;

package/Radio/index.tsx

@@ -4,18 +4,9 @@ import {TouchableOpacity, View} from 'react-native';
 import {RadioProps} from './types';
 import {Text} from '../Text';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Spacing} from '../Consts';
-import {
-  cleanNameForTracking,
-  formatNameLength,
-  getAccessibilityID,
-} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
+import {formatNameLength} from '../Application/utils';
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -25,11 +16,9 @@ const Radio: FC<RadioProps> = ({
   label,
   style,
   params,
-  componentId,
+  accessibilityLabel,
 }) => {
-  const {appId, code} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
   let disabledStyle = {};
   let checkBoxStyle = {
@@ -51,26 +40,19 @@ const Radio: FC<RadioProps> = ({
     };
   }
 
-  const accessibilityID = getAccessibilityID?.(
-    `${appId}/${code}/${screenInfo.screenName}/rdo_${cleanNameForTracking(
-      label,
-    )}_${selected}`,
-  );
-
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
-        componentName: 'Button',
+        componentName: 'Radio',
         params,
         state: disabled ? 'disabled' : 'enabled',
-        componentId,
+        componentId: accessibilityLabel,
         componentLabel: formatNameLength(label || ''),
-        componentValue: value,
+        componentValue: selected,
         action: 'click',
       }}>
       <TouchableOpacity
-        {...accessibilityID}
+        accessibilityLabel={accessibilityLabel}
         onPress={onChange}
         disabled={disabled}
         style={[
@@ -90,7 +72,7 @@ const Radio: FC<RadioProps> = ({
         />
         {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 

package/Radio/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type RadioProps = {
+export interface RadioProps extends TouchableOpacityProps {
   /**
    * `value`: Represents the value associated with the Radio component.
    * It is used to determine whether the Radio component is selected or not in comparison with the `groupValue`.
@@ -36,8 +36,5 @@ export type RadioProps = {
    */
   style?: ViewStyle;
 
-
-  params?: any
-
-  componentId?: string
-};
+  params?: any;
+}

package/Switch/index.tsx

@@ -1,20 +1,18 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
-import {getAccessibilityID} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
-const Switch: FC<SwitchProps> = props => {
-  const {appId, code} = useContext<any>(MiniAppContext);
-  const {value, onChange, disabled, style, params, componentId} = props;
-  const screenInfo = useContext<any>(ScreenContext);
+import {ComponentContext} from '../Application';
 
+const Switch: FC<SwitchProps> = ({
+  value = false,
+  onChange,
+  disabled = false,
+  style,
+  params,
+  accessibilityLabel,
+}) => {
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
@@ -23,24 +21,19 @@ const Switch: FC<SwitchProps> = props => {
     backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
 
-  const accessibilityID = getAccessibilityID?.(
-    `${appId}/${code}/${screenInfo.screenName}/swt_${value}`,
-  );
-
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
-        componentName: 'Button',
+        componentName: 'Switch',
         params,
         state: disabled ? 'disabled' : 'enabled',
-        componentId,
+        componentId: accessibilityLabel,
         componentValue: value,
         action: 'click',
       }}>
       <TouchableOpacity
-        {...accessibilityID}
         disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
         onPress={() => onChange?.(!value)}
         style={[
           style,
@@ -51,12 +44,8 @@ const Switch: FC<SwitchProps> = props => {
           <View style={[styles.circleSmall, {backgroundColor}]} />
         </View>
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 
-Switch.defaultProps = {
-  value: false,
-  disabled: false,
-};
 export {Switch};

package/Switch/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type SwitchProps = {
+export interface SwitchProps extends TouchableOpacityProps {
   /**
    * `value`: Represents whether the Switch component is currently in the 'on' (`true`) or 'off' (`false`) state.
    */
@@ -24,7 +24,5 @@ export type SwitchProps = {
    */
   style?: ViewStyle;
 
-  params?: any
-
-  componentId?: string
-};
+  params?: any;
+}