react-native-exp-fig 0.1.44 → 2.0.1

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

@@ -1,119 +1,118 @@
-/**
- * IMPORTS
- */ import React from "react";
-
-// components
-import Box from "../box";
-
-import { Typography } from "../typography";
-
-// typing
-import { ICardHoursProps } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-const CardHours: React.FC<ICardHoursProps> = ({
-  hoursWorked,
-  handleFormatDataInDayMonthYearNotHours,
-  width,
-  height,
-  marginStyle,
-  paddingStyle,
-  flexStyle,
-  text,
-  borderStyled,
-  color,
-  fontStyle,
-  backgroundColor,
-  sizeHours,
-  sizeDescription,
-  style,
-  testID,
-}) => {
-  const styleProps = {
-    width,
-    height,
-    marginStyle,
-    paddingStyle,
-    flexStyle,
-    text,
-    borderStyled,
-    color,
-    fontStyle,
-    backgroundColor,
-    sizeHours,
-    sizeDescription,
-    style,
-    testID,
-  } as ICardHoursProps;
-
-  return (
-    <Box
-      testID={testID}
-      width={width ?? "100%"}
-      height={height}
-      backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
-      borderStyled={{
-        borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
-        borderColor: borderStyled?.borderColor ?? theme.colors.gray[400],
-        borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick_medium,
-      }}
-    >
-      <Typography
-        text={text ?? "Informe texto:"}
-        size={Number(styleProps.fontStyle?.fontSize)}
-        fontFamily={styleProps.fontStyle?.fontFamily}
-        color={color?.colorText ?? theme.colors.gray[700]}
-        lineHeight={fontStyle?.lineHeight ?? theme.fontSizes.xl}
-        letterSpacing={"regular"}
-        paddingTop={theme.paddings["2xs"]}
-        paddingLeft={theme.paddings["2xs"]}
-      />
-
-      <Box
-        flexStyle={{
-          flexDirection: "row",
-          alignItems: "flex-end",
-          justifyContent: "space-between",
-        }}
-        paddingStyle={{
-          paddingLeft: theme.paddings["2xs"],
-          paddingRight: theme.paddings["2xs"],
-        }}
-        backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
-        width={"100%"}
-        borderStyled={{
-          borderBottomLeftRadius:
-            borderStyled?.borderBottomLeftRadius ?? theme.borderWidths.thick_medium,
-          borderBottomRightRadius:
-            borderStyled?.borderBottomRightRadius ?? theme.borderWidths.thick_medium,
-        }}
-      >
-        <Typography
-          text={`${hoursWorked ?? "00:00 H"}`}
-          size={sizeHours ?? theme.fontSizes["3xl"]}
-          fontFamily={theme.fonts.inter_bold ?? "inter_bold"}
-          fontWeight="700"
-          color={color?.colorTextBold ?? theme.colors.orange[150]}
-          lineHeight={fontStyle?.lineHeight ?? theme.fontSizes["5xl"]}
-          letterSpacing={"regular"}
-        />
-
-        <Typography
-          text={`Última atualização: ${handleFormatDataInDayMonthYearNotHours(new Date())}`}
-          size={sizeDescription ?? theme.fontSizes.xs}
-          fontFamily={"inter_light_300"}
-          color={color?.colorTextData ?? theme.colors.gray[700]}
-          lineHeight={fontStyle?.lineHeight ?? theme.fontSizes["xl"]}
-          letterSpacing={"regular"}
-        />
-      </Box>
-    </Box>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { CardHours };
+/**
+ * IMPORTS
+ */ import React from "react";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// typing
+import { ICardHoursProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const CardHours: React.FC<ICardHoursProps> = ({
+  hoursWorked,
+  handleFormatDataInDayMonthYearNotHours,
+  width,
+  height,
+  marginStyle,
+  paddingStyle,
+  flexStyle,
+  text,
+  borderStyled,
+  color,
+  fontStyle,
+  backgroundColor,
+  sizeHours,
+  sizeDescription,
+  style,
+  testID,
+}) => {
+  const styleProps = {
+    width,
+    height,
+    marginStyle,
+    paddingStyle,
+    flexStyle,
+    text,
+    borderStyled,
+    color,
+    fontStyle,
+    backgroundColor,
+    sizeHours,
+    sizeDescription,
+    style,
+    testID,
+  } as ICardHoursProps;
+
+  return (
+    <Box
+      testID={testID}
+      width={width ?? "100%"}
+      height={height}
+      backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+      borderStyled={{
+        borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
+        borderColor: borderStyled?.borderColor ?? theme.colors.gray[400],
+        borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick_medium,
+      }}
+    >
+      <Typography
+        text={text ?? "Informe texto:"}
+        size={Number(styleProps.fontStyle?.fontSize)}
+        fontFamily={styleProps.fontStyle?.fontFamily}
+        color={color?.colorText ?? theme.colors.gray[700]}
+        lineHeight={fontStyle?.lineHeight ?? theme.fontSizes.xl}
+        letterSpacing={"regular"}
+        paddingTop={theme.paddings["2xs"]}
+        paddingLeft={theme.paddings["2xs"]}
+      />
+
+      <Box
+        flexStyle={{
+          flexDirection: "row",
+          alignItems: "flex-end",
+          justifyContent: "space-between",
+        }}
+        paddingStyle={{
+          paddingLeft: theme.paddings["2xs"],
+          paddingRight: theme.paddings["2xs"],
+        }}
+        backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+        width={"100%"}
+        borderStyled={{
+          borderBottomLeftRadius:
+            borderStyled?.borderBottomLeftRadius ?? theme.borderWidths.thick_medium,
+          borderBottomRightRadius:
+            borderStyled?.borderBottomRightRadius ?? theme.borderWidths.thick_medium,
+        }}
+      >
+        <Typography
+          text={`${hoursWorked ?? "00:00 H"}`}
+          size={sizeHours ?? theme.fontSizes["3xl"]}
+          fontFamily={theme.fonts.inter_bold ?? "inter_bold"}
+          fontWeight="700"
+          color={color?.colorTextBold ?? theme.colors.orange[150]}
+          lineHeight={fontStyle?.lineHeight ?? theme.fontSizes["5xl"]}
+          letterSpacing={"regular"}
+        />
+
+        <Typography
+          text={`Última atualização: ${handleFormatDataInDayMonthYearNotHours(new Date())}`}
+          size={sizeDescription ?? theme.fontSizes.xs}
+          fontFamily={"inter_light_300"}
+          color={color?.colorTextData ?? theme.colors.gray[700]}
+          lineHeight={fontStyle?.lineHeight ?? theme.fontSizes["xl"]}
+          letterSpacing={"regular"}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { CardHours };

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

@@ -1,37 +1,37 @@
-/*
- * IMPORTS
- */
-import { ViewProps } from "react-native";
-
-/**
- * INTERFACE
- */
-import { IGlobalCss } from "../../styles/global/interface";
-
-interface ICardHoursProps extends ViewProps, IGlobalCss {
-  /**
-   *  props que mostra os valores de horas trabalhadas
-   */
-  hoursWorked: string | null;
-
-  /**
-   *  props que mostra a data do horário correspondentes para a ultima atualização
-   */
-  // eslint-disable-next-line no-unused-vars
-  handleFormatDataInDayMonthYearNotHours: (date: Date) => {};
-
-  /**
-   * props que mostra o tamanho da fonte
-   */
-  sizeDescription?: number;
-
-  /**
-   * props que mostra o tamanho da fonte
-   */
-  sizeHours?: number;
-}
-
-/**
- * EXPORTS
- */
-export type { ICardHoursProps };
+/*
+ * IMPORTS
+ */
+import { ViewProps } from "react-native";
+
+/**
+ * INTERFACE
+ */
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface ICardHoursProps extends ViewProps, IGlobalCss {
+  /**
+   *  props que mostra os valores de horas trabalhadas
+   */
+  hoursWorked: string | null;
+
+  /**
+   *  props que mostra a data do horário correspondentes para a ultima atualização
+   */
+  // eslint-disable-next-line no-unused-vars
+  handleFormatDataInDayMonthYearNotHours: (date: Date) => {};
+
+  /**
+   * props que mostra o tamanho da fonte
+   */
+  sizeDescription?: number;
+
+  /**
+   * props que mostra o tamanho da fonte
+   */
+  sizeHours?: number;
+}
+
+/**
+ * EXPORTS
+ */
+export type { ICardHoursProps };

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

@@ -5,7 +5,7 @@ import React from "react";
 import { Image, TouchableOpacity } from "react-native";
 
 // components
-import Box from "../box";
+import { Box } from "../box";
 import { Typography } from "../typography";
 
 // comons / icons
@@ -99,8 +99,6 @@ const CardLoading: React.FC<ICardLoading> = ({
               marginBottom: 4,
             }}
           >
-
-
             <Box
               flexStyle={{
                 flexDirection: "row",
@@ -111,11 +109,29 @@ const CardLoading: React.FC<ICardLoading> = ({
                 marginRight: 8,
               }}
             >
-              <Icons
-                icon={"SCALES"}
-                size={theme.fontSizes["sm"]}
+              <Icons icon={"TIMER"} size={theme.fontSizes["sm"]} color={theme.colors.neutral[25]} />
+              <Typography
+                text={"AUT"}
                 color={theme.colors.neutral[25]}
+                size={theme.fontSizes.xs}
+                fontFamily={theme.fonts.inter_bold_700}
+                lineHeight={theme.fontSizes.md ?? 16}
+                letterSpacing={"regular"}
+                marginLeft={2}
               />
+            </Box>
+
+            <Box
+              flexStyle={{
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+              marginStyle={{
+                marginRight: 8,
+              }}
+            >
+              <Icons icon={"TIMER"} size={theme.fontSizes["sm"]} color={theme.colors.neutral[25]} />
               <Typography
                 text={`${kg}KG`}
                 color={theme.colors.neutral[25]}
@@ -217,53 +233,51 @@ const CardLoading: React.FC<ICardLoading> = ({
           </Box>
 
           {/**STATUS DO CARREGAMENTO */}
-          {status && (
+          <Box
+            width={"100%"}
+            flexStyle={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+            marginStyle={{
+              marginBottom: 4,
+            }}
+          >
             <Box
-              width={"100%"}
               flexStyle={{
                 flexDirection: "row",
+                justifyContent: "flex-start",
                 alignItems: "center",
-                justifyContent: "space-between",
               }}
-              marginStyle={{
-                marginBottom: 4,
+              backgroundColor={getStatusColor(status as StatusType)}
+              height={22}
+              borderStyled={{
+                borderWidth: 1,
+                borderRadius: 11,
+                borderColor: "transparent",
               }}
+              paddingStyle={{ paddingLeft: 8, paddingRight: 8 }}
             >
-              <Box
-                flexStyle={{
-                  flexDirection: "row",
-                  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:"}
-                  color={theme.colors.neutral[25]}
-                  size={theme.fontSizes.xs}
-                  fontFamily={theme.fonts.inter_regular_400}
-                  lineHeight={theme.fontSizes.md ?? 16}
-                  letterSpacing={"regular"}
-                />
-                <Typography
-                  text={status ?? "N/A"}
-                  color={getStatusTextColor(status as StatusType)}
-                  size={theme.fontSizes.xs}
-                  fontFamily={theme.fonts.inter_bold_700}
-                  lineHeight={theme.fontSizes.md ?? 16}
-                  letterSpacing={"regular"}
-                  marginLeft={4}
-                />
-              </Box>
+              <Typography
+                text={"Status:"}
+                color={theme.colors.neutral[25]}
+                size={theme.fontSizes.xs}
+                fontFamily={theme.fonts.inter_regular_400}
+                lineHeight={theme.fontSizes.md ?? 16}
+                letterSpacing={"regular"}
+              />
+              <Typography
+                text={status}
+                color={getStatusTextColor(status as StatusType)}
+                size={theme.fontSizes.xs}
+                fontFamily={theme.fonts.inter_bold_700}
+                lineHeight={theme.fontSizes.md ?? 16}
+                letterSpacing={"regular"}
+                marginLeft={4}
+              />
             </Box>
-          )}
+          </Box>
         </Box>
       </Box>
     </TouchableOpacity>

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

@@ -26,7 +26,7 @@ interface ICardLoading extends TouchableOpacityProps, IGlobalCss {
   qtdCoils: number;
 
   /**propriedade que indica o status do carregamento */
-  status?: string | null;
+  status?: string;
 
   handleNavigation: () => void;
 }

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

@@ -0,0 +1,177 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+//commons/ icons
+import { Icons } from "../../common/icons-svg";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import type { ICardReport } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+/**
+ * Componente CardReport para a interação da  ui.
+ */
+const CardReport = forwardRef<any, ICardReport<any>>((props, ref): React.ReactElement => {
+  const {
+    name = "Enzo Martins",
+    generatedDate = "15/07/2025",
+    generatedTime = null,
+    status = "OK",
+    backgroundColor,
+    ciclo = "DIÁRIA",
+    testID = "card-report",
+    onPress,
+  } = props;
+  return (
+    <TouchableOpacity
+      ref={ref}
+      activeOpacity={0.7}
+      onPress={() => onPress({ name, generatedDate, generatedTime, status, ciclo })}
+    >
+      <Box
+        testID={testID}
+        width={"100%"}
+        backgroundColor={theme.colors.neutral[25]}
+        borderStyled={{
+          borderRadius: theme.borderWidths.thick_medium,
+        }}
+        marginStyle={{
+          marginBottom: theme.margins["2xs"],
+        }}
+      >
+        <Box
+          width={"100%"}
+          height={30}
+          backgroundColor={backgroundColor ?? theme.colors.green[400]}
+          borderStyled={{
+            borderTopLeftRadius: theme.borderWidths.thin_bold,
+            borderTopRightRadius: theme.borderWidths.thin_bold,
+            borderColor: theme.colors.blue[400],
+          }}
+          flexStyle={{
+            justifyContent: "center",
+          }}
+        >
+          <Typography
+            text={`ASSINATURA ${ciclo}`}
+            color={theme.colors.neutral[25]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_medium_500}
+            fontWeight={"500"}
+            lineHeight={theme.fontSizes.xs}
+            marginLeft={theme.margins["2xs"]}
+          />
+        </Box>
+        <Box
+          width={"100%"}
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+          paddingStyle={{
+            padding: theme.paddings["2xs"],
+          }}
+        >
+          <Box>
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Icons icon={"FILES"} size={28} color={theme.colors.black[100]} />
+
+              {/*Alteração para exibir o nome do usuário */}
+              <Box marginStyle={{ marginLeft: 4 }}>
+                <Box flexStyle={{ flexDirection: "row" }}>
+                  <Typography
+                    text={`Doc gerado em: `}
+                    size={theme.fontSizes.sm}
+                    color={theme.colors.black[180]}
+                    fontFamily={theme.fonts.inter_medium_500}
+                  />
+                  <Typography
+                    text={`${generatedDate} ${generatedTime ?? ""}`}
+                    size={12}
+                    color={theme.colors.black[180]}
+                    fontFamily={theme.fonts.inter_light_300}
+                    marginLeft={2}
+                  />
+                </Box>
+                <Box flexStyle={{ flexDirection: "row" }}>
+                  <Typography
+                    text={`Status documento:`}
+                    size={theme.fontSizes.sm}
+                    color={theme.colors.black[100]}
+                    fontFamily={theme.fonts.inter_medium_500}
+                  />
+
+                  <Typography
+                    text={`${status}`}
+                    size={theme.fontSizes.xs}
+                    color={theme.colors.black[100]}
+                    fontFamily={theme.fonts.inter_light_300}
+                    marginLeft={2}
+                  />
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+
+        {/* Segunda separação */}
+        <Box
+          width={"100%"}
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+          paddingStyle={{
+            padding: theme.paddings["2xs"],
+          }}
+          borderStyled={{
+            borderTopWidth: 2,
+            borderTopColor: theme.colors.neutral[200],
+          }}
+        >
+          <Box>
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Box marginStyle={{ marginRight: 2 }}>
+                <Typography
+                  text={`Assinado por:`}
+                  size={theme.fontSizes.xs}
+                  color={theme.colors.black[180]}
+                  fontFamily={theme.fonts.inter_regular_400}
+                  marginLeft={0}
+                />
+
+                <Typography
+                  text={`${name}`}
+                  size={14}
+                  color={theme.colors.black[100]}
+                  fontFamily={theme.fonts.inter_bold_700}
+                  marginLeft={0}
+                />
+              </Box>
+            </Box>
+          </Box>
+
+          <Icons icon={"CHECK_CIRCLE"} size={36} background={backgroundColor} />
+        </Box>
+      </Box>
+    </TouchableOpacity>
+  );
+});
+
+CardReport.displayName = "CardReport";
+
+/**
+ * Componente Box para a interação da  ui.
+ */
+export default asBaseComponent(CardReport);