jornada-ui 0.4.18 → 0.4.20

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/trip-details-card/index.tsx

@@ -1,8 +1,8 @@
 /**
  * IMPORTS
  */
-import React, { useState } from "react";
-import { View, TouchableOpacity, LayoutAnimation, Platform, UIManager } from "react-native";
+import React, { useRef, useState } from "react";
+import { View, TouchableOpacity, Animated, Easing } from "react-native";
 
 // components
 import Box from "../../components/box";
@@ -16,11 +16,9 @@ import { Icons } from "../../common/icons-svg";
 import type { ITripDetailsCard } from "./interface";
 import { asBaseComponent } from "../../@types/as-base-component";
 
-// Ativa animação no Android
-if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
+/**
+ * Components de details de viagem
+ */
 const TripDetailsCard: React.FC<ITripDetailsCard> = ({
   dataRegistro,
   numeroCte,
@@ -34,17 +32,33 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
   kmVazio,
 }) => {
   const [expanded, setExpanded] = useState(true);
+  const animation = useRef(new Animated.Value(1)).current;
 
   const toggleExpand = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setExpanded((prev) => !prev);
+    Animated.timing(animation, {
+      toValue: expanded ? 0 : 1,
+      duration: 300,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false, // false pois animaremos altura (layout)
+    }).start();
+    setExpanded(!expanded);
   };
 
   const formatPeso = (v?: number) =>
-    v === undefined || v === null ? "Não informado" : `${v.toLocaleString("pt-BR")} kg`;
+    v == null ? "Não informado" : `${v.toLocaleString("pt-BR")} kg`;
 
   const formatBase = (v?: number) =>
-    v === undefined || v === null ? "Não informado" : `R$ ${v.toLocaleString("pt-BR")}`;
+    v == null ? "Não informado" : `R$ ${v.toLocaleString("pt-BR")}`;
+
+  // altura animada e opacidade
+  const heightInterpolate = animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+  });
+  const opacityInterpolate = animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+  });
 
   return (
     <Box
@@ -84,20 +98,39 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
               size={theme.fontSizes.md}
             />
 
-            <Icons
-              icon={expanded ? "CHEVRON_UP" : "CHEVRON_DOWN"}
-              color={theme.colors.gray[700]}
-              size={20}
-            />
+            <Animated.View
+              style={{
+                transform: [
+                  {
+                    rotate: animation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: ["180deg", "0deg"],
+                    }),
+                  },
+                ],
+              }}
+            >
+              <Icons icon={"CHEVRON_UP"} color={theme.colors.gray[700]} size={20} />
+            </Animated.View>
           </Box>
         </TouchableOpacity>
 
-        {/* Bloco que será expandido/colapsado com animação */}
-        {expanded && (
-          <>
+        {/* Conteúdo animado */}
+        <Animated.View
+          style={{
+            overflow: "hidden",
+            opacity: opacityInterpolate,
+            transform: [
+              {
+                scaleY: heightInterpolate,
+              },
+            ],
+          }}
+        >
+          <Box marginStyle={{ marginTop: theme.margins["1xs"] }}>
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text={"Número CTE: "}
@@ -114,8 +147,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text="Data carregamento: "
@@ -132,8 +165,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text="Origem: "
@@ -150,8 +183,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text="Destino: "
@@ -168,8 +201,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text="Próximo carregamento: "
@@ -186,8 +219,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text={"Peso: "}
@@ -196,7 +229,7 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
                 size={theme.fontSizes.xs}
               />
               <Typography
-                text={`${formatPeso(peso) || "Não informado"}`}
+                text={`${formatPeso(peso)}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
                 size={theme.fontSizes.xs}
@@ -204,8 +237,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text={"Km carregado: "}
@@ -222,8 +255,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text={"Km vazio: "}
@@ -240,8 +273,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text="Base para cálculo do PRO: "
@@ -250,14 +283,14 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
                 size={theme.fontSizes.xs}
               />
               <Typography
-                text={`${formatBase(baseCalculo) || "Não informado"}`}
+                text={`${formatBase(baseCalculo)}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
                 size={theme.fontSizes.xs}
               />
             </Box>
-          </>
-        )}
+          </Box>
+        </Animated.View>
       </Box>
     </Box>
   );

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"