@momo-kits/foundation 0.92.1-rc.1 → 0.92.1-rc.11

package/Application/BottomTab/BottomTabBar.tsx

@@ -14,7 +14,6 @@ import {
 import React, {useCallback} from 'react';
 import {
   Animated,
-  Dimensions,
   LayoutChangeEvent,
   Platform,
   StyleProp,
@@ -28,10 +27,7 @@ import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Radius} from '../../Consts';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
-import {CurvedViewComponent} from './CurvedView';
-import {getPathUp} from './path';
 import {FloatingButtonProps} from '../types';
-const {width} = Dimensions.get('window');
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
@@ -165,10 +161,10 @@ export default function BottomTabBar({
     tabStyle,
   });
   const focusedRoute = state.routes[state.index] as any;
-  const focusedDescriptor = descriptors[focusedRoute.key] as any;
-  const focusedOptions = focusedDescriptor.options;
+  const focusedDescriptor = descriptors[focusedRoute?.key] as any;
+  const focusedOptions = focusedDescriptor?.options;
   const shouldShowTabBar =
-    focusedOptions.tabBarVisible !== false && !keyboardHidesTabBar;
+    focusedOptions?.tabBarVisible !== false && !keyboardHidesTabBar;
   const [visible] = React.useState(
     () => new Animated.Value(shouldShowTabBar ? 1 : 0),
   );
@@ -176,13 +172,13 @@ export default function BottomTabBar({
   const indicatorAnimated = React.useRef(new Animated.Value(0)).current;
 
   const visibilityAnimationConfigRef = React.useRef(
-    focusedOptions.tabBarVisibilityAnimationConfig,
+    focusedOptions?.tabBarVisibilityAnimationConfig,
   );
   const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
   const [isTabBarHidden, setIsTabBarHidden] = React.useState(!shouldShowTabBar);
   React.useEffect(() => {
     visibilityAnimationConfigRef.current =
-      focusedOptions.tabBarVisibilityAnimationConfig;
+      focusedOptions?.tabBarVisibilityAnimationConfig;
   });
 
   const handleLayout = (e: LayoutChangeEvent) => {
@@ -250,22 +246,12 @@ export default function BottomTabBar({
   const leftArr = routes.slice(0, 2);
   const rightArr = routes.slice(2, routes.length);
   const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
-  const tabBarHeight = getTabBarHeight({
-    state,
-    insets,
-    dimensions,
-    layout,
-    adaptive,
-    labelPosition,
-    tabStyle,
-    style,
-  });
 
   const renderTabItem = useCallback(
     (data: any[]) => {
       return data?.map((route, index) => {
         const focused = route.params.name === focusedTab;
-        const {options} = descriptors[route.key] as any;
+        const {options} = descriptors[route?.key] as any;
         const onPress = () => {
           const event = navigation.emit({
             type: 'tabPress',
@@ -422,7 +408,6 @@ export default function BottomTabBar({
           position: isTabBarHidden ? 'absolute' : (null as any),
         },
         {
-          // height: tabBarHeight,
           paddingBottom: paddingBottom - 0,
           paddingHorizontal: Math.max(insets.left, insets.right),
         },
@@ -431,15 +416,7 @@ export default function BottomTabBar({
       pointerEvents={isTabBarHidden ? 'none' : 'auto'}
       onLayout={handleLayout}>
       <View style={styles.content}>
-        {isFloating && (
-          <CurvedViewComponent
-            width={width}
-            height={61 + Math.min(insets.bottom, 21)}
-            style={styles.curved}
-            bgColor="white"
-            path={getPathUp(width, tabBarHeight, 50, false, 'CENTER')}
-          />
-        )}
+        {isFloating && floatingButton?.container}
         <Animated.View
           style={{
             width: itemWidth,
@@ -454,25 +431,18 @@ export default function BottomTabBar({
             ]}
           />
         </Animated.View>
-
-        {renderTabItem(leftArr)}
-        {renderCenterComponent()}
-        {renderTabItem(rightArr)}
+        {isFloating ? renderTabItem(leftArr) : renderTabItem(routes)}
+        {isFloating && renderCenterComponent()}
+        {isFloating && renderTabItem(rightArr)}
       </View>
     </Animated.View>
   );
 }
 
 const styles = StyleSheet.create({
-  curved: {
-    position: 'absolute',
-    bottom: 0,
-    // backgroundColor: 'red',
-  },
   content: {
     flex: 1,
     flexDirection: 'row',
-    // backgroundColor: 'red',
   },
   tabBar: {
     left: 0,
@@ -486,7 +456,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     left: 0,
     right: 0,
-    bottom: -6,
+    bottom: Platform.OS === 'ios' ? -6 : 0,
   },
   floatingContent: {
     alignItems: 'center',

package/Application/BottomTab/index.tsx

@@ -4,13 +4,13 @@ import {createStackNavigator} from '@react-navigation/stack';
 import React, {useContext, useEffect} from 'react';
 import {Platform} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import BottomTabBar from './BottomTabBar';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
 import {ApplicationContext} from '../index';
-import {getAccessibilityID, getStackOptions} from '../utils';
 import StackScreen from '../StackScreen';
 import {BottomTabProps, NavigationScreenProps} from '../types';
+import {getAccessibilityID, getStackOptions} from '../utils';
+import BottomTabBar from './BottomTabBar';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();

package/Application/types.ts

@@ -214,6 +214,7 @@ export type BottomTabProps = {
 };
 
 export type FloatingButtonProps = {
+  container?: React.ReactNode;
   icon: string | React.ReactNode;
   label: string;
   onPress: () => void;

package/Application/utils.tsx

@@ -158,6 +158,13 @@ const getAccessibilityID = (
   }
 };
 
+const cleanNameForTracking = (word = ''): string => {
+  return word
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f |\s]/g, '')
+    .toLowerCase();
+};
+
 const formatComponentName = (word = '') => {
   const accentsMap = {
     a: 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
@@ -201,4 +208,5 @@ export {
   formatComponentName,
   formatNameLength,
   getAccessibilityID,
+  cleanNameForTracking,
 };

package/Button/index.tsx

@@ -14,7 +14,11 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatComponentName,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -323,7 +327,9 @@ const Button: FC<ButtonProps> = ({
       <TouchableOpacity
         {...rest}
         {...getAccessibilityID(
-          `${appId}/${code}/${screenInfo.screenName}/btn_${title}`,
+          `${appId}/${code}/${screenInfo.screenName}/btn_${cleanNameForTracking(
+            title,
+          )}`,
           accessibilityLabel,
         )}
         activeOpacity={activeOpacity}

package/CheckBox/index.tsx

@@ -5,7 +5,11 @@ import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {formatNameLength, getAccessibilityID} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatNameLength,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -22,7 +26,7 @@ const CheckBox: FC<CheckBoxProps> = ({
   params,
   componentId,
 }) => {
-  const {appId} = useContext<any>(MiniAppContext);
+  const {appId, code} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
   const screenInfo = useContext<any>(ScreenContext);
   const haveValue = value || indeterminate;
@@ -45,7 +49,9 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   const accessibilityID = getAccessibilityID(
-    `${appId}/${screenInfo.screenName}/cbx_${label}_${value}`,
+    `${appId}/${code}/${screenInfo.screenName}/cbx_${cleanNameForTracking(
+      label,
+    )}_${indeterminate ? 'na' : value}`,
   );
 
   return (

package/Input/Input.tsx

@@ -14,7 +14,11 @@ import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
-import {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {
+  formatComponentName,
+  getAccessibilityID,
+  cleanNameForTracking,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -120,14 +124,16 @@ const Input = forwardRef(
       let iconTintColor = iconColor;
       const accessibilityID = disabled
         ? getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_${
-              floatingValue ?? placeholder
-            }_disabled`,
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(
+              floatingValue ?? placeholder,
+            )}_disabled`,
           )
         : getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_${
-              floatingValue ?? placeholder
-            }`,
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
           );
 
       if (disabled) {

package/Input/InputDropDown.tsx

@@ -7,7 +7,11 @@ import {InputDropDownProps} from './index';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {Styles} from '../Consts';
-import {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatComponentName,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -57,14 +61,16 @@ const InputDropDown = ({
     let iconTintColor = iconColor;
     const accessibilityID = disabled
       ? getAccessibilityID(
-          `${appId}/${code}/${screenInfo.screenName}/input_${
-            floatingValue ?? placeholder
-          }_disabled`,
+          `${appId}/${code}/${
+            screenInfo.screenName
+          }/input_${cleanNameForTracking(
+            floatingValue ?? placeholder,
+          )}_disabled`,
         )
       : getAccessibilityID(
-          `${appId}/${code}/${screenInfo.screenName}/input_${
-            floatingValue ?? placeholder
-          }`,
+          `${appId}/${code}/${
+            screenInfo.screenName
+          }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
         );
 
     if (disabled) {

package/Input/InputMoney.tsx

@@ -18,7 +18,11 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatComponentName,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -101,10 +105,14 @@ const InputMoney = forwardRef(
       let iconTintColor = iconColor;
       const accessibilityID = disabled
         ? getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_${floatingValue}_disabled`,
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(floatingValue)}_disabled`,
           )
         : getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_${floatingValue}`,
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(floatingValue)}`,
           );
 
       if (disabled) {

package/Input/InputOTP.tsx

@@ -21,7 +21,11 @@ import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatComponentName,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -192,7 +196,9 @@ const InputOTP = forwardRef(
     };
 
     const accessibilityID = getAccessibilityID(
-      `${appId}/${code}/${screenInfo.screenName}/input_${floatingValue}`,
+      `${appId}/${code}/${screenInfo.screenName}/input_${cleanNameForTracking(
+        floatingValue,
+      )}`,
     );
 
     const renderInputView = () => {

package/Input/InputSearch.tsx

@@ -34,9 +34,9 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
-      hasColorBG = true,
       params,
       componentId,
+      hasColorBG = false,
       ...props
     }: InputSearchProps,
     ref,

package/Input/InputTextArea.tsx

@@ -18,7 +18,7 @@ import {
 import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
 import {ApplicationContext} from '../Application';
-import {getAccessibilityID} from '../Application/utils';
+import {cleanNameForTracking, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -98,14 +98,16 @@ const InputTextArea = forwardRef(
 
       const accessibilityID = disabled
         ? getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_${
-              floatingValue ?? placeholder
-            }_disabled`,
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(
+              floatingValue ?? placeholder,
+            )}_disabled`,
           )
         : getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_${
-              floatingValue ?? placeholder
-            }`,
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
           );
 
       return (

package/Radio/index.tsx

@@ -6,7 +6,11 @@ import {Text} from '../Text';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatNameLength, getAccessibilityID} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatNameLength,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -48,7 +52,9 @@ const Radio: FC<RadioProps> = ({
   }
 
   const accessibilityID = getAccessibilityID?.(
-    `${appId}/${code}/${screenInfo.screenName}/rdo_${label}_${value}`,
+    `${appId}/${code}/${screenInfo.screenName}/rdo_${cleanNameForTracking(
+      label,
+    )}_${value}`,
   );
 
   return (

package/Text/styles.ts

@@ -5,7 +5,7 @@ export default {
   header_s_semibold: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
   header_xs_semibold: {fontSize: 12, lineHeight: 18, fontWeight: '600'},
   body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
-  body_regularstrikethrought: {
+  body_default_regularstrikethrought: {
     fontSize: 14,
     lineHeight: 20,
     fontWeight: '400',

package/Text/types.ts

@@ -20,7 +20,7 @@ export type Typography =
   | 'header_s_semibold'
   | 'header_xs_semibold'
   | 'body_default_regular'
-  | 'body_regularstrikethrought'
+  | 'body_default_regularstrikethrought'
   | 'description_default_regular'
   | 'description_default_regularstrikethrought'
   | 'description_xs_regular'

package/Title/index.tsx

@@ -4,7 +4,6 @@ import styles from './styles';
 import {Icon} from '../Icon';
 import {scaleSize, Text} from '../Text';
 import {ApplicationContext} from '../Application';
-import {Colors, Spacing} from '../Consts';
 import {Badge} from '../Badge';
 import {Typography} from '../Text/types';
 import {TitleProps} from './types';
@@ -25,6 +24,7 @@ const Title: FC<TitleProps> = ({
   buttonSize = 'small',
 }) => {
   const {theme} = useContext(ApplicationContext);
+
   const styleSheet: {
     [key: string]: any;
   } = styles;
@@ -33,10 +33,6 @@ const Title: FC<TitleProps> = ({
   const numberOfLines = showLeftAction || !!badgeLabel ? 1 : 2;
   const buttonTypo: Typography =
     buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
-  const widthStyle =
-    !showLeftAction && !showRightAction && !badgeLabel
-      ? {width: '100%'}
-      : {width: '75%'};
 
   const renderIcon = () => {
     if (!icon) return null;
@@ -62,23 +58,16 @@ const Title: FC<TitleProps> = ({
 
   const renderContent = () => {
     return (
-      <View style={{flex: 1}}>
-        <View style={[styles.iconLeftView, widthStyle]}>
+      <View style={styles.contentView}>
+        <View style={[styles.iconLeftView]}>
           <RNText
             numberOfLines={numberOfLines}
-            style={[
-              styleSheet[typography],
-              {
-                fontWeight: 'bold',
-                marginBottom: Spacing.XS,
-              },
-            ]}>
+            style={[styleSheet[typography], styles.title]}>
             {title}
           </RNText>
+
           <View style={{alignItems: 'center'}}>
-            {badgeLabel && (
-              <Badge style={{marginLeft: Spacing.XS}} label={badgeLabel} />
-            )}
+            {badgeLabel && <Badge style={styles.badge} label={badgeLabel} />}
           </View>
           {renderActionLeft()}
         </View>
@@ -95,7 +84,7 @@ const Title: FC<TitleProps> = ({
     return (
       <View style={styles.iconLeftView}>
         {showLeftAction && !showRightAction && (
-          <View style={[styles.iconLeft, {backgroundColor: Colors.black_06}]}>
+          <View style={styles.iconLeft}>
             <Icon
               source={'arrow_chevron_right_small'}
               size={scaleSize(18)}

package/Title/styles.ts

@@ -1,6 +1,6 @@
 import {StyleSheet} from 'react-native';
 import {scaleSize} from '../Text';
-import {Radius, Spacing} from '../Consts';
+import {Colors, Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   card_small: {
@@ -39,10 +39,6 @@ export default StyleSheet.create({
   wrapper: {
     flexDirection: 'row',
   },
-  textContent: {
-    marginRight: Spacing.S,
-    flex: 1,
-  },
   margin: {
     marginTop: Spacing.S,
   },
@@ -64,9 +60,19 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     marginHorizontal: Spacing.XS,
+    backgroundColor: Colors.black_06,
   },
   iconLeftView: {
     flexDirection: 'row',
     alignItems: 'center',
   },
+  contentView: {marginRight: Spacing.S, flex: 1},
+  title: {
+    fontWeight: 'bold',
+    marginBottom: Spacing.XS,
+    flex: 1,
+  },
+  badge: {
+    marginLeft: Spacing.XS,
+  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.1-rc.1",
+    "version": "0.92.1-rc.11",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -21,7 +21,6 @@
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
         "lottie-react-native": "3.3.2",
-        "d3-shape": "1.3.7",
         "@react-navigation/stack": "git+https://gitlab.com/momo-platform/react-navigation-stack.git#main"
     },
     "peerDependencies": {

package/Application/BottomTab/CurvedView.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import {StyleProp, View, ViewStyle} from 'react-native';
-import {Path, Svg} from 'react-native-svg';
-
-interface ICurvedView {
-  style?: StyleProp<ViewStyle>;
-  width: number;
-  height: number;
-  bgColor: string;
-  path: any;
-}
-
-export type CurvedView = React.FC<ICurvedView>;
-
-const CurvedContainer: CurvedView = props => {
-  const {style, width, height, bgColor, path} = props;
-
-  return (
-    <View style={style} pointerEvents="none">
-      <Svg width={width} height={height}>
-        <Path fill={bgColor} {...{d: path}} />
-      </Svg>
-    </View>
-  );
-};
-
-export const CurvedViewComponent: CurvedView = React.memo(CurvedContainer);

package/Application/BottomTab/path.ts

@@ -1,202 +0,0 @@
-import * as shape from 'd3-shape';
-import {Platform} from 'react-native';
-
-export const TABBAR_ITEM_TOP = Platform.OS === 'ios' ? 8 : 4;
-export const CIRCLE_SIZE = 50;
-export const TABBAR_ITEM_ICON_SIZE = 28;
-export const CIRCLE_POSITION_TOP =
-  CIRCLE_SIZE - TABBAR_ITEM_ICON_SIZE - TABBAR_ITEM_TOP;
-export const CIRCLE_OVER_SIZE = 10;
-export const CIRCLE_OVER_TOP = CIRCLE_POSITION_TOP + CIRCLE_OVER_SIZE;
-
-export const scale = (number: number) => {
-  return number;
-};
-
-const line = (width: number, height: number) => {
-  const path = (shape as any)
-    .line()
-    .x((d: {x: any}) => d.x)
-    .y((d: {y: any}) => d.y)([
-    {x: width / 2, y: scale(CIRCLE_OVER_TOP)},
-    {x: 0, y: scale(CIRCLE_OVER_TOP)},
-    {x: 0, y: height},
-    {x: width, y: height},
-    {x: width, y: scale(CIRCLE_OVER_TOP)},
-    {x: width / 2, y: scale(CIRCLE_OVER_TOP)},
-  ]);
-  //M195,30L0,30L0,106L390,106L390,30L195,30
-  // MaxApi.copyToClipboard(path, 'copied');
-  return path;
-};
-
-//** Path Line Border Left Right Up */
-const lineBorder = (width: number, height: number) => {
-  const border = (shape as any)
-    .line()
-    .x((d: {x: any}) => d.x)
-    .y((d: {y: any}) => d.y)
-    .curve(shape.curveBasis)([
-    // right
-    {x: width / 2, y: scale(30)},
-    {x: width - scale(20), y: scale(30)},
-    {x: width - scale(10), y: scale(32)},
-    {x: width - scale(2), y: scale(40)},
-    {x: width, y: scale(50)},
-    {x: width, y: height},
-    {x: width, y: height},
-    // bottom
-    {x: width, y: height},
-    {x: 0, y: height},
-    // left
-    {x: 0, y: height},
-    {x: 0, y: height},
-    {x: 0, y: scale(50)},
-    {x: 0 + scale(2), y: scale(40)},
-    {x: 0 + scale(10), y: scale(32)},
-    {x: 0 + scale(20), y: scale(30)},
-    {x: width / 2, y: scale(30)},
-  ]);
-
-  return border;
-};
-
-//** Path Line Border Left Right Down */
-const lineBorderLeft = (width: number, height: number) => {
-  const border = (shape as any)
-    .line()
-    .x((d: {x: any}) => d.x)
-    .y((d: {y: any}) => d.y)
-    .curve(shape.curveBasis)([
-    // right
-    {x: width, y: scale(30)},
-    {x: width, y: height},
-    {x: width, y: height},
-    // bottom
-    {x: width, y: height},
-    {x: 0, y: height},
-    // left
-    {x: 0, y: height},
-    {x: 0, y: height},
-    {x: 0, y: scale(50)},
-    {x: 0 + scale(2), y: scale(40)},
-    {x: 0 + scale(10), y: scale(32)},
-    {x: 0 + scale(20), y: scale(30)},
-    {x: width / 2, y: scale(30)},
-  ]);
-
-  return border;
-};
-
-//** Path Line Border Left Right Down */
-const lineBorderRight = (width: number, height: number) => {
-  const border = (shape as any)
-    .line()
-    .x((d: {x: any}) => d.x)
-    .y((d: {y: any}) => d.y)
-    .curve(shape.curveBasis)([
-    // right
-    {x: width / 2, y: scale(30)},
-    {x: width - scale(20), y: scale(30)},
-    {x: width - scale(10), y: scale(32)},
-    {x: width - scale(2), y: scale(40)},
-    {x: width, y: scale(50)},
-    {x: width, y: height},
-    {x: width, y: height},
-    // bottom
-    {x: width, y: height},
-    {x: 0, y: height},
-    // left
-    {x: 0, y: height},
-    {x: 0, y: height},
-    {x: 0, y: scale(30)},
-  ]);
-
-  return border;
-};
-
-//** Path Curved Up */
-const lineCurved = (position: number, circle: number) => {
-  const circleR = circle / 2;
-  const circleRightPos = circle + position;
-  const circleOverR = circle / 2 + CIRCLE_OVER_SIZE;
-  const centerX = (position + circleRightPos) / 2; //195
-  const centerY = CIRCLE_OVER_SIZE + circleR; //33
-  // {"circle":50,"position":170,"centerX":195,"circleWidth":220}
-  // WIDTH_SCREEN: 390
-
-  const curved = (shape as any)
-    .line()
-    .x((d: {x: any}) => d.x)
-    .y((d: {y: any}) => d.y)
-    .curve(shape.curveBundle.beta(1))([
-    {x: centerX - circleOverR - scale(50), y: CIRCLE_OVER_TOP},
-    {x: centerX - circleOverR, y: CIRCLE_OVER_TOP}, //y 20
-    {
-      x: centerX + circleOverR * Math.cos(-Math.PI / 2 - Math.PI / 4),
-      y: centerY + circleOverR * Math.sin(-Math.PI / 2 - Math.PI / 4),
-    },
-
-    {x: centerX, y: 0},
-
-    {
-      x: centerX + circleOverR * Math.cos(-Math.PI / 2 + Math.PI / 4),
-      y: centerY + circleOverR * Math.sin(-Math.PI / 2 + Math.PI / 4),
-    },
-    {x: centerX + circleOverR, y: CIRCLE_OVER_TOP}, //y 20
-    {x: centerX + circleOverR + scale(50), y: CIRCLE_OVER_TOP},
-  ]);
-
-  return curved;
-};
-
-export const getPathUp = (
-  width: number,
-  iHeight: number,
-  centerWidth = 50,
-  borderTopLeftRight = false,
-  position: 'CENTER' | 'LEFT' | 'RIGHT',
-) => {
-  const height = scale(iHeight);
-  const circleWidth = scale(centerWidth);
-
-  if (borderTopLeftRight && position === 'LEFT') {
-    return `${lineBorderRight(width, height)} ${lineCurved(
-      circleWidth / 1.7,
-      circleWidth,
-    )}`;
-  }
-
-  if (borderTopLeftRight && position === 'RIGHT') {
-    return `${lineBorderLeft(width, height)} ${lineCurved(
-      width - circleWidth * 1.6,
-      circleWidth,
-    )}`;
-  }
-
-  if (borderTopLeftRight && position === 'CENTER') {
-    return `${lineBorder(width, height)} ${lineCurved(
-      width / 2 - circleWidth / 2,
-      circleWidth,
-    )}`;
-  }
-
-  if (position === 'LEFT') {
-    return `${line(width, height)} ${lineCurved(
-      circleWidth / 1.7,
-      circleWidth,
-    )}`;
-  }
-
-  if (position === 'RIGHT') {
-    return `${line(width, height)} ${lineCurved(
-      width - circleWidth * 1.6,
-      circleWidth,
-    )}`;
-  }
-
-  return `${line(width, height)} ${lineCurved(
-    width / 2 - circleWidth / 2,
-    circleWidth,
-  )}`;
-};