jornada-ui 0.4.11 → 0.4.13

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

@@ -1,74 +1,75 @@
-/**
- * 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"}
-            />
-          )}
-        </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>(
+  ({ 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);

package/src/components/travel-history/index.tsx

@@ -210,7 +210,7 @@ const TravelHistory = forwardRef<any, ITravelHistory>((props, ref): React.ReactE
                     text={`${status ?? "ABERTA"}`}
                     size={theme.fontSizes.xs}
                     color={backgroundColor ?? theme.colors.black[180]}
-                    fontFamily={theme.fonts.inter_regular_400}
+                    fontFamily={theme.fonts.inter_semi_bold_600}
                   />
                 </Box>
 
@@ -223,16 +223,16 @@ const TravelHistory = forwardRef<any, ITravelHistory>((props, ref): React.ReactE
                 >
                   <Typography
                     style={{ flexShrink: 1 }}
-                    text={`Abastecimentos: `}
+                    text={`Próxima viagem: `}
                     size={theme.fontSizes.sm}
                     color={theme.colors.black[10]}
                     fontFamily={theme.fonts.inter_medium_500}
                   />
                   <Typography
-                    text={`${supply ?? "0"}`}
+                    text={`${nextTrip ?? "Não especificado"}`}
                     size={theme.fontSizes.xs}
                     color={backgroundColor ?? theme.colors.black[180]}
-                    fontFamily={theme.fonts.inter_regular_400}
+                    fontFamily={theme.fonts.inter_semi_bold_600}
                   />
                 </Box>
 
@@ -245,16 +245,16 @@ const TravelHistory = forwardRef<any, ITravelHistory>((props, ref): React.ReactE
                 >
                   <Typography
                     style={{ flexShrink: 1 }}
-                    text={`Próxima viagem: `}
+                    text={`Abastecimentos: `}
                     size={theme.fontSizes.sm}
                     color={theme.colors.black[10]}
                     fontFamily={theme.fonts.inter_medium_500}
                   />
                   <Typography
-                    text={`${nextTrip ?? "Não especificado"}`}
+                    text={`${supply ?? "0"}`}
                     size={theme.fontSizes.xs}
                     color={backgroundColor ?? theme.colors.black[180]}
-                    fontFamily={theme.fonts.inter_regular_400}
+                    fontFamily={theme.fonts.inter_semi_bold_600}
                   />
                 </Box>
               </Box>

package/src/components/trip-details-card/index.tsx

@@ -1,193 +1,267 @@
-/**
- * IMPORTS
- */
-import React, { useEffect, useState } from "react";
-import { View, TouchableOpacity, LayoutAnimation, UIManager, Platform } from "react-native";
-
-// components
-import Box from "../../components/box";
-import Typography from "../../components/typography";
-
-// style
-import { theme } from "../../styles/theme/theme";
-import { Icons } from "../../common/icons-svg";
-
-// typings
-import type { ITripDetailsCard } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-const TripDetailsCard: React.FC<ITripDetailsCard> = ({
-  origem,
-  destino,
-  proximoCarregamento,
-  peso,
-  baseCalculo,
-}) => {
-  const [expanded, setExpanded] = useState(false);
-
-  useEffect(() => {
-    if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
-      UIManager.setLayoutAnimationEnabledExperimental(true);
-    }
-  }, []);
-
-  const toggleExpand = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setExpanded((prev) => !prev);
-  };
-
-  const formatPeso = (v?: number) =>
-    v === undefined || 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")}`;
-
-  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: theme.colors.orange[150],
-          borderTopLeftRadius: theme.borderWidths.thick_medium,
-          borderBottomLeftRadius: theme.borderWidths.thick_medium,
-        }}
-      />
-
-      <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings["2xs"] }}>
-        {/* Cabeçalho: botão que abre/fecha a sanfona */}
-        <TouchableOpacity
-          onPress={toggleExpand}
-          activeOpacity={0.9}
-          accessibilityRole="button"
-          accessibilityLabel="Detalhes da viagem"
-        >
-          <Box
-            flexStyle={{
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
-            <Typography
-              text="Detalhes da viagem"
-              color={theme.colors.black[25]}
-              fontFamily={theme.fonts.inter_bold}
-              size={theme.fontSizes.md}
-            />
-
-            {/* Alterna seta */}
-            <Icons
-              icon={expanded ? "CHEVRON_UP" : "CHEVRON_DOWN"}
-              color={theme.colors.gray[700]}
-              size={20}
-            />
-          </Box>
-        </TouchableOpacity>
-
-        {/* Aparece somente quando clicado */}
-        {expanded && (
-          <>
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text="Origem: "
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-              <Typography
-                text={`${origem}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text="Destino: "
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-              <Typography
-                text={`${destino}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text="Próximo carregamento: "
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-              <Typography
-                text={`${proximoCarregamento || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text={"Peso: "}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-              <Typography
-                text={`${formatPeso(peso) || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text="Base para cálculo do PRO: "
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-              <Typography
-                text={`${formatBase(baseCalculo) || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
-              />
-            </Box>
-          </>
-        )}
-      </Box>
-    </Box>
-  );
-};
-
-TripDetailsCard.displayName = "TripDetailsCard";
-export default asBaseComponent(TripDetailsCard);
+/**
+ * IMPORTS
+ */
+import React, { useState } from "react";
+import { View, TouchableOpacity, LayoutAnimation, Platform, UIManager } from "react-native";
+
+// components
+import Box from "../../components/box";
+import Typography from "../../components/typography";
+
+// style
+import { theme } from "../../styles/theme/theme";
+import { Icons } from "../../common/icons-svg";
+
+// typings
+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);
+}
+
+const TripDetailsCard: React.FC<ITripDetailsCard> = ({
+  dataRegistro,
+  numeroCte,
+  origem,
+  destino,
+  proximoCarregamento,
+  peso,
+  baseCalculo,
+  corBarra,
+  kmCarregado,
+  kmVazio,
+}) => {
+  const [expanded, setExpanded] = useState(true);
+
+  const toggleExpand = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setExpanded((prev) => !prev);
+  };
+
+  const formatPeso = (v?: number) =>
+    v === undefined || 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")}`;
+
+  return (
+    <Box
+      width={"100%"}
+      flexStyle={{ flexDirection: "row" }}
+      backgroundColor={theme.colors.neutral[25]}
+      borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+    >
+      {/* faixa lateral */}
+      <View
+        style={{
+          width: 8,
+          backgroundColor: corBarra ?? theme.colors.orange[150],
+          borderTopLeftRadius: theme.borderWidths.thick_medium,
+          borderBottomLeftRadius: theme.borderWidths.thick_medium,
+        }}
+      />
+
+      <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings["2xs"] }}>
+        <TouchableOpacity
+          onPress={toggleExpand}
+          activeOpacity={0.9}
+          accessibilityRole="button"
+          accessibilityLabel="Detalhes da viagem"
+        >
+          <Box
+            flexStyle={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Typography
+              text="Detalhes da viagem"
+              color={theme.colors.black[25]}
+              fontFamily={theme.fonts.inter_bold}
+              size={theme.fontSizes.md}
+            />
+
+            <Icons
+              icon={expanded ? "CHEVRON_UP" : "CHEVRON_DOWN"}
+              color={theme.colors.gray[700]}
+              size={20}
+            />
+          </Box>
+        </TouchableOpacity>
+
+        {/* Bloco que será expandido/colapsado com animação */}
+        {expanded && (
+          <>
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={"Número CTE: "}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.sm}
+              />
+              <Typography
+                text={`${numeroCte || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Data carregamento: "
+                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.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Origem: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.sm}
+              />
+              <Typography
+                text={`${origem || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Destino: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${destino || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Próximo carregamento: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${proximoCarregamento || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={"Peso: "}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${formatPeso(peso) || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={"Km carregado: "}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${kmCarregado || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={"Km vazio: "}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${kmVazio || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Base para cálculo do PRO: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${formatBase(baseCalculo) || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+TripDetailsCard.displayName = "TripDetailsCard";
+export default asBaseComponent(TripDetailsCard);