react-native-exp-fig 2.0.0 → 2.0.2

package/src/components/history-details/index.tsx

@@ -1,99 +1,99 @@
-/**
- * IMPORTS
- */
-import React from "react";
-
-// components
-import { Box } from "../box";
-import { Typography } from "../typography";
-
-// typings
-import { IHistoryDetails } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-const HistoryDetails: React.FC<IHistoryDetails> = ({
-  numero = "01020304050607",
-  local = "Doca 1, Pátio 02 - Usimais (Ipatinga)",
-  date = "24/03/2025",
-  duracao = "00:30",
-}) => {
-  return (
-    <Box width="100%" borderStyled={{ borderRadius: 8 }} backgroundColor={theme.colors.blue[400]}>
-      <Box
-        flexStyle={{
-          flexDirection: "column",
-          justifyContent: "flex-start",
-          alignItems: "flex-start",
-        }}
-        paddingStyle={{ padding: theme.paddings.xs }}
-      >
-        <Typography
-          text={`Carregamento - #${numero}`}
-          size={theme.fontSizes.sm}
-          fontFamily={theme.fonts.inter_semi_bold_600}
-          fontWeight="600"
-          color={theme.colors.neutral[25]}
-          lineHeight={theme.fontSizes.xl}
-          letterSpacing={"regular"}
-        />
-
-        <Typography
-          text={local}
-          color={theme.colors.neutral[25]}
-          size={theme.fontSizes.xs}
-          lineHeight={theme.fontSizes.lg}
-          fontFamily={theme.fonts.inter_regular_400}
-          letterSpacing={"regular"}
-          numberOfLines={1}
-        />
-        <Typography
-          text={`Data carregamento: ${date}`}
-          color={theme.colors.neutral[25]}
-          size={theme.fontSizes.xs}
-          fontFamily={theme.fonts.inter_regular_400}
-          lineHeight={theme.fontSizes.lg}
-          letterSpacing={"regular"}
-          numberOfLines={1}
-        />
-      </Box>
-
-      <Box height={1} backgroundColor={theme.colors.gray[950]} />
-
-      <Box
-        flexStyle={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-        paddingStyle={{ padding: theme.paddings.xs }}
-      >
-        <Typography
-          text={"DURAÇÃO:"}
-          color={theme.colors.neutral[25]}
-          size={24}
-          fontFamily={theme.fonts.inter_regular_400}
-          fontWeight="400"
-          lineHeight={theme.fontSizes["3xl"]}
-          letterSpacing={"regular"}
-        />
-        <Typography
-          text={duracao}
-          color={theme.colors.neutral[25]}
-          size={26}
-          align="left"
-          fontFamily={theme.fonts.inter_medium_500}
-          fontWeight="500"
-          lineHeight={theme.fontSizes["3xl"]}
-          letterSpacing={"regular"}
-        />
-      </Box>
-    </Box>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { HistoryDetails };
+/**
+ * IMPORTS
+ */
+import React from "react";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// typings
+import { IHistoryDetails } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const HistoryDetails: React.FC<IHistoryDetails> = ({
+  numero = "01020304050607",
+  local = "Doca 1, Pátio 02 - Usimais (Ipatinga)",
+  date = "24/03/2025",
+  duracao = "00:30",
+}) => {
+  return (
+    <Box width="100%" borderStyled={{ borderRadius: 8 }} backgroundColor={theme.colors.blue[400]}>
+      <Box
+        flexStyle={{
+          flexDirection: "column",
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+        }}
+        paddingStyle={{ padding: theme.paddings.xs }}
+      >
+        <Typography
+          text={`Carregamento - #${numero}`}
+          size={theme.fontSizes.sm}
+          fontFamily={theme.fonts.inter_semi_bold_600}
+          fontWeight="600"
+          color={theme.colors.neutral[25]}
+          lineHeight={theme.fontSizes.xl}
+          letterSpacing={"regular"}
+        />
+
+        <Typography
+          text={local}
+          color={theme.colors.neutral[25]}
+          size={theme.fontSizes.xs}
+          lineHeight={theme.fontSizes.lg}
+          fontFamily={theme.fonts.inter_regular_400}
+          letterSpacing={"regular"}
+          numberOfLines={1}
+        />
+        <Typography
+          text={`Data carregamento: ${date}`}
+          color={theme.colors.neutral[25]}
+          size={theme.fontSizes.xs}
+          fontFamily={theme.fonts.inter_regular_400}
+          lineHeight={theme.fontSizes.lg}
+          letterSpacing={"regular"}
+          numberOfLines={1}
+        />
+      </Box>
+
+      <Box height={1} backgroundColor={theme.colors.gray[950]} />
+
+      <Box
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+        paddingStyle={{ padding: theme.paddings.xs }}
+      >
+        <Typography
+          text={"DURAÇÃO:"}
+          color={theme.colors.neutral[25]}
+          size={24}
+          fontFamily={theme.fonts.inter_regular_400}
+          fontWeight="400"
+          lineHeight={theme.fontSizes["3xl"]}
+          letterSpacing={"regular"}
+        />
+        <Typography
+          text={duracao}
+          color={theme.colors.neutral[25]}
+          size={26}
+          align="left"
+          fontFamily={theme.fonts.inter_medium_500}
+          fontWeight="500"
+          lineHeight={theme.fontSizes["3xl"]}
+          letterSpacing={"regular"}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { HistoryDetails };

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

@@ -1,123 +1,127 @@
-/**
- * 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 as React.RefObject<View>}
-          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={theme.margins.xs}
-            />
-
-            {/* 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);
+/**
+ * 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 as React.RefObject<View>}
+          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 */}
+            {typeof description === "string" ? (
+              <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={theme.margins.xs}
+              />
+            ) : (
+              <Box marginStyle={{ marginBottom: theme.margins.xs }}>{description}</Box>
+            )}
+
+            {/* 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

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