jornada-ui 0.4.19 → 0.4.20

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);

package/src/components/toast-message/interface.ts

@@ -1,17 +1,18 @@
-/**
- * IMPORTS
- */
-type ToastMessageCustoProps = {
-  text1?: string;
-  text2?: string;
-  options: "error" | "alert" | "success";
-};
-
-type BorderCustomToashProps = {
-  options: "error" | "alert" | "success";
-};
-
-/**
- * EXPORTS
- */
-export type { ToastMessageCustoProps, BorderCustomToashProps };
+/**
+ * IMPORTS
+ */
+type ToastMessageCustoProps = {
+  text1?: string;
+  text2?: string;
+  testID?: string;
+  options: "error" | "alert" | "success";
+};
+
+type BorderCustomToashProps = {
+  options: "error" | "alert" | "success";
+};
+
+/**
+ * EXPORTS
+ */
+export type { ToastMessageCustoProps, BorderCustomToashProps };

package/src/components/toggle-fuel/index.tsx

@@ -49,6 +49,7 @@ const ToggleFuel = forwardRef<any, ToggleFuelProps>(
 
     return (
       <View
+        testID={`${testIDPrefix}-view`}
         ref={ref}
         style={[styles.container]}
         accessibilityRole="tablist"

package/src/components/typography/index.tsx

@@ -15,6 +15,7 @@ import type { ITextInterface } from "./interface";
 const Typography = forwardRef<any, ITextInterface>((props, ref): React.ReactElement => {
   // desestruturando as propiedades do componente
   const {
+    testID = "typography",
     text = "Hello Dev",
     color = "#1E1E1E",
     size = 23,
@@ -60,6 +61,7 @@ const Typography = forwardRef<any, ITextInterface>((props, ref): React.ReactElem
 
   return (
     <Text
+      testID={testID}
       ref={ref}
       numberOfLines={numberOfLines}
       ellipsizeMode={ellipsizeMode}

package/src/components/typography/interface.d.ts

@@ -1,102 +1,104 @@
-/**
- * IMPORTS
- */
-import { type TextProps as RNTextProps } from "react-native";
-
-import { theme } from "../../styles/theme/theme";
-
-type ITextInterface = RNTextProps & {
-  /**
-   * Propiedade texto que serar renderizado pro usuário final
-   */
-  text: string;
-
-  /**
-   * A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
-   */
-  color?: string;
-
-  /**
-   * Propiedade size define o tamanho e a orientação da caixa que é usada para representar uma página. Na maioria das vezes, esse tamanho corresponde ao tamanho alvo da página impressa, se aplicável.
-   */
-  size?: number;
-
-  align?: "center" | "left" | "right";
-  lineHeight?: number;
-  letterSpacing?: keyof typeof theme.letterSpacing;
-
-  /**
-   * A propriedade text-decoration do CSS é usada para definir a formatação de underline, overline, line-through ou blink. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.
-   */
-  textDecoration?: "line-through" | "underline" | "none";
-
-  /**
-   * A propriedade CSS font-weight define o peso (ou negrito) da fonte. Os pesos disponíveis dependem da família de fontes definida atualmente.
-   */
-  fontWeight?: "100" | "300" | "400" | "500" | "600" | "700";
-
-  // fontFamily?: keyof typeof theme.fonts;
-  fontFamily?: string;
-
-  /**
-   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
-   */
-  margin?: number;
-
-  /**
-   * A propriedade CSS define a área de margem no lado esquerdo de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-left
-   */
-  marginLeft?: number;
-
-  /**
-   * A propriedade CSS define a área de margem no lado direito de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-right
-   */
-  marginRight?: number;
-
-  /**
-   * A propriedade CSS margin-top de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.
-   */
-  marginTop?: number;
-
-  /**
-   * A propriedade CSS margin-bottom define a margin area na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.
-   */
-  marginBottom?: number;
-
-  /**
-   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
-   */
-  padding?: number;
-
-  /**
-   * A propriedade CSS padding-left é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. padding area é o espaço entre o conteúdo do elemento e a borda. Um valor negativo não é permitido.
-   */
-  paddingLeft?: number;
-
-  /**
-   * A propriedade CSS define a largura da área de preenchimento à direita de um elemento.padding-right
-   */
-  paddingRight?: number;
-
-  /**
-   * A propriedade CSS define a altura da área de preenchimento na parte superior de um elemento.padding-top
-   */
-  paddingTop?: number;
-
-  /**
-   * A propriedade CSS define a altura da área de preenchimento na parte inferior de um elemento.padding-bottom
-   */
-  paddingBottom?: number;
-
-  /**
-   * Define o número máximo de linhas que o texto pode ocupar. Se o texto for maior que esse limite, ele será truncado.  numberOfLines
-   *
-   * Define onde a elipse (...) será adicionada quando o texto for cortado devido ao numberOfLines.
-   */
-  numberOfLines?: number;
-  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
-};
-/**
- * EXPORTS
- */
-export { ITextInterface };
+/**
+ * IMPORTS
+ */
+import { type TextProps as RNTextProps } from "react-native";
+
+import { theme } from "../../styles/theme/theme";
+
+type ITextInterface = RNTextProps & {
+  /**
+   * Propiedade texto que serar renderizado pro usuário final
+   */
+  text: string;
+
+  testID?: string;
+
+  /**
+   * A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
+   */
+  color?: string;
+
+  /**
+   * Propiedade size define o tamanho e a orientação da caixa que é usada para representar uma página. Na maioria das vezes, esse tamanho corresponde ao tamanho alvo da página impressa, se aplicável.
+   */
+  size?: number;
+
+  align?: "center" | "left" | "right";
+  lineHeight?: number;
+  letterSpacing?: keyof typeof theme.letterSpacing;
+
+  /**
+   * A propriedade text-decoration do CSS é usada para definir a formatação de underline, overline, line-through ou blink. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.
+   */
+  textDecoration?: "line-through" | "underline" | "none";
+
+  /**
+   * A propriedade CSS font-weight define o peso (ou negrito) da fonte. Os pesos disponíveis dependem da família de fontes definida atualmente.
+   */
+  fontWeight?: "100" | "300" | "400" | "500" | "600" | "700";
+
+  // fontFamily?: keyof typeof theme.fonts;
+  fontFamily?: string;
+
+  /**
+   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
+   */
+  margin?: number;
+
+  /**
+   * A propriedade CSS define a área de margem no lado esquerdo de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-left
+   */
+  marginLeft?: number;
+
+  /**
+   * A propriedade CSS define a área de margem no lado direito de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-right
+   */
+  marginRight?: number;
+
+  /**
+   * A propriedade CSS margin-top de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.
+   */
+  marginTop?: number;
+
+  /**
+   * A propriedade CSS margin-bottom define a margin area na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.
+   */
+  marginBottom?: number;
+
+  /**
+   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
+   */
+  padding?: number;
+
+  /**
+   * A propriedade CSS padding-left é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. padding area é o espaço entre o conteúdo do elemento e a borda. Um valor negativo não é permitido.
+   */
+  paddingLeft?: number;
+
+  /**
+   * A propriedade CSS define a largura da área de preenchimento à direita de um elemento.padding-right
+   */
+  paddingRight?: number;
+
+  /**
+   * A propriedade CSS define a altura da área de preenchimento na parte superior de um elemento.padding-top
+   */
+  paddingTop?: number;
+
+  /**
+   * A propriedade CSS define a altura da área de preenchimento na parte inferior de um elemento.padding-bottom
+   */
+  paddingBottom?: number;
+
+  /**
+   * Define o número máximo de linhas que o texto pode ocupar. Se o texto for maior que esse limite, ele será truncado.  numberOfLines
+   *
+   * Define onde a elipse (...) será adicionada quando o texto for cortado devido ao numberOfLines.
+   */
+  numberOfLines?: number;
+  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
+};
+/**
+ * EXPORTS
+ */
+export { ITextInterface };

package/src/components/user-journey-work-card/index.tsx

@@ -22,6 +22,7 @@ import { theme } from "../../styles/theme/theme";
 const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
   (props, ref): React.ReactElement => {
     const {
+      testID = "user-journey-work-card",
       name = "Expresso F.",
       workDate = "25/01/2025",
       initialTime = "00:40",
@@ -35,6 +36,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
     } = props;
     return (
       <Box
+        testID={testID}
         ref={ref}
         width={width}
         paddingStyle={{ padding: theme.paddings.md }}
@@ -57,6 +59,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
         >
           <TouchableOpacity onPress={handleNavigation}>
             <Image
+              testID={`${testID}-avatar`}
               style={{
                 width: 50,
                 height: 50,
@@ -72,6 +75,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
             <Box flexStyle={{ flexDirection: "row" }}>
               <Box>
                 <Typography
+                  testID={`${testID}-nome-label`}
                   text={`Motorista(a): `}
                   size={theme.fontSizes.xs}
                   color={theme.colors.black[100]}
@@ -82,6 +86,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
               </Box>
               <Box>
                 <Typography
+                  testID={`${testID}-nome-value`}
                   text={`${name}`}
                   size={theme.fontSizes.xs}
                   color={theme.colors.gray[800]}
@@ -96,6 +101,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
               <Icons icon={"CALENDAR"} size={22} />
 
               <Typography
+                testID={`${testID}-work-date-label`}
                 text={"Jornada Trabalho: "}
                 fontFamily={theme.fonts.inter_bold_700}
                 size={theme.fontSizes.xs}
@@ -104,6 +110,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
                 lineHeight={theme.lineHeight["2xl"]}
               />
               <Typography
+                testID={`${testID}-work-date-value`}
                 text={workDate}
                 size={theme.fontSizes.xs}
                 fontFamily={theme.fonts.inter_regular_400}
@@ -127,7 +134,11 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
             </Box>
           </Box>
 
-          <TouchableOpacity activeOpacity={0.7} onPress={handleNavigationNotification}>
+          <TouchableOpacity
+            testID={`${testID}-notification`}
+            activeOpacity={0.7}
+            onPress={handleNavigationNotification}
+          >
             {counterBadge > 0 && (
               <Box
                 backgroundColor={theme.colors.red[500]}
@@ -141,6 +152,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
                 ]}
               >
                 <Typography
+                  testID={`${testID}-notification-text`}
                   text={`${counterBadge}`}
                   align={"center"}
                   size={theme.fontSizes["2xs"]}
@@ -151,7 +163,12 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
                 />
               </Box>
             )}
-            <Icons icon={"BELL"} size={28} style={{ position: "relative" }} />
+            <Icons
+              testID={`${testID}-notification-icon`}
+              icon={"BELL"}
+              size={28}
+              style={{ position: "relative" }}
+            />
           </TouchableOpacity>
         </Box>
 
@@ -169,6 +186,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
           >
             <Box marginStyle={{ marginRight: theme.margins.sm }}>
               <Typography
+                testID={`${testID}-initial-time-value`}
                 text={`${initialTime}`}
                 size={theme.fontSizes.md}
                 align="center"
@@ -177,6 +195,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
               />
 
               <Typography
+                testID={`${testID}-initial-time-label`}
                 text={"INÍCIO"}
                 size={theme.fontSizes["2xs"]}
                 align="center"
@@ -189,6 +208,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
 
             <Box>
               <Typography
+                testID={`${testID}-duration-value`}
                 text={`${duration}`}
                 size={theme.fontSizes.md}
                 align="center"
@@ -197,6 +217,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
               />
 
               <Typography
+                testID={`${testID}-duration-label`}
                 text={"DURAÇÃO"}
                 size={theme.fontSizes["2xs"]}
                 align="center"