jornada-ui 0.4.19 → 0.4.20

package/src/components/maintenance-description-input/index.tsx

@@ -4,18 +4,19 @@
 import React, { forwardRef, useState } from "react";
 import { View, Text, TextInput } from "react-native";
 
+import Box from "../box";
+
 // typings
 import type { MaintenanceDescriptionInputProps } from "./interface";
 import { asBaseComponent } from "../../@types/as-base-component";
 
 // styles
 import { stylesInput } from "./styles";
-import Box from "../box";
 
 const MAX_LENGTH = 150;
 
 const MaintenanceDescriptionInput = forwardRef<any, MaintenanceDescriptionInputProps>(
-  ({ label, onChangeText, error = null, ...props }, ref): React.ReactElement => {
+  ({ testID, label, onChangeText, error = null, ...props }, ref): React.ReactElement => {
     const [text, setText] = useState("");
 
     const handleChangeText = (value: string) => {
@@ -26,10 +27,13 @@ const MaintenanceDescriptionInput = forwardRef<any, MaintenanceDescriptionInputP
 
     return (
       <View>
-        <Text style={stylesInput.label}>{label}</Text>
+        <Text testID={`${testID}-label`} style={stylesInput.label}>
+          {label}
+        </Text>
 
         <View style={stylesInput.inputWrapper}>
           <TextInput
+            testID={testID}
             ref={ref}
             multiline
             style={stylesInput.input}
@@ -46,7 +50,10 @@ const MaintenanceDescriptionInput = forwardRef<any, MaintenanceDescriptionInputP
           marginStyle={{ marginBottom: 16 }}
         >
           {error && <Text style={stylesInput.errorText}>{error}</Text>}
-          <Text style={stylesInput.charCount}>{`${text.length}/${MAX_LENGTH}`}</Text>
+          <Text
+            testID={`${testID}-counter`}
+            style={stylesInput.charCount}
+          >{`${text.length}/${MAX_LENGTH}`}</Text>
         </Box>
       </View>
     );

package/src/components/modal-maintenance/index.tsx

@@ -19,6 +19,7 @@ import { theme } from "../../styles/theme/theme";
 import { getStatusColorHex } from "../../utils/get-status-color";
 
 const ModalMaintenance: React.FC<IModalMaintenanceProps> = ({
+  testID = "modal-maintenance",
   visible,
   onClose,
   dataRegistro,
@@ -27,7 +28,7 @@ const ModalMaintenance: React.FC<IModalMaintenanceProps> = ({
   imagemUrl,
 }) => {
   return (
-    <Modal animationType="fade" transparent visible={visible}>
+    <Modal testID={testID} animationType="fade" transparent visible={visible}>
       <View
         style={{
           flex: 1,

package/src/components/modal-maintenance/interface.d.ts

@@ -2,6 +2,7 @@
  * IMPORTS
  */
 interface IModalMaintenanceProps {
+  testID?: string;
   visible: boolean;
   onClose: () => void;
   dataRegistro: string;

package/src/components/modal-type-activities/index.tsx

@@ -29,13 +29,23 @@ const NUM_COLS = 3;
 const GUTTER = 8; // espaço horizontal entre botões
 const ROW_SPACE = 12; // espaço vertical entre linhas
 
-const ModalTest = forwardRef<any, IModalTypeActivities>(
+const ModalTypeActivities = forwardRef<any, IModalTypeActivities>(
   (
-    { visible, onClose, driverType, handleSelectActivity, activityType, isLoading, style },
+    {
+      testID = "modal-activity",
+      visible,
+      onClose,
+      driverType,
+      handleSelectActivity,
+      activityType,
+      isLoading,
+      style,
+    },
     ref
   ): React.ReactElement => {
     return (
       <Modal
+        testID={testID}
         ref={ref}
         animationType="fade"
         transparent={true}
@@ -69,6 +79,7 @@ const ModalTest = forwardRef<any, IModalTypeActivities>(
               }}
             >
               <Typography
+                testID={`${testID}-title`}
                 text="Atividades"
                 size={theme.fontSizes.md}
                 color={theme.colors.blue[500]}
@@ -76,7 +87,11 @@ const ModalTest = forwardRef<any, IModalTypeActivities>(
                 lineHeight={theme.fontSizes.xl}
               />
 
-              <TouchableOpacity activeOpacity={0.7} onPress={onClose} style={{}}>
+              <TouchableOpacity
+                testID={`${testID}-close-button`}
+                activeOpacity={0.7}
+                onPress={onClose}
+              >
                 <Icons icon="CLOSED" color={theme.colors.blue[500]} />
               </TouchableOpacity>
             </Box>
@@ -100,6 +115,7 @@ const ModalTest = forwardRef<any, IModalTypeActivities>(
 
                   return (
                     <TouchableOpacity
+                      testID={`${testID}-${index}`}
                       style={{
                         alignItems: "center",
                         justifyContent: "flex-start",
@@ -114,6 +130,7 @@ const ModalTest = forwardRef<any, IModalTypeActivities>(
                       {getIconByProperty(item.referencia as PropertyType)}
 
                       <Typography
+                        testID={`${testID}-description-${index}`}
                         text={item.descricao}
                         size={theme.fontSizes.xs}
                         color={theme.colors.blue[500]}
@@ -132,6 +149,7 @@ const ModalTest = forwardRef<any, IModalTypeActivities>(
             </Box>
 
             <Button
+              testID={`${testID}-cancel-button`}
               title={"CANCELAR ATIVIDADE"}
               width="100%"
               height={40}
@@ -165,9 +183,9 @@ const ModalTest = forwardRef<any, IModalTypeActivities>(
   }
 );
 
-ModalTest.displayName = "ModalTest";
+ModalTypeActivities.displayName = "ModalTypeActivities";
 
 /**
  * EXPORT
  */
-export default asBaseComponent(ModalTest);
+export default asBaseComponent(ModalTypeActivities);

package/src/components/modal-type-activities/interface.ts

@@ -14,6 +14,9 @@ interface IActivity {
 }
 
 interface IModalTypeActivities extends ModalProps, IGlobalCss {
+  /** propiedade para identificar o componente*/
+  testID?: string;
+
   /** função que fecha modal */
   onClose: () => void;
 

package/src/components/modals/modal-change-activitie-history/index.tsx

@@ -27,6 +27,7 @@ import { theme } from "../../../styles/theme/theme";
  * Componente Modal para alteração de atividade.
  */
 export const ModalChangeActivity: React.FC<IModalChangeActivityProps> = ({
+  testID = "modal-change-activity",
   visible,
   onClose,
   modalConfirm,
@@ -59,7 +60,7 @@ export const ModalChangeActivity: React.FC<IModalChangeActivityProps> = ({
   };
 
   return (
-    <Modal animationType="fade" transparent visible={visible}>
+    <Modal testID={testID} animationType="fade" transparent visible={visible}>
       <View
         style={{
           flex: 1,

package/src/components/modals/modal-change-activitie-history/interface.ts

@@ -3,6 +3,10 @@
  */
 
 interface IModalChangeActivityProps {
+  /**
+   * Identificador para components
+   */
+  testID?: string;
   visible: boolean;
   onClose: () => void;
   // eslint-disable-next-line no-unused-vars

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"
 }