react-native-exp-fig 0.1.14 → 0.1.16

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

@@ -1,91 +1,93 @@
-/**
- * IMPORTS
- */
-import React from "react";
-
-// component
-import { Box } from "../box";
-import { Typography } from "../typography";
-import { Button } from "../button";
-
-// typings
-import { ILoadingProgress } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-/**
- *
- * Componente LoadingProgress para a interação do usuário com ui.
- */
-const LoadingProgress: React.FC<ILoadingProgress> = ({
-  textLoading,
-  handleClick,
-}: ILoadingProgress) => {
-  const truncatedText =
-    textLoading.length > 15 ? textLoading.substring(0, 13) + "..." : textLoading;
-  return (
-    <Box>
-      <Typography
-        text="Carregamento em Andamento"
-        size={theme.fontSizes.lg}
-        fontFamily={theme.fonts.inter_medium_500}
-        color={theme.colors.gray[800]}
-      />
-      <Box
-        paddingStyle={{ padding: theme.paddings["2xs"] }}
-        borderStyled={{
-          borderWidth: theme.borderWidths.thin,
-          borderRadius: theme.borderWidths.thick_large,
-          borderStyle: "dashed",
-          borderColor: theme.colors.neutral[200],
-        }}
-        marginStyle={{ marginTop: theme.margins["2xs"], marginBottom: theme.margins["2xs"] }}
-      >
-        <Box flexStyle={{ flexDirection: "row", textAlign: "center" }}>
-          <Typography
-            text={"N° Carregamento: "}
-            size={theme.fontSizes.md}
-            fontFamily={theme.fonts.inter_bold_700}
-            color={theme.colors.blue[400]}
-          />
-
-          <Typography
-            text={truncatedText}
-            size={theme.fontSizes.md}
-            fontFamily={theme.fonts.inter_medium_500}
-            color={theme.colors.gray[800]}
-            letterSpacing={"regular"}
-          />
-        </Box>
-        <Box
-          flexStyle={{ alignItems: "center", justifyContent: "center", flexDirection: "row" }}
-          marginStyle={{ marginTop: theme.margins["2xs"] }}
-        >
-          <Button
-            title={"Visualizar"}
-            onPress={handleClick}
-            backgroundColor={theme.colors.blue[400]}
-            isLoading={false}
-            height={32}
-            width={"75%"}
-            buttonTextStyle={{
-              color: theme.colors.neutral[25],
-              fontFamily: theme.fonts.inter_medium_500,
-              fontSize: theme.fontSizes.lg,
-            }}
-            flexStyle={{ alignItems: "center", justifyContent: "center", flexDirection: "row" }}
-            borderStyled={{
-              borderRadius: theme.borderWidths.thick_medium,
-            }}
-          />
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { LoadingProgress };
+/**
+ * IMPORTS
+ */
+import React from "react";
+
+// component
+import { Box } from "../box";
+import { Typography } from "../typography";
+import { Button } from "../button";
+
+// typings
+import { ILoadingProgress } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+/**
+ *
+ * Componente LoadingProgress para a interação do usuário com ui.
+ */
+const LoadingProgress: React.FC<ILoadingProgress> = ({
+  textLoading,
+  handleClick,
+  backgroundColor,
+}: ILoadingProgress) => {
+  const truncatedText =
+    textLoading.length > 15 ? textLoading.substring(0, 13) + "..." : textLoading;
+  return (
+    <Box>
+      <Typography
+        text="Carregamento em Andamento"
+        size={theme.fontSizes.lg}
+        fontFamily={theme.fonts.inter_medium_500}
+        color={theme.colors.gray[800]}
+      />
+      <Box
+        paddingStyle={{ padding: theme.paddings["2xs"] }}
+        backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+        borderStyled={{
+          borderWidth: theme.borderWidths.thin,
+          borderRadius: theme.borderWidths.thick_large,
+          borderStyle: "dashed",
+          borderColor: theme.colors.neutral[200],
+        }}
+        marginStyle={{ marginTop: theme.margins["2xs"], marginBottom: theme.margins["2xs"] }}
+      >
+        <Box flexStyle={{ flexDirection: "row", textAlign: "center" }}>
+          <Typography
+            text={"N° Carregamento: "}
+            size={theme.fontSizes.md}
+            fontFamily={theme.fonts.inter_bold_700}
+            color={theme.colors.blue[400]}
+          />
+
+          <Typography
+            text={truncatedText}
+            size={theme.fontSizes.md}
+            fontFamily={theme.fonts.inter_medium_500}
+            color={theme.colors.gray[800]}
+            letterSpacing={"regular"}
+          />
+        </Box>
+        <Box
+          flexStyle={{ alignItems: "center", justifyContent: "center", flexDirection: "row" }}
+          marginStyle={{ marginTop: theme.margins["2xs"] }}
+        >
+          <Button
+            title={"Visualizar"}
+            onPress={handleClick}
+            backgroundColor={theme.colors.blue[400]}
+            isLoading={false}
+            height={32}
+            width={"75%"}
+            buttonTextStyle={{
+              color: theme.colors.neutral[25],
+              fontFamily: theme.fonts.inter_medium_500,
+              fontSize: theme.fontSizes.lg,
+            }}
+            flexStyle={{ alignItems: "center", justifyContent: "center", flexDirection: "row" }}
+            borderStyled={{
+              borderRadius: theme.borderWidths.thick_medium,
+            }}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { LoadingProgress };

package/src/components/modal-activities/index.tsx

@@ -0,0 +1,139 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Modal, TouchableOpacity, FlatList } from "react-native";
+
+// components
+
+import { Box } from "../box";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { Typography } from "../typography";
+import { Button } from "../button";
+
+//typing
+import { IModalActivities } from "./interface";
+
+export const ModalActivities: React.FC<IModalActivities> = ({
+  onClose,
+  handleActivity,
+  isLoading,
+}) => {
+  const activities = [
+    { id: 1, name: "Operação com Veículo", icon: "STEERING_WHEEL" },
+    { id: 2, name: "Em Carga", icon: "HOURGLASS" },
+    { id: 3, name: "Em Descarga", icon: "HOURGLASS" },
+    { id: 4, name: "Disposição com Veículo Parado", icon: "TRUCK_ACTIVITY" },
+  ];
+
+  return (
+    <Modal animationType="fade" transparent={true} onRequestClose={onClose}>
+      <Box
+        backgroundColor={"rgba(0, 0, 0, 0.7)"}
+        flexStyle={{ flex: 1, justifyContent: "center", alignItems: "center" }}
+      >
+        <Box
+          height={320}
+          width={"92%"}
+          backgroundColor={theme.colors.neutral[25]}
+          borderStyled={{
+            borderColor: theme.colors.blue[500],
+            borderWidth: theme.borderWidths.thick,
+            borderRadius: theme.borderWidths.thick_medium,
+          }}
+          paddingStyle={{
+            padding: theme.paddings.md,
+          }}
+        >
+          <Box
+            width={"100%"}
+            flexStyle={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Typography
+              text="Atividades"
+              size={theme.fontSizes.md}
+              color={theme.colors.blue[500]}
+              fontFamily={theme.fonts.inter_bold_700}
+              // fontWeight={"700"}
+              lineHeight={theme.fontSizes.xl}
+            />
+
+            <TouchableOpacity activeOpacity={0.7} onPress={onClose} style={{}}>
+              <Icons color={theme.colors.blue[500]} icon="CLOSED" />
+            </TouchableOpacity>
+          </Box>
+          {/* as atividades  */}
+          <Box marginStyle={{ marginTop: theme.margins["2xl"] }}>
+            <FlatList
+              data={activities}
+              numColumns={3}
+              keyExtractor={(item) => item.id.toString()}
+              scrollEnabled={false}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={{
+                    alignItems: "center",
+                    width: 110,
+                    marginBottom: theme.margins["2xl"], // espaço entre as linhas
+                  }}
+                  onPress={() => handleActivity(item.name)}
+                >
+                  <Icons
+                    color={theme.colors.blue[500]}
+                    icon={item.icon as "STEERING_WHEEL" | "HOURGLASS" | "TRUCK_ACTIVITY"}
+                  />
+                  <Typography
+                    text={item.name}
+                    size={theme.fontSizes.xs}
+                    color={theme.colors.blue[500]}
+                    lineHeight={theme.fontSizes.md}
+                    fontFamily={theme.fonts.inter_medium_500}
+                    fontWeight="500"
+                    align="center"
+                    marginTop={5}
+                  />
+                </TouchableOpacity>
+              )}
+            />
+          </Box>
+
+          <Button
+            title={"Cancelar Atividade"}
+            width="100%"
+            height={40}
+            activeOpacity={0.7}
+            onPress={onClose}
+            backgroundColor={theme.colors.blue[500]}
+            buttonTextStyle={{
+              color: theme.colors.neutral[25],
+              fontFamily: theme.fonts.inter_medium_500,
+              fontSize: theme.fontSizes.md,
+              fontWeight: "500",
+            }}
+            marginStyle={{ marginTop: theme.margins.sm }}
+            flexStyle={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+            borderStyled={{
+              borderWidth: theme.borderWidths.thin,
+              borderColor: theme.colors.blue[500],
+              borderRadius: theme.borderWidths.thick_medium,
+            }}
+            isLoading={isLoading ?? false}
+          />
+        </Box>
+      </Box>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,21 @@
+/**
+ * IMPORTS
+ */
+import { ModalProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface IModalActivities extends ModalProps, IGlobalCss {
+  /** função que fecha modal */
+  onClose: () => void;
+
+  /** função que manda atividade selecionada */
+  // eslint-disable-next-line no-unused-vars
+  handleActivity: (activity: string) => void;
+}
+
+/**
+ * EXPORTS
+ */
+export { IModalActivities };

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

@@ -61,16 +61,18 @@ const NotificationLoading: React.FC<INotificationLoading> = ({
             <Typography
               text={"Carregamento - "}
               size={theme.fontSizes.sm}
-              lineHeight={theme.fontSizes.sm}
+              lineHeight={theme.fontSizes.lg}
               fontFamily={theme.fonts.inter_semi_bold_600}
+              fontWeight="600"
               color={theme.colors.neutral[25]}
               letterSpacing={"regular"}
             />
             <Typography
               text={title}
               size={theme.fontSizes.xs}
-              lineHeight={theme.fontSizes.sm}
+              lineHeight={theme.fontSizes.md}
               fontFamily={theme.fonts.inter_bold_700}
+              fontWeight="700"
               color={theme.colors.neutral[25]}
               letterSpacing={"regular"}
             />
@@ -95,6 +97,7 @@ const NotificationLoading: React.FC<INotificationLoading> = ({
                 size={theme.fontSizes.sm}
                 lineHeight={theme.fontSizes.lg ?? 18}
                 fontFamily={theme.fonts.inter_medium_500}
+                fontWeight="500"
                 color={theme.colors.neutral[25]}
                 letterSpacing={"regular"}
               />
@@ -103,6 +106,7 @@ const NotificationLoading: React.FC<INotificationLoading> = ({
                 size={theme.fontSizes.sm}
                 lineHeight={theme.fontSizes.lg ?? 18}
                 fontFamily={theme.fonts.inter_medium_500}
+                fontWeight="500"
                 color={theme.colors.neutral[25]}
                 letterSpacing={"regular"}
               />
@@ -117,6 +121,8 @@ const NotificationLoading: React.FC<INotificationLoading> = ({
                 text={String(dataStart)}
                 size={theme.fontSizes["2xs"]}
                 fontFamily={theme.fonts.inter_medium_500}
+                fontWeight="500"
+                lineHeight={theme.fontSizes.sm}
                 color={theme.colors.neutral[25]}
                 letterSpacing={"regular"}
                 marginRight={8}
@@ -137,6 +143,7 @@ const NotificationLoading: React.FC<INotificationLoading> = ({
             text={notification}
             size={theme.fontSizes["2xs"]}
             fontFamily={theme.fonts.inter_medium_500}
+            fontWeight="500"
             lineHeight={theme.fontSizes.sm ?? 14}
             color={theme.colors.neutral[25]}
             letterSpacing={"regular"}

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

@@ -1,35 +1,35 @@
-/**
- * IMPORTS
- */
-import { ViewProps } from "react-native";
-
-// typing
-import { IGlobalCss } from "../../styles/global/interface";
-
-interface INotificationLoading extends ViewProps, IGlobalCss {
-  /**propriedade que indica o título do carregamento */
-  title: string;
-
-  /**propriedade que indica a data  do carregamento */
-  date: string | Date;
-
-  /**função que faz a navegação da tela */
-  handleNavigation: () => void;
-
-  /**propriedade que indica a notificação */
-  notification: string;
-
-  /**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;
-}
-
-/**
- * EXPORTS
- */
-export { INotificationLoading };
+/**
+ * IMPORTS
+ */
+import { ViewProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface INotificationLoading extends ViewProps, IGlobalCss {
+  /**propriedade que indica o título do carregamento */
+  title: string;
+
+  /**propriedade que indica a data  do carregamento */
+  date: string | Date;
+
+  /**função que faz a navegação da tela */
+  handleNavigation: () => void;
+
+  /**propriedade que indica a notificação */
+  notification: string;
+
+  /**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;
+}
+
+/**
+ * EXPORTS
+ */
+export { INotificationLoading };

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

@@ -1,65 +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 };
+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 };