jornada-ui 0.4.18 → 0.4.20

package/src/components/card-hours/index.tsx

@@ -1,121 +1,121 @@
-/**
- * IMPORTS
- */ import React, { forwardRef } from "react";
-
-// components
-import Box from "../box";
-import Typography from "../typography";
-
-// typing
-import { asBaseComponent } from "../../@types/as-base-component";
-import { type ICardHoursProps } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-const CardHours = forwardRef<any, ICardHoursProps>((props, ref): React.ReactElement => {
-  const {
-    testID,
-    width,
-    height,
-    hoursWorked,
-    flexStyle,
-    marginStyle,
-    paddingStyle,
-    text,
-    color,
-    fontStyle,
-    borderStyled,
-    backgroundColor,
-    sizeHours,
-    sizeDescription,
-    handleFormatDataInDayMonthYearNotHours,
-    style,
-  } = props;
-
-  const styleProps = {
-    testID,
-    width,
-    height,
-    marginStyle,
-    paddingStyle,
-    flexStyle,
-    text,
-    borderStyled,
-    color,
-    fontStyle,
-    backgroundColor,
-    sizeHours,
-    sizeDescription,
-    style,
-  } as ICardHoursProps;
-  return (
-    <Box
-      ref={ref}
-      testID={testID}
-      width={width ?? "100%"}
-      height={height}
-      backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
-      borderStyled={{
-        borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
-        borderColor: borderStyled?.borderColor ?? theme.colors.gray[400],
-        borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick_medium,
-      }}
-    >
-      <Typography
-        text={text ?? "Informe texto:"}
-        size={Number(styleProps.fontStyle?.fontSize)}
-        fontFamily={styleProps.fontStyle?.fontFamily}
-        color={color?.colorText ?? theme.colors.gray[700]}
-        lineHeight={fontStyle?.lineHeight ?? theme.fontSizes.xl}
-        letterSpacing={"regular"}
-        paddingTop={theme.paddings["2xs"]}
-        paddingLeft={theme.paddings["2xs"]}
-      />
-
-      <Box
-        flexStyle={{
-          flexDirection: "row",
-          alignItems: "flex-end",
-          justifyContent: "space-between",
-        }}
-        paddingStyle={{
-          paddingLeft: theme.paddings["2xs"],
-          paddingRight: theme.paddings["2xs"],
-        }}
-        backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
-        width={"100%"}
-        borderStyled={{
-          borderBottomLeftRadius:
-            borderStyled?.borderBottomLeftRadius ?? theme.borderWidths.thick_medium,
-          borderBottomRightRadius:
-            borderStyled?.borderBottomRightRadius ?? theme.borderWidths.thick_medium,
-        }}
-      >
-        <Typography
-          text={`${hoursWorked ?? "00:00 H"}`}
-          size={sizeHours ?? theme.fontSizes["3xl"]}
-          fontFamily={theme.fonts.inter_bold ?? "inter_bold"}
-          fontWeight="700"
-          color={color?.colorTextBold ?? theme.colors.orange[150]}
-          lineHeight={fontStyle?.lineHeight ?? theme.fontSizes["5xl"]}
-          letterSpacing={"regular"}
-        />
-
-        <Typography
-          text={`Última atualização: ${handleFormatDataInDayMonthYearNotHours(new Date())}`}
-          size={sizeDescription ?? theme.fontSizes.xs}
-          fontFamily={"inter_light_300"}
-          color={color?.colorTextData ?? theme.colors.gray[700]}
-          lineHeight={fontStyle?.lineHeight ?? theme.fontSizes["xl"]}
-          letterSpacing={"regular"}
-        />
-      </Box>
-    </Box>
-  );
-});
-
-/**
- * Componente CardHours para a interação da  ui.
- */
-export default asBaseComponent(CardHours);
+/**
+ * IMPORTS
+ */ import React, { forwardRef } from "react";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// typing
+import { asBaseComponent } from "../../@types/as-base-component";
+import { type ICardHoursProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const CardHours = forwardRef<any, ICardHoursProps>((props, ref): React.ReactElement => {
+  const {
+    testID,
+    width,
+    height,
+    hoursWorked,
+    flexStyle,
+    marginStyle,
+    paddingStyle,
+    text,
+    color,
+    fontStyle,
+    borderStyled,
+    backgroundColor,
+    sizeHours,
+    sizeDescription,
+    handleFormatDataInDayMonthYearNotHours,
+    style,
+  } = props;
+
+  const styleProps = {
+    testID,
+    width,
+    height,
+    marginStyle,
+    paddingStyle,
+    flexStyle,
+    text,
+    borderStyled,
+    color,
+    fontStyle,
+    backgroundColor,
+    sizeHours,
+    sizeDescription,
+    style,
+  } as ICardHoursProps;
+  return (
+    <Box
+      testID={testID}
+      ref={ref}
+      width={width ?? "100%"}
+      height={height}
+      backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+      borderStyled={{
+        borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
+        borderColor: borderStyled?.borderColor ?? theme.colors.gray[400],
+        borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick_medium,
+      }}
+    >
+      <Typography
+        text={text ?? "Informe texto:"}
+        size={Number(styleProps.fontStyle?.fontSize)}
+        fontFamily={styleProps.fontStyle?.fontFamily}
+        color={color?.colorText ?? theme.colors.gray[700]}
+        lineHeight={fontStyle?.lineHeight ?? theme.fontSizes.xl}
+        letterSpacing={"regular"}
+        paddingTop={theme.paddings["2xs"]}
+        paddingLeft={theme.paddings["2xs"]}
+      />
+
+      <Box
+        flexStyle={{
+          flexDirection: "row",
+          alignItems: "flex-end",
+          justifyContent: "space-between",
+        }}
+        paddingStyle={{
+          paddingLeft: theme.paddings["2xs"],
+          paddingRight: theme.paddings["2xs"],
+        }}
+        backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+        width={"100%"}
+        borderStyled={{
+          borderBottomLeftRadius:
+            borderStyled?.borderBottomLeftRadius ?? theme.borderWidths.thick_medium,
+          borderBottomRightRadius:
+            borderStyled?.borderBottomRightRadius ?? theme.borderWidths.thick_medium,
+        }}
+      >
+        <Typography
+          text={`${hoursWorked ?? "00:00 H"}`}
+          size={sizeHours ?? theme.fontSizes["3xl"]}
+          fontFamily={theme.fonts.inter_bold ?? "inter_bold"}
+          fontWeight="700"
+          color={color?.colorTextBold ?? theme.colors.orange[150]}
+          lineHeight={fontStyle?.lineHeight ?? theme.fontSizes["5xl"]}
+          letterSpacing={"regular"}
+        />
+
+        <Typography
+          text={`Última atualização: ${handleFormatDataInDayMonthYearNotHours(new Date())}`}
+          size={sizeDescription ?? theme.fontSizes.xs}
+          fontFamily={"inter_light_300"}
+          color={color?.colorTextData ?? theme.colors.gray[700]}
+          lineHeight={fontStyle?.lineHeight ?? theme.fontSizes["xl"]}
+          letterSpacing={"regular"}
+        />
+      </Box>
+    </Box>
+  );
+});
+
+/**
+ * Componente CardHours para a interação da  ui.
+ */
+export default asBaseComponent(CardHours);

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

@@ -24,12 +24,17 @@ import { getStatusColorHex } from "../../utils/get-status-color";
  */
 
 const CardMaintenance = forwardRef<any, ICardMaintenance>((props, ref): React.ReactElement => {
-  const { numero, dataRegistro, cavalo, imagemUrl, descricao, status, titutlo } = props;
+  const { testID, numero, dataRegistro, cavalo, imagemUrl, descricao, status, titutlo } = props;
   const [showModal, setShowModal] = useState(false);
 
   return (
     <>
-      <TouchableOpacity ref={ref} onPress={() => setShowModal(true)} activeOpacity={0.9}>
+      <TouchableOpacity
+        testID={testID}
+        ref={ref}
+        onPress={() => setShowModal(true)}
+        activeOpacity={0.9}
+      >
         <Box
           width={"100%"}
           flexStyle={{ flexDirection: "row" }}
@@ -128,6 +133,7 @@ const CardMaintenance = forwardRef<any, ICardMaintenance>((props, ref): React.Re
       </TouchableOpacity>
 
       <ModalMaintenance
+        testID={`${testID}-modal`}
         visible={showModal}
         onClose={() => setShowModal(false)}
         imagemUrl={imagemUrl}

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

@@ -2,6 +2,10 @@
  * IMPORTS
  */
 interface ICardMaintenance {
+  /**
+   * Identificador do componente
+   */
+  testID?: string;
   /**título do card */
   titutlo?: string;
 

package/src/components/list-supplies/index.tsx

@@ -1,153 +1,178 @@
-/**
- * IMPORTS
- */
-import React, { useEffect } from "react";
-import { Image, View, UIManager, Platform } from "react-native";
-
-// components
-import Box from "../../components/box";
-import Typography from "../../components/typography";
-
-// style
-import { theme } from "../../styles/theme/theme";
-
-// typings
-import type { IListSupplies } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-const ListSupplies: React.FC<IListSupplies> = ({
-  dataRegistro,
-  namePosto,
-  litragem,
-  valor,
-  imagemUrl,
-  corBarra,
-}) => {
-
-  useEffect(() => {
-    if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
-      UIManager.setLayoutAnimationEnabledExperimental(true);
-    }
-  }, []);
-
-  return (
-    <Box
-      width={"100%"}
-      flexStyle={{ flexDirection: "row" }}
-      backgroundColor={theme.colors.neutral[25]}
-      borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
-    >
-      {/* faixa lateral */}
-      <View
-        style={{
-          width: 15,
-          backgroundColor: corBarra ?? theme.colors.blue[375],
-          borderTopLeftRadius: theme.borderWidths.thick_medium,
-          borderBottomLeftRadius: theme.borderWidths.thick_medium,
-        }}
-      />
-
-      <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings["2xs"] }}>
-            <Box
-              marginStyle={{ marginBottom: theme.margins.fn}}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text={`${namePosto || "Não informado"}`}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginBottom: theme.margins.fn}}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text="Litragem: "
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-              <Box
-                flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-              >
-              <Typography
-                text={`${litragem || "Não informado"}`}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
-              />
-              <Typography
-                text={` LT`}
-                color={theme.colors.red[400]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
-              />
-              </Box>
-            </Box>
-
-            <Box
-              marginStyle={{ marginBottom: theme.margins.fn}}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text="Valor: "
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-              <Typography
-                text={`R$ ${valor || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginBottom: theme.margins.fn}}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text={"Data: "}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-              <Typography
-                text={`${dataRegistro || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
-              />
-            </Box>
-            <Box
-              borderStyled={{
-                borderWidth: 1,
-                borderColor: theme.colors.black[25],
-                borderRadius: theme.borderWidths.thick_medium,
-              }}
-              flexStyle={{
-                justifyContent: "center",
-                alignItems: "center",
-              }}
-            >
-              <Image
-                source={{ uri: imagemUrl ?? "https://placehold.co/300x300" }}
-                style={{
-                  width: "100%",
-                  height: 139,
-                  borderRadius: theme.borderWidths.thick_medium,
-                }}
-                resizeMode="cover"
-              />
-            </Box>
-      </Box>
-    </Box>
-  );
-};
-
-ListSupplies.displayName = "ListSupplies";
-export default asBaseComponent(ListSupplies);
+/**
+ * IMPORTS
+ */
+import React, { useEffect, useRef } from "react";
+import { Animated, Image, View, Easing } from "react-native";
+
+// components
+import Box from "../../components/box";
+import Typography from "../../components/typography";
+
+// style
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import type { IListSupplies } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+const ListSupplies: React.FC<IListSupplies> = ({
+  dataRegistro,
+  namePosto,
+  litragem,
+  valor,
+  imagemUrl,
+  corBarra,
+}) => {
+  // 🔹 Valor de animação para fade + slide
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(20)).current;
+
+  useEffect(() => {
+    // 🔹 Animação ao montar o componente
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 400,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+
+    Animated.timing(slideAnim, {
+      toValue: 0,
+      duration: 400,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim, slideAnim]);
+
+  return (
+    <Animated.View
+      style={{
+        opacity: fadeAnim,
+        transform: [{ translateY: slideAnim }],
+      }}
+    >
+      <Box
+        width={"100%"}
+        flexStyle={{ flexDirection: "row" }}
+        backgroundColor={theme.colors.neutral[25]}
+        borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+      >
+        {/* faixa lateral */}
+        <View
+          style={{
+            width: 15,
+            backgroundColor: corBarra ?? theme.colors.blue[375],
+            borderTopLeftRadius: theme.borderWidths.thick_medium,
+            borderBottomLeftRadius: theme.borderWidths.thick_medium,
+          }}
+        />
+
+        <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings["2xs"] }}>
+          {/* Nome do posto */}
+          <Box
+            marginStyle={{ marginBottom: theme.margins.fn }}
+            flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+          >
+            <Typography
+              text={`${namePosto || "Não informado"}`}
+              color={theme.colors.black[25]}
+              fontFamily={theme.fonts.inter_medium_500}
+              size={theme.fontSizes.sm}
+            />
+          </Box>
+
+          {/* Litragem */}
+          <Box
+            marginStyle={{ marginBottom: theme.margins.fn }}
+            flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+          >
+            <Typography
+              text="Litragem: "
+              color={theme.colors.black[25]}
+              fontFamily={theme.fonts.inter_medium_500}
+              size={theme.fontSizes.sm}
+            />
+            <Box flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}>
+              <Typography
+                text={`${litragem || "Não informado"}`}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.sm}
+              />
+              <Typography
+                text={` LT`}
+                color={theme.colors.red[400]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.sm}
+              />
+            </Box>
+          </Box>
+
+          {/* Valor */}
+          <Box
+            marginStyle={{ marginBottom: theme.margins.fn }}
+            flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+          >
+            <Typography
+              text="Valor: "
+              color={theme.colors.black[25]}
+              fontFamily={theme.fonts.inter_medium_500}
+              size={theme.fontSizes.sm}
+            />
+            <Typography
+              text={`R$ ${valor || "Não informado"}`}
+              color={theme.colors.gray[700]}
+              fontFamily={theme.fonts.inter_regular_400}
+              size={theme.fontSizes.sm}
+            />
+          </Box>
+
+          {/* Data */}
+          <Box
+            marginStyle={{ marginBottom: theme.margins.fn }}
+            flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+          >
+            <Typography
+              text={"Data: "}
+              color={theme.colors.black[25]}
+              fontFamily={theme.fonts.inter_medium_500}
+              size={theme.fontSizes.sm}
+            />
+            <Typography
+              text={`${dataRegistro || "Não informado"}`}
+              color={theme.colors.gray[700]}
+              fontFamily={theme.fonts.inter_regular_400}
+              size={theme.fontSizes.sm}
+            />
+          </Box>
+
+          {/* Imagem */}
+          <Box
+            borderStyled={{
+              borderWidth: 1,
+              borderColor: theme.colors.black[25],
+              borderRadius: theme.borderWidths.thick_medium,
+            }}
+            flexStyle={{
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Image
+              source={{ uri: imagemUrl ?? "https://placehold.co/300x300" }}
+              style={{
+                width: "100%",
+                height: 139,
+                borderRadius: theme.borderWidths.thick_medium,
+              }}
+              resizeMode="cover"
+            />
+          </Box>
+        </Box>
+      </Box>
+    </Animated.View>
+  );
+};
+
+ListSupplies.displayName = "ListSupplies";
+export default asBaseComponent(ListSupplies);

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