react-native-exp-fig 0.1.8 → 0.1.10

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

@@ -1,132 +1,132 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { Dimensions, TouchableOpacity } from "react-native";
-
-// components
-import { Box } from "../box";
-import { Typography } from "../typography";
-
-// typings
-import { IHeaderProps } from "./interface";
-
-// commons
-import { Icons } from "../../common/icons-svg";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-/**
- * Componente Header para a interação do usuário com ui.
- */
-const Header: React.FC<IHeaderProps> = ({
-  title,
-  color,
-  testID,
-  arrow,
-  // propsNav,
-  permission,
-  bluetoothIsConnected,
-  isInternetReachable,
-  handleNavigation,
-  backgroundColor,
-  isBluetooth = false,
-}) => {
-  const { width: widthScreen } = Dimensions.get("window");
-  const isMobile = widthScreen < 768;
-
-  return (
-    <Box
-      testID={testID}
-      width={"100%"}
-      height={45}
-      backgroundColor={backgroundColor ?? theme.colors.blue[400]}
-      flexStyle={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}
-    >
-      <Box
-        width={"10%"}
-        height={45}
-        flexStyle={{ flexDirection: "column", justifyContent: "center", alignItems: "flex-start" }}
-        paddingStyle={{ paddingLeft: theme.paddings.md }}
-      >
-        {arrow && title !== "Login" && (
-          <TouchableOpacity
-            disabled={!arrow}
-            onPress={handleNavigation}
-            style={{
-              width: 50,
-              height: 45,
-              flexDirection: "column",
-              alignItems: "flex-start",
-              justifyContent: "center",
-            }}
-          >
-            {title === "Controle de Jornada" || title === "Controle de Carregamento" ? (
-              <>
-                <Icons icon="LIST" color="#fff" />
-                <Box marginStyle={{ marginBottom: 8 }} />
-              </>
-            ) : (
-              arrow && <Icons icon="ARROW_LEFT" />
-            )}
-          </TouchableOpacity>
-        )}
-      </Box>
-
-      <Box
-        height={45}
-        flexStyle={{
-          flexDirection: "row",
-          justifyContent: "center",
-          alignItems: "center",
-          flex: 0.9,
-        }}
-      >
-        <Typography
-          text={title ? title : "Login"}
-          size={15.4}
-          fontFamily={theme.fonts.inter_bold_700}
-          color={color?.colorText ?? theme.colors.neutral[25]}
-          fontWeight="700"
-          align="center"
-          lineHeight={theme.fontSizes.lg}
-          letterSpacing={"regular"}
-          marginLeft={theme.margins["2xl"]}
-        />
-      </Box>
-
-      <Box
-        marginStyle={{ marginRight: isMobile ? 10 : 60 }}
-        borderStyled={{ borderRadius: 10 }}
-        width={50}
-        height={24}
-      >
-        {permission ? (
-          <Box marginStyle={{ marginTop: 2 }} />
-        ) : (
-          <Box
-            marginStyle={{ marginTop: 2 }}
-            flexStyle={{ flexDirection: "row", justifyContent: "flex-end" }}
-          >
-            {isBluetooth && (
-              <Icons
-                icon={bluetoothIsConnected ? "BLUETOOTH_CONNECTED" : "BLUETOOTH"}
-                color={bluetoothIsConnected ? theme.colors.green[400] : theme.colors.red[900]}
-              />
-            )}
-            <Icons
-              icon={isInternetReachable ? "WIFI_HIGH" : "WIFI_X"}
-              color={isInternetReachable ? theme.colors.orange[150] : theme.colors.red[800]}
-            />
-          </Box>
-        )}
-      </Box>
-    </Box>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { Header };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Dimensions, TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// typings
+import { IHeaderProps } from "./interface";
+
+// commons
+import { Icons } from "../../common/icons-svg";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente Header para a interação do usuário com ui.
+ */
+const Header: React.FC<IHeaderProps> = ({
+  title,
+  color,
+  testID,
+  arrow,
+  // propsNav,
+  permission,
+  bluetoothIsConnected,
+  isInternetReachable,
+  handleNavigation,
+  backgroundColor,
+  isBluetooth = false,
+}) => {
+  const { width: widthScreen } = Dimensions.get("window");
+  const isMobile = widthScreen < 768;
+
+  return (
+    <Box
+      testID={testID}
+      width={"100%"}
+      height={45}
+      backgroundColor={backgroundColor ?? theme.colors.blue[400]}
+      flexStyle={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}
+    >
+      <Box
+        width={"10%"}
+        height={45}
+        flexStyle={{ flexDirection: "column", justifyContent: "center", alignItems: "flex-start" }}
+        paddingStyle={{ paddingLeft: theme.paddings.md }}
+      >
+        {arrow && title !== "Login" && (
+          <TouchableOpacity
+            disabled={!arrow}
+            onPress={handleNavigation}
+            style={{
+              width: 50,
+              height: 45,
+              flexDirection: "column",
+              alignItems: "flex-start",
+              justifyContent: "center",
+            }}
+          >
+            {title === "Controle de Jornada" || title === "Controle de Carregamento" ? (
+              <>
+                <Icons icon="LIST" color="#fff" />
+                <Box marginStyle={{ marginBottom: 8 }} />
+              </>
+            ) : (
+              arrow && <Icons icon="ARROW_LEFT" />
+            )}
+          </TouchableOpacity>
+        )}
+      </Box>
+
+      <Box
+        height={45}
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "center",
+          flex: 0.9,
+        }}
+      >
+        <Typography
+          text={title ? title : "Login"}
+          size={15.4}
+          fontFamily={theme.fonts.inter_bold_700}
+          color={color?.colorText ?? theme.colors.neutral[25]}
+          fontWeight="700"
+          align="center"
+          lineHeight={theme.fontSizes.lg}
+          letterSpacing={"regular"}
+          marginLeft={theme.margins["2xl"]}
+        />
+      </Box>
+
+      <Box
+        marginStyle={{ marginRight: isMobile ? 10 : 60 }}
+        borderStyled={{ borderRadius: 10 }}
+        width={50}
+        height={24}
+      >
+        {permission ? (
+          <Box marginStyle={{ marginTop: 2 }} />
+        ) : (
+          <Box
+            marginStyle={{ marginTop: 2 }}
+            flexStyle={{ flexDirection: "row", justifyContent: "flex-end" }}
+          >
+            {isBluetooth && (
+              <Icons
+                icon={bluetoothIsConnected ? "BLUETOOTH_CONNECTED" : "BLUETOOTH"}
+                color={bluetoothIsConnected ? theme.colors.green[400] : theme.colors.red[900]}
+              />
+            )}
+            <Icons
+              icon={isInternetReachable ? "WIFI_HIGH" : "WIFI_X"}
+              color={isInternetReachable ? theme.colors.orange[150] : theme.colors.red[800]}
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { Header };

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

@@ -0,0 +1,100 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// typings
+import { IHistoryDetails } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { formatDate } from "../../utils/format-data";
+
+const HistoryDetails: React.FC<IHistoryDetails> = ({
+  numero = "01020304050607",
+  local = "Doca 1, Pátio 02 - Usimais (Ipatinga)",
+  date = "24/03/2025",
+  duracao = "00:30",
+}) => {
+  return (
+    <Box width="100%" borderStyled={{ borderRadius: 8 }} backgroundColor={theme.colors.blue[400]}>
+      <Box
+        flexStyle={{
+          flexDirection: "column",
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+        }}
+        paddingStyle={{ padding: theme.paddings.xs }}
+      >
+        <Typography
+          text={`Carregamento - #${numero}`}
+          size={theme.fontSizes.sm}
+          fontFamily={theme.fonts.inter_semi_bold_600}
+          fontWeight="600"
+          color={theme.colors.neutral[25]}
+          lineHeight={theme.fontSizes.xl}
+          letterSpacing={"regular"}
+        />
+
+        <Typography
+          text={local}
+          color={theme.colors.neutral[25]}
+          size={theme.fontSizes.xs}
+          lineHeight={theme.fontSizes.lg}
+          fontFamily={theme.fonts.inter_regular_400}
+          letterSpacing={"regular"}
+          numberOfLines={1}
+        />
+        <Typography
+          text={`Data carregamento: ${formatDate(new Date(date))}`}
+          color={theme.colors.neutral[25]}
+          size={theme.fontSizes.xs}
+          fontFamily={theme.fonts.inter_regular_400}
+          lineHeight={theme.fontSizes.lg}
+          letterSpacing={"regular"}
+          numberOfLines={1}
+        />
+      </Box>
+
+      <Box height={1} backgroundColor={theme.colors.gray[950]} />
+
+      <Box
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+        paddingStyle={{ padding: theme.paddings.xs }}
+      >
+        <Typography
+          text={"DURAÇÃO:"}
+          color={theme.colors.neutral[25]}
+          size={24}
+          fontFamily={theme.fonts.inter_regular_400}
+          fontWeight="400"
+          lineHeight={theme.fontSizes["3xl"]}
+          letterSpacing={"regular"}
+        />
+        <Typography
+          text={duracao}
+          color={theme.colors.neutral[25]}
+          size={26}
+          align="left"
+          fontFamily={theme.fonts.inter_medium_500}
+          fontWeight="500"
+          lineHeight={theme.fontSizes["3xl"]}
+          letterSpacing={"regular"}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { HistoryDetails };

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

@@ -0,0 +1,18 @@
+/**
+ * IMPORTS
+ */
+type IHistoryDetails = {
+  /**número do carregamento */
+  numero: string;
+  /**local onde vai ser o carregamento */
+  local: string;
+  /**data de quando o carregamento vai ser realizado */
+  date: string;
+  /**duração para o carregamento */
+  duracao: string;
+};
+
+/**
+ * EXPORTS
+ */
+export { IHistoryDetails };

package/src/components/image-capture-with-remove/index.tsx

@@ -16,6 +16,9 @@ import { IImageCaptureWithRemoveProps } from "./interface";
 // styles
 import { theme } from "../../styles/theme/theme";
 
+// utils
+import { getBorderColor } from "../../utils/status-color/return-color";
+
 /**
  *
  * Componente ImageCaptureWithRemove para a interação do usuário com ui.
@@ -26,7 +29,10 @@ const ImageCaptureWithRemove: React.FC<IImageCaptureWithRemoveProps> = ({
   foto = null,
   handleTakePhoto,
   onRemove,
+  status,
 }: IImageCaptureWithRemoveProps) => {
+  const statusColor = status === "Cancelado" || status === "Pendente";
+
   return (
     <TouchableOpacity
       testID="image-capture-touchable"
@@ -41,9 +47,9 @@ const ImageCaptureWithRemove: React.FC<IImageCaptureWithRemoveProps> = ({
         flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "center" }}
         testID="plus-icon-box"
         borderStyled={{
-          borderWidth: 1,
+          borderWidth: statusColor ? theme.borderWidths.thick : theme.borderWidths.thin,
           borderRadius: theme.fontSizes.md,
-          borderColor: theme.colors.blue[400],
+          borderColor: statusColor ? getBorderColor(status) : theme.colors.blue[400],
         }}
       >
         {foto ? (

package/src/components/image-capture-with-remove/interface.d.ts

@@ -14,6 +14,9 @@ type IImageCaptureWithRemoveProps = {
 
   /**Captura a imagem */
   handleTakePhoto: () => void;
+
+  /**Define o status das fotos */
+  status?: "Pendente" | "Concluido" | "Cancelado" | "Andamento";
 };
 
 /**

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

@@ -26,21 +26,26 @@ const NotificationLoading: React.FC<INotificationLoading> = ({
   notification,
   dataStart,
   style,
+  readonly,
 }) => {
-  // const truncatedText = title.length > 13 ? title.substring(0, 11) + "..." : title;
   return (
-    <TouchableOpacity activeOpacity={0.7} testID={testID} onPress={handleNavigation}>
+    <TouchableOpacity
+      activeOpacity={0.7}
+      testID={testID}
+      onPress={handleNavigation}
+      disabled={readonly}
+    >
       <Box
         width={"100%"}
         flexStyle={{ flexDirection: "row", alignItems: "center" }}
-        backgroundColor={theme.colors.blue[400]}
+        backgroundColor={readonly ? theme.colors.blue[40050] : theme.colors.blue[400]}
         borderStyled={{
-          borderWidth: 1,
+          borderWidth: theme.borderWidths.thin,
           borderRadius: theme.borderWidths.thick_medium,
-          borderColor: theme.colors.blue[400],
+          borderColor: readonly ? theme.colors.blue[40050] : theme.colors.blue[400],
         }}
         paddingStyle={{ padding: theme.paddings["2xs"] }}
-        style={[{ elevation: 5 }, style]}
+        style={style}
       >
         <Box width={"9%"}>
           <Icons icon={"BELL"} size={32} color={theme.colors.neutral[25]} />
@@ -117,7 +122,13 @@ const NotificationLoading: React.FC<INotificationLoading> = ({
                 marginRight={8}
               />
 
-              <Icons icon={"ELLIPSE"} color={getStatusColor(statusNotify as StatusType)} size={9} />
+              <Icons
+                icon={"ELLIPSE"}
+                color={
+                  readonly ? theme.colors.neutral[25] : getStatusColor(statusNotify as StatusType)
+                }
+                size={9}
+              />
             </Box>
           </Box>
 

package/src/components/notification-loading/interface.d.ts

@@ -22,7 +22,11 @@ interface INotificationLoading extends ViewProps, IGlobalCss {
   /**propriedade que indica o status da notificação */
   statusNotify: string;
 
+  /**propriedade que indica a data da notificação */
   dataStart: string | Date;
+
+  /**propriedade que indica se a notificação está lida ou não */
+  readonly?: boolean;
 }
 
 /**

package/src/components/profile-menu-option/index.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// icons
+import { Icons } from "../../common/icons-svg";
+
+// theme
+import { theme } from "../../styles/theme/theme";
+
+// typing
+import { IProfileMenuOption } from "./interface";
+
+const ProfileMenuOption: React.FC<IProfileMenuOption> = ({
+  handleNavigation,
+  icon,
+  text,
+  backgroundColor,
+  colorIcon,
+}) => {
+  return (
+    <TouchableOpacity onPress={handleNavigation} activeOpacity={0.7}>
+      <Box
+        flexStyle={{
+          alignItems: "center",
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+        width={"100%"}
+        backgroundColor={backgroundColor ?? theme.colors.blue[400]}
+        paddingStyle={{ padding: theme.paddings["2xs"] }}
+        borderStyled={{
+          borderRadius: theme.borderWidths.thick_medium,
+          borderColor: theme.colors.blue[400],
+        }}
+        marginStyle={{ marginBottom: theme.margins.xs }}
+      >
+        <Box flexStyle={{ alignItems: "center", flexDirection: "row" }}>
+          <Icons icon={icon ?? "AGENT"} color={colorIcon ?? theme.colors.neutral[25]} />
+          <Typography
+            text={text}
+            size={theme.fontSizes.sm}
+            fontFamily={theme.fonts.inter_bold_700}
+            fontWeight={"700"}
+            lineHeight={theme.fontSizes.lg}
+            color={theme.colors.neutral[25]}
+            marginLeft={theme.margins.xs}
+          />
+        </Box>
+        <Typography
+          text="›"
+          size={theme.fontSizes["2xl"]}
+          fontFamily={theme.fonts.inter_medium_500}
+          fontWeight={"500"}
+          color={theme.colors.neutral[25]}
+        />
+      </Box>
+    </TouchableOpacity>
+  );
+};
+
+export { ProfileMenuOption };

package/src/components/profile-menu-option/interface.d.ts

@@ -0,0 +1,42 @@
+/**
+ * IMPORTS
+ */
+import { TouchableOpacityProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+// svg
+import { SVG_NAME } from "../../common/icons-svg/constants";
+
+interface IProfileMenuOption extends TouchableOpacityProps, IGlobalCss {
+  /**
+   * nome do ícone
+   */
+  icon: keyof typeof SVG_NAME;
+
+  /**
+   * Propriedade texto do menu
+   */
+  text: string;
+
+  /**
+   * função de navegação
+   */
+  handleNavigation: () => void;
+
+  /**
+   * cor de fundo
+   */
+  backgroundColor?: string;
+
+  /**
+   * cor do ícone
+   */
+  colorIcon?: string;
+}
+
+/**
+ * EXPORTS
+ */
+export { IProfileMenuOption };