jornada-ui 0.4.5 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jornada-ui",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "Biblioteca para desenvolvimento dos componentes para utilizar nos app",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

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

@@ -1,133 +1,142 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef } from "react";
-import { Image, TouchableOpacity } from "react-native";
-
-// components
-import Typography from "../typography";
-
-// icons / svg
-import { Icons } from "../../common/icons-svg";
-
-// typings
-import { asBaseComponent } from "../../@types/as-base-component";
-import { type ICapturePhotoProps } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-import { styles } from "./styles";
-
-const CapturePhoto = forwardRef<any, ICapturePhotoProps>((props, ref): React.ReactElement => {
-  const {
-    imageComprovante,
-    takePhotoWithImagePicker,
-    testID,
-    width,
-    height,
-    marginStyle,
-    flexStyle,
-    title,
-    borderStyled,
-    color,
-    fontStyle,
-    opacity,
-    style,
-    smallText,
-    paddingStyle,
-  } = props;
-
-  const styleProps = {
-    imageComprovante,
-    takePhotoWithImagePicker,
-    testID,
-    width,
-    height,
-    marginStyle,
-    flexStyle,
-    title,
-    borderStyled,
-    color,
-    fontStyle,
-    opacity,
-    smallText,
-    paddingStyle,
-    style,
-  } as ICapturePhotoProps;
-
-  return (
-    <>
-      {imageComprovante ? (
-        <TouchableOpacity
-          ref={ref}
-          activeOpacity={0.7}
-          onPress={takePhotoWithImagePicker}
-          testID={testID}
-        >
-          <Image
-            style={[
-              {
-                width,
-                height,
-                borderWidth: Number(borderStyled?.borderWidth),
-                borderColor: borderStyled?.borderColor,
-                borderRadius: Number(borderStyled?.borderRadius),
-              },
-              styles(styleProps).capturePhoto,
-            ]}
-            source={{ uri: imageComprovante }}
-          />
-        </TouchableOpacity>
-      ) : (
-        <TouchableOpacity
-          ref={ref}
-          activeOpacity={0.7}
-          style={[styles(styleProps).capturePhoto, style]}
-          onPress={takePhotoWithImagePicker}
-          testID={testID}
-        >
-          <Icons icon={"CAMERA_PLUS"} size={theme.fontSizes["2xl"] || 24} color={color?.colorSvg} />
-          <Typography
-            text={title.text || "Sem foto capturada."}
-            align={
-              flexStyle?.textAlign === "left" || flexStyle?.textAlign === "right"
-                ? flexStyle.textAlign
-                : "center"
-            }
-            color={color?.colorText ? color.colorText : theme.colors.gray[875]}
-            size={fontStyle?.fontSize ? fontStyle?.fontSize : theme.fontSizes.md}
-            fontFamily={
-              fontStyle?.fontFamily ? fontStyle?.fontFamily : theme.fonts.inter_regular_400
-            }
-            lineHeight={fontStyle?.lineHeight ? fontStyle?.lineHeight : theme.fontSizes["2xl"]}
-            letterSpacing={fontStyle?.letterSpacing ? fontStyle?.letterSpacing : ("regular" as any)}
-          />
-          {smallText && (
-            <Typography
-              text={title.textSmallPhoto || "aqui vai o texto de baixo da foto"}
-              align={
-                flexStyle?.textAlign === "left" || flexStyle?.textAlign === "right"
-                  ? flexStyle.textAlign
-                  : "center"
-              }
-              color={color?.colorText ? color.colorText : theme.colors.gray[875]}
-              size={fontStyle?.fontSize ? fontStyle?.fontSize : theme.fontSizes.sm}
-              fontFamily={
-                fontStyle?.fontFamily ? fontStyle?.fontFamily : theme.fonts.inter_regular_400
-              }
-              lineHeight={fontStyle?.lineHeight ? fontStyle?.lineHeight : theme.fontSizes.md}
-              letterSpacing={
-                fontStyle?.letterSpacing ? fontStyle?.letterSpacing : ("regular" as any)
-              }
-            />
-          )}
-        </TouchableOpacity>
-      )}
-    </>
-  );
-});
-
-/**
- * Componente CapturePhoto para a interação da  ui.
- */
-export default asBaseComponent(CapturePhoto);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { Image, TouchableOpacity } from "react-native";
+
+// components
+import Typography from "../typography";
+
+// icons / svg
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import { type ICapturePhotoProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { styles } from "./styles";
+import { Box } from "jornada-ui";
+
+const CapturePhoto = forwardRef<any, ICapturePhotoProps>((props, ref): React.ReactElement => {
+  const {
+    imageComprovante,
+    takePhotoWithImagePicker,
+    testID,
+    width,
+    height,
+    marginStyle,
+    flexStyle,
+    title,
+    borderStyled,
+    color,
+    fontStyle,
+    opacity,
+    style,
+    smallText,
+    paddingStyle,
+    backgroundColor,
+  } = props;
+
+  const styleProps = {
+    imageComprovante,
+    takePhotoWithImagePicker,
+    testID,
+    width,
+    height,
+    marginStyle,
+    flexStyle,
+    title,
+    borderStyled,
+    color,
+    fontStyle,
+    opacity,
+    smallText,
+    paddingStyle,
+    backgroundColor,
+    style,
+  } as ICapturePhotoProps;
+
+  return (
+    <>
+      {imageComprovante ? (
+        <TouchableOpacity
+          ref={ref}
+          activeOpacity={0.7}
+          onPress={takePhotoWithImagePicker}
+          testID={testID}
+        >
+          <Image
+            style={[
+              {
+                width,
+                height,
+                borderWidth: Number(borderStyled?.borderWidth),
+                borderColor: borderStyled?.borderColor,
+                borderRadius: Number(borderStyled?.borderRadius),
+              },
+              styles(styleProps).capturePhoto,
+            ]}
+            source={{ uri: imageComprovante }}
+          />
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity
+          ref={ref}
+          activeOpacity={0.7}
+          style={[styles(styleProps).capturePhoto, { backgroundColor }, style]}
+          onPress={takePhotoWithImagePicker}
+          testID={testID}
+        >
+          <Icons icon={"CAMERA_PLUS"} size={theme.fontSizes["2xl"] || 24} color={color?.colorSvg} />
+
+          <Box width={140}>
+            <Typography
+              text={title.text || "Sem foto capturada."}
+              align={
+                flexStyle?.textAlign === "left" || flexStyle?.textAlign === "right"
+                  ? flexStyle.textAlign
+                  : "center"
+              }
+              color={color?.colorText ? color.colorText : theme.colors.gray[875]}
+              size={fontStyle?.fontSize ? fontStyle?.fontSize : theme.fontSizes.md}
+              fontFamily={
+                fontStyle?.fontFamily ? fontStyle?.fontFamily : theme.fonts.inter_regular_400
+              }
+              lineHeight={fontStyle?.lineHeight ? fontStyle?.lineHeight : theme.fontSizes["2xl"]}
+              letterSpacing={
+                fontStyle?.letterSpacing ? fontStyle?.letterSpacing : ("regular" as any)
+              }
+              marginTop={8}
+            />
+          </Box>
+          {smallText && (
+            <Typography
+              text={title.textSmallPhoto || "aqui vai o texto de baixo da foto"}
+              align={
+                flexStyle?.textAlign === "left" || flexStyle?.textAlign === "right"
+                  ? flexStyle.textAlign
+                  : "center"
+              }
+              color={color?.colorText ? color.colorText : theme.colors.gray[875]}
+              size={fontStyle?.fontSize ? fontStyle?.fontSize : theme.fontSizes.sm}
+              fontFamily={
+                fontStyle?.fontFamily ? fontStyle?.fontFamily : theme.fonts.inter_regular_400
+              }
+              lineHeight={fontStyle?.lineHeight ? fontStyle?.lineHeight : theme.fontSizes.md}
+              letterSpacing={
+                fontStyle?.letterSpacing ? fontStyle?.letterSpacing : ("regular" as any)
+              }
+            />
+          )}
+        </TouchableOpacity>
+      )}
+    </>
+  );
+});
+
+/**
+ * Componente CapturePhoto para a interação da  ui.
+ */
+export default asBaseComponent(CapturePhoto);

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

@@ -1,168 +1,175 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef } from "react";
-
-// components
-import Box from "../../components/box";
-import Typography from "../../components/typography";
-
-//commons/ icons
-import { Icons } from "../../common/icons-svg";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-// typings
-import type { ICardReport } from "./interface";
-// typings
-import { asBaseComponent } from "../../@types/as-base-component";
-
-const CardReport = forwardRef<any, ICardReport>((props, ref): React.ReactElement => {
-  const {
-    name = "Enzo Martins",
-    generatedDate = "15/07/2025",
-    generatedTime = "10:30",
-    status = "OK",
-    backgroundColor,
-    ciclo = "DIÁRIA",
-    testID = "card-report",
-  } = props;
-  return (
-    <Box
-      ref={ref}
-      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.sm}
-          fontFamily={theme.fonts.inter_medium_500}
-          fontWeight={"500"}
-          lineHeight={theme.fontSizes.lg}
-          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={40} color={theme.colors.black[100]} />
-
-            {/*Alteração para exibir o nome do usuário */}
-            <Box>
-              <Box marginStyle={{ marginRight: 2 }} flexStyle={{ flexDirection: "row" }}>
-                <Typography
-                  text={`Documento gerado em: `}
-                  size={12}
-                  color={theme.colors.black[180]}
-                  fontFamily={theme.fonts.inter_extra_bold_800}
-                />
-                <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={12}
-                  color={theme.colors.black[100]}
-                  fontFamily={theme.fonts.inter_extra_bold_800}
-                />
-
-                <Typography
-                  text={`${status}`}
-                  size={12}
-                  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={12}
-                color={theme.colors.black[180]}
-                fontFamily={theme.fonts.inter_light_300}
-                marginLeft={0}
-              />
-
-              <Typography
-                text={`${name}`}
-                size={14}
-                color={theme.colors.black[100]}
-                fontFamily={theme.fonts.inter_extra_bold_800}
-                marginLeft={0}
-              />
-            </Box>
-          </Box>
-        </Box>
-
-        <Icons icon={"CHECK_CIRCLE"} size={40} background={backgroundColor} />
-      </Box>
-    </Box>
-  );
-});
-
-CardReport.displayName = "CardReport";
-
-/**
- * Componente Box para a interação da  ui.
- */
-export default asBaseComponent(CardReport);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import Box from "../../components/box";
+import Typography from "../../components/typography";
+
+//commons/ icons
+import { Icons } from "../../common/icons-svg";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import type { ICardReport } from "./interface";
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+
+const CardReport = forwardRef<any, ICardReport>((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);