jornada-ui 0.4.15 → 0.4.16

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

@@ -0,0 +1,123 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+import Button from "../button";
+
+// styles / theme
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import type { INotificationCardProps } from "./interface";
+
+/**
+ * Componente NotificationCard
+ */
+const NotificationCard: React.FC<INotificationCardProps> = forwardRef<View, INotificationCardProps>(
+  ({ variant = "read", title, description, actionLabel, onPress, onPressAction, testID }, ref) => {
+    const isWarning = variant === "unread";
+
+    // cor da borda lateral
+    const borderColor = isWarning ? theme.colors.orange[150] : theme.colors.blue[525];
+
+    return (
+      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+        <Box
+          ref={ref}
+          testID={testID ?? "notification-card"}
+          flexStyle={{ flexDirection: "row" }}
+          borderStyled={{
+            borderWidth: 1,
+            borderColor: isWarning ? theme.colors.orange[150] : theme.colors.neutral[200],
+            borderRadius: theme.borderWidths.thick_medium,
+          }}
+          marginStyle={{ marginBottom: 12 }}
+          backgroundColor={isWarning ? theme.colors.neutral[500] : theme.colors.neutral[25]}
+        >
+          {/* borda fixa lateral esquerda */}
+          <Box
+            width={8}
+            backgroundColor={borderColor}
+            borderStyled={{
+              borderTopLeftRadius: theme.borderWidths.thick_medium,
+              borderBottomLeftRadius: theme.borderWidths.thick_medium,
+            }}
+          />
+
+          {/* Conteúdo do card */}
+          <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings.sm }}>
+            {/* Header */}
+            <Box
+              flexStyle={{ flexDirection: "row", alignItems: "center" }}
+              marginStyle={{ marginBottom: 6 }}
+            >
+              <Icons icon="BELL" color={borderColor} size={20} />
+              <Typography
+                text={title}
+                fontFamily={theme.fonts.inter_bold}
+                fontWeight="700"
+                size={theme.fontSizes.md}
+                color={theme.colors.black[100]}
+                marginLeft={8}
+              />
+            </Box>
+
+            {/* Texto */}
+            <Typography
+              text={description}
+              numberOfLines={isWarning ? 2 : 4}
+              ellipsizeMode="tail"
+              size={theme.fontSizes.sm}
+              lineHeight={theme.lineHeight.md}
+              fontFamily={theme.fonts.inter_regular_400}
+              color={theme.colors.gray[700]}
+              marginBottom={isWarning && actionLabel ? 12 : 0}
+            />
+
+            {/* Ação opcional */}
+            {actionLabel && onPressAction && (
+              <Button
+                isLoading={false}
+                title={actionLabel}
+                onPress={onPressAction}
+                backgroundColor={theme.colors.neutral[25]}
+                borderStyled={{
+                  borderWidth: 1,
+                  borderColor: theme.colors.red[500],
+                  borderRadius: 12,
+                }}
+                buttonTextStyle={{
+                  color: theme.colors.red[500],
+                  fontSize: theme.fontSizes.sm,
+                  fontFamily: theme.fonts.inter_medium_500,
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+                style={{ alignSelf: "flex-start", paddingHorizontal: 12 }}
+              />
+            )}
+          </Box>
+        </Box>
+      </TouchableOpacity>
+    );
+  }
+);
+
+NotificationCard.displayName = "NotificationCard";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(NotificationCard);

package/src/components/notification-card/interface.ts

@@ -0,0 +1,18 @@
+/**
+ * IMPORTS
+ */
+
+interface INotificationCardProps {
+  variant?: "read" | "unread";
+  title: string;
+  description: string;
+  actionLabel?: string;
+  onPress?: () => void;
+  onPressAction?: () => void;
+  testID?: string;
+}
+
+/**
+ * EXPORTS
+ */
+export { type INotificationCardProps };

package/src/components/notification-details-card/index.tsx

@@ -0,0 +1,180 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useState } from "react";
+import { Modal, TouchableOpacity, Image, View } from "react-native";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// typings
+import type { INotificationDetailCardProps } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles / theme
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente NotificationDetailCard
+ */
+const NotificationDetailCard: React.FC<INotificationDetailCardProps> = forwardRef<
+  View,
+  INotificationDetailCardProps
+>(({ title, description, fileUrl, fileType = "image", testID }, ref) => {
+  const [visible, setVisible] = useState(false);
+
+  function openFile() {
+    if (fileType === "image") {
+      setVisible(true);
+    } else if (fileUrl) {
+      import("react-native").then(({ Linking }) => {
+        Linking.openURL(fileUrl).catch((err) => console.warn("Erro ao abrir arquivo:", err));
+      });
+    }
+  }
+
+  const borderColor = theme.colors.blue[500];
+
+  return (
+    <Box
+      ref={ref}
+      testID={testID ?? "notification-detail-card"}
+      flexStyle={{ flexDirection: "row" }}
+      borderStyled={{
+        borderWidth: 1,
+        borderColor: theme.colors.neutral[200],
+        borderRadius: theme.borderWidths.thick_medium,
+      }}
+      marginStyle={{ marginBottom: 16 }}
+      backgroundColor={theme.colors.neutral[25]}
+    >
+      {/* borda fixa lateral esquerda */}
+      <Box
+        width={8}
+        backgroundColor={borderColor}
+        borderStyled={{
+          borderTopLeftRadius: theme.borderWidths.thick_medium,
+          borderBottomLeftRadius: theme.borderWidths.thick_medium,
+        }}
+      />
+
+      {/* Conteúdo do card */}
+      <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings.md }}>
+        {/* header */}
+        <Typography
+          text={title}
+          fontFamily={theme.fonts.inter_bold}
+          fontWeight="700"
+          size={theme.fontSizes.md}
+          color={theme.colors.black[100]}
+          marginBottom={8}
+        />
+
+        {/* texto */}
+        <Typography
+          text={description}
+          size={theme.fontSizes.sm}
+          lineHeight={theme.lineHeight.md}
+          color={theme.colors.gray[700]}
+          marginBottom={fileUrl ? 12 : 0}
+        />
+
+        {/* arquivo (se existir) */}
+        {fileUrl && (
+          <TouchableOpacity
+            testID="button"
+            onPress={openFile}
+            activeOpacity={0.8}
+            style={{
+              borderRadius: theme.borderWidths.thick_medium,
+              overflow: "hidden",
+              borderWidth: 1,
+              borderColor: theme.colors.gray[300],
+            }}
+          >
+            {fileType === "image" ? (
+              <Box
+                borderStyled={{
+                  borderWidth: 2,
+                  borderColor: theme.colors.blue[525],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              >
+                <Image
+                  source={{ uri: fileUrl }}
+                  style={{
+                    width: "100%",
+                    height: 180,
+                    borderRadius: theme.borderWidths.thick_medium,
+                    borderWidth: 2,
+                    borderColor: theme.colors.blue[525],
+                  }}
+                  resizeMode="cover"
+                />
+              </Box>
+            ) : (
+              <Box
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                }}
+                paddingStyle={{ padding: theme.paddings.sm }}
+              >
+                <Typography
+                  text={`Abrir arquivo (${fileType.toUpperCase()})`}
+                  fontFamily={theme.fonts.inter_medium_500}
+                  color={theme.colors.blue[500]}
+                  size={theme.fontSizes.md}
+                />
+                <Icons icon="FILES" size={20} color={theme.colors.blue[500]} />
+              </Box>
+            )}
+          </TouchableOpacity>
+        )}
+      </Box>
+
+      {/* modal para zoom da imagem */}
+      {fileType === "image" && (
+        <Modal visible={visible} transparent animationType="fade">
+          <View
+            style={{
+              flex: 1,
+              backgroundColor: "rgba(0,0,0,0.9)",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <TouchableOpacity
+              onPress={() => setVisible(false)}
+              style={{ position: "absolute", top: 40, right: 20 }}
+            >
+              <Icons icon="CLOSED" size={28} color={theme.colors.neutral[25]} />
+            </TouchableOpacity>
+
+            <Image
+              source={{ uri: fileUrl }}
+              style={{
+                width: "90%",
+                height: "70%",
+                borderRadius: theme.borderWidths.thick_medium,
+              }}
+              resizeMode="contain"
+            />
+          </View>
+        </Modal>
+      )}
+    </Box>
+  );
+});
+
+NotificationDetailCard.displayName = "NotificationDetailCard";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(NotificationDetailCard);

package/src/components/notification-details-card/interface.ts

@@ -0,0 +1,16 @@
+/**
+ * IMPORTS
+ */
+
+interface INotificationDetailCardProps {
+  title: string;
+  description: string;
+  fileUrl?: string; // link para arquivo (png, pdf, csv, etc.)
+  fileType?: "image" | "pdf" | "csv" | "other";
+  testID?: string;
+}
+
+/**
+ * EXPORTS
+ */
+export { type INotificationDetailCardProps };

package/src/components/travel-history/interface.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-/* eslint-disable no-undef */
+ 
 /**
  * IMPORTS
  */

package/src/components/user-journey-work-card/index.tsx

@@ -27,9 +27,11 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
       initialTime = "00:40",
       duration = "00:00",
       avatar = "",
+      counterBadge = 0,
       backgroundColor,
       width,
       handleNavigation,
+      handleNavigationNotification,
     } = props;
     return (
       <Box
@@ -125,7 +127,32 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
             </Box>
           </Box>
 
-          <Icons icon={"BELL"} size={28} />
+          <TouchableOpacity activeOpacity={0.7} onPress={handleNavigationNotification}>
+            {counterBadge > 0 && (
+              <Box
+                backgroundColor={theme.colors.red[500]}
+                flexStyle={{ alignItems: "center", justifyContent: "center" }}
+                borderStyled={{ borderRadius: theme.borderWidths.hairline }}
+                style={[
+                  counterBadge < 10
+                    ? { right: -5, top: -2, height: 16, width: 16 }
+                    : { right: -8, top: -5, padding: 2 },
+                  { position: "absolute", zIndex: 10 },
+                ]}
+              >
+                <Typography
+                  text={`${counterBadge}`}
+                  align={"center"}
+                  size={theme.fontSizes["2xs"]}
+                  color={theme.colors.neutral[25]}
+                  fontFamily={theme.fonts.inter_bold_700}
+                  lineHeight={theme.fontSizes.sm}
+                  letterSpacing={"regular"}
+                />
+              </Box>
+            )}
+            <Icons icon={"BELL"} size={28} style={{ position: "relative" }} />
+          </TouchableOpacity>
         </Box>
 
         <Box