@momo-kits/foundation 0.160.1-beta.1 → 0.160.1-beta.2

package/Application/BottomSheet.tsx

@@ -39,7 +39,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const heightHeader = useHeaderHeight();
   const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const {
     screen: Screen,

package/Application/BottomTab/BottomTabBar.tsx

@@ -63,7 +63,7 @@ export default function BottomTabBar({
   const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
 
   const context = useContext<any>(MiniAppContext);
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   /**
    * render tab item
@@ -299,7 +299,7 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     top: -2,
-    bottom: Platform.OS === 'ios' ? -6 : 4
+    bottom: Platform.OS === 'ios' ? -6 : 4,
   },
   floatingContent: {
     alignItems: 'center',

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -61,7 +61,7 @@ const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
   allowFontScaling,
 }) => {
   const context = useContext<any>(MiniAppContext);
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const renderIcon = () => {
     if (icon === undefined) {

package/Application/Components/HeaderBackground.tsx

@@ -24,7 +24,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerImage = headerBackground ?? theme.assets?.headerBackground;
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],

package/Application/Components/HeaderExtendHeader.tsx

@@ -49,7 +49,7 @@ const HeaderExtendHeader: React.FC<{
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],

package/Application/Components/HeaderTitle.tsx

@@ -24,7 +24,7 @@ import { Skeleton } from '../../Skeleton';
 const HeaderTitle: React.FC<any> = props => {
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const opacity = props.animatedValue?.interpolate(
     props.interpolate ?? {

package/Application/Components/SearchHeader.tsx

@@ -77,7 +77,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
       return true;
     };
 
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
     return (
       <View

package/Badge/Badge.tsx

@@ -18,8 +18,8 @@ const Badge: FC<BadgeProps> = ({
   const { componentId } = useComponentId('Badge', accessibilityLabel);
   const scaledSize = useScaleSize(16);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-  
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+
   const styles = StyleSheet.create({
     badge: {
       paddingHorizontal: Spacing.XS,
@@ -84,7 +84,13 @@ const Badge: FC<BadgeProps> = ({
   }
 
   return (
-    <View style={[style, styles.badgeContainer, showBaseLineDebug && styles.debugBaseLine]}>
+    <View
+      style={[
+        style,
+        styles.badgeContainer,
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+    >
       <View
         style={[styles.badge, { backgroundColor: badgeColor }]}
         accessibilityLabel={componentId}

package/Badge/BadgeDot.tsx

@@ -9,7 +9,7 @@ const BadgeDot: FC<BadgeDotProps> = ({ size = 'large', style }) => {
   let dotStyle;
   let dotContainerStyle;
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   if (size === 'large') {
     dotStyle = styles.dot;

package/Badge/BadgeRibbon.tsx

@@ -19,7 +19,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
   const isRight = position === 'top_right' || position === 'bottom_right';
   const isUpTail = position === 'bottom_left' || position === 'top_right';
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const ribbonRotate = useMemo(() => (isRight ? '180deg' : '0deg'), [isRight]);
   const textRotate = ribbonRotate;

package/Button/index.tsx

@@ -77,7 +77,7 @@ const Button: FC<ButtonProps> = ({
   const animationRef = useRef<LottieView>(null);
   const pressAnim = useSharedValue(0);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const componentName = 'Button';
   const { componentId } = useComponentId(
@@ -355,7 +355,7 @@ const Button: FC<ButtonProps> = ({
         onPressOut={animateOut}
       >
         <Reanimated.View style={[buttonStyle, animatedStyle]}>
-        {renderIcon('left')}
+          {renderIcon('left')}
           {renderTitle()}
           {renderIcon('right')}
           {gradientPros && (

package/CheckBox/index.tsx

@@ -34,7 +34,7 @@ const CheckBox: FC<CheckBoxProps> = ({
     props.accessibilityLabel,
   );
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   if (haveValue) {
     borderColor = theme.colors.primary;

package/Icon/index.tsx

@@ -17,7 +17,7 @@ const Icon: React.FC<IconProps> = ({
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   /**
    * get icon source maps or remote http

package/IconButton/index.tsx

@@ -46,7 +46,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   /**
    * get size icon button

package/Image/index.tsx

@@ -37,7 +37,7 @@ const Image: React.FC<ImageProps> = ({
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   let accessibilityLabel: any = `img|${getImageName(source)}`;
   if (component?.componentId) {

package/Input/Input.tsx

@@ -81,7 +81,7 @@ const Input = forwardRef(
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'Input';
 
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputDropDown.tsx

@@ -43,7 +43,7 @@ const InputDropDown = ({
   const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
   const componentName = 'InputDropDown';
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const { componentId } = useComponentId(
     `${componentName}/${placeholder}`,

package/Input/InputMoney.tsx

@@ -76,7 +76,7 @@ const InputMoney = forwardRef(
     const inputRef = useRef<TextInput>(null);
     const componentName = 'InputMoney';
 
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputOTP.tsx

@@ -99,7 +99,7 @@ const InputOTP = forwardRef(
 
     const componentName = 'InputOTP';
 
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputPhoneNumber.tsx

@@ -73,7 +73,7 @@ const InputPhoneNumber = forwardRef(
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'InputPhoneNumber';
 
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputSearch.tsx

@@ -146,7 +146,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   const context = useContext<any>(MiniAppContext);
   const scaledFontSize = useScaleSize(14);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const [focused, setFocused] = useState(false);
   const [internalText, setInternalText] = useState(defaultValue || '');

package/Input/InputTextArea.tsx

@@ -57,7 +57,7 @@ const InputTextArea = forwardRef(
     const context = useContext<any>(MiniAppContext);
     const DEFAULT_HEIGHT = useScaleSize(104);
 
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
     const scaledFontSize = useScaleSize(14);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');

package/Layout/Item.tsx

@@ -27,7 +27,7 @@ const Item: React.FC<ItemProps> = ({
   const context = useContext<any>(MiniAppContext);
   const grid = useContext(GridContext);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   /**
    * render overlay view only dev mode

package/Pagination/PaginationDot.tsx

@@ -14,7 +14,7 @@ const PaginationDot: FC<ChildPaginationProps> = ({
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const renderDots = () => {
     const dots: React.ReactElement[] = [];

package/Pagination/PaginationNumber.tsx

@@ -13,7 +13,7 @@ const PaginationNumber: FC<ChildPaginationProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   return (
     <View

package/Pagination/PaginationScroll.tsx

@@ -17,7 +17,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   const [scrollViewWidth, setScrollViewWidth] = useState(0);
   const [scrollContentWidth, setScrollContentWidth] = useState(0);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const translateX = () => {
     if (scrollViewWidth && scrollContentWidth) {

package/Pagination/PaginationWhiteDot.tsx

@@ -13,7 +13,7 @@ const PaginationWhiteDot: FC<ChildPaginationProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const renderDots = () => {
     const dots: React.ReactElement[] = [];

package/Popup/PopupNotify.tsx

@@ -32,7 +32,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const { width: widthDevice } = Dimensions.get('window');
   const scaledMaxHeight = useScaleSize(172);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
   const closeAction = useRef('touch_outside');
   let descriptionStyle = {};
   let Description: any = View;

package/Popup/PopupPromotion.tsx

@@ -17,7 +17,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   const { width: widthDevice } = Dimensions.get('window');
   const closeAction = useRef('touch_outside');
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   /**
    * on action popup

package/Radio/index.tsx

@@ -33,7 +33,7 @@ const Radio: FC<RadioProps> = ({
     accessibilityLabel,
   );
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
   let disabledStyle = {};
   let checkBoxStyle = {
     borderWidth: 2,

package/Switch/index.tsx

@@ -22,7 +22,7 @@ const Switch: FC<SwitchProps> = ({
 
   const { componentId } = useComponentId(componentName, accessibilityLabel);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {

package/Tag/index.tsx

@@ -38,7 +38,7 @@ const Tag: FC<TagProps> = ({
   const scaledHeight24 = useScaleSize(24);
   const scaledHeight18 = useScaleSize(18);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const styles = StyleSheet.create({
     container: {

package/Text/index.tsx

@@ -158,7 +158,7 @@ const Text: React.FC<TextProps> = ({
     );
   }
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   if (skeleton.loading) {
     return (

package/Text/utils.ts

@@ -9,7 +9,7 @@ const MAX_FONT_SCALE = 1.2;
 const useScaleSize = (size: number) => {
   const { width } = useWindowDimensions();
   const context = useContext<any>(MiniAppContext);
-  const allowFontScale = context?.features?.allowFontScale ?? true;
+  const allowFontScale = context?.designSystemConfig?.allowFontScale ?? true;
   if (!allowFontScale) return size;
 
   const deviceScale = width / DEFAULT_SCREEN_SIZE;

package/Title/index.tsx

@@ -39,7 +39,7 @@ const Title: FC<TitleProps> = ({
   const [badgeWidth, setBadgeWidth] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const size18 = useScaleSize(18);
   const size22 = useScaleSize(22);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.160.1-beta.1",
+  "version": "0.160.1-beta.2",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},