@meatech/payblend_app_ui_component 1.0.69

package/components/SnapImageCarousel/SnapImageCarousel.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import Carousel, { CarouselProps } from "react-native-snap-carousel";
+import { useSharedValue } from "react-native-reanimated";
+import { PaginationItem } from "./PaginationItem";
+import { CardStatusThumbnail } from "./CardStatusThumbnail";
+import { THUMBNAIL_HEIGHT } from "./consts";
+import { deviceWidth, metrics } from "@ui/themes";
+import { SnapImageCarouselProps, TSnapImageCarouselItem } from "./types";
+
+export const SnapImageCarousel = <T extends unknown>({
+  cardList,
+  hidePagination,
+  isLoading,
+  onCreate,
+  ...props
+}: SnapImageCarouselProps<T>) => {
+  const animation = useSharedValue<number>(0);
+
+  const handleSnapToItem: CarouselProps<string>["onScroll"] = (event) => {
+    const index = Math.round(
+      event.nativeEvent.contentOffset.x / (deviceWidth() * 0.55)
+    );
+    if (index >= 0) {
+      animation.value = index;
+    }
+  };
+
+  const renderItem = ({
+    item,
+    index,
+  }: {
+    item: TSnapImageCarouselItem<T>;
+    index: number;
+  }) => (
+    <CardStatusThumbnail
+      key={index.toString()}
+      animation={animation}
+      index={index}
+      onCreate={onCreate}
+      isLoading={isLoading}
+      {...item}
+    />
+  );
+
+  const renderPaginationItem = (_: unknown, index: number) => (
+    <PaginationItem
+      key={index.toString()}
+      animation={animation}
+      index={index}
+    />
+  );
+
+  // if (cardList?.length === 0) {
+  //   return (
+  //     <CardStatusThumbnail<T>
+  //       style={styles.carousel}
+  //       type={ECardThumbnailType.NOT_ISSUED}
+  //       photo={thumbnailDefault}
+  //       onCreate={onCreate}
+  //     />
+  //   );
+  // }
+
+  return (
+    <>
+      <View style={styles.carousel}>
+        <Carousel<TSnapImageCarouselItem<T>>
+          data={cardList}
+          renderItem={renderItem}
+          sliderWidth={deviceWidth()}
+          sliderHeight={THUMBNAIL_HEIGHT}
+          itemWidth={deviceWidth() * 0.55}
+          itemHeight={THUMBNAIL_HEIGHT}
+          inactiveSlideScale={1}
+          inactiveSlideOpacity={1}
+          onScroll={handleSnapToItem}
+          {...props}
+        />
+      </View>
+      {!hidePagination && cardList.length > 0 && (
+        <View style={styles.pagination}>
+          {cardList.map(renderPaginationItem)}
+        </View>
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  carousel: {
+    height: THUMBNAIL_HEIGHT,
+    marginTop: metrics.height.spacingBase,
+  },
+  pagination: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: metrics.width.spacingExtraSmall,
+    paddingVertical: metrics.height.spacingTiny,
+    marginTop: metrics.height.spacingSlightlySmall,
+  },
+});

package/components/SnapImageCarousel/consts.ts

@@ -0,0 +1,11 @@
+import { deviceHeight, deviceWidth } from '@ui/themes';
+
+export const THUMBNAIL_HEIGHT = deviceHeight() * 0.19;
+export const THUMBNAIL_WIDTH = deviceWidth() * 0.7;
+
+export enum ECardThumbnailType {
+  DEFAULT = 'DEFAULT', // Default
+  NOT_ISSUED = 'NOT_ISSUED', // Not released yet
+  SHIPPED = 'SHIPPED', // Card has been sent
+  CANCELED = 'CANCELED', // Canceled
+}

package/components/SnapImageCarousel/index.ts

@@ -0,0 +1,3 @@
+export * from './CardStatusThumbnail';
+export * from './SnapImageCarousel';
+export * from './consts';

package/components/SnapImageCarousel/types.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { SharedValue } from 'react-native-reanimated';
+import { CarouselProps } from 'react-native-snap-carousel';
+import { ECardThumbnailType } from './consts';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export type TSnapImageCarouselItem<T> = Pick<
+  CardStatusThumbnailProps<T>,
+  'photo' | 'type' | 'balance' | 'unit' | 'onCreate'
+>;
+
+export interface SnapImageCarouselProps<T>
+  extends Pick<
+    CarouselProps<string>,
+    | 'onSnapToItem'
+    | 'firstItem'
+    | 'initialNumToRender'
+    | 'loop'
+    | 'loopClonesPerSide'
+  > {
+  cardList: Array<TSnapImageCarouselItem<T>>;
+  hidePagination?: boolean;
+  isLoading?: boolean;
+  onCreate?: (item: T) => void;
+}
+
+export interface PaginationItemProps {
+  index: number;
+  animation: SharedValue<number>;
+}
+
+export interface CardStatusThumbnailProps<T> {
+  style?: StyleProp<ViewStyle>;
+  type?: ECardThumbnailType;
+  photo: string;
+  unit?: string;
+  balance?: string;
+  thumbnailHeight?: number;
+  thumbnailWidth?: number;
+  index?: number;
+  animation?: SharedValue<number>;
+  onCreate?: (item: T) => void;
+  children?: ReactNode;
+  cardItem?: T;
+  isLoading?: boolean;
+}

package/components/Switch/Switch.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import {useState, useEffect} from 'react';
+import {StyleSheet, TouchableWithoutFeedback} from 'react-native';
+import Animated, {
+  interpolateColor,
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  useDerivedValue,
+} from 'react-native-reanimated';
+import {SwitchProps} from './type';
+import {colors, pw} from '@ui/themes';
+import {styleBySize} from './styles';
+
+export const Switch: React.FC<SwitchProps> = ({
+  isEnabled,
+  activeColor = colors.teal['80'],
+  inActiveColor = colors.neutral['60'],
+  onSwitch,
+  size,
+}) => {
+  const resMaxWidth = size === 'small' ? pw(16) : pw(22);
+  const resMinWidth = pw(2);
+
+  const switchTranslate = useSharedValue(0);
+  const [active, setActive] = useState<boolean>(isEnabled || false);
+
+  const progress = useDerivedValue(() => withTiming(active ? resMaxWidth : 0));
+
+  useEffect(() => {
+    setActive(isEnabled as boolean);
+  }, [isEnabled]);
+
+  const containerStyle = size
+    ? styleBySize[size] || styleBySize.medium
+    : styleBySize.medium;
+
+  useEffect(() => {
+    if (active) {
+      switchTranslate.value = resMaxWidth;
+    } else {
+      switchTranslate.value = resMinWidth;
+    }
+  }, [active, switchTranslate, resMaxWidth, resMinWidth]);
+
+  const customSpringStyles = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateX: withSpring(switchTranslate.value, {
+          mass: 1,
+          damping: 15,
+          stiffness: 120,
+          overshootClamping: false,
+          restSpeedThreshold: 0.001,
+          restDisplacementThreshold: 0.001,
+        }),
+      },
+    ],
+  }));
+
+  const backgroundColorStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      progress.value,
+      [0, resMaxWidth],
+      [inActiveColor, activeColor],
+    );
+    return {
+      backgroundColor,
+    };
+  });
+
+  const _onSwitch = async () => {
+    const switchValue = !active;
+    setActive(switchValue);
+    onSwitch && onSwitch(switchValue);
+  };
+
+  return (
+    <TouchableWithoutFeedback onPress={_onSwitch}>
+      <Animated.View
+        style={[
+          styles.container,
+          backgroundColorStyle,
+          {width: containerStyle.width},
+          {height: containerStyle.height},
+        ]}>
+        <Animated.View
+          style={[
+            styles.circle,
+            customSpringStyles,
+            {width: containerStyle.circleSize},
+            {height: containerStyle.circleSize},
+          ]}
+        />
+      </Animated.View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: pw(30),
+    justifyContent: 'center',
+    backgroundColor: colors.neutral['60'],
+  },
+  circle: {
+    borderRadius: pw(30),
+    backgroundColor: colors.white['10'],
+    shadowColor: colors.black['100'],
+    shadowOffset: {
+      width: 0,
+      height: pw(2),
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 2.5,
+    elevation: 4,
+  },
+});

package/components/Switch/index.ts

@@ -0,0 +1 @@
+export * from './Switch';

package/components/Switch/styles.tsx

@@ -0,0 +1,22 @@
+import {pw} from '@ui/themes';
+
+export const resMaxWidth = pw(22);
+export const resMinWidth = pw(2);
+
+export const styleBySize = {
+  small: {
+    width: pw(32),
+    height: pw(18),
+    circleSize: pw(14),
+  },
+  medium: {
+    width: pw(48),
+    height: pw(28),
+    circleSize: pw(24),
+  },
+  large: {
+    width: pw(64),
+    height: pw(36),
+    circleSize: pw(30),
+  },
+};

package/components/Switch/type.ts

@@ -0,0 +1,10 @@
+export type SwitchProps = {
+  isEnabled?: boolean;
+  activeColor?: string;
+  inActiveColor?: string;
+  width?: number;
+  height?: number;
+  circleSize?: number;
+  size?: 'small' | 'medium' | 'large';
+  onSwitch?: (value: boolean) => void;
+};

package/components/Text/index.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {Text as RNText, TextStyle} from 'react-native';
+import {CustomTextProps} from './type';
+import {colorsText, textSize} from './styles';
+
+const Text: React.FC<CustomTextProps> = ({
+  style,
+  color = 'primary',
+  size = 'xs',
+  fontFamily = 'Inter',
+  fontWeight = '400',
+  children,
+  lineHeight,
+  ...props
+}) => {
+  const colorStyle: TextStyle = color ? {color: colorsText[color]} : {};
+  const fontSize: TextStyle = size ? {fontSize: textSize[size]} : {};
+  const textStyle: TextStyle = {
+    fontFamily,
+    fontWeight,
+  };
+
+  const fontWeightStyle: TextStyle = fontWeight ? {fontWeight} : {};
+  return (
+    <RNText
+      adjustsFontSizeToFit={true}
+      style={[
+        colorStyle,
+        fontSize,
+        textStyle,
+        fontWeightStyle,
+        {lineHeight},
+        style,
+      ]}
+      {...props}>
+      {children}
+    </RNText>
+  );
+};
+
+export default Text;

package/components/Text/styles.tsx

@@ -0,0 +1,43 @@
+import {colors, FontFamily, FontSizes} from '@ui/themes';
+
+export const colorsText: Record<string, string> = {
+  primary: colors.neutral[100],
+  secondary: colors.neutral[90],
+  tertiary: colors.neutral[80],
+  disabled: colors.neutral[60],
+  error: colors.red[90],
+  success: colors.green[90],
+  warning: colors.orange[90],
+  info: colors.blue[90],
+  interactive: colors.secondary[100],
+  hover: colors.teal[90],
+  focus: colors.teal[100],
+  active: colors.teal[100],
+  brand: colors.teal[60],
+  white: colors.white[10],
+};
+
+export const textSize: Record<string, number> = {
+  xxxs: FontSizes.font3XS,
+  xxs: FontSizes.fontXXS,
+  xs: FontSizes.fontXS,
+  small: FontSizes.fontSmall,
+  medium: FontSizes.fontMedium,
+  large: FontSizes.fontLarge,
+  xl: FontSizes.fontXL,
+  xxl: FontSizes.fontXXL,
+  xxxl: FontSizes.fontXXXL,
+  xxxxl: FontSizes.fontXXXL,
+};
+
+export const fontText: Record<string, string> = {
+  100: FontFamily.Thin,
+  200: FontFamily.ExtraLight,
+  300: FontFamily.Light,
+  400: FontFamily.Regular,
+  500: FontFamily.Medium,
+  600: FontFamily.SemiBold,
+  700: FontFamily.Bold,
+  800: FontFamily.ExtraBold,
+  900: FontFamily.Black,
+};

package/components/Text/type.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import {TextProps as RNTextProps} from 'react-native';
+export interface CustomTextProps extends RNTextProps {
+  children: React.ReactNode;
+  size?:
+    | 'xxxs'
+    | 'xxs'
+    | 'xs'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'xl'
+    | 'xxl'
+    | 'xxxl'
+    | 'xxxxl';
+  color?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'disabled'
+    | 'error'
+    | 'success'
+    | 'warning'
+    | 'info'
+    | 'interactive'
+    | 'hover'
+    | 'active'
+    | 'focus'
+    | 'brand'
+    | 'white'
+    | 'white';
+  fontFamily?: 'Inter' | string;
+  fontWeight?:
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
+  lineHeight?: number;
+}

package/components/TickItem/index.tsx

@@ -0,0 +1,37 @@
+import {Pressable, View} from 'react-native';
+import * as React from 'react';
+import {Icon} from '@ui/components';
+import Text from '@ui/components/Text';
+import {colors} from '@ui/themes';
+import {TickItemProps} from './type';
+import {styles} from './styles';
+
+export const TickItem = ({
+  isRead,
+  disabled = false,
+  ruleText,
+  handlePress,
+  style,
+}: TickItemProps) => {
+  return (
+    <Pressable
+      disabled={disabled}
+      onPress={handlePress}
+      style={[style, styles.ruleName]}
+    >
+      <View
+        style={[
+          styles.checkBox,
+          {
+            backgroundColor: isRead ? colors.teal[60] : colors.neutral[20],
+          },
+        ]}
+      >
+        <Icon name="ic_checkmark_white" width={16} height={16} />
+      </View>
+      <Text size="small" color="secondary" style={styles.ruleNameText}>
+        {ruleText}
+      </Text>
+    </Pressable>
+  );
+};

package/components/TickItem/styles.tsx

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+import { ph, pw, Space } from "@ui/themes";
+export const styles = StyleSheet.create({
+  ruleName: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Space.xs,
+  },
+  ruleNameText: {
+    lineHeight: ph(21),
+  },
+  checkBox: {
+    width: pw(20),
+    height: ph(20),
+    borderRadius: "50%",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

package/components/TickItem/type.ts

@@ -0,0 +1,8 @@
+import {StyleProp, ViewStyle} from 'react-native';
+export interface TickItemProps {
+  isRead: boolean;
+  disabled?: boolean;
+  ruleText: string;
+  handlePress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}

package/components/Toasts/AnimatedContainer.styles.tsx

@@ -0,0 +1,17 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  base: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  top: {
+    top: 0,
+  },
+  bottom: {
+    bottom: 0,
+  },
+});

package/components/Toasts/AnimatedContainer.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import {Animated, Dimensions, PanResponderGestureState} from 'react-native';
+
+import {usePanResponder, useSlideAnimation, useViewDimensions} from '@ui/hooks';
+import {ReactChildren, ToastPosition} from '@ui/types';
+import {bound} from '@ui/utils';
+import {styles} from './AnimatedContainer.styles';
+
+export type AnimatedContainerProps = {
+  children: ReactChildren;
+  isVisible: boolean;
+  position: ToastPosition;
+  topOffset: number;
+  swipeable: boolean;
+  bottomOffset: number;
+  onHide: () => void;
+  onRestorePosition?: () => void;
+};
+
+/**
+ * Produces a positive damping value.
+ *
+ * To note: `moveY` becomes negative when going off-screen. By making sure the value
+ * produced is always positive, we avoid issues like: https://github.com/calintamas/react-native-toast-message/issues/280
+ */
+export function dampingFor(
+  gesture: PanResponderGestureState,
+  position: ToastPosition,
+) {
+  const {moveY} = gesture;
+
+  switch (position) {
+    case 'bottom': {
+      const {height: screenHeight} = Dimensions.get('screen');
+      return Math.abs(screenHeight - moveY);
+    }
+    case 'top':
+      return Math.abs(moveY);
+    default:
+      throw new Error(`Toast position: ${position} not implemented`);
+  }
+}
+
+export function animatedValueFor(
+  gesture: PanResponderGestureState,
+  position: ToastPosition,
+  damping: number,
+) {
+  const boundValue = (val: number) => bound(val, 0, 2);
+  const {dy} = gesture;
+
+  switch (position) {
+    case 'bottom':
+      return boundValue(1 - dy / damping);
+    case 'top':
+      return boundValue(1 + dy / damping);
+    default:
+      throw new Error(`Toast position: ${position} not implemented`);
+  }
+}
+
+export function AnimatedContainer({
+  children,
+  isVisible,
+  position,
+  topOffset,
+  bottomOffset,
+  onHide,
+  onRestorePosition = () => undefined,
+  swipeable,
+}: AnimatedContainerProps) {
+  const {computeViewDimensions, height} = useViewDimensions();
+
+  const {animatedValue, animate, animationStyles} = useSlideAnimation({
+    position,
+    height,
+    topOffset,
+    bottomOffset,
+  });
+
+  const onDismiss = React.useCallback(() => {
+    animate(0);
+    onHide();
+  }, [animate, onHide]);
+
+  const onRestore = React.useCallback(() => {
+    animate(1);
+    onRestorePosition();
+  }, [animate, onRestorePosition]);
+
+  const computeNewAnimatedValueForGesture = React.useCallback(
+    (gesture: PanResponderGestureState) => {
+      const damping = dampingFor(gesture, position);
+      const newAnimatedValue = animatedValueFor(gesture, position, damping);
+      return newAnimatedValue;
+    },
+    [position],
+  );
+  const {panResponder} = usePanResponder({
+    animatedValue,
+    computeNewAnimatedValueForGesture,
+    onDismiss,
+    onRestore,
+    disable: !swipeable,
+  });
+
+  React.useLayoutEffect(() => {
+    const newAnimationValue = isVisible ? 1 : 0;
+    animate(newAnimationValue);
+  }, [animate, isVisible]);
+
+  return (
+    <Animated.View
+      onLayout={computeViewDimensions}
+      style={[styles.base, styles[position], animationStyles]}
+      // This container View is never the target of touch events but its subviews can be.
+      // By doing this, tapping buttons behind the Toast is allowed
+      pointerEvents={isVisible ? 'box-none' : 'none'}
+      {...panResponder.panHandlers}>
+      {children}
+    </Animated.View>
+  );
+}

package/components/Toasts/BaseToast.styles.tsx

@@ -0,0 +1,26 @@
+import { StyleSheet } from "react-native";
+import { Space } from "@ui/themes";
+export const WIDTH = 340;
+export const BORDER_RADIUS = 6;
+
+export const styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    paddingHorizontal: Space.medium,
+    paddingVertical: Space.xs,
+    width: "95%",
+    borderRadius: BORDER_RADIUS,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: Space.medium,
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "flex-start",
+  },
+  titleText: {
+    marginBottom: Space.xxs,
+    width: "100%",
+  },
+});