sapo-components-ui-rn 1.0.0

package/src/components/View/index.tsx

@@ -0,0 +1,175 @@
+import React from "react";
+import {
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+
+interface ViewProps {
+  row?: boolean;
+  full?: boolean;
+  justifyCenter?: boolean;
+  justifyBetween?: boolean;
+  alignCenter?: boolean;
+  center?: boolean;
+  gap?: number;
+  color?: any;
+  backgroundColor?: any;
+  width?: number | `${number}%`;
+  height?: number | `${number}%`;
+  onPress?: () => void;
+  padding?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  disabled?: boolean;
+  activeOpacity?: number;
+  paddingBottom?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingTop?: number;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  alignEnd?: boolean;
+  wrap?: boolean;
+  borderBottomWidth?: number;
+  borderBottomColor?: string;
+  borderRadius?: number;
+  borderWidth?: number;
+  borderColor?: string;
+}
+const ViewCustom = ({
+  row,
+  full,
+  justifyCenter,
+  justifyBetween,
+  alignCenter,
+  center,
+  color,
+  backgroundColor,
+  width,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  marginHorizontal,
+  marginVertical,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  alignEnd,
+  wrap,
+  borderBottomWidth,
+  borderBottomColor,
+  borderRadius,
+  borderWidth,
+  borderColor,
+  style,
+  onPress,
+  activeOpacity,
+  children,
+}: ViewProps) => {
+  const getStyle = () => {
+    const styleCustom: any = {};
+
+    if (row) {
+      styleCustom.flexDirection = "row";
+    }
+    if (full) {
+      styleCustom.flex = 1;
+    }
+    if (justifyCenter) {
+      styleCustom.justifyContent = "center";
+    }
+    if (justifyBetween) {
+      styleCustom.justifyContent = "space-between";
+    }
+    if (alignCenter) {
+      styleCustom.alignItems = "center";
+    }
+    if (center) {
+      styleCustom.justifyContent = "center";
+      styleCustom.alignItems = "center";
+    }
+    if (color) {
+      styleCustom.color = color;
+    }
+    if (backgroundColor) {
+      styleCustom.backgroundColor = backgroundColor;
+    }
+    if (width) {
+      styleCustom.width = width;
+    }
+    if (height) {
+      styleCustom.height = height;
+    }
+    if (padding) {
+      styleCustom.padding = padding;
+    }
+    if (paddingHorizontal) {
+      styleCustom.paddingHorizontal = paddingHorizontal;
+    }
+    if (paddingVertical) {
+      styleCustom.paddingVertical = paddingVertical;
+    }
+    if (marginHorizontal) {
+      styleCustom.marginHorizontal = marginHorizontal;
+    }
+
+    if (marginVertical) {
+      styleCustom.marginVertical = marginVertical;
+    }
+
+    if (paddingLeft) {
+      styleCustom.paddingLeft = paddingLeft;
+    }
+    if (paddingTop) {
+      styleCustom.paddingTop = paddingTop;
+    }
+
+    if (paddingRight) {
+      styleCustom.paddingRight = paddingRight;
+    }
+    if (alignEnd) {
+      styleCustom.alignItems = "flex-end";
+    }
+    if (wrap) {
+      styleCustom.flexWrap = "wrap";
+    }
+    if (borderBottomWidth) {
+      styleCustom.borderBottomWidth = borderBottomWidth;
+    }
+    if (borderBottomColor) {
+      styleCustom.borderBottomColor = borderBottomColor;
+    }
+    if (borderRadius) {
+      styleCustom.borderRadius = borderRadius;
+    }
+    if (borderWidth) {
+      styleCustom.borderWidth = borderWidth;
+    }
+    if (borderColor) {
+      styleCustom.borderColor = borderColor;
+    }
+
+    return StyleSheet.create({ styleCustom }).styleCustom;
+  };
+
+  const defaultStyle = getStyle();
+  const Component = onPress ? TouchableOpacity : View;
+
+  return (
+    <Component
+      activeOpacity={activeOpacity}
+      onPress={onPress}
+      style={[defaultStyle, style]}
+    >
+      {children}
+    </Component>
+  );
+};
+
+export default React.memo(ViewCustom);

package/src/components/ViewVisibleAnimated/index.tsx

@@ -0,0 +1,199 @@
+import React, {
+  useRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+  ForwardedRef,
+} from "react";
+import { Animated, ViewStyle, StyleProp } from "react-native";
+
+export type ViewVisibleAnimatedProps = {
+  scaleEnable?: boolean;
+  translateEnable?: boolean;
+  autoHide?: boolean;
+  onShowDone?: () => void;
+  onDone?: () => void;
+  onShowStart?: () => void;
+  style?: StyleProp<ViewStyle>;
+  delay?: number;
+  duration?: number;
+  timeout?: number;
+  autoShow?: boolean;
+  pointerEvents?: "box-none" | "none" | "box-only" | "auto";
+  scaleType?: "in" | "out";
+  renderHiddenContent?: React.ReactNode;
+  children?: React.ReactNode;
+  disableHiddenContent?: boolean;
+};
+
+const ViewVisibleAnimated = React.memo(
+  React.forwardRef(
+    (
+      {
+        onShowStart,
+        onShowDone,
+        onDone,
+        style,
+        children,
+        autoHide = false,
+        scaleEnable = true,
+        translateEnable = true,
+        delay = 100,
+        duration = 250,
+        timeout = 1000,
+        autoShow = true,
+        pointerEvents = "auto",
+        scaleType = "in",
+        renderHiddenContent = null,
+        disableHiddenContent = false,
+      }: ViewVisibleAnimatedProps,
+      ref: ForwardedRef<{ show: () => void; hide: () => void }>
+    ) => {
+      useImperativeHandle(ref, () => ({
+        hide,
+        show,
+      }));
+
+      const visibleAnimation = useRef(new Animated.Value(0)).current;
+      const translateAnimation = useRef(new Animated.Value(0)).current;
+      const scaleAnimation = useRef(
+        new Animated.Value(scaleType === "in" ? 0 : 3)
+      ).current;
+
+      const [visible, setVisible] = useState(false);
+      let TIME_OUT: NodeJS.Timeout | null = null;
+
+      useEffect(() => {
+        if (autoShow) {
+          TIME_OUT = setTimeout(() => {
+            show();
+          }, delay);
+        }
+        return () => {
+          if (TIME_OUT) clearTimeout(TIME_OUT);
+        };
+      }, []);
+
+      const show = (
+        callback?: () => void,
+        durationShow: number = delay
+      ): void => {
+        handleShow({ callback, durationShow });
+      };
+
+      const handleShow = ({
+        callback,
+        durationShow,
+        position = "top",
+      }: {
+        callback?: () => void;
+        durationShow: number;
+        position?: "top" | "bottom";
+      }) => {
+        if (TIME_OUT) clearTimeout(TIME_OUT);
+        TIME_OUT = setTimeout(() => {
+          onShowStart?.();
+          showAnimation(callback, position);
+        }, durationShow);
+      };
+
+      const showAnimation = (
+        callback?: () => void,
+        position: "top" | "bottom" = "bottom"
+      ) => {
+        setVisible(true);
+        translateAnimation.setValue(position === "bottom" ? 100 : -100);
+
+        Animated.parallel([
+          Animated.timing(scaleAnimation, {
+            toValue: 1,
+            duration,
+            useNativeDriver: true,
+          }),
+          Animated.timing(visibleAnimation, {
+            toValue: 1,
+            duration,
+            useNativeDriver: true,
+          }),
+          Animated.timing(translateAnimation, {
+            toValue: 0,
+            duration,
+            useNativeDriver: true,
+          }),
+        ]).start(() => {
+          callback?.();
+          onShowDone?.();
+          if (autoHide) {
+            TIME_OUT = setTimeout(() => {
+              hide(onDone);
+            }, timeout);
+          }
+        });
+      };
+
+      const hide = (
+        callback?: () => void,
+        durationHide: number = duration
+      ): void => {
+        handleHide({ callback, durationHide });
+      };
+
+      const handleHide = ({
+        durationHide,
+        callback,
+        position = "bottom",
+      }: {
+        durationHide: number;
+        callback?: () => void;
+        position?: "top" | "bottom";
+      }) => {
+        Animated.parallel([
+          Animated.timing(scaleAnimation, {
+            toValue: scaleType === "in" ? 0 : 3,
+            duration: durationHide,
+            useNativeDriver: true,
+          }),
+          Animated.timing(visibleAnimation, {
+            toValue: 0,
+            duration: durationHide,
+            useNativeDriver: true,
+          }),
+          Animated.timing(translateAnimation, {
+            toValue: position === "bottom" ? 300 : -300,
+            duration: durationHide,
+            useNativeDriver: true,
+          }),
+        ]).start(() => {
+          setVisible(false);
+          callback?.();
+        });
+      };
+
+      return (
+        <Animated.View
+          style={[
+            style,
+            {
+              opacity: visibleAnimation,
+              transform: [
+                { scale: scaleEnable ? scaleAnimation : 1 },
+                {
+                  translateY: translateEnable ? translateAnimation : 0,
+                },
+              ],
+            },
+          ]}
+          pointerEvents={visible ? pointerEvents : "none"}
+        >
+          {disableHiddenContent
+            ? children
+            : visible
+            ? children
+            : renderHiddenContent}
+        </Animated.View>
+      );
+    }
+  )
+);
+
+export default ViewVisibleAnimated;

package/src/constants.tsx

@@ -0,0 +1,16 @@
+import { NativeModules, Platform } from 'react-native';
+
+// Use the existence of expo-constants as a heuristic for determining if the
+// status bar is translucent on Android. This should be replaced in the future
+// with react-native-safe-area-context.
+const estimatedStatusBarHeight =
+  NativeModules.NativeUnimoduleProxy?.modulesConstants?.ExponentConstants
+    ?.statusBarHeight ?? 0;
+
+export const APPROX_STATUSBAR_HEIGHT = Platform.select({
+  android: estimatedStatusBarHeight,
+  ios:
+    typeof Platform.Version === 'number' && Platform.Version < 11
+      ? estimatedStatusBarHeight
+      : 0,
+});

package/src/core/theming.tsx

@@ -0,0 +1,144 @@
+import type { ComponentType } from "react";
+import React from "react";
+import { useColorScheme } from "react-native";
+
+import { $DeepPartial, createTheming } from "@callstack/react-theme-provider";
+
+import { DarkTheme, LightTheme } from "../styles/themes";
+import type { InternalTheme, AppTheme, NavigationTheme } from "../types";
+
+export const DefaultTheme = LightTheme;
+
+const {
+  ThemeProvider: BaseThemeProvider,
+  withTheme,
+  useTheme: useAppTheme,
+} = createTheming<unknown>(LightTheme);
+
+export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const theme = isDark ? DarkTheme : LightTheme;
+
+  return <BaseThemeProvider theme={theme}>{children}</BaseThemeProvider>;
+};
+
+export function useTheme<T = AppTheme>(overrides?: $DeepPartial<T>) {
+  return useAppTheme<T>(overrides);
+}
+
+export const useInternalTheme = () => {
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const theme = getTheme(isDark);
+
+  return theme;
+};
+
+export const withInternalTheme = <Props extends { theme: InternalTheme }, C>(
+  WrappedComponent: ComponentType<Props & { theme: InternalTheme }> & C
+) => withTheme<Props, C>(WrappedComponent);
+
+export const defaultThemesByVersion = {
+  light: LightTheme,
+  dark: DarkTheme,
+};
+
+export const getTheme = <Scheme extends boolean = false>(
+  isDark: Scheme = false as Scheme
+): (typeof defaultThemesByVersion)[Scheme extends true ? "dark" : "light"] => {
+  const scheme = isDark ? "dark" : "light";
+
+  return defaultThemesByVersion[scheme];
+};
+
+// eslint-disable-next-line no-redeclare
+export function adaptNavigationTheme(themes: {
+  reactNavigationLight: NavigationTheme;
+  materialLight?: AppTheme;
+}): {
+  LightTheme: NavigationTheme;
+};
+// eslint-disable-next-line no-redeclare
+export function adaptNavigationTheme(themes: {
+  reactNavigationDark: NavigationTheme;
+  materialDark?: AppTheme;
+}): {
+  DarkTheme: NavigationTheme;
+};
+// eslint-disable-next-line no-redeclare
+export function adaptNavigationTheme(themes: {
+  reactNavigationLight: NavigationTheme;
+  reactNavigationDark: NavigationTheme;
+  materialLight?: AppTheme;
+  materialDark?: AppTheme;
+}): { LightTheme: NavigationTheme; DarkTheme: NavigationTheme };
+// eslint-disable-next-line no-redeclare
+export function adaptNavigationTheme(themes: any) {
+  const {
+    reactNavigationLight,
+    reactNavigationDark,
+    materialLight,
+    materialDark,
+  } = themes;
+
+  const getAdaptedTheme = (
+    navigationTheme: NavigationTheme,
+    AppTheme: AppTheme
+  ) => {
+    return {
+      ...navigationTheme,
+      colors: {
+        ...navigationTheme.colors,
+        primary: AppTheme.colors.surfaceBrandDefault,
+        background: AppTheme.colors.backgroundPrimary,
+        card: AppTheme.colors.elevation.level2,
+        text: AppTheme.colors.backgroundPrimary,
+        border: AppTheme.colors.borderPrimaryDefault,
+        notification: AppTheme.colors.surfaceErrorDefault,
+      },
+    };
+  };
+
+  const AppThemes = {
+    light: materialLight || LightTheme,
+    dark: materialDark || DarkTheme,
+  };
+
+  if (reactNavigationLight && reactNavigationDark) {
+    const modes = ["light", "dark"] as const;
+
+    const NavigationThemes = {
+      light: reactNavigationLight,
+      dark: reactNavigationDark,
+    };
+
+    const { light: adaptedLight, dark: adaptedDark } = modes.reduce(
+      (prev, curr) => {
+        return {
+          ...prev,
+          [curr]: getAdaptedTheme(NavigationThemes[curr], AppThemes[curr]),
+        };
+      },
+      {
+        light: reactNavigationLight,
+        dark: reactNavigationDark,
+      }
+    );
+
+    return {
+      LightTheme: adaptedLight,
+      DarkTheme: adaptedDark,
+    };
+  }
+
+  if (reactNavigationDark) {
+    return {
+      DarkTheme: getAdaptedTheme(reactNavigationDark, AppThemes.dark),
+    };
+  }
+
+  return {
+    LightTheme: getAdaptedTheme(reactNavigationLight, AppThemes.light),
+  };
+}

package/src/icons/IconArrowDown.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import { SvgProps } from "react-native-svg";
+
+const IconArrowDown = (props: SvgProps) => (
+  <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
+    <Path
+      d="M18.0107 9.70166L12 15.7124L5.98926 9.70166L7.40332 8.2876L12 12.8843L16.5967 8.2876L18.0107 9.70166Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconArrowDown;

package/src/icons/IconCheckbox.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import Svg, { Rect } from "react-native-svg";
+import { SvgProps } from "react-native-svg";
+
+const IconCheckbox = (props: SvgProps) => (
+  <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
+    <Rect
+      x={2.75}
+      y={2.75}
+      width={18.5}
+      height={18.5}
+      rx={5.25}
+      fill="currentColor"
+      stroke="#A1A5AB"
+      strokeWidth={1.5}
+    />
+  </Svg>
+);
+
+export default IconCheckbox;

package/src/icons/IconCheckboxActive.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import Svg, { Rect, Path } from "react-native-svg";
+import { SvgProps } from "react-native-svg";
+
+const IconCheckboxActive = (props: SvgProps) => (
+  <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
+    <Rect x={2} y={2} width={20} height={20} rx={6} fill="currentColor" />
+    <Path
+      d="M17.7745 8.32544L10.4245 15.6751L6.74951 12.0004"
+      stroke="white"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default IconCheckboxActive;

package/src/icons/IconClearText.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import { SvgProps } from "react-native-svg";
+
+const IconClearText = (props: SvgProps) => (
+  <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
+    <Path
+      d="M12 2.00043C17.53 2.00043 22 6.47046 22 12.0004C21.9997 17.5302 17.5298 22.0004 12 22.0004C6.47016 22.0004 2.00026 17.5302 2 12.0004C2.00004 6.47046 6.47003 2.00043 12 2.00043ZM12 10.5903L9.41016 8.00043L8 9.40961L10.5898 12.0004L8 14.5903L9.41016 16.0004L12 13.4096L14.5898 16.0004L16 14.5903L13.4102 12.0004L16 9.40961L14.5898 8.00043L12 10.5903Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconClearText;

package/src/icons/IconRadio.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import Svg, { Circle } from "react-native-svg";
+import { SvgProps } from "react-native-svg";
+
+const IconRadio = (props: SvgProps) => (
+  <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
+    <Circle cx={12} cy={12} r={9.25} stroke="#A1A5AB" strokeWidth={1.5} />
+  </Svg>
+);
+
+export default IconRadio;

package/src/icons/IconRadioActive.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import Svg, { Circle } from "react-native-svg";
+import { SvgProps } from "react-native-svg";
+
+const IconRadioActive = (props: SvgProps) => (
+  <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
+    <Circle cx={12} cy={12} r={9.25} stroke="currentColor" strokeWidth={1.5} />
+    <Circle cx={12} cy={12} r={6} fill="currentColor" />
+  </Svg>
+);
+
+export default IconRadioActive;

package/src/icons/IconRadioDisable.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import Svg, { Circle } from "react-native-svg";
+import { SvgProps } from "react-native-svg";
+
+const IconRadioDisable = (props: SvgProps) => (
+  <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
+    <Circle cx={12} cy={12} r={9.25} stroke="#E5E7EB" strokeWidth={1.5} />
+    <Circle cx={12} cy={12} r={6} fill="#F3F4F6" />
+  </Svg>
+);
+
+export default IconRadioDisable;

package/src/index.ts

@@ -0,0 +1,51 @@
+export { ThemeColors } from "./styles/themes/tokens";
+export { CONSTANTS } from "./styles/themes/tokens";
+export {
+  useTheme,
+  ThemeProvider,
+  DefaultTheme,
+  adaptNavigationTheme,
+} from "./core/theming";
+export * from "./styles/themes";
+
+export { default as shadow } from "./styles/shadow";
+export { default as overlay } from "./styles/overlay";
+export { default as configureFonts } from "./styles/fonts";
+export { default as ActivityIndicator } from "./components/ActivityIndicator";
+export { default as ProgressBar } from "./components/ProgressBar";
+export { default as Switch } from "./components/Switch/Switch";
+export { default as TextInput } from "./components/TextInput/TextInput";
+export { default as Button } from "./components/Button";
+export { default as ButtonIcon } from "./components/ButtonIcon";
+export { default as FloatingButton } from "./components/FloatingButton";
+export { default as Text } from "./components/Text";
+export { default as Toast } from "./components/Toast";
+export { default as View } from "./components/View";
+export { default as Spacer } from "./components/Spacer";
+export { default as Image } from "./components/Image";
+export { default as Badge } from "./components/Badge";
+export { default as CountingDot } from "./components/CountingDot";
+export { default as ChipBar } from "./components/ChipBar";
+export { default as Checkbox } from "./components/Checkbox";
+export { default as RadioButton } from "./components/RadioButton";
+export { default as Avatar } from "./components/Avatar";
+export { default as SelectionField } from "./components/SelectionField";
+
+// Types
+export type { Props as ActivityIndicatorProps } from "./components/ActivityIndicator";
+export type { Props as SwitchProps } from "./components/Switch/Switch";
+export type { Props as TextInputProps } from "./components/TextInput/TextInput";
+export type { Props as TextInputAffixProps } from "./components/TextInput/Adornment/TextInputAffix";
+
+export type {
+  AppTheme,
+  ThemeBase,
+  MD3Elevation,
+  MD3TypescaleKey,
+} from "./types";
+
+// Toast Manager
+export * from "./utils/toast-manager";
+
+// Toast Provider
+export { default as ToastProvider } from "./components/Toast/ToastProvider";