jornada-ui 0.4.18 → 0.4.20

package/src/components/report-bobinas/index.tsx

@@ -1,175 +1,185 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef } from "react";
-
-// components
-import Box from "../../components/box";
-import Typography from "../../components/typography";
-
-// commons / icons
-import { Icons } from "../../common/icons-svg";
-
-// typings
-import type { IReportCoils } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-/**
- * Componente ReportCoils para a interação da  ui.
- */
-const ReportCoils = forwardRef<any, IReportCoils>((props, ref): React.ReactElement => {
-  const {
-    codeDisplayed = 4567,
-    generatedDate = "15/07/2025",
-    generatedTime = "10:30",
-    status = "OK",
-    backgroundColor,
-    idWithdrawal = 1,
-  } = props;
-  return (
-    <Box
-      ref={ref}
-      width={"100%"}
-      backgroundColor={theme.colors.neutral[25]}
-      borderStyled={{
-        borderRadius: theme.borderWidths.thick_medium,
-      }}
-      marginStyle={{
-        marginBottom: theme.margins["2xs"],
-      }}
-    >
-      <Box
-        width={"100%"}
-        height={22}
-        backgroundColor={backgroundColor ?? theme.colors.green[400]}
-        borderStyled={{
-          borderTopLeftRadius: theme.borderWidths.thin_bold,
-          borderTopRightRadius: theme.borderWidths.thin_bold,
-          borderColor: theme.colors.blue[400],
-        }}
-        flexStyle={{
-          justifyContent: "center",
-        }}
-      >
-        <Typography
-          text={`Retirada ${idWithdrawal}`}
-          color={theme.colors.neutral[25]}
-          size={theme.fontSizes.sm}
-          fontFamily={theme.fonts.inter_medium_500}
-          fontWeight={"500"}
-          lineHeight={theme.fontSizes.lg}
-          marginLeft={theme.margins["2xs"]}
-        />
-      </Box>
-      <Box
-        width={"100%"}
-        flexStyle={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-        }}
-        paddingStyle={{
-          padding: 4,
-        }}
-      >
-        <Box>
-          <Box
-            flexStyle={{
-              flexDirection: "row",
-              alignItems: "center",
-            }}
-            marginStyle={{
-              marginLeft: 4,
-            }}
-            height={45}
-          >
-            <Icons icon={"FILES"} size={32} color={theme.colors.blue[100]} />
-            <Box>
-              <Box flexStyle={{ flexDirection: "row" }}>
-                <Typography
-                  text={`Efetuada em: `}
-                  size={12}
-                  color={theme.colors.gray[900]}
-                  fontFamily={theme.fonts.inter_bold_700}
-                />
-                <Typography
-                  text={`${generatedDate} ${generatedTime}`}
-                  size={12}
-                  color={theme.colors.gray[700]}
-                  fontFamily={theme.fonts.inter_regular_400}
-                />
-              </Box>
-              <Box marginStyle={{ marginTop: -8 }} flexStyle={{ flexDirection: "row" }}>
-                <Typography
-                  text={`Status: `}
-                  size={12}
-                  color={theme.colors.gray[900]}
-                  fontFamily={theme.fonts.inter_medium_500}
-                />
-
-                <Typography
-                  text={`${status}`}
-                  size={12}
-                  color={theme.colors.gray[700]}
-                  fontFamily={theme.fonts.inter_regular_400}
-                  marginLeft={2}
-                />
-              </Box>
-            </Box>
-          </Box>
-        </Box>
-      </Box>
-
-      {/* Segunda separação */}
-      <Box
-        width={"100%"}
-        height={46}
-        flexStyle={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-        paddingStyle={{
-          paddingLeft: theme.paddings["2xs"],
-          paddingRight: theme.paddings["2xs"],
-        }}
-        borderStyled={{
-          borderTopWidth: 2,
-          borderTopColor: theme.colors.neutral[200],
-        }}
-      >
-        <Box>
-          <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
-            <Box marginStyle={{ marginRight: 2 }}>
-              <Typography
-                text={`Codigo apresentado:`}
-                size={10}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-              />
-
-              <Typography
-                text={`${codeDisplayed}`}
-                size={12}
-                color={theme.colors.blue[100]}
-                fontFamily={theme.fonts.inter_semi_bold_600}
-                marginTop={-8}
-              />
-            </Box>
-          </Box>
-        </Box>
-
-        <Icons icon={"CHECK_CIRCLE"} size={32} background={backgroundColor} />
-      </Box>
-    </Box>
-  );
-});
-
-ReportCoils.displayName = "ReportCoils";
-
-/**
- * EXPORTS
- */
-export default asBaseComponent(ReportCoils);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+
+// components
+import Box from "../../components/box";
+import Typography from "../../components/typography";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import type { IReportCoils } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente ReportCoils para a interação da  ui.
+ */
+const ReportCoils = forwardRef<any, IReportCoils>((props, ref): React.ReactElement => {
+  const {
+    testID = "report-coils",
+    codeDisplayed = 4567,
+    generatedDate = "15/07/2025",
+    generatedTime = "10:30",
+    status = "OK",
+    backgroundColor,
+    idWithdrawal = 1,
+  } = props;
+  return (
+    <Box
+      testID={testID}
+      ref={ref}
+      width={"100%"}
+      backgroundColor={theme.colors.neutral[25]}
+      borderStyled={{
+        borderRadius: theme.borderWidths.thick_medium,
+      }}
+      marginStyle={{
+        marginBottom: theme.margins["2xs"],
+      }}
+    >
+      <Box
+        width={"100%"}
+        height={22}
+        backgroundColor={backgroundColor ?? theme.colors.green[400]}
+        borderStyled={{
+          borderTopLeftRadius: theme.borderWidths.thin_bold,
+          borderTopRightRadius: theme.borderWidths.thin_bold,
+          borderColor: theme.colors.blue[400],
+        }}
+        flexStyle={{
+          justifyContent: "center",
+        }}
+      >
+        <Typography
+          testID={`${testID}-retirada`}
+          text={`Retirada ${idWithdrawal}`}
+          color={theme.colors.neutral[25]}
+          size={theme.fontSizes.sm}
+          fontFamily={theme.fonts.inter_medium_500}
+          fontWeight={"500"}
+          lineHeight={theme.fontSizes.lg}
+          marginLeft={theme.margins["2xs"]}
+        />
+      </Box>
+      <Box
+        width={"100%"}
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+        paddingStyle={{
+          padding: 4,
+        }}
+      >
+        <Box>
+          <Box
+            flexStyle={{
+              flexDirection: "row",
+              alignItems: "center",
+            }}
+            marginStyle={{
+              marginLeft: 4,
+            }}
+            height={45}
+          >
+            <Icons
+              testID={`${testID}-icon`}
+              icon={"FILES"}
+              size={32}
+              color={theme.colors.blue[100]}
+            />
+            <Box>
+              <Box flexStyle={{ flexDirection: "row" }}>
+                <Typography
+                  testID={`${testID}-efetuada`}
+                  text={`Efetuada em: `}
+                  size={12}
+                  color={theme.colors.gray[900]}
+                  fontFamily={theme.fonts.inter_bold_700}
+                />
+                <Typography
+                  text={`${generatedDate} ${generatedTime}`}
+                  size={12}
+                  color={theme.colors.gray[700]}
+                  fontFamily={theme.fonts.inter_regular_400}
+                />
+              </Box>
+              <Box marginStyle={{ marginTop: -8 }} flexStyle={{ flexDirection: "row" }}>
+                <Typography
+                  testID={`${testID}-status`}
+                  text={`Status: `}
+                  size={12}
+                  color={theme.colors.gray[900]}
+                  fontFamily={theme.fonts.inter_medium_500}
+                />
+
+                <Typography
+                  text={`${status}`}
+                  size={12}
+                  color={theme.colors.gray[700]}
+                  fontFamily={theme.fonts.inter_regular_400}
+                  marginLeft={2}
+                />
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+
+      {/* Segunda separação */}
+      <Box
+        width={"100%"}
+        height={46}
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+        paddingStyle={{
+          paddingLeft: theme.paddings["2xs"],
+          paddingRight: theme.paddings["2xs"],
+        }}
+        borderStyled={{
+          borderTopWidth: 2,
+          borderTopColor: theme.colors.neutral[200],
+        }}
+      >
+        <Box>
+          <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+            <Box marginStyle={{ marginRight: 2 }}>
+              <Typography
+                text={`Codigo apresentado:`}
+                size={10}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+              />
+
+              <Typography
+                text={`${codeDisplayed}`}
+                size={12}
+                color={theme.colors.blue[100]}
+                fontFamily={theme.fonts.inter_semi_bold_600}
+                marginTop={-8}
+              />
+            </Box>
+          </Box>
+        </Box>
+
+        <Icons icon={"CHECK_CIRCLE"} size={32} background={backgroundColor} />
+      </Box>
+    </Box>
+  );
+});
+
+ReportCoils.displayName = "ReportCoils";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(ReportCoils);

package/src/components/resume-raking/index.tsx

@@ -18,9 +18,10 @@ import type { IRankingCard } from "./interface";
  * Componente ResumeRaking para a interação da  ui.
  */
 const ResumeRaking = forwardRef<any, IRankingCard>(
-  ({ title, value, description }, ref): React.ReactElement => {
+  ({ testID, title, value, description }, ref): React.ReactElement => {
     return (
       <Box
+        testID={testID}
         ref={ref}
         width={"100%"}
         backgroundColor={theme.colors.neutral[25]}
@@ -38,6 +39,7 @@ const ResumeRaking = forwardRef<any, IRankingCard>(
       >
         {/* título */}
         <Typography
+          testID={`${testID}-title`}
           text={title}
           color={theme.colors.black[100]}
           size={theme.fontSizes.sm}
@@ -48,6 +50,7 @@ const ResumeRaking = forwardRef<any, IRankingCard>(
 
         {/* valor principal */}
         <Typography
+          testID={`${testID}-value`}
           text={value}
           color={theme.colors.black[180]}
           size={theme.fontSizes["2xl"]}
@@ -59,6 +62,7 @@ const ResumeRaking = forwardRef<any, IRankingCard>(
         <Box flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-end" }}>
           {/* descrição */}
           <Typography
+            testID={`${testID}-description`}
             text={description}
             color={theme.colors.red[500]}
             size={theme.fontSizes.sm}

package/src/components/resume-raking/interface.ts

@@ -3,8 +3,24 @@
  */
 
 interface IRankingCard {
+  /**
+   * TestID para testes automático e identificação
+   */
+  testID?: string;
+
+  /**
+   * Titulo para o card
+   */
   title: string;
+
+  /**
+   * Valor para o card
+   */
   value: string; // Ex: "53:35 H"
+
+  /**
+   * Descrição para o card
+   */
   description: string; // Ex: "3.200 KM + 60:17 HORAS"
 }
 

package/src/components/step-indicator/index.tsx

@@ -1,3 +1,6 @@
+/**
+ * IMPORTS
+ */
 import React, { useState, forwardRef, useImperativeHandle, useRef } from "react";
 import { View, Text, TouchableOpacity, FlatList, FlatList as FlatListType } from "react-native";
 
@@ -10,23 +13,31 @@ import { Icons } from "../../common/icons-svg";
 // helpers
 import { getIconKeyByValue } from "./helpers/get-icon-by-status";
 
-// typings
-import type { IStepIndicator } from "./interface";
-
 // utils
 import { formHoursMinute } from "../../utils/format-date";
 
+// typings
+import type { IStepIndicator } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
 // styles
 import { styles } from "./styles";
 import { theme } from "../../styles/theme/theme";
-import { asBaseComponent } from "../../@types/as-base-component";
 
 /**
  * Componente StepIndicator para a interação da ui.
  */
 const StepIndicator = forwardRef<any, IStepIndicator>(
   (
-    { data = [], type, textColorDescription, titleColor, titleNumberColor, onChangeActivity },
+    {
+      testID = "step-indicator",
+      data = [],
+      type,
+      textColorDescription,
+      titleColor,
+      titleNumberColor,
+      onChangeActivity,
+    },
     ref
   ) => {
     const StepDefault = () => {
@@ -83,7 +94,7 @@ const StepIndicator = forwardRef<any, IStepIndicator>(
 
         return (
           <TouchableOpacity
-            testID="step-indicator"
+            testID={`${testID}-item-${index}`}
             activeOpacity={0.7}
             style={styles({}).containerIndicator}
             disabled={!canEdit}
@@ -112,13 +123,19 @@ const StepIndicator = forwardRef<any, IStepIndicator>(
               <Text style={styles({ titleColor }).title}>{history?.descricao}</Text>
 
               {history?.data_inicio && (
-                <Text style={styles({ textColorDescription }).titleDescription}>
+                <Text
+                  testID={`${testID}-data-${index}`}
+                  style={styles({ textColorDescription }).titleDescription}
+                >
                   {`Inicio: ${history.data_inicio} ás ${history.data_fim}`}
                 </Text>
               )}
 
               {history.duracao_segundos && (
-                <Text style={styles({ textColorDescription }).titleDescription}>
+                <Text
+                  testID={`${testID}-duration-${index}`}
+                  style={styles({ textColorDescription }).titleDescription}
+                >
                   Duração: {formHoursMinute(history?.duracao_segundos as string)}
                 </Text>
               )}
@@ -155,6 +172,7 @@ const StepIndicator = forwardRef<any, IStepIndicator>(
 
           {isModalVisible && (
             <ModalChangeActivity
+              testID={`${testID}-modal-change-activity`}
               visible={isModalVisible}
               modalConfirm={handleConfirmModal}
               descricao=""

package/src/components/step-indicator/interface.d.ts

@@ -23,6 +23,9 @@ type IStyleProps = {
 };
 
 interface IStepIndicator {
+  /**Identificador para o components */
+  testID: string;
+
   /**dados que vão ser renderizados */
   data?: IData[];
 

package/src/components/toast-message/index.tsx

@@ -1,75 +1,77 @@
-/**
- * IMPORTS
- */
-
-import React, { forwardRef, useMemo } from "react";
-import { View } from "react-native";
-
-// components
-import Typography from "../typography";
-
-// typings
-import type { ToastMessageCustoProps } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-import { styles } from "./styles";
-import { theme } from "../../styles/theme/theme";
-
-/**
- * Componente ToastMessage para a exibição de mensagens de conexão.
- */
-const ToastMessage = forwardRef<any, ToastMessageCustoProps>(
-  ({ text1, text2, options }, ref): React.ReactElement => {
-    const borderColor = useMemo(() => {
-      const map = {
-        success: theme.colors?.green[400] ?? "#69C779",
-        alert: theme.colors?.blue[800] ?? "#87CEFA",
-        error: theme.colors?.red[500] ?? "#ef4444",
-      } as const;
-      return map[options];
-    }, [options, theme]);
-
-    return (
-      <View ref={ref} style={styles.wrapperToash}>
-        <View style={styles.wrapperBorder}>
-          <View
-            testID="border-custom"
-            style={[styles.borderCustom, { backgroundColor: borderColor }]}
-          />
-        </View>
-
-        <View style={styles.wrapperText}>
-          {!!text1 && (
-            <Typography
-              text={String(text1)}
-              fontFamily={theme.fonts.inter_medium_500}
-              color={"blue500"}
-              size={theme.fontSizes.xs}
-              lineHeight={theme.lineHeight["2xl"]}
-              letterSpacing={"regular"}
-            />
-          )}
-
-          {!!text2 && (
-            <Typography
-              text={String(text2)}
-              fontFamily="inter_regular_400"
-              color={"black25"}
-              size={theme.fontSizes.xs}
-              lineHeight={theme.lineHeight["2xl"]}
-              letterSpacing={"regular"}
-              marginBottom={4}
-            />
-          )}
-        </View>
-      </View>
-    );
-  }
-);
-
-ToastMessage.displayName = "ToastMessage";
-
-/**
- * EXPORT
- */
-export default asBaseComponent(ToastMessage);
+/**
+ * IMPORTS
+ */
+
+import React, { forwardRef, useMemo } from "react";
+import { View } from "react-native";
+
+// components
+import Typography from "../typography";
+
+// typings
+import type { ToastMessageCustoProps } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+import { styles } from "./styles";
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente ToastMessage para a exibição de mensagens de conexão.
+ */
+const ToastMessage = forwardRef<any, ToastMessageCustoProps>(
+  ({ testID, text1, text2, options }, ref): React.ReactElement => {
+    const borderColor = useMemo(() => {
+      const map = {
+        success: theme.colors?.green[400] ?? "#69C779",
+        alert: theme.colors?.blue[800] ?? "#87CEFA",
+        error: theme.colors?.red[500] ?? "#ef4444",
+      } as const;
+      return map[options];
+    }, [options, theme]);
+
+    return (
+      <View testID={testID} ref={ref} style={styles.wrapperToash}>
+        <View style={styles.wrapperBorder}>
+          <View
+            testID="border-custom"
+            style={[styles.borderCustom, { backgroundColor: borderColor }]}
+          />
+        </View>
+
+        <View style={styles.wrapperText}>
+          {!!text1 && (
+            <Typography
+              testID={`${testID}-text1`}
+              text={String(text1)}
+              fontFamily={theme.fonts.inter_medium_500}
+              color={"blue500"}
+              size={theme.fontSizes.xs}
+              lineHeight={theme.lineHeight["2xl"]}
+              letterSpacing={"regular"}
+            />
+          )}
+
+          {!!text2 && (
+            <Typography
+              testID={`${testID}-text2`}
+              text={String(text2)}
+              fontFamily="inter_regular_400"
+              color={"black25"}
+              size={theme.fontSizes.xs}
+              lineHeight={theme.lineHeight["2xl"]}
+              letterSpacing={"regular"}
+              marginBottom={4}
+            />
+          )}
+        </View>
+      </View>
+    );
+  }
+);
+
+ToastMessage.displayName = "ToastMessage";
+
+/**
+ * EXPORT
+ */
+export default asBaseComponent(ToastMessage);