react-native-exp-fig 0.1.14 → 0.1.16

package/src/components/activities-progress/interface.d.ts

@@ -1,41 +1,41 @@
-/**
- * IMPORTS
- */
-
-import { type ViewProps } from "react-native";
-/**
- * INTERFACE
- */
-import { IGlobalCss } from "../../styles/global/interface";
-
-interface IActivitiesProgress extends ViewProps, IGlobalCss {
-  /**
-   * Data de fim da atividade
-   */
-  data_fim?: string;
-
-  /**
-   * Duração da atividade
-   */
-  duracao?: string;
-
-  /**
-   * Horário de início da atividade
-   */
-  data_inicio?: string;
-
-  /**
-   * Título/label da atividade
-   */
-  titleLabel?: string;
-
-  /**
-   * Situação da atividade
-   */
-  situation: boolean;
-}
-
-/**
- * EXPORT
- */
-export type { IActivitiesProgress };
+/**
+ * IMPORTS
+ */
+
+import { type ViewProps } from "react-native";
+/**
+ * INTERFACE
+ */
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface IActivitiesProgress extends ViewProps, IGlobalCss {
+  /**
+   * Data de fim da atividade
+   */
+  data_fim?: string;
+
+  /**
+   * Duração da atividade
+   */
+  duracao?: string;
+
+  /**
+   * Horário de início da atividade
+   */
+  data_inicio?: string;
+
+  /**
+   * Título/label da atividade
+   */
+  titleLabel?: string;
+
+  /**
+   * Situação da atividade
+   */
+  situation: boolean;
+}
+
+/**
+ * EXPORT
+ */
+export type { IActivitiesProgress };

package/src/components/avatar-profile/index.tsx

@@ -1,95 +1,95 @@
-import React from "react";
-import { TouchableOpacity, Image } from "react-native";
-
-// components
-import { Box } from "../box";
-import { Typography } from "../typography";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-// icons
-import { Icons } from "../../common/icons-svg";
-
-// types
-import { IAvatarProfile } from "./interface";
-
-const AvatarProfile: React.FC<IAvatarProfile> = ({
-  avatar,
-  isEdit = false,
-  handleTakePicker,
-  name,
-  email,
-  testID,
-}) => {
-  return (
-    <Box flexStyle={{ justifyContent: "center", alignItems: "center" }}>
-      <Box
-        backgroundColor={theme.colors.neutral[25]}
-        width={96}
-        height={96}
-        borderStyled={{ borderRadius: 50 }}
-        flexStyle={{ justifyContent: "center", alignItems: "center" }}
-        testID={testID}
-      >
-        <Image
-          source={{ uri: avatar ?? "" }}
-          alt={avatar ?? "foto de perfil"}
-          style={{
-            width: 90,
-            height: 90,
-            borderRadius: 45,
-            borderWidth: theme.borderWidths.thin_medium,
-            borderColor: theme.colors.black[25],
-          }}
-        />
-        {isEdit && (
-          <Box
-            width={20}
-            height={20}
-            backgroundColor={theme.colors.blue[350]}
-            borderStyled={{
-              borderRadius: 10,
-              borderWidth: theme.borderWidths.thin_medium,
-              borderColor: theme.colors.black[25],
-            }}
-            flexStyle={{ justifyContent: "center", alignItems: "center" }}
-            style={{
-              position: "absolute",
-              bottom: 5,
-              right: 5,
-            }}
-          >
-            <TouchableOpacity
-              activeOpacity={0.7}
-              onPress={handleTakePicker}
-              testID="avatar-profile"
-            >
-              <Icons size={12} icon={"PENCIL"} />
-            </TouchableOpacity>
-          </Box>
-        )}
-      </Box>
-
-      {/* Informações do usuário */}
-      <Typography
-        text={name}
-        size={theme.fontSizes.xl}
-        fontFamily={theme.fonts.inter_bold_700}
-        fontWeight={"700"}
-        lineHeight={theme.fontSizes["2xl"]}
-        color={theme.colors.black[100]}
-      />
-      <Typography
-        text={email}
-        size={theme.fontSizes.xs}
-        fontFamily={theme.fonts.inter_regular_400}
-        fontWeight={"400"}
-        lineHeight={theme.fontSizes.sm}
-        color={theme.colors.gray[900]}
-      />
-    </Box>
-  );
-};
-
-export { AvatarProfile };
+import React from "react";
+import { TouchableOpacity, Image } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+// icons
+import { Icons } from "../../common/icons-svg";
+
+// types
+import { IAvatarProfile } from "./interface";
+
+const AvatarProfile: React.FC<IAvatarProfile> = ({
+  avatar,
+  isEdit = false,
+  handleTakePicker,
+  name,
+  email,
+  testID,
+}) => {
+  return (
+    <Box flexStyle={{ justifyContent: "center", alignItems: "center" }}>
+      <Box
+        backgroundColor={theme.colors.neutral[25]}
+        width={96}
+        height={96}
+        borderStyled={{ borderRadius: 50 }}
+        flexStyle={{ justifyContent: "center", alignItems: "center" }}
+        testID={testID}
+      >
+        <Image
+          source={{ uri: avatar ?? "" }}
+          alt={avatar ?? "foto de perfil"}
+          style={{
+            width: 90,
+            height: 90,
+            borderRadius: 45,
+            borderWidth: theme.borderWidths.thin_medium,
+            borderColor: theme.colors.black[25],
+          }}
+        />
+        {isEdit && (
+          <Box
+            width={20}
+            height={20}
+            backgroundColor={theme.colors.blue[350]}
+            borderStyled={{
+              borderRadius: 10,
+              borderWidth: theme.borderWidths.thin_medium,
+              borderColor: theme.colors.black[25],
+            }}
+            flexStyle={{ justifyContent: "center", alignItems: "center" }}
+            style={{
+              position: "absolute",
+              bottom: 5,
+              right: 5,
+            }}
+          >
+            <TouchableOpacity
+              activeOpacity={0.7}
+              onPress={handleTakePicker}
+              testID="avatar-profile"
+            >
+              <Icons size={12} icon={"PENCIL"} />
+            </TouchableOpacity>
+          </Box>
+        )}
+      </Box>
+
+      {/* Informações do usuário */}
+      <Typography
+        text={name}
+        size={theme.fontSizes.xl}
+        fontFamily={theme.fonts.inter_bold_700}
+        fontWeight={"700"}
+        lineHeight={theme.fontSizes["2xl"]}
+        color={theme.colors.black[100]}
+      />
+      <Typography
+        text={email}
+        size={theme.fontSizes.xs}
+        fontFamily={theme.fonts.inter_regular_400}
+        fontWeight={"400"}
+        lineHeight={theme.fontSizes.sm}
+        color={theme.colors.gray[900]}
+      />
+    </Box>
+  );
+};
+
+export { AvatarProfile };

package/src/components/avatar-profile/interface.d.ts

@@ -1,39 +1,39 @@
-/**
- * IMPORTS
- */
-import { ViewProps } from "react-native";
-
-// typing
-import { IGlobalCss } from "../../styles/global/interface";
-
-interface IAvatarProfile extends ViewProps, IGlobalCss {
-  /**
-   * Função que tira uma foto e editar.
-   */
-  handleTakePicker?: () => void;
-
-  /**
-   * foto do usuário.
-   */
-  avatar: string;
-
-  /**
-   * nome do usuário.
-   */
-  name: string;
-
-  /**
-   * email do usuário.
-   */
-  email: string;
-
-  /**
-   * A propriedade para editar a foto do usuário.
-   */
-  isEdit: boolean;
-}
-
-/**
- * EXPORTS
- */
-export type { IAvatarProfile };
+/**
+ * IMPORTS
+ */
+import { ViewProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface IAvatarProfile extends ViewProps, IGlobalCss {
+  /**
+   * Função que tira uma foto e editar.
+   */
+  handleTakePicker?: () => void;
+
+  /**
+   * foto do usuário.
+   */
+  avatar: string;
+
+  /**
+   * nome do usuário.
+   */
+  name: string;
+
+  /**
+   * email do usuário.
+   */
+  email: string;
+
+  /**
+   * A propriedade para editar a foto do usuário.
+   */
+  isEdit: boolean;
+}
+
+/**
+ * EXPORTS
+ */
+export type { IAvatarProfile };

package/src/components/button/styles.ts

@@ -1,34 +1,34 @@
-/**
- * IMPORTS
- */
-import { StyleSheet } from "react-native";
-
-// typings
-import { type IButtonProps } from "./interface";
-import { IGlobalCss } from "../../styles/global/interface";
-
-import { stylesGlobal } from "../../styles/global/styles";
-
-/**
- * Interface ButtonProps
- */
-interface ButtonProps extends Omit<IButtonProps, "color">, Omit<IGlobalCss, "color"> {}
-
-const styles = (props: ButtonProps) =>
-  StyleSheet.create({
-    buttonStyle: { ...stylesGlobal(props), ...props } as IGlobalCss,
-    buttonTextStyle: {
-      color: props.buttonTextStyle?.color ?? "black",
-      fontSize: props.buttonTextStyle?.fontSize ?? 14,
-      letterSpacing: props.buttonTextStyle?.letterSpacing ?? 0.5,
-      lineHeight: props.buttonTextStyle?.lineHeight ?? 24,
-      fontWeight: props.buttonTextStyle?.fontWeight,
-      fontFamily: props.buttonTextStyle?.fontFamily ?? "Inter-Medium",
-      textAlign: props.buttonTextStyle?.textAlign,
-    },
-  });
-
-/**
- * EXPORTS
- */
-export { styles };
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+
+// typings
+import { type IButtonProps } from "./interface";
+import { IGlobalCss } from "../../styles/global/interface";
+
+import { stylesGlobal } from "../../styles/global/styles";
+
+/**
+ * Type ButtonProps
+ */
+type ButtonProps = Omit<IButtonProps, "color"> & Omit<IGlobalCss, "color">;
+
+const styles = (props: ButtonProps) =>
+  StyleSheet.create({
+    buttonStyle: { ...stylesGlobal(props), ...props } as IGlobalCss,
+    buttonTextStyle: {
+      color: props.buttonTextStyle?.color ?? "black",
+      fontSize: props.buttonTextStyle?.fontSize ?? 14,
+      letterSpacing: props.buttonTextStyle?.letterSpacing ?? 0.5,
+      lineHeight: props.buttonTextStyle?.lineHeight ?? 24,
+      fontWeight: props.buttonTextStyle?.fontWeight,
+      fontFamily: props.buttonTextStyle?.fontFamily ?? "Inter-Medium",
+      textAlign: props.buttonTextStyle?.textAlign,
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

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

@@ -23,7 +23,9 @@ const CardHistory: React.FC<ICardHistory> = ({
   title = "Carregamento #01020304050607",
   local = "Doca 1, Patío 03 - Usiminas Ipatinga",
   vehicle = "EXP-0000",
-  prevision = "12:34 10/03/2025",
+  data_start = "12:34 10/03/2025",
+  data_end = "13:34 10/03/2025",
+  duration = "01:34",
   testID,
   handleNavigation,
 }: ICardHistory) => {
@@ -49,7 +51,7 @@ const CardHistory: React.FC<ICardHistory> = ({
             }}
             style={{
               width: "100%",
-              height: 90,
+              flex: 1,
               borderRadius: theme.borderWidths.thick_medium,
             }}
           />
@@ -108,7 +110,7 @@ const CardHistory: React.FC<ICardHistory> = ({
             />
           </Box>
 
-          {/**PREVISÃO DO CARREGAMENTO */}
+          {/**DATA INICIO DO CARREGAMENTO */}
           <Box
             flexStyle={{
               flexDirection: "row",
@@ -120,7 +122,7 @@ const CardHistory: React.FC<ICardHistory> = ({
             }}
           >
             <Typography
-              text={"Data:"}
+              text={"Data Inicio:"}
               color={theme.colors.neutral[25]}
               size={theme.fontSizes.xs}
               fontFamily={theme.fonts.inter_regular_400}
@@ -128,7 +130,67 @@ const CardHistory: React.FC<ICardHistory> = ({
               letterSpacing={"regular"}
             />
             <Typography
-              text={prevision}
+              text={data_start}
+              color={theme.colors.neutral[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_bold_700}
+              lineHeight={theme.fontSizes.md ?? 16}
+              letterSpacing={"regular"}
+              marginLeft={4}
+            />
+          </Box>
+
+          {/**DATA FIM DO CARREGAMENTO */}
+          <Box
+            flexStyle={{
+              flexDirection: "row",
+              justifyContent: "flex-start",
+              alignItems: "center",
+            }}
+            marginStyle={{
+              marginBottom: 4,
+            }}
+          >
+            <Typography
+              text={"Data Fim:"}
+              color={theme.colors.neutral[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_regular_400}
+              lineHeight={theme.fontSizes.md ?? 16}
+              letterSpacing={"regular"}
+            />
+            <Typography
+              text={data_end}
+              color={theme.colors.neutral[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_bold_700}
+              lineHeight={theme.fontSizes.md ?? 16}
+              letterSpacing={"regular"}
+              marginLeft={4}
+            />
+          </Box>
+
+          {/**DURAÇÃO DO CARREGAMENTO */}
+          <Box
+            flexStyle={{
+              flexDirection: "row",
+              justifyContent: "flex-start",
+              alignItems: "center",
+            }}
+            marginStyle={{
+              marginBottom: 4,
+            }}
+          >
+            <Typography
+              text={"Duração:"}
+              color={theme.colors.neutral[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_regular_400}
+              lineHeight={theme.fontSizes.md ?? 16}
+              letterSpacing={"regular"}
+            />
+            <Typography
+              text={duration}
               color={theme.colors.neutral[25]}
               size={theme.fontSizes.xs}
               fontFamily={theme.fonts.inter_bold_700}

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

@@ -1,28 +1,34 @@
-/**
- * IMPORTS
- */
-import { TouchableOpacityProps } from "react-native";
-
-// typing
-import { IGlobalCss } from "../../styles/global/interface";
-
-interface ICardHistory extends TouchableOpacityProps, IGlobalCss {
-  /**propriedade que indica o título do carregamento */
-  title?: string;
-
-  /**propriedade que indica o local do carregamento */
-  local?: string;
-
-  /**propriedade que indica o veiculo */
-  vehicle?: string;
-
-  /**propriedade que indica a previsão do carregamento */
-  prevision?: string;
-
-  handleNavigation: () => void;
-}
-
-/**
- * EXPORTS
- */
-export { ICardHistory };
+/**
+ * IMPORTS
+ */
+import { TouchableOpacityProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface ICardHistory extends TouchableOpacityProps, IGlobalCss {
+  /**propriedade que indica o título do carregamento */
+  title?: string;
+
+  /**propriedade que indica o local do carregamento */
+  local?: string;
+
+  /**propriedade que indica o veiculo */
+  vehicle?: string;
+
+  /**propriedade que indica inicio do carregamento */
+  data_start?: string;
+
+  /**propriedade que indica fim do carregamento */
+  data_end?: string;
+
+  /**propiedade que infica o a duração gasta no carregamento */
+  duration?: string;
+
+  handleNavigation: () => void;
+}
+
+/**
+ * EXPORTS
+ */
+export { ICardHistory };

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

@@ -16,7 +16,11 @@ import { ICardLoading } from "./interface";
 
 // styles
 import { theme } from "../../styles/theme/theme";
-import { getStatusColor, StatusType } from "../../utils/status-color/return-color";
+import {
+  getStatusTextColor,
+  getStatusColor,
+  StatusType,
+} from "../../utils/status-color/return-color";
 
 /**
  *
@@ -56,7 +60,7 @@ const CardLoading: React.FC<ICardLoading> = ({
             }}
             style={{
               width: "100%",
-              height: 120,
+              flex: 1,
               borderRadius: theme.borderWidths.thick_medium,
             }}
           />
@@ -198,7 +202,7 @@ const CardLoading: React.FC<ICardLoading> = ({
               justifyContent: "space-between",
             }}
             marginStyle={{
-              marginBottom: 4,
+              marginBottom: 8,
             }}
           >
             <Box
@@ -246,6 +250,14 @@ const CardLoading: React.FC<ICardLoading> = ({
                 justifyContent: "flex-start",
                 alignItems: "center",
               }}
+              backgroundColor={getStatusColor(status as StatusType)}
+              height={22}
+              borderStyled={{
+                borderWidth: 1,
+                borderRadius: 11,
+                borderColor: "transparent",
+              }}
+              paddingStyle={{ paddingLeft: 8, paddingRight: 8 }}
             >
               <Typography
                 text={"Status:"}
@@ -257,7 +269,7 @@ const CardLoading: React.FC<ICardLoading> = ({
               />
               <Typography
                 text={status}
-                color={getStatusColor(status as StatusType)}
+                color={getStatusTextColor(status as StatusType)}
                 size={theme.fontSizes.xs}
                 fontFamily={theme.fonts.inter_bold_700}
                 lineHeight={theme.fontSizes.md ?? 16}