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

package/src/foundations/CheckBox/index.tsx

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,232 @@
+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

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

package/src/foundations/Consts/styles.ts

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,121 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,12 @@
+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 };