@momo-kits/foundation 0.113.0-optimize.5 → 0.113.0-optimize.6

package/Application/Components/NavigationButton.tsx

@@ -12,10 +12,8 @@ import {BadgeDot} from '../../Badge';
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
-  onPress,
   showBadge = false,
-  accessibilityLabel = '',
-  disabled = false,
+  ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {};
@@ -29,10 +27,8 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   return (
     <View style={{width: 28}}>
       <TouchableOpacity
-        disabled={disabled}
-        accessibilityLabel={accessibilityLabel}
+        {...props}
         style={[styles.navigationButton, buttonStyle]}
-        onPress={onPress}
         hitSlop={{top: 7, bottom: 7, left: 7, right: 7}}>
         <Icon
           source={icon}

package/Application/types.ts

@@ -1,7 +1,12 @@
 import {EventArg} from '@react-navigation/core';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React, {ReactNode} from 'react';
-import {Animated, ViewProps, ViewStyle} from 'react-native';
+import {
+  Animated,
+  TouchableOpacityProps,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Localize from './Localize';
 import Navigation from './Navigation';
@@ -147,14 +152,11 @@ export type BottomSheetParams = {
   keyboardVerticalOffset?: number;
 };
 
-export type NavigationButtonProps = {
+export interface NavigationButtonProps extends TouchableOpacityProps {
   icon: string;
   tintColor?: string;
-  onPress: () => void;
   showBadge?: boolean;
-  accessibilityLabel?: string;
-  disabled?: boolean;
-};
+}
 
 export type HeaderTitleProps = {
   type: 'default' | 'user' | 'location' | 'journey';

package/Application/utils.tsx

@@ -169,6 +169,14 @@ const setAutomationID = (accessibilityLabel = '') => {
   }
 };
 
+export const getImageName = (source: any): string => {
+  const parts = source?.uri?.split?.('/');
+  if (parts?.length > 0) {
+    return parts?.[parts.length - 1];
+  }
+  return '';
+};
+
 export {
   getStackOptions,
   getDialogOptions,

package/Button/index.tsx

@@ -87,9 +87,7 @@ const Button: FC<ButtonProps> = ({
   iconLeft,
   loading = false,
   title = 'Button',
-  onPress,
   params,
-  accessibilityLabel,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -311,9 +309,7 @@ const Button: FC<ButtonProps> = ({
       <TouchableOpacity
         {...rest}
         disabled={type === 'disabled'}
-        accessibilityLabel={accessibilityLabel}
         activeOpacity={0.5}
-        onPress={onPress}
         style={buttonStyle}>
         {renderLeading()}
         {renderTitle()}

package/CheckBox/index.tsx

@@ -14,7 +14,7 @@ const CheckBox: FC<CheckBoxProps> = ({
   label,
   indeterminate,
   params,
-  accessibilityLabel,
+  ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
   const haveValue = value || indeterminate;
@@ -46,7 +46,7 @@ const CheckBox: FC<CheckBoxProps> = ({
         componentValue: indeterminate ? 'undetermined' : value,
       }}>
       <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
+        {...props}
         activeOpacity={0.8}
         onPress={() => onChange?.(!value)}
         disabled={disabled}

package/CheckBox/types.ts

@@ -1,4 +1,4 @@
-import {TouchableOpacityProps, ViewStyle} from 'react-native';
+import {TouchableOpacityProps} from 'react-native';
 
 export interface CheckBoxProps extends TouchableOpacityProps {
   /**
@@ -31,10 +31,7 @@ export interface CheckBoxProps extends TouchableOpacityProps {
   indeterminate?: boolean;
 
   /**
-   * Optional. Used to apply custom styling to the CheckBox component.
-   * Accepts an object of style properties.
+   * Optional. Represents the accessibility label for the CheckBox.
    */
-  style?: ViewStyle;
-
   params?: any;
 }

package/Icon/index.tsx

@@ -10,7 +10,7 @@ const Icon: React.FC<IconProps> = ({
   size = 24,
   color,
   style = {},
-  accessibilityLabel,
+  ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -31,11 +31,11 @@ const Icon: React.FC<IconProps> = ({
 
   return (
     <Image
+      {...props}
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
       resizeMode="contain"
-      accessibilityLabel={accessibilityLabel}
       {...tintColorProps}
     />
   );

package/Icon/types.ts

@@ -24,9 +24,4 @@ export type IconProps = {
    * Accepts an object of style properties.
    */
   style?: StyleProp<ImageStyle>;
-
-  /**
-   *  Optional. Represents the accessibility label for the icon.
-   */
-  accessibilityLabel?: string;
 };

package/IconButton/index.tsx

@@ -26,6 +26,9 @@ export interface IconButtonProps extends TouchableOpacityProps {
    */
   size?: 'large' | 'small';
 
+  /**
+   * Optional. Params for tracking
+   */
   params?: any;
 }
 
@@ -33,9 +36,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   type = 'primary',
   icon,
   size,
-  onPress,
   params,
-  accessibilityLabel,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -124,9 +125,7 @@ const IconButton: React.FC<IconButtonProps> = ({
       <TouchableOpacity
         {...rest}
         disabled={type === 'disabled'}
-        accessibilityLabel={accessibilityLabel}
         activeOpacity={activeOpacity}
-        onPress={onPress}
         style={buttonStyle}>
         <Icon size={iconSize} source={icon} color={getIconColor()} />
       </TouchableOpacity>

package/Image/index.tsx

@@ -1,12 +1,13 @@
 import React, {useContext, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
-import FastImage, {Source} from 'react-native-fast-image';
+import FastImage from 'react-native-fast-image';
 import styles from './styles';
 import {ApplicationContext, SkeletonContext} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 import {ImageProps} from './types';
+import {getImageName} from '../Application/utils';
 
 type Status = 'success' | 'loading' | 'error';
 
@@ -24,7 +25,7 @@ const Image: React.FC<ImageProps> = ({
   const [status, setStatus] = useState<Status>('success');
 
   const test: any = {
-    accessibilityLabel: accessibilityLabel || `img|${(source as Source).uri}`,
+    accessibilityLabel: accessibilityLabel || `img|${getImageName(source)}`,
   };
 
   /**

package/Input/Input.tsx

@@ -37,9 +37,6 @@ const Input = forwardRef(
       onBlur,
       onFocus,
       errorMessage,
-      icon,
-      iconColor,
-      onPressIcon,
       trailing,
       trailingColor,
       onPressTrailing,
@@ -56,7 +53,6 @@ const Input = forwardRef(
       style,
       params,
       hintText,
-      accessibilityLabel,
       editable = true,
       onPressFloatingIcon,
       onPressLeadingIcon,
@@ -128,24 +124,17 @@ const Input = forwardRef(
           </TouchableOpacity>
         );
       }
-      if (icon || trailing) {
+      if (trailing) {
         const renderIconTouchable = (icon: ReactNode) => {
           return (
-            <TouchableOpacity
-              onPress={onPressTrailing ?? onPressIcon}
-              style={styles.icon}>
+            <TouchableOpacity onPress={onPressTrailing} style={styles.icon}>
               {icon}
             </TouchableOpacity>
           );
         };
-        const trailingValue = icon || trailing;
-        if (trailingValue?.includes('_') || trailingValue?.includes('http')) {
+        if (trailing?.includes('_') || trailing?.includes('http')) {
           return renderIconTouchable(
-            <Icon
-              color={color}
-              source={(icon || trailing) as string}
-              size={24}
-            />
+            <Icon color={color} source={trailing} size={24} />
           );
         }
         return renderIconTouchable(
@@ -153,7 +142,7 @@ const Input = forwardRef(
             typography="action_xs_bold"
             color={color ?? theme.colors.primary}
             numberOfLines={1}>
-            {trailingValue!.substring(0, 15)}
+            {trailing!.substring(0, 15)}
           </Text>
         );
       }
@@ -167,7 +156,7 @@ const Input = forwardRef(
       const secure = secureTextInput && secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = trailingColor ?? iconColor;
+      let iconTintColor = trailingColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -205,7 +194,6 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               editable={editable && !disabled}
               secureTextEntry={secure}
               textAlignVertical="center"

package/Input/InputDropDown.tsx

@@ -14,7 +14,6 @@ const InputDropDown = ({
   floatingIcon,
   onPressFloatingIcon,
   size = 'small',
-  onPress,
   placeholder,
   errorMessage,
   disabled = false,
@@ -25,9 +24,9 @@ const InputDropDown = ({
   leadingIconColor,
   style,
   params,
-  accessibilityLabel,
   hintText,
   multiline,
+  ...props
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -50,12 +49,12 @@ const InputDropDown = ({
           styles.inputDropDownWrapper,
           {backgroundColor: theme.colors.background.surface},
           getSizeStyle(size, multiline),
-          getBorderColor(theme, false, errorMessage, disabled),
+          getBorderColor(theme, false, errorMessage, disabled as boolean),
         ]}>
         <FloatingView
           floatingValue={floatingValue}
           floatingIconColor={floatingIconColor}
-          disabled={disabled}
+          disabled={disabled as boolean}
           required={required}
           floatingIcon={floatingIcon}
           onPress={onPressFloatingIcon}
@@ -77,9 +76,7 @@ const InputDropDown = ({
               />
             </View>
           )}
-          <View
-            accessibilityLabel={accessibilityLabel}
-            style={styles.textViewDropDown}>
+          <View style={styles.textViewDropDown}>
             <Text
               numberOfLines={multiline ? undefined : 1}
               typography={'body_default_regular'}
@@ -110,8 +107,8 @@ const InputDropDown = ({
         state: 'enabled',
       }}>
       <TouchableOpacity
+        {...props}
         activeOpacity={0.6}
-        onPress={onPress}
         style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView

package/Input/InputMoney.tsx

@@ -37,9 +37,6 @@ const InputMoney = forwardRef(
       onBlur,
       onFocus,
       errorMessage,
-      icon,
-      iconColor,
-      onPressIcon,
       trailing,
       trailingColor,
       onPressTrailing,
@@ -50,7 +47,6 @@ const InputMoney = forwardRef(
       style,
       params,
       defaultValue = '',
-      accessibilityLabel,
       hintText,
       value: _value,
       onPressFloatingIcon,
@@ -119,7 +115,7 @@ const InputMoney = forwardRef(
       const disabledColor = theme.colors.text.disable;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = trailingColor ?? iconColor;
+      let iconTintColor = trailingColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -146,7 +142,6 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               ref={inputRef}
               keyboardType={'number-pad'}
@@ -180,10 +175,10 @@ const InputMoney = forwardRef(
             )}
             <RenderTrailing
               color={iconTintColor}
-              icon={icon}
+              icon={trailing}
               trailing={trailing}
               onPressTrailing={onPressTrailing}
-              onPressIcon={onPressIcon}
+              onPressIcon={onPressTrailing}
               loading={loading}
             />
           </View>

package/Input/InputOTP.tsx

@@ -77,7 +77,6 @@ const InputOTP = forwardRef(
       dataType = 'number',
       params,
       style,
-      accessibilityLabel,
       hintText,
       ...props
     }: InputOTPProps,
@@ -210,7 +209,6 @@ const InputOTP = forwardRef(
           <View style={styles.otpRealInputWrapper}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}

package/Input/InputSearch.tsx

@@ -118,9 +118,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     onFocus,
     onBlur,
     value,
-    icon,
-    iconColor,
-    onPressIcon,
     trailing,
     trailingColor,
     onPressTrailing,
@@ -132,7 +129,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     onPressButtonText,
     params,
     backgroundColor,
-    accessibilityLabel,
     onPress,
     typingData,
     ...props
@@ -202,7 +198,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     return (
       <TextInput
         {...props}
-        accessibilityLabel={accessibilityLabel}
         textAlignVertical="center"
         allowFontScaling={false}
         ref={inputRef}
@@ -239,10 +234,8 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
             />
           </TouchableOpacity>
         )}
-        {!!(icon || trailing) && (
-          <TouchableOpacity
-            style={Styles.row}
-            onPress={onPressTrailing ?? onPressIcon}>
+        {!!trailing && (
+          <TouchableOpacity style={Styles.row} onPress={onPressTrailing}>
             <View
               style={[
                 styles.divider,
@@ -252,8 +245,8 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
               ]}
             />
             <Icon
-              color={iconColor || trailingColor}
-              source={(icon || trailing) as string}
+              color={trailingColor}
+              source={trailing as string}
               style={styles.iconSearchInput}
             />
           </TouchableOpacity>

package/Input/index.tsx

@@ -1,4 +1,8 @@
-import {GestureResponderEvent, TextInputProps, ViewStyle} from 'react-native';
+import {
+  GestureResponderEvent,
+  TextInputProps,
+  TouchableOpacityProps,
+} from 'react-native';
 import Input from './Input';
 import InputDropDown from './InputDropDown';
 import InputMoney from './InputMoney';
@@ -29,24 +33,6 @@ export interface InputProps extends TextInputProps {
    */
   errorMessage?: string;
 
-  /**
-   * @deprecated Use `trailing` instead.
-   * Optional. Represents the name or key of the icon to be displayed in the Input component.
-   */
-  icon?: string;
-
-  /**
-   * @deprecated Use `trailingColor` instead.
-   * Optional. Represents the color of the icon in the Input component.
-   */
-  iconColor?: string;
-
-  /**
-   * @deprecated Use `onPressTrailing` instead.
-   * Optional. callback function to be called when the icon is pressed.
-   */
-  onPressIcon?: () => void;
-
   /**
    * Optional. Represents the name or key of the icon to be displayed in the Input component.
    */
@@ -252,8 +238,7 @@ export type CaretProps = {
   length?: number;
 };
 
-export interface InputDropDownProps
-  extends Omit<InputProps, 'trailing' | 'trailingColor' | 'onPressTrailing'> {
+export interface InputDropDownProps extends TouchableOpacityProps {
   /**
    * Optional. Defines the size of the InputDropDown component.
    * 'small' - A smaller, less prominent input.
@@ -262,39 +247,100 @@ export interface InputDropDownProps
   size?: 'small' | 'large';
 
   /**
-   * Optional. Function to be called when the InputDropDown is pressed.
+   * Optional. Represents the text to be displayed in the InputDropDown component.
    */
-  onPress?: () => void;
+  value?: string;
 
   /**
-   * Optional. If `true`, the user won't be able to interact with the InputDropDown component.
-   * Defaults to `false` if not provided.
+   * Optional. Represents the placeholder text to be displayed in the InputDropDown component.
    */
-  disabled?: boolean;
+  placeholder?: string;
+
+  /**
+   * Optional. Represents the data for the dropdown.
+   */
+  multiline?: boolean;
+
+  /**
+   * Optional. Represents the value for the floating title in the Input component.
+   */
+  floatingValue?: string;
+
+  /**
+   * Optional. Represents the name or key of the floating icon to be displayed in the Input component.
+   */
+  floatingIcon?: string;
+
+  /**
+   * Optional. Represents the error message to be displayed below the Input component when there is an error.
+   */
+  errorMessage?: string;
+
+  /**
+   * @deprecated Use `trailing` instead.
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  icon?: string;
 
   /**
-   * Optional. If `true`, the InputDropDown component is marked as required,
+   * @deprecated Use `onPressTrailing` instead.
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressIcon?: () => void;
+
+  /**
+   * Optional. Represents the color of the floating icon in the Input component.
+   */
+  floatingIconColor?: string;
+
+  /**
+   * Optional. If `true`, the Input component is marked as required,
    * indicating that the user must provide a value before submitting a form.
    * Defaults to `false` if not provided.
    */
   required?: boolean;
 
+  /**
+   * Optional. If `true`,
+   * include spacing when Input not have error message.
+   * Defaults to `false` if not provided.
+   */
+  errorSpacing?: boolean;
+
+  /**
+   *  If true, the icon of input will use be show indicator loading.
+   */
+  loading?: boolean;
+
+  /**
+   *  Optional. Represents the leading icon in the Input component.
+   */
+  leadingIcon?: string;
+
+  /**
+   * Optional. callback function to be called when the leading icon is pressed.
+   */
+  onPressLeadingIcon?: () => void;
+
+  /**
+   * Optional. Represents the color of the leading icon in the Input component.
+   */
+  leadingIconColor?: string;
+
   /**
    * Optional. params for element tracking.
    */
-  params?: {
-    [key: string]: any;
-  };
+  params?: any;
 
   /**
-   * Optional. Represents the style of the InputDropDown component.
+   * Optional. Represents text below the Input component.
    */
-  style?: ViewStyle | ViewStyle[];
+  hintText?: string;
 
   /**
-   * Optional. Represents the data for the dropdown.
+   * Optional. Represents the style of the Input component.
    */
-  multiline?: boolean;
+  onPressFloatingIcon?: () => void;
 }
 
 export type InputRef = {

package/Radio/index.tsx

@@ -15,7 +15,7 @@ const Radio: FC<RadioProps> = ({
   label,
   style,
   params,
-  accessibilityLabel,
+  ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
   const selected = value === groupValue;
@@ -49,9 +49,9 @@ const Radio: FC<RadioProps> = ({
         action: 'click',
       }}>
       <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
-        onPress={onChange}
+        {...props}
         disabled={disabled}
+        onPress={onChange}
         style={[
           style,
           {
@@ -67,7 +67,11 @@ const Radio: FC<RadioProps> = ({
             {marginRight: label ? Spacing.S : 0},
           ]}
         />
-        {!!label && <Text typography={'body_default_regular'} style={styles.radioText}>{label}</Text>}
+        {!!label && (
+          <Text typography={'body_default_regular'} style={styles.radioText}>
+            {label}
+          </Text>
+        )}
       </TouchableOpacity>
     </ComponentContext.Provider>
   );

package/Radio/types.ts

@@ -1,4 +1,4 @@
-import {TouchableOpacityProps, ViewStyle} from 'react-native';
+import {TouchableOpacityProps} from 'react-native';
 
 export interface RadioProps extends TouchableOpacityProps {
   /**
@@ -7,12 +7,6 @@ export interface RadioProps extends TouchableOpacityProps {
    */
   value: any;
 
-  /**
-   * `disabled`: Optional. If `true`, the user won't be able to interact with the Radio component.
-   * Defaults to `false` if not provided.
-   */
-  disabled?: boolean;
-
   /**
    * `label`: Optional. Represents the text label displayed next to the Radio component.
    */
@@ -31,10 +25,7 @@ export interface RadioProps extends TouchableOpacityProps {
   groupValue: any;
 
   /**
-   * `style`: Optional. Used to apply custom styling to the Radio component.
-   * Accepts an object of style properties.
+   * Optional. params for tracking
    */
-  style?: ViewStyle;
-
   params?: any;
 }

package/Switch/index.tsx

@@ -11,7 +11,7 @@ const Switch: FC<SwitchProps> = ({
   disabled = false,
   style,
   params,
-  accessibilityLabel,
+  ...props
 }) => {
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
@@ -31,8 +31,8 @@ const Switch: FC<SwitchProps> = ({
         action: 'click',
       }}>
       <TouchableOpacity
+        {...props}
         disabled={disabled}
-        accessibilityLabel={accessibilityLabel}
         onPress={() => onChange?.(!value)}
         style={[
           style,

package/Switch/types.ts

@@ -1,4 +1,4 @@
-import {TouchableOpacityProps, ViewStyle} from 'react-native';
+import {TouchableOpacityProps} from 'react-native';
 
 export interface SwitchProps extends TouchableOpacityProps {
   /**
@@ -13,16 +13,7 @@ export interface SwitchProps extends TouchableOpacityProps {
   onChange: (value: boolean) => void;
 
   /**
-   * `disabled`: Optional. If `true`, the user won't be able to interact with the Switch component.
-   * Defaults to `false` if not provided.
+   * Optional. params for tracking
    */
-  disabled?: boolean;
-
-  /**
-   * `style`: Optional. Used to apply custom styling to the Switch component.
-   * Accepts an object of style properties.
-   */
-  style?: ViewStyle;
-
   params?: any;
 }

package/Tag/index.tsx

@@ -31,8 +31,6 @@ const Tag: FC<TagProps> = ({
   size = 'large',
   style,
   customColor,
-  accessibilityLabelContainer,
-  accessibilityLabelText,
 }) => {
   let labelColor = textColor[color];
   let tagColor = backgroundColor[color];
@@ -62,9 +60,7 @@ const Tag: FC<TagProps> = ({
   }
 
   return (
-    <View
-      style={[style, sizeStyle, {backgroundColor: tagColor}]}
-      accessibilityLabel={accessibilityLabelContainer}>
+    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
       {!!icon && (
         <Icon
           style={styles.icon}
@@ -73,10 +69,7 @@ const Tag: FC<TagProps> = ({
           color={labelColor}
         />
       )}
-      <Text
-        color={labelColor}
-        typography={'label_s_medium'}
-        accessibilityLabel={accessibilityLabelText}>
+      <Text color={labelColor} typography={'label_s_medium'}>
         {label}
       </Text>
     </View>

package/Tag/types.ts

@@ -33,16 +33,4 @@ export type TagProps = {
    * that can be applied to the Tag component.
    */
   customColor?: string;
-
-  /**
-   * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
-   * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
-   */
-  accessibilityLabelContainer?: string;
-
-  /**
-   * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
-   * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
-   */
-  accessibilityLabelText?: string;
 };

package/package.json

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