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

package/src/foundations/CheckBox/index.tsx

@@ -1,104 +0,0 @@
-import React, { FC, useContext } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { CheckBoxProps } from './types';
-import styles from './styles';
-import { useComponentId } from '../Application';
-import {
-  ApplicationContext,
-  ComponentContext,
-  MiniAppContext,
-} from '../Context';
-import { Text } from '../Text';
-import { Icon } from '../Icon';
-
-const CheckBox: FC<CheckBoxProps> = ({
-  value,
-  disabled = false,
-  onChange,
-  style,
-  label,
-  indeterminate,
-  params,
-  accessibilityState,
-  ...props
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const context = useContext<any>(MiniAppContext);
-  const haveValue = value || indeterminate;
-  const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
-  let borderColor = theme.colors.text.default;
-  let backgroundColor = 'transparent';
-  const componentName = 'CheckBox';
-  const { componentId } = useComponentId(
-    `${componentName}${label ? `/${label}` : ''}`,
-    props.accessibilityLabel,
-  );
-
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  if (haveValue) {
-    borderColor = theme.colors.primary;
-    backgroundColor = theme.colors.primary;
-  }
-
-  if (disabled) {
-    borderColor = theme.colors.border.disable;
-    backgroundColor = 'transparent';
-    if (haveValue) {
-      borderColor = theme.colors.background.tonal;
-      backgroundColor = theme.colors.background.tonal;
-    }
-  }
-
-  return (
-    <ComponentContext.Provider
-      value={{
-        componentName,
-        componentId,
-        params,
-        state: disabled ? 'disabled' : 'filled',
-        action: 'click',
-      }}
-    >
-      <TouchableOpacity
-        {...props}
-        accessibilityLabel={componentId}
-        activeOpacity={0.8}
-        onPress={() => onChange?.(!value)}
-        disabled={disabled}
-        accessibilityState={{
-          checked: haveValue,
-          disabled,
-          ...accessibilityState,
-        }}
-        style={[
-          style,
-          styles.container,
-          showBaseLineDebug && styles.debugBaseLine,
-        ]}
-      >
-        <View
-          style={[
-            { borderColor, backgroundColor, borderWidth: 1 },
-            styles.checkbox,
-          ]}
-        >
-          {haveValue && (
-            <Icon
-              color={theme.colors.background.surface}
-              size={20}
-              source={iconSource}
-            />
-          )}
-        </View>
-        {!!label && (
-          <Text typography={'body_default_regular'} style={styles.label}>
-            {label}
-          </Text>
-        )}
-      </TouchableOpacity>
-    </ComponentContext.Provider>
-  );
-};
-
-export { CheckBox };

package/src/foundations/CheckBox/styles.ts

@@ -1,17 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { Radius, Spacing, Colors } from '../Consts';
-
-export default StyleSheet.create({
-  checkbox: {
-    width: 20,
-    height: 20,
-    borderRadius: Radius.XS,
-    borderWidth: 2,
-    marginRight: Spacing.S,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  container: { flexDirection: 'row', alignItems: 'center' },
-  label: { flexShrink: 1 },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});

package/src/foundations/CheckBox/types.ts

@@ -1,37 +0,0 @@
-import {TouchableOpacityProps} from 'react-native';
-
-export interface CheckBoxProps extends TouchableOpacityProps {
-  /**
-   * Represents whether the CheckBox is currently checked (`true`) or unchecked (`false`).
-   */
-  value: boolean;
-
-  /**
-   *  Optional. If `true`, the user won't be able to interact with the CheckBox.
-   * Defaults to `false` if not provided.
-   */
-  disabled?: boolean;
-
-  /**
-   *  Optional. Represents the text label displayed next to the CheckBox.
-   */
-  label?: string;
-
-  /**
-   *  A callback function that is called when the value of the CheckBox changes.
-   * Receives the new value of the CheckBox as a parameter.
-   */
-  onChange: (value: boolean) => void;
-
-  /**
-   *  Optional. If `true`, the CheckBox will be in an indeterminate state,
-   * which is typically used to represent a "mixed" or "partial" selection state.
-   * Defaults to `false` if not provided.
-   */
-  indeterminate?: boolean;
-
-  /**
-   * Optional. Params auto tracking component.
-   */
-  params?: any;
-}

package/src/foundations/Consts/colors+spacing+radius.ts

@@ -1,232 +0,0 @@
-import {Platform} from 'react-native';
-
-const Colors = {
-  black_01: '#ffffff',
-  black_02: '#f9f9f9',
-  black_03: '#f0f0f0',
-  black_04: '#e8e8e8',
-  black_05: '#e5e5e5',
-  black_06: '#d8d8d8',
-  black_07: '#cccccc',
-  black_08: '#c6c6c6',
-  black_09: '#b9b9b9',
-  black_10: '#a0a0a0',
-  black_11: '#878787',
-  black_12: '#727272',
-  black_13: '#646464',
-  black_14: '#565656',
-  black_15: '#484848',
-  black_16: '#404040',
-  black_17: '#303233',
-  black_18: '#242424',
-  black_19: '#18191a',
-  black_20: '#000000',
-  pink_01: '#bc2678',
-  pink_02: '#d42a87',
-  pink_03: '#eb2f96',
-  pink_04: '#ed43a0',
-  pink_05: '#ef59ab',
-  pink_06: '#f382c0',
-  pink_07: '#f7acd5',
-  pink_08: '#fbd5ea',
-  pink_09: '#fdeaf4',
-  pink_10: '#fef4fa',
-  pink_11: '#fef8fc',
-  pink_MoMo_Branding: '#a50064',
-  violet_01: '#7822c0',
-  violet_02: '#8726d8',
-  violet_03: '#962af0',
-  violet_04: '#a03ff1',
-  violet_05: '#ab55f3',
-  violet_06: '#c07ff6',
-  violet_07: '#d5aaf9',
-  violet_08: '#ead4fc',
-  violet_09: '#f4e9fd',
-  violet_10: '#faf4fe',
-  violet_11: '#fcf8fe',
-  violet_11_stroke: '#dfe1e5',
-  indigo_01: '#3e3ccc',
-  indigo_02: '#4644e6',
-  indigo_03: '#4e4bff',
-  indigo_04: '#5f5dff',
-  indigo_05: '#716fff',
-  indigo_06: '#9593ff',
-  indigo_07: '#b8b7ff',
-  indigo_08: '#dcdbff',
-  indigo_09: '#ededff',
-  indigo_10: '#f6f6ff',
-  indigo_11: '#f9f9ff',
-  blue_01: '#0062cc',
-  blue_02: '#006ee6',
-  blue_03: '#007aff',
-  blue_04: '#1987ff',
-  blue_05: '#3395ff',
-  blue_06: '#66afff',
-  blue_07: '#99caff',
-  blue_08: '#cce4ff',
-  blue_09: '#e5f1ff',
-  blue_10: '#f2f8ff',
-  blue_11: '#f7fbff',
-  mint_01: '#0f9b9b',
-  mint_02: '#11afaf',
-  mint_03: '#13c2c2',
-  mint_04: '#2ac8c8',
-  mint_05: '#42cece',
-  mint_06: '#71dada',
-  mint_07: '#a1e7e7',
-  mint_08: '#d0f3f3',
-  mint_09: '#e7f8f8',
-  mint_10: '#f3fcfc',
-  mint_11: '#f8fdfd',
-  green_01: '#2a9f47',
-  green_02: '#2fb350',
-  green_03: '#34c759',
-  green_04: '#48cc69',
-  green_05: '#5dd27a',
-  green_06: '#85dd9b',
-  green_07: '#aee9bd',
-  green_08: '#d6f4de',
-  green_09: '#eaf9ee',
-  green_10: '#f5fcf6',
-  green_11: '#f9fdfa',
-  lime_01: '#80ae0e',
-  lime_02: '#90c30f',
-  lime_03: '#a0d911',
-  lime_04: '#a9dc28',
-  lime_05: '#b3e141',
-  lime_06: '#c6e870',
-  lime_07: '#d9f0a0',
-  lime_08: '#ecf7cf',
-  lime_09: '#f5fbe7',
-  lime_10: '#fafdf3',
-  lime_11: '#fcfef8',
-  yellow_01: '#cca300',
-  yellow_02: '#e6b800',
-  yellow_03: '#ffcc00',
-  yellow_04: '#ffd119',
-  yellow_05: '#ffd633',
-  yellow_06: '#ffe066',
-  yellow_07: '#ffeb99',
-  yellow_08: '#fff5cc',
-  yellow_09: '#fff9e5',
-  yellow_10: '#fffcf2',
-  yellow_11: '#fffdf7',
-  gold_01: '#c87012',
-  gold_02: '#e17e14',
-  gold_03: '#fa8c16',
-  gold_04: '#fa972d',
-  gold_05: '#fba345',
-  gold_06: '#fcba73',
-  gold_07: '#fdd1a2',
-  gold_08: '#fee8d0',
-  gold_09: '#fef3e7',
-  gold_10: '#fff9f3',
-  gold_11: '#fefbf8',
-  orange_01: '#c84316',
-  orange_02: '#e14c19',
-  orange_03: '#fa541c',
-  orange_04: '#fa6532',
-  orange_05: '#fb7649',
-  orange_06: '#fc9877',
-  orange_07: '#fdbba4',
-  orange_08: '#feddd2',
-  orange_09: '#feede8',
-  orange_10: '#fff6f3',
-  orange_11: '#fefaf8',
-  red_01: '#c41b24',
-  red_02: '#dd1f29',
-  red_03: '#f5222d',
-  red_04: '#f63842',
-  red_05: '#f74e57',
-  red_06: '#f97a81',
-  red_07: '#fba7ab',
-  red_08: '#fdd3d5',
-  red_09: '#fee8ea',
-  red_10: '#fef4f4',
-  red_11: '#fef8f8',
-};
-const Spacing = {
-  XXS: 2,
-  XS: 4,
-  S: 8,
-  M: 12,
-  L: 16,
-  XL: 24,
-  XXL: 32,
-  Size3XL: 48,
-  Size4XL: 56,
-  Size5XL: 64,
-};
-
-const Radius = {
-  XXS: 2,
-  XS: 4,
-  S: 8,
-  M: 12,
-  L: 16,
-  XL: 24,
-};
-
-const Shadow = {
-  Dark: Platform.select({
-    ios: {
-      shadowColor: Colors.black_17,
-      shadowOffset: {
-        width: 2,
-        height: 2,
-      },
-      shadowOpacity: 0.25,
-      shadowRadius: 10,
-    },
-    android: {
-      shadowColor: Colors.black_20,
-      shadowOffset: {
-        width: 0,
-        height: 3,
-      },
-      shadowOpacity: 0.29,
-      shadowRadius: 4.65,
-
-      elevation: 7,
-    },
-  }),
-
-  Light: Platform.select({
-    ios: {
-      shadowColor: Colors.black_17,
-      shadowOffset: {
-        width: 2,
-        height: 2,
-      },
-      shadowOpacity: 0.07,
-      shadowRadius: 10,
-    },
-    android: {
-      shadowColor: Colors.black_10,
-      shadowOffset: {
-        width: 1,
-        height: 3,
-      },
-      shadowOpacity: 0.29,
-      shadowRadius: 4.65,
-
-      elevation: 6,
-    },
-  }),
-
-  Pink: Platform.select({
-    ios: {
-      shadowColor: '#e27eb5',
-      shadowOffset: {width: 0, height: 6},
-      shadowOpacity: 0.25,
-      shadowRadius: 8,
-    },
-    android: {
-      elevation: 16,
-      shadowColor: '#e27eb5',
-      shadowOpacity: 0.25,
-    },
-  }),
-};
-
-export {Colors, Spacing, Radius, Shadow};

package/src/foundations/Consts/index.ts

@@ -1,4 +0,0 @@
-export * from './colors+spacing+radius';
-export * from './theme';
-export * from './styles';
-export const GRIDVIEW = false;

package/src/foundations/Consts/styles.ts

@@ -1,52 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-const Styles = StyleSheet.create({
-  flex: {
-    flex: 1,
-  },
-  flexCenter: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  rowSpace: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  rowCenter: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  rowWrap: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  columnSpace: {
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  columnSpaceRight: {
-    flexDirection: 'column',
-    alignItems: 'flex-end',
-    justifyContent: 'space-between',
-  },
-  columnCenter: {
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  columnCenterRight: {
-    flexDirection: 'column',
-    alignItems: 'flex-end',
-    justifyContent: 'center',
-  },
-});
-
-export {Styles};

package/src/foundations/Consts/theme.ts

@@ -1,121 +0,0 @@
-import {Context, Theme} from '../Application/types';
-import {Colors} from './colors+spacing+radius';
-
-const defaultTheme: Theme = {
-  dark: false,
-  colors: {
-    primary: Colors.pink_03,
-    secondary: Colors.pink_07,
-    gradient: '#FDCADE',
-    background: {
-      default: '#f2f2f6',
-      surface: Colors.black_01,
-      tonal: Colors.pink_09,
-      pressed: '#dfdfe6',
-      selected: Colors.pink_10,
-      disable: '#ebebf2',
-    },
-    text: {
-      default: Colors.black_17,
-      secondary: Colors.black_15,
-      hint: Colors.black_12,
-      disable: Colors.black_08,
-    },
-    border: {
-      default: Colors.black_04,
-      disable: Colors.black_02,
-    },
-    success: {
-      primary: Colors.green_03,
-      secondary: Colors.green_07,
-      container: Colors.green_08,
-    },
-    warning: {
-      primary: Colors.orange_03,
-      secondary: Colors.orange_07,
-      container: Colors.orange_08,
-    },
-    error: {
-      primary: Colors.red_03,
-      secondary: Colors.red_07,
-      container: Colors.red_08,
-    },
-    highlight: {
-      primary: Colors.mint_03,
-      secondary: Colors.mint_07,
-      container: Colors.mint_08,
-    },
-    interactive: {
-      primary: Colors.blue_03,
-      secondary: Colors.blue_07,
-      container: Colors.blue_08,
-    },
-  },
-  font: 'SFProText',
-  assets: {},
-};
-
-const defaultDarkTheme: Theme = {
-  dark: true,
-  colors: {
-    primary: Colors.pink_04,
-    secondary: Colors.pink_08,
-    gradient: '#FDCADE',
-    background: {
-      default: '#121212', // Dark background
-      surface: '#1e1e1e', // Slightly lighter surface background
-      tonal: Colors.pink_10,
-      pressed: '#1a1a1a', // Pressed state background
-      selected: Colors.pink_11,
-      disable: '#303030', // Disabled state background
-    },
-    text: {
-      default: '#ffffff', // White text for better contrast
-      secondary: '#b0b0b0', // Light gray secondary text
-      hint: '#727272', // Hint text color
-      disable: '#505050', // Disabled text color
-    },
-    border: {
-      default: '#2a2a2a', // Darker borders
-      disable: '#242424', // Disabled state border color
-    },
-    success: {
-      primary: Colors.green_03,
-      secondary: Colors.green_07,
-      container: Colors.green_08,
-    },
-    warning: {
-      primary: Colors.orange_03,
-      secondary: Colors.orange_07,
-      container: Colors.orange_08,
-    },
-    error: {
-      primary: Colors.red_03,
-      secondary: Colors.red_07,
-      container: Colors.red_08,
-    },
-    highlight: {
-      primary: Colors.mint_03,
-      secondary: Colors.mint_07,
-      container: Colors.mint_08,
-    },
-    interactive: {
-      primary: Colors.blue_03,
-      secondary: Colors.blue_07,
-      container: Colors.blue_08,
-    },
-  },
-  font: 'SFProText',
-  assets: {},
-};
-
-const defaultContext: Context = {
-  theme: defaultTheme,
-  navigator: undefined,
-  showGrid: false,
-  translate: () => {
-    return '';
-  },
-};
-
-export {defaultContext, defaultTheme, defaultDarkTheme};

package/src/foundations/Context/index.ts

@@ -1,27 +0,0 @@
-import { Platform } from 'react-native';
-import { createContext } from 'react';
-import { defaultContext } from '../Consts';
-
-const Context = createContext({});
-const ApplicationContext = createContext(defaultContext);
-
-const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
-const ScreenContext = (Platform as any).ScreenContext ?? Context;
-const ComponentContext = (Platform as any).ComponentContext ?? Context;
-const SkeletonContext = createContext({ loading: false });
-const ScaleSizeContext = createContext<{ scaleSizeMaxRate?: number }>({
-  scaleSizeMaxRate: undefined,
-});
-const TrackingScopeContext = createContext<{ scopeName?: string }>({
-  scopeName: undefined,
-});
-
-export {
-  ApplicationContext,
-  MiniAppContext,
-  ScreenContext,
-  ComponentContext,
-  SkeletonContext,
-  TrackingScopeContext,
-  ScaleSizeContext,
-};

package/src/foundations/Divider/DashDivider.tsx

@@ -1,46 +0,0 @@
-import React, { useContext } from 'react';
-import { View, ViewStyle } from 'react-native';
-import { ApplicationContext } from '../Context';
-import { Spacing } from '../Consts';
-import Svg, { Line } from 'react-native-svg';
-
-export interface DashDividerProps {
-  /**
-   * Custom styles for dash divider
-   */
-  style?: ViewStyle;
-}
-
-const DashDivider: React.FC<DashDividerProps> = ({ style }) => {
-  const { theme } = useContext(ApplicationContext);
-  const borderColor = theme.colors.border.default;
-
-  return (
-    <View
-      style={[
-        {
-          width: '100%',
-          height: 1,
-          marginVertical: Spacing.XS,
-        },
-        style,
-      ]}
-    >
-      <Svg height="1" width="100%">
-        <Line
-          x1="0"
-          y1="0"
-          x2="100%"
-          y2="0"
-          stroke={borderColor}
-          strokeWidth="1"
-          strokeDasharray={`4, 4`}
-          strokeLinecap={'round'}
-          strokeLinejoin={'miter'}
-        />
-      </Svg>
-    </View>
-  );
-};
-
-export { DashDivider };

package/src/foundations/Divider/index.tsx

@@ -1,45 +0,0 @@
-import React, { useContext } from 'react';
-import { View, ViewStyle } from 'react-native';
-import { ApplicationContext } from '../Context';
-import { Spacing } from '../Consts';
-import { DashDivider } from './DashDivider';
-
-export interface DividerProps {
-  /**
-   * Custom styles for divider
-   */
-  style?: ViewStyle;
-
-  /**
-   * Enable margin vertical 4px
-   */
-  useMargin?: boolean;
-
-  type?: 'dash' | 'default';
-}
-
-const Divider: React.FC<DividerProps> = ({
-  style,
-  useMargin = true,
-  type = 'default',
-}) => {
-  const { theme } = useContext(ApplicationContext);
-
-  if (type === 'dash') return <DashDivider style={style} />;
-
-  return (
-    <View
-      style={[
-        style,
-        {
-          height: 1,
-          width: '100%',
-          backgroundColor: theme.colors.border.default,
-          marginVertical: useMargin ? Spacing.XS : 0,
-        },
-      ]}
-    />
-  );
-};
-
-export { Divider };

package/src/foundations/FoundationList/index.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { FlashList, FlashListProps } from '@shopify/flash-list';
-import { FlatListProps } from 'react-native';
-
-type CombinedListProps<ItemT> = FlatListProps<ItemT> &
-  Partial<FlashListProps<ItemT>>;
-
-const FoundationList = <ItemT,>(props: CombinedListProps<ItemT>) => {
-  return <FlashList {...props} />;
-};
-
-export { FoundationList };