react-native-exp-fig 0.1.9 → 0.1.10

package/src/components/coil/index.tsx

@@ -82,13 +82,13 @@ const Coil: React.FC<ICoil> = ({
           flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-end" }}
           height={70}
         >
-          {status === "recused" && (
+          {status === "Cancelado" && (
             <Icons icon={"RECUSED"} size={32} background={backgroundColorIcon} />
           )}
-          {status === "approved" && (
+          {status === "Concluido" && (
             <Icons icon={"CHECK_CIRCLE"} size={32} background={backgroundColorIcon} />
           )}
-          {status === "pending" && (
+          {(status === "Pendente" || status === "Andamento") && (
             <Icons icon={"EXCLAMATION_CIRCLE"} size={32} background={backgroundColorIcon} />
           )}
         </Box>

package/src/components/coil/interface.d.ts

@@ -17,7 +17,7 @@ interface ICoil extends ViewProps, IGlobalCss {
   handleNavigation: () => void;
 
   /**propriedade que indica status da bobina */
-  status?: "recused" | "pending" | "approved";
+  status?: "Cancelado" | "Pendente" | "Concluido" | "Andamento";
 }
 
 /**

package/src/components/filter-date-selector/index.tsx

@@ -1,89 +1,101 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { TouchableOpacity, ActivityIndicator, FlatList } from "react-native";
-
-// components
-import { Box } from "../box";
-import { Typography } from "../typography";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-//typing
-import { IFilterDateSelector, ISelectedDay } from "./interface";
-
-/**
- *
- * Componente FilterDateSelector para a interação do usuário com ui.
- */
-const FilterDateSelector: React.FC<IFilterDateSelector> = ({
-  selectedDay,
-  handleSelectedDay,
-  days,
-  isLoading,
-  testID,
-}) => {
-  const renderDayBlock = ({ item: day, index }: { item: ISelectedDay; index: number }) => {
-    const isSelected = selectedDay && selectedDay.date === day.date;
-    return (
-      <TouchableOpacity
-        disabled={isSelected}
-        key={index}
-        activeOpacity={0.7}
-        onPress={() => handleSelectedDay(day)}
-      >
-        <Box
-          testID={testID}
-          width={60}
-          height={75}
-          flexStyle={{ alignItems: "center", justifyContent: "center" }}
-          backgroundColor={isSelected ? theme.colors.blue[400] : theme.colors.gray[350]}
-          borderStyled={{
-            borderRadius: theme.borderWidths.thick_large,
-            borderColor: isSelected ? theme.colors.blue[400] : theme.colors.gray[350],
-            borderWidth: theme.borderWidths.thin,
-          }}
-          marginStyle={{ marginRight: theme.margins["2xs"] }}
-        >
-          {isSelected && isLoading ? (
-            <ActivityIndicator size="small" color="white" />
-          ) : (
-            <>
-              <Typography
-                text={day.date.toString().padStart(2, "0")}
-                size={theme.fontSizes.lg}
-                color={theme.colors.neutral[25]}
-                fontFamily={theme.fonts.inter_bold_700}
-              />
-              <Typography
-                text={day.dayName.slice(0, 3)}
-                size={theme.fontSizes.lg}
-                color={theme.colors.neutral[25]}
-                fontFamily={theme.fonts.inter_bold_700}
-                letterSpacing="o_16"
-              />
-            </>
-          )}
-        </Box>
-      </TouchableOpacity>
-    );
-  };
-  const daySorted = days.sort(
-    (a, b) => new Date(b.fullDate).getTime() - new Date(a.fullDate).getTime()
-  );
-  return (
-    <FlatList
-      horizontal
-      data={daySorted}
-      showsHorizontalScrollIndicator={false}
-      renderItem={renderDayBlock}
-    />
-  );
-};
-
-/**
- * EXPORTS
- */
-export { FilterDateSelector };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { TouchableOpacity, ActivityIndicator, FlatList } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+//typing
+import { IFilterDateSelector, ISelectedDay } from "./interface";
+import { Icons } from "../../common/icons-svg";
+
+/**
+ *
+ * Componente FilterDateSelector para a interação do usuário com ui.
+ */
+const FilterDateSelector: React.FC<IFilterDateSelector> = ({
+  selectedDay,
+  handleSelectedDay,
+  days,
+  isLoading,
+  testID,
+}) => {
+  const renderDayBlock = ({ item: day, index }: { item: ISelectedDay; index: number }) => {
+    const isSelected = selectedDay && selectedDay.date === day.date;
+    return (
+      <TouchableOpacity
+        disabled={isSelected}
+        key={index}
+        activeOpacity={0.7}
+        onPress={() => handleSelectedDay(day)}
+      >
+        <Box
+          testID={testID}
+          width={65}
+          height={75}
+          flexStyle={{ alignItems: "center", justifyContent: "center" }}
+          backgroundColor={isSelected ? theme.colors.blue[400] : theme.colors.gray[350]}
+          borderStyled={{
+            borderRadius: theme.borderWidths.thick_large,
+            borderColor: isSelected ? theme.colors.blue[400] : theme.colors.gray[350],
+            borderWidth: theme.borderWidths.thin,
+          }}
+          marginStyle={{ marginRight: theme.margins["2xs"], marginTop: theme.margins["2xs"] }}
+        >
+          {isSelected && isLoading ? (
+            <ActivityIndicator size="small" color="white" />
+          ) : (
+            <>
+              {day.date === "all" ? (
+                <Icons icon="REFRESH_CCW_DOT" color={theme.colors.neutral[25]} />
+              ) : (
+                <>
+                  <Typography
+                    text={day.date === "all" ? "" : day.date.toString().padStart(2, "0")}
+                    size={theme.fontSizes.lg}
+                    color={theme.colors.neutral[25]}
+                    fontFamily={theme.fonts.inter_bold_700}
+                  />
+                  <Typography
+                    text={day.date === "all" ? "Todos" : day.dayName.slice(0, 3)}
+                    size={theme.fontSizes.lg}
+                    color={theme.colors.neutral[25]}
+                    fontFamily={theme.fonts.inter_bold_700}
+                    marginBottom={day.date === "all" ? theme.margins["3xl"] : 0}
+                    letterSpacing="o_16"
+                  />
+                </>
+              )}
+            </>
+          )}
+        </Box>
+      </TouchableOpacity>
+    );
+  };
+  const daySorted = days.sort(
+    (a, b) => new Date(b.fullDate).getTime() - new Date(a.fullDate).getTime()
+  );
+
+  // Adiciona a opção "Todos" no início da lista
+  const dataWithAllOption = [...daySorted];
+
+  return (
+    <FlatList
+      horizontal
+      data={dataWithAllOption}
+      showsHorizontalScrollIndicator={false}
+      renderItem={renderDayBlock}
+    />
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { FilterDateSelector };

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