@momo-kits/foundation 0.81.51-beta.0 → 0.81.52

package/publish.sh

@@ -1,18 +1,23 @@
 #!/bin/bash
+rm -rf dist
+mkdir dist
 
-if [ "$1" == "stable" ]; then
-  npm version $(npm view @momo-kits/foundation@stable version)
-  npm version patch
-  npm publish --tag stable --access=public
-elif [ "$1" == "latest" ]; then
-  npm version $(npm view @momo-kits/foundation@latest version)
-  npm version prerelease --preid=rc
-  npm publish --tag latest --access=public
-else
-  npm version $(npm view @momo-kits/foundation@beta version)
-  npm version prerelease --preid=beta
-  npm publish --tag beta --access=public
-fi
-
-PACKAGE_NAME=$(npm pkg get name)
-NEW_PACKAGE_VERSION=$(npm pkg get version)
+cp . ./dist
+
+
+# GET VERSION from mck_package.json
+VERSIONSTRING=( v$(jq .version package.json) )
+VERSION=(${VERSIONSTRING//[\"]/})
+echo VERSION: $VERSION
+
+rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
+
+cd dist
+npm publish --tag beta --access=public
+
+#clear dist and package json
+cd ..
+rm -rf dist
+
+
+#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/core new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/foundation"}'

package/tsconfig.json

@@ -19,6 +19,6 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "esnext"
+    "target": "esnext",
   }
 }

package/Application/BottomSheet.tsx

@@ -1,216 +0,0 @@
-import React, {useRef, useEffect, useCallback, useContext} from 'react';
-import {
-  Animated,
-  Dimensions,
-  KeyboardAvoidingView,
-  PanResponder,
-  Platform,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  Modal,
-} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {ApplicationContext} from './index';
-import {BottomSheetParams} from './types';
-import {Colors, Radius, Spacing, Styles} from '../Consts';
-import {Text} from '../Text';
-import {Icon} from '../Icon';
-
-const BottomSheet: React.FC<BottomSheetParams> = props => {
-  const {theme, navigator} = useContext(ApplicationContext);
-  const heightDevice = Dimensions.get('screen').height;
-  const insets = useSafeAreaInsets();
-  const {
-    screen: Screen,
-    options,
-    useNativeModal = false,
-    surface,
-    barrierDismissible = false,
-    draggable = true,
-    useBottomInset = true,
-    keyboardVerticalOffset,
-  }: BottomSheetParams = props.route.params;
-  const pan = useRef(
-    new Animated.ValueXY({
-      y: heightDevice,
-      x: 0,
-    })
-  ).current;
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => draggable,
-      onMoveShouldSetPanResponder: (_, gestureState) => {
-        return draggable && gestureState.dy > 0;
-      },
-      onPanResponderMove: (e, gestureState) => {
-        gestureState.dy > 0 &&
-          Animated.event([null, {dy: pan.y}], {useNativeDriver: false})(
-            e,
-            gestureState
-          );
-      },
-      onPanResponderRelease: (_, gestureState) => {
-        if (gestureState.dy > 100) {
-          onDismiss();
-        } else {
-          Animated.spring(pan, {
-            toValue: {x: 0, y: 0},
-            useNativeDriver: false,
-          }).start();
-        }
-      },
-    })
-  ).current;
-  let Container: any = View;
-  if (useNativeModal) {
-    Container = Modal;
-  }
-  let backgroundColor = theme.colors.background.default;
-  if (surface) {
-    backgroundColor = theme.colors.background.surface;
-  }
-
-  /**
-   * emit dismiss event
-   */
-  useEffect(() => {
-    Animated.timing(pan, {
-      toValue: {x: 0, y: 0},
-      useNativeDriver: false,
-      duration: 150,
-    }).start();
-    return () => {
-      props.route.params?.onDismiss?.();
-    };
-  }, []);
-
-  /**
-   * handler dismiss
-   */
-  const onDismiss = (force = false, callback?: () => void) => {
-    if (barrierDismissible && !force) {
-      return;
-    }
-    setTimeout(() => {
-      callback?.();
-    }, 300);
-    Animated.timing(pan, {
-      toValue: {x: 0, y: heightDevice},
-      useNativeDriver: false,
-      duration: 200,
-    }).start(() => {
-      navigator?.pop();
-    });
-  };
-
-  /**
-   * on request close
-   */
-  const onRequestClose = useCallback((callback?: () => void) => {
-    onDismiss(true, callback);
-  }, []);
-
-  /**
-   * render header
-   */
-  const renderHeader = useCallback(() => {
-    return (
-      <View
-        style={{
-          backgroundColor,
-          borderTopLeftRadius: Radius.M,
-          borderTopRightRadius: Radius.M,
-        }}
-        {...panResponder.panHandlers}>
-        <View style={{height: 16}}>
-          <View style={styles.indicator} />
-        </View>
-        <View
-          style={[
-            styles.header,
-            surface && {
-              borderBottomColor: theme.colors.border.default,
-              borderBottomWidth: 1,
-            },
-          ]}>
-          <View style={styles.iconButton} />
-          <Text
-            style={[Styles.flex, {textAlign: 'center'}]}
-            numberOfLines={1}
-            typography="header_default_bold">
-            {options.title ?? ''}
-          </Text>
-          <TouchableOpacity
-            style={styles.iconButton}
-            onPress={() => onDismiss(true)}>
-            <Icon source="navigation_close" />
-          </TouchableOpacity>
-        </View>
-      </View>
-    );
-  }, []);
-
-  return (
-    <Container
-      transparent
-      visible={true}
-      onRequestClose={() => onDismiss()}
-      style={styles.overlay}>
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
-        style={[Styles.flex, {justifyContent: 'flex-end'}]}>
-        <TouchableOpacity
-          style={Styles.flex}
-          activeOpacity={1}
-          onPress={() => onDismiss()}
-        />
-        <Animated.View style={{transform: pan.getTranslateTransform()}}>
-          {renderHeader()}
-          <View style={{backgroundColor: backgroundColor}}>
-            <Screen
-              {...props}
-              {...props.route.params}
-              onRequestClose={onRequestClose}
-            />
-            {useBottomInset && (
-              <View style={{height: Math.min(insets.bottom, 21)}} />
-            )}
-          </View>
-        </Animated.View>
-      </KeyboardAvoidingView>
-    </Container>
-  );
-};
-
-const styles = StyleSheet.create({
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'flex-end',
-  },
-  indicator: {
-    width: 40,
-    height: 4,
-    borderRadius: Radius.S,
-    backgroundColor: Colors.black_06,
-    position: 'absolute',
-    alignSelf: 'center',
-    top: Spacing.S,
-  },
-  header: {
-    height: 56,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  iconButton: {
-    width: 24,
-    height: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: Spacing.M,
-  },
-});
-
-export default BottomSheet;

package/Application/BottomTab/BottomTabBar.tsx

@@ -1,278 +0,0 @@
-import {BottomTabBarProps} from '@react-navigation/bottom-tabs';
-import BottomTabBarItem from '@react-navigation/bottom-tabs/src/views/BottomTabItem';
-import {
-  CommonActions,
-  NavigationContext,
-  NavigationRouteContext,
-  useLinkBuilder,
-} from '@react-navigation/native';
-import React, {useCallback, useContext} from 'react';
-import {
-  Animated,
-  Platform,
-  StyleSheet,
-  TouchableOpacity,
-  useWindowDimensions,
-  View,
-} from 'react-native';
-import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {Radius} from '../../Consts';
-import {Icon} from '../../Icon';
-import {Text} from '../../Text';
-import {FloatingButtonProps} from '../types';
-import {ApplicationContext} from '../index';
-
-type Props = BottomTabBarProps & {
-  activeTintColor?: string;
-  inactiveTintColor?: string;
-  floatingButton?: FloatingButtonProps;
-};
-
-const getPaddingBottom = (insets: EdgeInsets) => {
-  return Math.max(insets.bottom - Platform.select({ios: 4, default: 0}), 0);
-};
-
-export default function BottomTabBar({
-  state,
-  navigation,
-  descriptors,
-  activeBackgroundColor,
-  activeTintColor,
-  allowFontScaling,
-  inactiveBackgroundColor,
-  inactiveTintColor,
-  labelStyle,
-  iconStyle,
-  showLabel,
-  style,
-  tabStyle,
-  floatingButton,
-}: Props) {
-  const {theme} = useContext(ApplicationContext);
-  const {routes} = state;
-  const widthDevice = useWindowDimensions()?.width;
-  const useFloating = floatingButton && state.routes.length % 2 === 0;
-  const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
-  const buildLink = useLinkBuilder();
-  const indicatorAnimated = React.useRef(new Animated.Value(0)).current;
-  const insets = useSafeAreaInsets();
-  const paddingBottom = getPaddingBottom(insets);
-  const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
-
-  /**
-   * render tab item
-   */
-  const renderTabItem = useCallback(
-    (data: any[]) => {
-      return data?.map((route, _) => {
-        const focused = route.params.name === focusedTab;
-        const {options} = descriptors[route?.key] as any;
-        const onPress = () => {
-          const event = navigation.emit({
-            type: 'tabPress',
-            target: route.key,
-            canPreventDefault: true,
-          });
-
-          if (!focused && !event.defaultPrevented) {
-            navigation.dispatch({
-              ...CommonActions.navigate(route.name),
-              target: state.key,
-            });
-          }
-        };
-
-        const onLongPress = () => {
-          navigation.emit({
-            type: 'tabLongPress',
-            target: route.key,
-          });
-        };
-
-        const label = options.tabBarLabel || options.title || route.name;
-
-        return (
-          <NavigationContext.Provider
-            key={route.key}
-            value={(descriptors as any)[route.key].navigation}>
-            <NavigationRouteContext.Provider value={route}>
-              <BottomTabBarItem
-                route={route}
-                focused={focused}
-                horizontal={false}
-                onPress={onPress}
-                onLongPress={onLongPress}
-                accessibilityLabel={`tab_item_${route.name}`}
-                to={buildLink(route.name, route.params)}
-                testID={options.tabBarTestID}
-                allowFontScaling={allowFontScaling}
-                activeTintColor={activeTintColor}
-                inactiveTintColor={inactiveTintColor}
-                activeBackgroundColor={activeBackgroundColor}
-                inactiveBackgroundColor={inactiveBackgroundColor}
-                button={options.tabBarButton}
-                icon={options.tabBarIcon}
-                badge={options.tabBarBadge}
-                badgeStyle={options.tabBarBadgeStyle}
-                label={label}
-                showLabel={showLabel}
-                labelStyle={labelStyle}
-                iconStyle={iconStyle}
-                style={tabStyle}
-              />
-            </NavigationRouteContext.Provider>
-          </NavigationContext.Provider>
-        );
-      });
-    },
-    [JSON.stringify(routes), state, descriptors, focusedTab]
-  );
-
-  /**
-   * render floating button
-   */
-  const renderFloatingButton = useCallback(() => {
-    const renderFloatingButton = () => {
-      if (typeof floatingButton?.icon === 'string') {
-        return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
-      }
-      return floatingButton?.icon;
-    };
-
-    return (
-      <View style={{flex: 1}}>
-        <TouchableOpacity
-          onPress={floatingButton?.onPress}
-          style={styles.floatingContainer}>
-          <View
-            style={{
-              ...styles.floatingContent,
-              backgroundColor: activeTintColor ?? theme.colors.primary,
-            }}>
-            {renderFloatingButton()}
-          </View>
-          <View
-            style={{
-              top: -4,
-              backgroundColor: activeTintColor ?? theme.colors.primary,
-              borderRadius: Radius.XL,
-              paddingHorizontal: 6,
-            }}>
-            <Text
-              numberOfLines={1}
-              typography={'description_xs_regular'}
-              color={'white'}>
-              {floatingButton?.label}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      </View>
-    );
-  }, [useFloating]);
-
-  /**
-   * animated indicator
-   */
-  React.useEffect(() => {
-    let index = state.index;
-    if (useFloating && index > (state.routes.length - 1) / 2) {
-      index += 1;
-    }
-    Animated.timing(indicatorAnimated, {
-      toValue: itemWidth * index,
-      useNativeDriver: true,
-      duration: 200,
-    }).start();
-  }, [state.index, itemWidth, indicatorAnimated, useFloating]);
-
-  /**
-   * render tab bar
-   */
-  const renderTabBar = () => {
-    if (useFloating) {
-      const middleIndex = routes.length / 2;
-      const leftArr = routes.slice(0, middleIndex);
-      const rightArr = routes.slice(middleIndex);
-      return (
-        <>
-          {renderTabItem(leftArr)}
-          {renderFloatingButton()}
-          {renderTabItem(rightArr)}
-        </>
-      );
-    }
-    return renderTabItem(routes);
-  };
-
-  return (
-    <Animated.View
-      style={[
-        styles.tabBar,
-        {
-          backgroundColor: theme.colors.background.surface,
-          borderTopColor: theme.colors.border.default,
-        },
-        {
-          paddingBottom: paddingBottom,
-          paddingHorizontal: Math.max(insets.left, insets.right),
-        },
-        style,
-      ]}
-      pointerEvents={'auto'}>
-      <View style={styles.content} accessibilityLabel={'bottom_tab_bar'}>
-        {useFloating && floatingButton?.container}
-        <Animated.View
-          style={{
-            width: itemWidth,
-            position: 'absolute',
-            top: 0,
-            transform: [{translateX: indicatorAnimated}],
-          }}>
-          <View
-            style={[
-              styles.indicator,
-              {backgroundColor: activeTintColor ?? theme.colors.primary},
-            ]}
-          />
-        </Animated.View>
-        {renderTabBar()}
-      </View>
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  tabBar: {
-    left: 0,
-    right: 0,
-    bottom: 0,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    elevation: 8,
-  },
-  floatingContainer: {
-    position: 'absolute',
-    alignItems: 'center',
-    left: 0,
-    right: 0,
-    bottom: Platform.OS === 'ios' ? -6 : 0,
-  },
-  floatingContent: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 48,
-    width: 48,
-    borderRadius: 24,
-    top: -10,
-  },
-  indicator: {
-    height: 2,
-    width: 44,
-    alignSelf: 'center',
-    borderBottomLeftRadius: 1,
-    borderBottomRightRadius: 1,
-  },
-});

package/Application/Localize.ts

@@ -1,44 +0,0 @@
-import {NativeModules} from 'react-native';
-import {LocalizationObject} from './types';
-import defaultLanguage from '../Assets/language.json';
-
-class Localize {
-  private assets: LocalizationObject;
-  private currentLanguage: 'en' | 'vi';
-
-  constructor(assets: LocalizationObject) {
-    this.assets = {
-      vi: {...assets?.vi, ...defaultLanguage.vi},
-      en: {...assets?.en, ...defaultLanguage.en},
-    };
-    this.currentLanguage = 'vi';
-    if (NativeModules?.RNResource?.language === 'en') {
-      this.currentLanguage = 'en';
-    }
-  }
-
-  get getCurrentLanguage() {
-    return this.currentLanguage;
-  }
-
-  get getAssets() {
-    return this.assets;
-  }
-
-  translate(key: string) {
-    return this.assets[this.currentLanguage]?.[key] || key;
-  }
-
-  translateData(data: {vi: string; en: string}) {
-    return data[this.currentLanguage] || JSON.stringify(data);
-  }
-
-  addTranslations(translations: LocalizationObject) {
-    this.assets = {
-      vi: {...translations?.vi, ...this.assets.vi},
-      en: {...translations?.en, ...this.assets.en},
-    };
-  }
-}
-
-export default Localize;

package/Application/constants.ts

@@ -1,9 +0,0 @@
-export enum NavigationActionCallbackStatusEnum {
-  Success = 'success',
-  Failed = 'failed',
-}
-
-export enum NavigationActionCallbackErrorEnum {
-  NotReady = 'not_ready',
-  Error = 'error',
-}

package/Badge/BadgeDotAnimation.tsx

@@ -1,95 +0,0 @@
-import React, {useEffect, useRef} from 'react';
-import {Animated, View} from 'react-native';
-import {BadgeDotProps} from './types';
-import styles from './styles';
-
-const DURATION = 500;
-
-const BadgeDotAnimation = ({size, style}: BadgeDotProps) => {
-  // Refs for animated values
-  const scaleAnim = useRef(new Animated.Value(1)).current;
-  const waveScaleAnim = useRef(new Animated.Value(1)).current;
-  const waveOpacityAnim = useRef(new Animated.Value(0)).current;
-
-  const dotStyle =
-    size === 'small' ? styles.dotAnimationSmall : styles.dotAnimation;
-  const waveStyle = size === 'small' ? styles.waveSmall : styles.wave;
-
-  useEffect(() => {
-    // Infinite loop animation for the scale and wave effect
-    const animation = Animated.loop(
-      Animated.parallel([
-        // Dot pulse animation
-        Animated.sequence([
-          Animated.spring(scaleAnim, {
-            toValue: 1, // Scale up slightly
-            friction: 5, // Controls the "bounciness" of the spring
-            tension: 30, // Controls the "stiffness" of the spring
-            useNativeDriver: true,
-          }),
-          Animated.spring(scaleAnim, {
-            toValue: 1.1,
-            friction: 5,
-            tension: 30,
-            useNativeDriver: true,
-          }),
-        ]), // Wave animation
-        Animated.sequence([
-          Animated.timing(waveScaleAnim, {
-            toValue: 2.5,
-            duration: DURATION * 3,
-            useNativeDriver: true,
-          }),
-          Animated.timing(waveScaleAnim, {
-            toValue: 1, // Reset wave size
-            duration: 0,
-            useNativeDriver: true,
-          }),
-        ]), // Wave opacity animation
-        Animated.sequence([
-          Animated.timing(waveOpacityAnim, {
-            toValue: 0.3, // Wave becomes visible
-            duration: DURATION * 2,
-            useNativeDriver: true,
-          }),
-          Animated.timing(waveOpacityAnim, {
-            toValue: 0, // Wave fades out
-            duration: DURATION,
-            useNativeDriver: true,
-          }),
-        ]),
-      ])
-    );
-    animation.start();
-
-    return () => {
-      animation.stop();
-    };
-  }, []);
-
-  return (
-    <View style={[styles.dotAnimationContainer, style]}>
-      {/* Wave Animation */}
-      <Animated.View
-        style={[
-          waveStyle,
-          {
-            transform: [{scale: waveScaleAnim}],
-            opacity: waveOpacityAnim,
-          },
-        ]}
-      />
-      {/* Dot Animation */}
-      <Animated.View
-        style={[
-          dotStyle,
-          {
-            transform: [{scale: scaleAnim}],
-          },
-        ]}
-      />
-    </View>
-  );
-};
-
-export default BadgeDotAnimation;