sapo-components-ui-rn 1.0.0

package/src/components/ActivityIndicator.tsx

@@ -0,0 +1,238 @@
+import * as React from "react";
+import {
+  Animated,
+  Easing,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
+
+import { useInternalTheme } from "../core/theming";
+import type { ThemeProp } from "../types";
+
+export type Props = React.ComponentPropsWithRef<typeof View> & {
+  /**
+   * Whether to show the indicator or hide it.
+   */
+  animating?: boolean;
+  /**
+   * The color of the spinner.
+   */
+  color?: string;
+  /**
+   * Size of the indicator.
+   */
+  size?: "small" | "large" | number;
+  /**
+   * Whether the indicator should hide when not animating.
+   */
+  hidesWhenStopped?: boolean;
+  style?: StyleProp<ViewStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+const DURATION = 2400;
+
+const ActivityIndicator = ({
+  animating = true,
+  color: indicatorColor,
+  hidesWhenStopped = true,
+  size: indicatorSize = "small",
+  style,
+  theme: themeOverrides,
+  ...rest
+}: Props) => {
+  const theme = useInternalTheme();
+  const { current: timer } = React.useRef<Animated.Value>(
+    new Animated.Value(0)
+  );
+  const { current: fade } = React.useRef<Animated.Value>(
+    new Animated.Value(!animating && hidesWhenStopped ? 0 : 1)
+  );
+
+  const rotation = React.useRef<Animated.CompositeAnimation | undefined>(
+    undefined
+  );
+
+  const {
+    animation: { scale },
+  } = theme;
+
+  const startRotation = React.useCallback(() => {
+    // Show indicator
+    Animated.timing(fade, {
+      duration: 200 * scale,
+      toValue: 1,
+      isInteraction: false,
+      useNativeDriver: true,
+    }).start();
+
+    // Circular animation in loop
+    if (rotation.current) {
+      timer.setValue(0);
+      // $FlowFixMe
+      Animated.loop(rotation.current).start();
+    }
+  }, [scale, fade, timer]);
+
+  const stopRotation = () => {
+    if (rotation.current) {
+      rotation.current.stop();
+    }
+  };
+
+  React.useEffect(() => {
+    if (rotation.current === undefined) {
+      // Circular animation in loop
+      rotation.current = Animated.timing(timer, {
+        duration: DURATION,
+        easing: Easing.linear,
+        // Animated.loop does not work if useNativeDriver is true on web
+        useNativeDriver: Platform.OS !== "web",
+        toValue: 1,
+        isInteraction: false,
+      });
+    }
+
+    if (animating) {
+      startRotation();
+    } else if (hidesWhenStopped) {
+      // Hide indicator first and then stop rotation
+      Animated.timing(fade, {
+        duration: 200 * scale,
+        toValue: 0,
+        useNativeDriver: true,
+        isInteraction: false,
+      }).start(stopRotation);
+    } else {
+      stopRotation();
+    }
+  }, [animating, fade, hidesWhenStopped, startRotation, scale, timer]);
+
+  const color = indicatorColor || theme.colors?.surfaceBrandDefault;
+  const size =
+    typeof indicatorSize === "string"
+      ? indicatorSize === "small"
+        ? 24
+        : 48
+      : indicatorSize
+      ? indicatorSize
+      : 24;
+
+  const frames = (60 * DURATION) / 1000;
+  const easing = Easing.bezier(0.4, 0.0, 0.7, 1.0);
+  const containerStyle = {
+    width: size,
+    height: size / 2,
+    overflow: "hidden" as const,
+  };
+
+  return (
+    <View
+      style={[styles.container, style]}
+      {...rest}
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityState={{ busy: animating }}
+    >
+      <Animated.View
+        style={[{ width: size, height: size, opacity: fade }]}
+        collapsable={false}
+      >
+        {[0, 1].map((index) => {
+          // Thanks to https://github.com/n4kz/react-native-indicators for the great work
+          const inputRange = Array.from(
+            new Array(frames),
+            (_, frameIndex) => frameIndex / (frames - 1)
+          );
+          const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
+            let progress = (2 * frameIndex) / (frames - 1);
+            const rotation = index ? +(360 - 15) : -(180 - 15);
+
+            if (progress > 1.0) {
+              progress = 2.0 - progress;
+            }
+
+            const direction = index ? -1 : +1;
+
+            return `${direction * (180 - 30) * easing(progress) + rotation}deg`;
+          });
+
+          const layerStyle = {
+            width: size,
+            height: size,
+            transform: [
+              {
+                rotate: timer.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [`${0 + 30 + 15}deg`, `${2 * 360 + 30 + 15}deg`],
+                }),
+              },
+            ],
+          };
+
+          const viewportStyle = {
+            width: size,
+            height: size,
+            transform: [
+              {
+                translateY: index ? -size / 2 : 0,
+              },
+              {
+                rotate: timer.interpolate({ inputRange, outputRange }),
+              },
+            ],
+          };
+
+          const offsetStyle = index ? { top: size / 2 } : null;
+
+          const lineStyle = {
+            width: size,
+            height: size,
+            borderColor: color,
+            borderWidth: size / 10,
+            borderRadius: size / 2,
+          };
+
+          return (
+            <Animated.View key={index} style={[styles.layer]}>
+              <Animated.View style={layerStyle}>
+                <Animated.View
+                  style={[containerStyle, offsetStyle]}
+                  collapsable={false}
+                >
+                  <Animated.View style={viewportStyle}>
+                    <Animated.View style={containerStyle} collapsable={false}>
+                      <Animated.View style={lineStyle} />
+                    </Animated.View>
+                  </Animated.View>
+                </Animated.View>
+              </Animated.View>
+            </Animated.View>
+          );
+        })}
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+
+  layer: {
+    ...StyleSheet.absoluteFillObject,
+
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
+export default ActivityIndicator;

package/src/components/Avatar/index.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import View from "../View";
+import Text from "../Text";
+import { useInternalTheme } from "../../core/theming";
+import {
+  StyleProp,
+  ViewStyle,
+  StyleSheet,
+  TextStyle,
+  ImageStyle,
+} from "react-native";
+import Image from "../Image";
+interface AvatarProps {
+  children?: React.ReactNode;
+  name?: string;
+  borderColor?: string;
+  backgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+  textColor?: string;
+  size: 64 | 48 | 24;
+  source?: string;
+  onPress?: () => void;
+  textStyle?: StyleProp<TextStyle>;
+  imageStyle?: StyleProp<ImageStyle>;
+}
+
+const Avatar = ({
+  children,
+  name = "Sapo",
+  backgroundColor,
+  style,
+  textColor,
+  size = 64,
+  source,
+  onPress,
+  textStyle,
+  imageStyle,
+}: AvatarProps) => {
+  const theme = useInternalTheme();
+  const { colors } = theme;
+
+  const getInitials = (name: string) => {
+    const words = name.trim().split(" ");
+    if (words.length === 1) {
+      return words[0][0];
+    }
+    return words[0][0] + words[words.length - 1][0];
+  };
+
+  if (children) {
+    return <View style={style}>{children}</View>;
+  }
+
+  const getSize = (size: number) => {
+    switch (size) {
+      case 64:
+        return 28;
+      case 48:
+        return 20;
+      case 24:
+        return 16;
+      default:
+        return 16;
+    }
+  };
+
+  return (
+    <View
+      onPress={onPress}
+      width={size}
+      height={size}
+      borderRadius={size / 2}
+      center
+      backgroundColor={backgroundColor || colors.surfaceSecondaryDefault}
+      style={[styles.container, style]}
+    >
+      {source ? (
+        <Image
+          useFastImage
+          resizeMode="cover"
+          source={source}
+          style={[{ width: size, height: size }, imageStyle]}
+        />
+      ) : (
+        <Text
+          size={getSize(size)}
+          color={textColor || colors.textSecondary}
+          style={textStyle || { fontWeight: "500" }}
+        >
+          {getInitials(name)}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+  },
+});
+export default Avatar;

package/src/components/Badge/index.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import View from "../View";
+import Text from "../Text";
+import { CONSTANTS } from "../../styles/themes/tokens";
+import { useInternalTheme } from "../../core/theming";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+interface BadgeProps {
+  children?: React.ReactNode;
+  value: string;
+  borderColor?: string;
+  backgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+  textColor?: string;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+const Badge = ({
+  children,
+  value = "1",
+  borderColor,
+  backgroundColor,
+  style,
+  textColor,
+  textStyle,
+}: BadgeProps) => {
+  const theme = useInternalTheme();
+  const { colors } = theme;
+
+  if (children) {
+    return <View style={style}>{children}</View>;
+  }
+  return (
+    <View row>
+      <View
+        borderRadius={CONSTANTS.BORDER_RADIUS_12}
+        borderWidth={CONSTANTS.BORDER_WIDTH_1}
+        borderColor={borderColor || colors.borderPrimaryDefault}
+        backgroundColor={backgroundColor || colors.surfaceSecondaryDefault}
+        paddingHorizontal={CONSTANTS.SPACE_8}
+        paddingVertical={CONSTANTS.SPACE_4}
+        style={style}
+      >
+        <Text
+          size={12}
+          color={textColor || colors.textSecondary}
+          style={textStyle}
+        >
+          {value}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default Badge;

package/src/components/Button/index.tsx

@@ -0,0 +1,162 @@
+//
+//  Created by Dung Nguyen on 08/01/25.
+//
+import React from "react";
+import {
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TouchableOpacityProps,
+  ActivityIndicator,
+  TextStyle,
+} from "react-native";
+
+import { CONSTANTS } from "../../styles/themes/tokens";
+import ScaleButton from "../ScaleButton";
+import Text from "../Text";
+import View from "../View";
+import { useInternalTheme } from "../../core/theming";
+import { ThemeProp } from "../../types";
+import Spacer from "../Spacer";
+
+export interface ButtonProps extends TouchableOpacityProps {
+  style?: StyleProp<ViewStyle>;
+  borderColor?: string;
+  title?: string;
+  backgroundColor?: string;
+  isLoading?: boolean;
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  small?: boolean;
+  textColor?: string;
+  bold?: boolean;
+  size?: number;
+  textStyle?: TextStyle;
+  medium?: boolean;
+  mode?: "outlined" | "contained" | "transparent";
+  onPress?: (res?: any) => void;
+  theme?: ThemeProp;
+}
+const Button = ({
+  style,
+  title,
+  borderColor,
+  isLoading,
+  left,
+  right,
+  small,
+  textStyle,
+  onPress,
+  disabled,
+  backgroundColor,
+  textColor,
+  bold = true,
+  size = 16,
+  medium = false,
+  mode = "contained",
+  theme: themeOverrides,
+  ...props
+}: ButtonProps) => {
+  const theme = useInternalTheme();
+  const { colors } = theme;
+
+  const disabledTextStyle = {
+    color: colors.textBrandDisabled,
+  };
+
+  const renderButtonStyle = () => {
+    switch (mode) {
+      case "outlined":
+        return [styles.border, { borderColor: colors.borderBrandDefault }];
+      case "contained":
+        return [{ backgroundColor: colors.surfaceBrandDefault }];
+      case "transparent":
+        return [
+          { borderColor: colors.borderBrandDefault },
+          { backgroundColor: "transparent" },
+        ];
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <ScaleButton
+        activeOpacity={0.8}
+        onPress={onPress}
+        {...props}
+        disabled={disabled || false}
+      >
+        <View
+          style={[
+            styles.button,
+            {
+              borderRadius: CONSTANTS.BORDER_RADIUS_6,
+            },
+            {
+              backgroundColor: colors.surfaceBrandDefault,
+            },
+            borderColor && { borderColor: borderColor },
+            backgroundColor && { backgroundColor: backgroundColor },
+            renderButtonStyle(),
+            small && styles.small,
+            disabled && [
+              styles.disabled,
+              {
+                borderColor: colors.borderPrimaryDisabled,
+                backgroundColor: colors.surfacePrimaryDisabled,
+              },
+            ],
+            isLoading && { justifyContent: "center" },
+            style,
+          ]}
+          disabled={isLoading}
+        >
+          <Spacer width={left ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16} />
+          {!isLoading && left}
+          {left && <Spacer width={CONSTANTS.SPACE_8} />}
+          {isLoading ? (
+            <ActivityIndicator
+              color={textStyle?.color || colors.borderBrandDefault}
+            />
+          ) : (
+            <Text
+              numberOfLines={1}
+              color={textColor || colors.textOnFillDefault}
+              size={size}
+              bold={bold}
+              medium={medium}
+              style={[disabled && disabledTextStyle, textStyle]}
+            >
+              {title}
+            </Text>
+          )}
+          {right && <Spacer width={CONSTANTS.SPACE_8} />}
+          {!isLoading && right}
+          <Spacer width={right ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16} />
+        </View>
+      </ScaleButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+  },
+  disabled: { opacity: 0.6 },
+  button: {
+    height: CONSTANTS.BUTTON_HEIGHT,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  border: {
+    borderWidth: CONSTANTS.BORDER_WIDTH_1,
+    backgroundColor: "transparent",
+  },
+  small: {
+    height: CONSTANTS.BUTTON_HEIGHT_SMALL,
+  },
+});
+
+export default React.memo(Button);

package/src/components/ButtonIcon/index.tsx

@@ -0,0 +1,98 @@
+//
+//  Created by Dung Nguyen on 25/04/25.
+//
+import React from "react";
+import {
+  ActivityIndicator,
+  StyleProp,
+  ViewStyle,
+  StyleSheet,
+} from "react-native";
+import View from "../View";
+import { memoDeepEqual } from "../../utils/function-utils";
+import ScaleButton from "../ScaleButton";
+import { CONSTANTS } from "../../styles/themes/tokens";
+import { useInternalTheme } from "../../core/theming";
+
+export interface ButtonIconProps {
+  isLoading?: boolean;
+  disabled?: boolean;
+  onPress?: (val?: any) => void;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  size?: number;
+  hiddenBackground?: boolean;
+  props?: object;
+  border?: boolean;
+  circle?: boolean;
+  backgroundColor?: string;
+  borderColor?: string;
+}
+const ButtonIcon = ({
+  isLoading,
+  disabled,
+  onPress,
+  style,
+  hiddenBackground = false,
+  size = CONSTANTS.BUTTON_HEIGHT,
+  border,
+  children,
+  circle,
+  backgroundColor,
+  borderColor,
+  props,
+}: ButtonIconProps) => {
+  const { colors } = useInternalTheme();
+  return (
+    <ScaleButton
+      activeOpacity={0.8}
+      onPress={onPress}
+      {...props}
+      disabled={disabled || false}
+    >
+      <View
+        style={[
+          styles.btn,
+          !hiddenBackground
+            ? {
+                backgroundColor: backgroundColor || colors.surfaceBrandDefault,
+              }
+            : {
+                backgroundColor: "transparent",
+              },
+          {
+            width: size,
+            height: size,
+          },
+          border && {
+            borderWidth: CONSTANTS.BORDER_WIDTH_1,
+            borderColor: borderColor || colors.borderBrandDefault,
+            backgroundColor: backgroundColor || colors.surfacePrimaryDefault,
+          },
+          circle && {
+            borderRadius: size / 2,
+          },
+
+          disabled && {
+            borderWidth: 0,
+            backgroundColor: colors.surfaceBrandDisabled,
+          },
+          style,
+        ]}
+        {...props}
+      >
+        {isLoading ? <ActivityIndicator size={"small"} /> : children}
+      </View>
+    </ScaleButton>
+  );
+};
+
+const styles = StyleSheet.create({
+  btn: {
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: CONSTANTS.BORDER_RADIUS_6,
+  },
+});
+
+export default memoDeepEqual(ButtonIcon);