@ha_tecno/live-id-sdk 2.13.0 → 2.14.0

package/src/components/HACarouselCalibration/HACarouselItem/styles.ts

@@ -0,0 +1,43 @@
+import { Dimensions } from "react-native";
+import { StyleSheet } from "react-native";
+
+const { width } = Dimensions.get("window");
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20
+  },
+  card: {
+    justifyContent: "center",
+    minHeight: "60%",
+    borderRadius: 20,
+    gap: 20,
+    padding: 20
+  },
+  content: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 20
+  },
+  title: {
+    textAlign: "center"
+  },
+  text: {
+    textAlign: "center"
+  },
+  containerPagination: {
+    alignSelf: "center"
+  },
+  containerButton: {
+    height: 80,
+    width: 80,
+    alignSelf: "center",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 50
+  }
+});

package/src/components/HACarouselCalibration/HAPagination/HAPagination.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Dimensions, View } from "react-native";
+import Animated, { Extrapolation, SharedValue, interpolate, useAnimatedStyle } from "react-native-reanimated";
+import { useTheme } from "../../../theme/theme";
+import { styles } from "./styles";
+
+type PaginationType = {
+  item: {
+    title: string;
+    text: string;
+    ImageComponent?: React.FC<React.SVGProps<SVGSVGElement>>;
+  }[];
+  paginationIndex: number;
+  scrollX: SharedValue<number>;
+};
+
+const { width } = Dimensions.get("screen");
+
+export const HAPagination = ({ item, paginationIndex, scrollX }: PaginationType) => {
+  const { blue, isDark } = useTheme();
+  const dotWithoutFocused = isDark ? "#ffffff25" : "#00000025";
+
+  return (
+    <View style={styles.container}>
+      {item.map((_, index) => {
+        const pgAnimationStyle = useAnimatedStyle(() => {
+          const dotWidth = interpolate(
+            scrollX.value,
+            [(index - 1) * width, index * width, (index + 1) * width],
+            [8, 30, 8],
+            Extrapolation.CLAMP
+          );
+          return { width: dotWidth };
+        });
+
+        return (
+          <Animated.View
+            key={index}
+            style={[
+              {
+                backgroundColor: paginationIndex === index ? blue : dotWithoutFocused
+              },
+              styles.pagination,
+              pgAnimationStyle
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+};

package/src/components/HACarouselCalibration/HAPagination/styles.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    height: 60,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  pagination: {
+    height: 8,
+    width: 8,
+    marginHorizontal: 2,
+    borderRadius: 8
+  }
+});

package/src/components/HACarouselCalibration/data.ts

@@ -0,0 +1,27 @@
+import ExampleCalibration1 from "../../assets/svg/exampleCalibration1.svg";
+import ExampleCalibration2 from "../../assets/svg/exampleCalibration2.svg";
+import FingerPrint from "../../assets/svg/fingerPrint.svg";
+
+const data: { title: string; ImageComponent?: React.FC<React.SVGProps<SVGSVGElement>>; text: string }[] = [
+  {
+    title: "BOAS VINDAS AO LIVEID",
+    text: `Antes de começarmos, precisamos garantir que seu dispositivo esteja configurado para a melhor experiência possível.\n\nSiga as etapas a seguir para calibrar a captura no seu aparelho.`
+  },
+  {
+    title: "Preparando para a captura perfeita!",
+    ImageComponent: ExampleCalibration1,
+    text: "Para garantir uma leitura precisa, escolha um fundo neutro, como uma parede lisa ou até mesmo uma folha de papel."
+  },
+  {
+    title: "Posicione-se para a melhor leitura!",
+    ImageComponent: ExampleCalibration2,
+    text: "Coloque o dedo indicador direito sobre o diagrama vermelho. Ajuste o zoom, se necessário, para um melhor encaixe."
+  },
+  {
+    title: "Finalizando a calibração!",
+    ImageComponent: FingerPrint,
+    text: "Certifique-se de que sua digital está bem focada. Testaremos diferentes iluminações — se a tela escurecer, não se preocupe, faz parte do processo!"
+  }
+];
+
+export default data;

package/src/components/index.ts

@@ -6,5 +6,18 @@ import CameraConfigInfo from "./CameraConfigInfo";
 import Gabarito from "./Gabarito";
 import HAText from "./Typograph/typograph";
 import Icon from "./icon/icon";
+import HACarouselCalibration from "./HACarouselCalibration/HACarouselCalibration";
+import HACaptureInstructions from "./HACaptureInstructions/HACaptureInstructions";
 
-export { DeviceNotFound, ModalMessage, RecordButton, CaptureButton, CameraConfigInfo, Gabarito, HAText, Icon };
+export {
+  DeviceNotFound,
+  ModalMessage,
+  RecordButton,
+  CaptureButton,
+  CameraConfigInfo,
+  Gabarito,
+  HAText,
+  Icon,
+  HACarouselCalibration,
+  HACaptureInstructions
+};

package/src/index.tsx

@@ -6,10 +6,14 @@ import {
   RegisterOperationPointsLifeCertificate
 } from "./screens";
 
+import { HACarouselCalibration, HACaptureInstructions } from "./components";
+
 export {
   LifeCertificate,
   FingerRegister,
   FingerAuth,
   RegisterOperationPointsBiometrics,
-  RegisterOperationPointsLifeCertificate
+  RegisterOperationPointsLifeCertificate,
+  HACarouselCalibration,
+  HACaptureInstructions
 };

package/src/theme/colors.ts

@@ -0,0 +1,15 @@
+const light = {
+  backgroundColor: "#ffffff",
+  gray: "#F5F5F5",
+  text: "#000000",
+  blue: "#005EFF"
+};
+
+const dark = {
+  backgroundColor: "#000000",
+  gray: "#212121",
+  text: "#ffffff",
+  blue: "#005EFF"
+};
+
+export { light, dark };

package/src/theme/theme.ts

@@ -0,0 +1,13 @@
+import { useColorScheme } from "react-native";
+import { light, dark } from "./colors";
+
+export const useTheme = () => {
+  const isDark = useColorScheme() === "dark";
+  const theme = isDark ? dark : light;
+  const backgroundColor = theme.backgroundColor;
+  const gray = theme.gray;
+  const text = theme.text;
+  const blue = theme.blue;
+
+  return { isDark, backgroundColor, gray, text, blue };
+};