jornada-ui 0.4.19 → 0.4.20

package/lib/typescript/module/src/components/toast-message/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toast-message/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AA4D1D;;GAEG;;AACH,wBAA6C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toast-message/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AA8D1D;;GAEG;;AACH,wBAA6C"}

package/lib/typescript/module/src/components/toast-message/interface.d.ts

@@ -4,6 +4,7 @@
 type ToastMessageCustoProps = {
     text1?: string;
     text2?: string;
+    testID?: string;
     options: "error" | "alert" | "success";
 };
 type BorderCustomToashProps = {

package/lib/typescript/module/src/components/toast-message/interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toast-message/interface.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,KAAK,sBAAsB,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,YAAY,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toast-message/interface.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,KAAK,sBAAsB,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,YAAY,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,CAAC"}

package/lib/typescript/module/src/components/toggle-fuel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toggle-fuel/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAwC,MAAM,OAAO,CAAC;AAI7D,OAAO,KAAK,EAAE,eAAe,EAAgB,MAAM,aAAa,CAAC;AAkFjE;;GAEG;;AACH,wBAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toggle-fuel/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAwC,MAAM,OAAO,CAAC;AAI7D,OAAO,KAAK,EAAE,eAAe,EAAgB,MAAM,aAAa,CAAC;AAmFjE;;GAEG;;AACH,wBAA2C"}

package/lib/typescript/module/src/components/typography/index.d.ts

@@ -7,6 +7,7 @@ import React from "react";
  */
 declare const _default: React.ComponentType<import("react-native").TextProps & {
     text: string;
+    testID?: string;
     color?: string;
     size?: number;
     align?: "center" | "left" | "right";

package/lib/typescript/module/src/components/typography/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/typography/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAqB,MAAM,OAAO,CAAC;AAuE1C;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;AACH,wBAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/typography/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAqB,MAAM,OAAO,CAAC;AAyE1C;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AACH,wBAA2C"}

package/lib/typescript/module/src/components/user-journey-work-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/user-journey-work-card/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAqB,MAAM,OAAO,CAAC;AAsN1C;;GAEG;;;;;;;;;;;;;mBAtLO,CAAC;oBAEU,CAAC;4BACH,CAAC;2BAC0B,CAAC;+BACA,CAAC;8BAExB,CAAC;mBACjB,CAAP;uBAC6B,CAAC;wBAGJ,CAAC;sBAEb,CAAC;yBAEJ,CAAJ;mBACI,CAAL;yBACG,CAAL;uBAEM,CAAC;wBAA8B,CAAC;sBAC5B,CAAC;;;kBAOF,CAAV;iBAEQ,CAAT;YAGoC,CAAC;qBAC5B,CAAF;gBAEM,CAAb;iBACuB,CAAC;sBAET,CAAN;;;cAUiC,CAAC;kBACR,CAAC;mBACnB,CAAC;iBACH,CAAA;oBACF,CAAT;;;eAS6C,CAAC;mBACd,CAAC;oBACC,CAAC;kBACP,CAAC;qBACE,CAAC;;;;;;;gBAgCvB,CAAA;iBACE,CAAH;qBACK,CAAb;qBAA4B,CAAA;;;AAmFnC,wBAAoD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/user-journey-work-card/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAqB,MAAM,OAAO,CAAC;AA2O1C;;GAEG;;;;;;;;;;;;;mBA7MK,CAAC;oBAGW,CAAC;4BAGb,CAAC;2BACD,CAAF;+BAC8B,CAAC;8BACD,CAAC;mBAE7B,CAAJ;uBAA8C,CAAC;wBAEtC,CAAC;sBAGN,CAAC;yBAEC,CAAV;mBACoB,CAAC;yBACH,CAAC;uBACP,CAAR;wBACM,CAAT;sBAES,CAAH;;;kBAOS,CAAL;iBACkB,CAAA;YAEY,CAAC;qBAEhC,CAAT;gBAEoC,CAAC;iBAChB,CAAC;sBAEL,CAAC;;;cAUJ,CAAC;kBAEE,CAAR;mBACQ,CAAf;iBACe,CAAT;oBACS,CAAT;;;eAQoC,CAAC;mBAChC,CAAF;oBAEE,CAAX;kBACe,CAAC;qBACH,CAAL;;;;;;;gBAiCiB,CAAC;iBACjB,CAAL;qBACK,CAAT;qBAA2B,CAAC;;;AAsG/B,wBAAoD"}

package/lib/typescript/module/src/components/user-profile/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/user-profile/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAqB,MAAM,OAAO,CAAC;AAmN1C;;GAEG;;;;;;;;;;;;mBA5LK,CAAC;oBAIL,CAAC;4BAID,CAAH;2BAGK,CAAA;+BAEA,CAAH;8BAAsD,CAAC;mBACpB,CAAA;uBACM,CAAC;wBAG5B,CAAC;sBACuB,CAAC;yBAAiD,CAAC;mBAEtF,CAAH;yBAEO,CAAR;uBACQ,CAAP;wBACY,CAAC;sBACK,CAAC;;;kBAUL,CAAC;iBAGJ,CAAH;YAGG,CAAJ;qBACO,CAAC;gBAGV,CAAD;iBAIC,CAAD;sBAE6B,CAAA;;;cAetB,CAAC;kBAA0C,CAAC;mBACtB,CAAC;iBACG,CAAC;oBACX,CAAC;;;eASgB,CAAA;mBACX,CAAC;oBAI3B,CAAP;kBACiB,CAAC;qBAEA,CAAC;;;;;;;gBAuCR,CAAC;iBAAwB,CAAC;qBAC1B,CAAC;qBACL,CAAJ;;;AA6DN,wBAA4C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/user-profile/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAqB,MAAM,OAAO,CAAC;AA4N1C;;GAEG;;;;;;;;;;;;mBArMK,CAAC;oBAIL,CAAC;4BAID,CAAH;2BAGK,CAAA;+BAEA,CAAH;8BAAsD,CAAC;mBACpB,CAAA;uBACM,CAAC;wBAG5B,CAAC;sBACuB,CAAC;yBAAiD,CAAC;mBAEtF,CAAH;yBAEO,CAAR;uBACQ,CAAP;wBACY,CAAC;sBACK,CAAC;;;kBAUL,CAAC;iBAGJ,CAAH;YAGG,CAAJ;qBACO,CAAC;gBAGV,CAAD;iBAIC,CAAD;sBAE6B,CAAA;;;cAcK,CAAC;kBAE7B,CAAC;mBAA2C,CAAC;iBACxB,CAAC;oBACM,CAAC;;;eAU9B,CAAL;mBACK,CAAH;oBACG,CAAZ;kBACU,CAAL;qBAGK,CAAA;;;;;;;gBAyC+B,CAAC;iBACzB,CAAC;qBACL,CAAC;qBAA4B,CAAC;;;AAqE3C,wBAA4C"}

package/lib/typescript/module/src/components/weekly-hours-balance/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/weekly-hours-balance/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAA+B,MAAM,OAAO,CAAC;;;;mBAezB,CAAC;oBAEjB,CAAC;4BAAmD,CAAC;2BAEtD,CAAA;+BAEO,CAAC;8BAER,CAAC;mBACK,CAAC;uBAIX,CAAH;wBAEkB,CAAC;sBACsB,CAAC;yBAE3B,CAAC;mBACX,CAAF;yBAGI,CAAJ;uBACI,CAAC;wBAA8B,CAAC;sBAA4B,CAAC;;;kBAS7D,CAAA;iBAIK,CAAC;YAEc,CAAC;qBACR,CAAC;gBAEZ,CAAV;iBACoB,CAAC;sBAEb,CAAN;;;cAeU,CAAD;kBACC,CAAC;mBACD,CAAV;iBACU,CAAF;oBACE,CAAJ;;;eASJ,CAAF;mBAKc,CAAC;oBAEZ,CAAA;kBAAyC,CAAC;qBACR,CAAC;;;;;;;gBAAi0C,CAAC;iBAAuB,CAAC;qBAA2B,CAAC;qBAA2B,CAAC;;;;AAD57C,wBAAmD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/weekly-hours-balance/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAA+B,MAAM,OAAO,CAAC;;;;mBAezB,CAAC;oBAEjB,CAAC;4BAAmD,CAAC;2BAEtD,CAAA;+BAEA,CAAA;8BAEN,CAAD;mBACK,CAAC;uBAGF,CAAC;wBAGA,CAAA;sBAEI,CAAC;yBACH,CAAC;mBACmB,CAAC;yBACvB,CAAF;uBAGI,CAAN;wBACM,CAAA;sBAA4B,CAAC;;;kBAOJ,CAAC;iBAI1B,CAAH;YAGqC,CAAC;qBACV,CAAC;gBAEf,CAAC;iBACD,CAAC;sBAEL,CAAC;;;cAeQ,CAAC;kBACL,CAAC;mBACE,CAAC;iBACZ,CAAD;oBACU,CAAC;;;eAQd,CAAN;mBAGA,CAAF;oBAI6B,CAAA;kBAEf,CAAC;qBACR,CAAC;;;;;;;gBAAi0C,CAAC;iBAAuB,CAAC;qBAA2B,CAAC;qBAA2B,CAAC;;;;AAD55C,wBAAmD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jornada-ui",
-  "version": "0.4.19",
+  "version": "0.4.20",
   "description": "Biblioteca para desenvolvimento dos componentes para utilizar nos app",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",
@@ -43,6 +43,7 @@
   "scripts": {
     "example": "yarn workspace jornada-ui-example",
     "test": "jest",
+    "test:snapshots": "jest -- -u",
     "storybook": "storybook dev -p 6006",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",

package/src/components/box/index.tsx

@@ -1,53 +1,53 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef } from "react";
-import { View } from "react-native";
-
-// typings
-import { asBaseComponent } from "../../@types/as-base-component";
-import type { IBoxInterface } from "./interface";
-
-// styles
-import { styles } from "./styles";
-
-const Box = forwardRef<any, IBoxInterface>((props, ref): React.ReactElement => {
-  const {
-    children,
-    width,
-    height,
-    backgroundColor,
-    borderStyled,
-    flexStyle,
-    paddingStyle,
-    marginStyle,
-    opacity = 1,
-    testID = "box",
-    style,
-  } = props;
-
-  const styleProps = {
-    width,
-    height,
-    backgroundColor,
-    borderStyled,
-    flexStyle,
-    paddingStyle,
-    marginStyle,
-    opacity,
-    style,
-  };
-
-  return (
-    <View ref={ref} testID={testID} style={[styles(styleProps).boxStyle, style]}>
-      {children}
-    </View>
-  );
-});
-
-Box.displayName = "Box";
-
-/**
- * Componente Box para a interação da  ui.
- */
-export default asBaseComponent(Box);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { View } from "react-native";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import type { IBoxInterface } from "./interface";
+
+// styles
+import { styles } from "./styles";
+
+const Box = forwardRef<any, IBoxInterface>((props, ref): React.ReactElement => {
+  const {
+    testID = "box",
+    children,
+    width,
+    height,
+    backgroundColor,
+    borderStyled,
+    flexStyle,
+    paddingStyle,
+    marginStyle,
+    opacity = 1,
+    style,
+  } = props;
+
+  const styleProps = {
+    width,
+    height,
+    backgroundColor,
+    borderStyled,
+    flexStyle,
+    paddingStyle,
+    marginStyle,
+    opacity,
+    style,
+  };
+
+  return (
+    <View ref={ref} testID={testID} style={[styles(styleProps).boxStyle, style]}>
+      {children}
+    </View>
+  );
+});
+
+Box.displayName = "Box";
+
+/**
+ * Componente Box para a interação da  ui.
+ */
+export default asBaseComponent(Box);

package/src/components/button/index.tsx

@@ -1,76 +1,76 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef } from "react";
-import { Text, TouchableOpacity, type TextStyle, ActivityIndicator, View } from "react-native";
-// typings
-import { asBaseComponent } from "../../@types/as-base-component";
-import { type IButtonProps } from "./interface";
-
-// styles
-import { styles } from "./styles";
-
-/**
- * Componente Button para a interação da  ui.
- */
-const Button = forwardRef<any, IButtonProps>((props, ref): React.ReactElement => {
-  const {
-    title = "Button",
-    width,
-    height,
-    backgroundColor,
-    borderStyled,
-    flexStyle,
-    paddingStyle,
-    marginStyle,
-    testID,
-    opacity = 1,
-    children,
-    style,
-    fontStyle,
-    buttonTextStyle,
-    onPress,
-    isLoading,
-    ...res
-  } = props;
-
-  const styleProps = {
-    testID,
-    width,
-    height,
-    opacity,
-    backgroundColor,
-    children,
-    borderStyled,
-    flexStyle,
-    paddingStyle,
-    marginStyle,
-    fontStyle,
-    buttonTextStyle,
-    isLoading,
-    style,
-  } as IButtonProps;
-
-  Button.displayName = "Button";
-
-  return (
-    <TouchableOpacity
-      ref={ref}
-      activeOpacity={0.7}
-      testID={testID}
-      style={[styles(styleProps).buttonStyle, style]}
-      onPress={onPress}
-      {...res}
-    >
-      {isLoading ? (
-        <ActivityIndicator testID="button-loading" size="small" color="white" />
-      ) : (
-        <Text style={[styles(styleProps).buttonTextStyle as TextStyle]}>{title}</Text>
-      )}
-
-      <View />
-    </TouchableOpacity>
-  );
-});
-
-export default asBaseComponent(Button);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { Text, TouchableOpacity, type TextStyle, ActivityIndicator, View } from "react-native";
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import { type IButtonProps } from "./interface";
+
+// styles
+import { styles } from "./styles";
+
+/**
+ * Componente Button para a interação da  ui.
+ */
+const Button = forwardRef<any, IButtonProps>((props, ref): React.ReactElement => {
+  const {
+    title = "Button",
+    width,
+    height,
+    backgroundColor,
+    borderStyled,
+    flexStyle,
+    paddingStyle,
+    marginStyle,
+    testID,
+    opacity = 1,
+    children,
+    style,
+    fontStyle,
+    buttonTextStyle,
+    onPress,
+    isLoading,
+    ...res
+  } = props;
+
+  const styleProps = {
+    testID,
+    width,
+    height,
+    opacity,
+    backgroundColor,
+    children,
+    borderStyled,
+    flexStyle,
+    paddingStyle,
+    marginStyle,
+    fontStyle,
+    buttonTextStyle,
+    isLoading,
+    style,
+  } as IButtonProps;
+
+  Button.displayName = "Button";
+
+  return (
+    <TouchableOpacity
+      testID={testID}
+      ref={ref}
+      activeOpacity={0.7}
+      style={[styles(styleProps).buttonStyle, style]}
+      onPress={onPress}
+      {...res}
+    >
+      {isLoading ? (
+        <ActivityIndicator testID="button-loading" size="small" color="white" />
+      ) : (
+        <Text style={[styles(styleProps).buttonTextStyle as TextStyle]}>{title}</Text>
+      )}
+
+      <View />
+    </TouchableOpacity>
+  );
+});
+
+export default asBaseComponent(Button);

package/src/components/capture-photo/index.tsx

@@ -62,10 +62,10 @@ const CapturePhoto = forwardRef<any, ICapturePhotoProps>((props, ref): React.Rea
 
   return (
     <TouchableOpacity
+      testID={testID}
       ref={ref}
       activeOpacity={0.7}
       onPress={takePhotoWithImagePicker}
-      testID={testID}
       style={[styles.capturePhoto, containerStyle, style]} // <- container SEMPRE aqui
     >
       {imageComprovante ? (

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

@@ -1,121 +1,121 @@
-/**
- * IMPORTS
- */ import React, { forwardRef } from "react";
-
-// components
-import Box from "../box";
-import Typography from "../typography";
-
-// typing
-import { asBaseComponent } from "../../@types/as-base-component";
-import { type ICardHoursProps } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-const CardHours = forwardRef<any, ICardHoursProps>((props, ref): React.ReactElement => {
-  const {
-    testID,
-    width,
-    height,
-    hoursWorked,
-    flexStyle,
-    marginStyle,
-    paddingStyle,
-    text,
-    color,
-    fontStyle,
-    borderStyled,
-    backgroundColor,
-    sizeHours,
-    sizeDescription,
-    handleFormatDataInDayMonthYearNotHours,
-    style,
-  } = props;
-
-  const styleProps = {
-    testID,
-    width,
-    height,
-    marginStyle,
-    paddingStyle,
-    flexStyle,
-    text,
-    borderStyled,
-    color,
-    fontStyle,
-    backgroundColor,
-    sizeHours,
-    sizeDescription,
-    style,
-  } as ICardHoursProps;
-  return (
-    <Box
-      ref={ref}
-      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>
-  );
-});
-
-/**
- * Componente CardHours para a interação da  ui.
- */
-export default asBaseComponent(CardHours);
+/**
+ * IMPORTS
+ */ import React, { forwardRef } from "react";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// typing
+import { asBaseComponent } from "../../@types/as-base-component";
+import { type ICardHoursProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const CardHours = forwardRef<any, ICardHoursProps>((props, ref): React.ReactElement => {
+  const {
+    testID,
+    width,
+    height,
+    hoursWorked,
+    flexStyle,
+    marginStyle,
+    paddingStyle,
+    text,
+    color,
+    fontStyle,
+    borderStyled,
+    backgroundColor,
+    sizeHours,
+    sizeDescription,
+    handleFormatDataInDayMonthYearNotHours,
+    style,
+  } = props;
+
+  const styleProps = {
+    testID,
+    width,
+    height,
+    marginStyle,
+    paddingStyle,
+    flexStyle,
+    text,
+    borderStyled,
+    color,
+    fontStyle,
+    backgroundColor,
+    sizeHours,
+    sizeDescription,
+    style,
+  } as ICardHoursProps;
+  return (
+    <Box
+      testID={testID}
+      ref={ref}
+      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>
+  );
+});
+
+/**
+ * Componente CardHours para a interação da  ui.
+ */
+export default asBaseComponent(CardHours);

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

@@ -24,12 +24,17 @@ import { getStatusColorHex } from "../../utils/get-status-color";
  */
 
 const CardMaintenance = forwardRef<any, ICardMaintenance>((props, ref): React.ReactElement => {
-  const { numero, dataRegistro, cavalo, imagemUrl, descricao, status, titutlo } = props;
+  const { testID, numero, dataRegistro, cavalo, imagemUrl, descricao, status, titutlo } = props;
   const [showModal, setShowModal] = useState(false);
 
   return (
     <>
-      <TouchableOpacity ref={ref} onPress={() => setShowModal(true)} activeOpacity={0.9}>
+      <TouchableOpacity
+        testID={testID}
+        ref={ref}
+        onPress={() => setShowModal(true)}
+        activeOpacity={0.9}
+      >
         <Box
           width={"100%"}
           flexStyle={{ flexDirection: "row" }}
@@ -128,6 +133,7 @@ const CardMaintenance = forwardRef<any, ICardMaintenance>((props, ref): React.Re
       </TouchableOpacity>
 
       <ModalMaintenance
+        testID={`${testID}-modal`}
         visible={showModal}
         onClose={() => setShowModal(false)}
         imagemUrl={imagemUrl}

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

@@ -2,6 +2,10 @@
  * IMPORTS
  */
 interface ICardMaintenance {
+  /**
+   * Identificador do componente
+   */
+  testID?: string;
   /**título do card */
   titutlo?: string;