@momo-kits/native-kits 0.157.1-com.1-debug → 0.157.1-com.1

package/src/libs/Slider/styles.ts

@@ -1,36 +0,0 @@
-import {I18nManager, StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '@momo-kits/foundation';
-
-export default StyleSheet.create({
-  controlsContainer: {
-    flexDirection: 'row',
-    justifyContent: I18nManager.isRTL ? 'flex-end' : 'flex-start',
-    alignItems: 'center',
-  },
-  highThumbContainer: {
-    position: 'absolute',
-  },
-  railsContainer: {
-    ...StyleSheet.absoluteFillObject,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  labelFixedContainer: {
-    alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start',
-  },
-  labelFloatingContainer: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start',
-  },
-  touchableArea: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  label: {
-    backgroundColor: Colors.black_01,
-    paddingVertical: Spacing.XXS,
-    paddingHorizontal: Spacing.XS,
-    borderRadius: Radius.XS,
-  },
-});

package/src/libs/Stepper/NumberView.tsx

@@ -1,64 +0,0 @@
-import React, { FC, useContext } from 'react';
-import { TextInput, View } from 'react-native';
-import { StepperValueProps } from './types';
-import { ApplicationContext, useScaleSize } from '@momo-kits/foundation';
-import styles from './styles';
-
-const NumberView: FC<StepperValueProps> = ({
-  value = 0,
-  size = 'large',
-  editable = false,
-  onValueChange,
-  disabled,
-  componentId,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const scaledHeight28 = useScaleSize(28);
-  const scaledHeight24 = useScaleSize(24);
-  const scaledFontSize = useScaleSize(12);
-
-  const formattedNumber = (value: number) => {
-    if (isNaN(value)) {
-      return '0';
-    } else {
-      return value.toString();
-    }
-  };
-
-  const textColor = disabled
-    ? theme.colors.text.disable
-    : theme.colors.text.default;
-
-  const borderColor = disabled
-    ? theme.colors.border.disable
-    : theme.colors.border.default;
-  return (
-    <View
-      style={[
-        styles.numberViewBase,
-        size === 'large'
-          ? { minWidth: 32, height: scaledHeight28 }
-          : { minWidth: 28, height: scaledHeight24 },
-        { borderColor },
-      ]}
-    >
-      <TextInput
-        allowFontScaling={false}
-        editable={editable}
-        style={[
-          styles.numberViewInput,
-          { fontSize: scaledFontSize },
-          { color: textColor },
-        ]}
-        value={formattedNumber(value)}
-        onChangeText={onValueChange}
-        keyboardType={'number-pad'}
-        selectionColor={theme.colors.primary}
-        accessibilityLabel={`${componentId}|input`}
-        accessibilityState={{ disabled }}
-      />
-    </View>
-  );
-};
-
-export default NumberView;

package/src/libs/Stepper/StepperButton.tsx

@@ -1,37 +0,0 @@
-import React, {FC, useContext} from 'react';
-import {TouchableOpacity} from 'react-native';
-import styles from './styles';
-import {StepperButtonProps} from './types';
-import {ApplicationContext, Icon} from '@momo-kits/foundation';
-
-const StepperButton: FC<StepperButtonProps> = ({
-  disabled = false,
-  sign = '+',
-  size = 'large',
-  onPress,
-  componentId,
-}) => {
-  const {theme} = useContext(ApplicationContext);
-
-  const sizeStyle = size === 'large' ? styles.button : styles.smallButton;
-  const buttonIcon =
-    sign === '-' ? '24_navigation_minus_circle' : '24_navigation_plus_circle';
-  const buttonColor = disabled
-    ? theme.colors.text.disable
-    : theme.colors.primary;
-
-  return (
-    <TouchableOpacity
-      disabled={disabled}
-      onPress={onPress}
-      style={[sizeStyle]}
-      accessibilityState={{disabled}}
-      accessibilityLabel={`${componentId}|${
-        sign === '+' ? 'plus' : 'minus'
-      }-touch`}>
-      <Icon size={22} color={buttonColor} source={buttonIcon} />
-    </TouchableOpacity>
-  );
-};
-
-export default StepperButton;

package/src/libs/Stepper/index.tsx

@@ -1,139 +0,0 @@
-import React, {
-  forwardRef,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react';
-import {View} from 'react-native';
-import StepperButton from './StepperButton';
-import {DisabledStatus, StepperProps} from './types';
-import styles from './styles';
-import NumberView from './NumberView';
-import {MiniAppContext, ScreenContext} from '@momo-kits/foundation';
-
-const Stepper = forwardRef(
-  (
-    {
-      size = 'large',
-      defaultValue = 0,
-      min = 0,
-      max = 100,
-      disabled = false,
-      step = 1,
-      editable = false,
-      onValueChange,
-      accessibilityLabel,
-    }: StepperProps,
-    ref
-  ) => {
-    const [value, setValue] = useState(defaultValue);
-
-    const app = useContext<any>(MiniAppContext);
-    const screen = useContext<any>(ScreenContext);
-    const componentName = 'Stepper';
-
-    const componentId = useMemo(() => {
-      if (accessibilityLabel) {
-        return accessibilityLabel;
-      }
-      let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}`;
-      return id;
-    }, [componentName, accessibilityLabel, app, screen]);
-
-    useImperativeHandle(ref, () => ({
-      setStepValue: (value: React.SetStateAction<number>) => {
-        setValue(value);
-        _onValueChange(value.toString());
-      },
-    }));
-
-    useEffect(() => {
-      setValue(defaultValue);
-    }, [defaultValue]);
-
-    const onPlus = () => {
-      let newValue = value + step;
-      _onValueChange(newValue.toString());
-    };
-    const onMinus = () => {
-      let newValue = value - step;
-      _onValueChange(newValue.toString());
-    };
-    const _onValueChange = (num: string) => {
-      let newValue = parseInt(num);
-
-      if (isNaN(newValue)) {
-        newValue = 0;
-      }
-
-      if (newValue > max) {
-        newValue = max;
-      }
-
-      if (newValue < min) {
-        newValue = min;
-      }
-
-      setValue(newValue);
-      onValueChange?.(newValue);
-    };
-    const getViewDisabledStatus = () => {
-      let disabledStatus: DisabledStatus;
-
-      if (Array.isArray(disabled)) {
-        disabledStatus = {
-          plus: disabled[1],
-          minus: disabled[0],
-          number: disabled[0] && disabled[1],
-        };
-      } else {
-        disabledStatus = {
-          plus: disabled,
-          minus: disabled,
-          number: disabled,
-        };
-      }
-
-      if (value === min) {
-        disabledStatus.minus = true;
-      }
-      if (value === max) {
-        disabledStatus.plus = true;
-      }
-      return disabledStatus;
-    };
-
-    const viewStatus = getViewDisabledStatus();
-
-    return (
-      <View style={styles.stepper} accessibilityLabel={componentId}>
-        <StepperButton
-          onPress={onMinus}
-          sign={'-'}
-          size={size}
-          disabled={viewStatus.minus}
-          componentId={componentId}
-        />
-        <NumberView
-          onValueChange={_onValueChange}
-          size={size}
-          value={value}
-          disabled={viewStatus.number}
-          editable={editable}
-          componentId={componentId}
-        />
-        <StepperButton
-          onPress={onPlus}
-          size={size}
-          disabled={viewStatus.plus}
-          componentId={componentId}
-        />
-      </View>
-    );
-  }
-);
-
-export {Stepper};
-export type {StepperProps};

package/src/libs/Stepper/package.json

@@ -1,16 +0,0 @@
-{
-    "name": "@momo-kits/stepper",
-    "version": "0.157.1-beta.4",
-    "private": false,
-    "main": "index.tsx",
-    "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "react": "*",
-        "react-native": "*"
-    },
-    "license": "MoMo",
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "dependencies": {}
-}

package/src/libs/Stepper/publish.sh

@@ -1,17 +0,0 @@
-#!/bin/bash
-
-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 publish --tag latest --access=public
-elif [ "$1" == "beta" ]; then
-  npm publish --tag beta --access=public
-else
-  npm publish --tag alpha --access=public
-fi
-
-PACKAGE_NAME=$(npm pkg get name)
-NEW_PACKAGE_VERSION=$(npm pkg get version)
-

package/src/libs/Stepper/styles.ts

@@ -1,44 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '@momo-kits/foundation';
-
-export default StyleSheet.create({
-  button: {
-    width: 36,
-    height: 36,
-    borderRadius: Radius.XL,
-    backgroundColor: Colors.black_03,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  smallButton: {
-    width: 28,
-    height: 28,
-    borderRadius: Radius.L,
-    backgroundColor: Colors.black_03,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  iconWrapper: {
-    width: 22,
-    height: 22,
-    borderWidth: 2,
-    borderRadius: Radius.M,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  stepper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  numberViewBase: {
-    borderWidth: 1,
-    borderRadius: Radius.S,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginHorizontal: Spacing.S,
-  },
-  numberViewInput: {
-    paddingVertical: 0,
-    textAlign: 'center',
-  },
-});

package/src/libs/Stepper/types.ts

@@ -1,154 +0,0 @@
-import {ViewStyle} from 'react-native';
-
-/**
- * Properties for the StepperButton component, which represents the individual
- * increment and decrement buttons in a stepper control.
- */
-export type StepperButtonProps = {
-  /**
-   * Optional. If `true`, the button is disabled and not interactive.
-   * Defaults to `false` if not provided.
-   */
-  disabled?: boolean;
-
-  /**
-   * Determines the button's function in the stepper, either increment ('+') or decrement ('-').
-   */
-  sign?: '+' | '-';
-
-  /**
-   * Optional. Specifies the size of the button. If not provided, a default size is used.
-   */
-  size?: 'large' | 'small';
-
-  /**
-   * A callback function that is triggered when the button is pressed.
-   */
-  onPress: () => void;
-
-  /**
-   * Optional. Assign accessibility label to the button for automated testing.
-   */
-  componentId: string;
-};
-
-/**
- * Properties for the StepperValue component, which displays the current value
- * within a stepper control and allows for direct input.
- */
-export type StepperValueProps = {
-  /**
-   * The current numeric value displayed by the stepper.
-   */
-  value: number;
-
-  /**
-   * Optional. If `true`, the value display is disabled and not interactive.
-   * Defaults to `false` if not provided.
-   */
-  disabled?: boolean;
-
-  /**
-   * Optional. Specifies the size of the value display. If not provided, a default size is used.
-   */
-  size?: 'large' | 'small';
-
-  /**
-   * Optional. If `true`, the value display is editable, and users can input values directly.
-   * Defaults to `false` if not provided.
-   */
-  editable?: boolean;
-
-  /**
-   * Optional. A callback function that is triggered when the value changes, receiving the new value as a parameter.
-   */
-  onValueChange?: (value: string) => void;
-
-  /**
-   * Optional. Assign accessibility label to the button for automated testing.
-   */
-  componentId: string;
-};
-
-/**
- * General properties for the Stepper component, which combines the buttons and value display
- * to provide a full feature numeric stepper control.
- */
-export type StepperProps = {
-  /**
-   * The initial value when the stepper is first rendered.
-   */
-  defaultValue: number;
-
-  /**
-   * Optional. The minimum allowable value for the stepper. If not provided, there is no minimum.
-   */
-  min?: number;
-
-  /**
-   * Optional. The maximum allowable value for the stepper. If not provided, there is no maximum.
-   */
-  max?: number;
-
-  /**
-   * Optional. Specifies whether the entire stepper control or specific parts are disabled.
-   * Can be a single boolean (to disable all) or an array of booleans (to control individual components).
-   */
-  disabled?: boolean | boolean[];
-
-  /**
-   * Optional. The step increment used for each button press. Defaults to 1 if not provided.
-   */
-  step?: number;
-
-  /**
-   * Optional. Specifies the size of the stepper components. If not provided, a default size is used.
-   */
-  size?: 'large' | 'small';
-
-  /**
-   * Optional. If `true`, the value display is editable, and users can input values directly.
-   * Defaults to `false` if not provided.
-   */
-  editable?: boolean;
-
-  /**
-   * Optional. A callback function that is triggered when the stepper's value changes, receiving the new value as a parameter.
-   */
-  onValueChange?: (value: number) => void;
-
-  /**
-   * Optional. Custom styles to apply to the Stepper component. Can be used to adjust the visual presentation or layout.
-   */
-  style?: ViewStyle | ViewStyle[];
-
-  /**
-   * Optional. Assign accessibility label to the button for automated testing.
-   */
-  accessibilityLabel?: string;
-};
-
-/**
- * Specifies the disabled state for each part of the Stepper component, allowing
- * individual parts to be disabled as needed.
- */
-export type DisabledStatus = {
-  /**
-   * If `true`, the increment (plus) button is disabled.
-   */
-  plus: boolean;
-
-  /**
-   * If `true`, the decrement (minus) button is disabled.
-   */
-  minus: boolean;
-
-  /**
-   * If `true`, the value display (number) is disabled, preventing direct input.
-   */
-  number: boolean;
-};
-
-export type StepperRef = {
-  setStepValue: (value: number) => void;
-};

package/src/libs/Steps/StepIcon.tsx

@@ -1,86 +0,0 @@
-import {Colors, Icon, Text, useScaleSize, Radius} from '@momo-kits/foundation';
-import React, {FC} from 'react';
-import {StyleProp, View, ViewStyle} from 'react-native';
-import styles from './styles';
-import {StepIconProps} from './types';
-
-const StepIcon: FC<StepIconProps> = ({
-  size = 'large',
-  backgroundColor,
-  borderColor,
-  error,
-  style,
-  useNumber,
-  index,
-  isActive,
-  customIcon,
-}) => {
-  const scaledSize = useScaleSize(16);
-  const scaledRadiusM = useScaleSize(Radius.M);
-
-  let iconStyle: StyleProp<ViewStyle> = styles.stepIcon;
-  let checkIconSize = 16;
-  let contentIconSize = 8;
-
-  if (size === 'small') {
-    iconStyle = [
-      styles.stepIcon,
-      {
-        width: scaledSize,
-        height: scaledSize,
-        borderWidth: 2,
-        borderRadius: scaledRadiusM,
-      },
-    ];
-    checkIconSize = 12;
-    contentIconSize = 6;
-  }
-
-  let iconSource = error ? 'navigation_close' : 'notifications_check';
-
-  const renderIcon = () => {
-    // useNumber is true, render number
-    if (useNumber) {
-      return (
-        <Text
-          style={{position: 'absolute'}}
-          typography={'header_xs_semibold'}
-          color={Colors.black_01}>
-          {index + 1}
-        </Text>
-      );
-    }
-
-    if (isActive) {
-      // customIcon is true, render customIcon
-      if (customIcon) {
-        return (
-          <Icon
-            size={checkIconSize}
-            color={Colors.black_01}
-            source={customIcon}
-          />
-        );
-      }
-      // render default Icon
-      return (
-        <View
-          style={[styles.currIcon, {width: contentIconSize, aspectRatio: 1}]}
-        />
-      );
-    }
-
-    return (
-      <Icon size={checkIconSize} color={Colors.black_01} source={iconSource} />
-    );
-  };
-
-  return (
-    <View
-      style={[iconStyle, styles.center, {backgroundColor, borderColor}, style]}>
-      {renderIcon()}
-    </View>
-  );
-};
-
-export default StepIcon;