jornada-ui 0.4.11 → 0.4.12

package/src/components/activity-step/components/activite-row/index.tsx

@@ -0,0 +1,141 @@
+/**
+ * IMPORTS
+ */
+
+import React, { forwardRef, useCallback } from "react";
+
+import { TouchableOpacity, View } from "react-native";
+
+// components
+import Typography from "../../../typography";
+
+// commons / svg
+import { Icons } from "../../../../common/icons-svg";
+
+// typyngs
+import type { IActivitieRowProps } from "../../interface";
+import { asBaseComponent } from "../../../../@types/as-base-component";
+
+// styles
+import { theme } from "../../../../styles/theme/theme";
+import { styles } from "../../styles";
+
+/**
+ * Componente ActivityRows para a interação da  ui.
+ */
+const ActivityRows = forwardRef<any, IActivitieRowProps<any>>(
+  ({ index, activities, items, onAdd, onEdit, onDelete }, ref): React.ReactElement => {
+    const handleAdd = useCallback(() => onAdd(activities), [onAdd, activities]);
+    const handleEdit = useCallback(() => onEdit(activities), [onEdit, activities]);
+    const handleDelete = useCallback(() => onDelete(activities), [onDelete, activities]);
+
+    const isInvalid = !!activities.invalid;
+
+    const dateText =
+      activities.date instanceof Date
+        ? `${String(activities.date.getDate()).padStart(2, "0")}/${String(
+            activities.date.getMonth() + 1
+          ).padStart(2, "0")}/${activities.date.getFullYear()}`
+        : String(activities.date ?? "");
+
+    const timeText =
+      activities.time instanceof Date
+        ? `${String(activities.time.getHours()).padStart(2, "0")}:${String(
+            activities.time.getMinutes()
+          ).padStart(2, "0")}`
+        : String(activities.time ?? "");
+
+    return (
+      <View ref={ref} style={styles.row}>
+        <View style={styles.badge}>
+          <Typography
+            text={String(index + 1)}
+            color={theme.colors.neutral[25]}
+            size={theme.fontSizes.sm}
+            fontFamily={theme.fonts.inter_bold_700}
+          />
+        </View>
+
+        {Boolean(index !== items?.length - 1) && (
+          <View
+            style={{
+              width: 2,
+              height: 76,
+              backgroundColor: theme.colors.blue[500],
+              position: "absolute",
+              left: 21,
+              top: 60,
+            }}
+          />
+        )}
+
+        <View style={styles.card}>
+          <Typography
+            numberOfLines={1}
+            style={styles.title}
+            text={activities.title ?? "Não informada"}
+            color={isInvalid ? theme.colors.red[900] : theme.colors.blue[500]}
+            size={14}
+            fontFamily={theme.fonts.inter_medium_500}
+            lineHeight={34}
+          />
+
+          <View style={[styles.pill, isInvalid ? styles.pillInvalid : styles.pillOk]}>
+            <Icons
+              icon="CALENDAR"
+              size={18}
+              color={isInvalid ? theme.colors.red[900] : theme.colors.blue[500]}
+            />
+            <Typography
+              text={dateText}
+              color={isInvalid ? theme.colors.red[800] : theme.colors.blue[400]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_medium_500}
+            />
+            <Typography
+              text="|"
+              color={isInvalid ? theme.colors.red[800] : theme.colors.blue[400]}
+              size={theme.fontSizes.sm}
+              style={styles.sep}
+            />
+            <Typography
+              text={timeText}
+              color={isInvalid ? theme.colors.red[800] : theme.colors.blue[500]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_medium_500}
+            />
+          </View>
+        </View>
+
+        <View style={styles.actions}>
+          <TouchableOpacity style={styles.iconButton} onPress={handleEdit} testID="edit-activity">
+            <Icons icon="NOTE_PINCEL" size={18} color={theme.colors.blue[350]} />
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={styles.iconButton}
+            onPress={handleAdd}
+            testID="add-after-activity"
+          >
+            <Icons icon="PLUS_CONTAINER" size={18} color={theme.colors.green[500]} />
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={styles.iconButton}
+            onPress={handleDelete}
+            testID="delete-activity"
+          >
+            <Icons icon="TRASH" size={18} color={theme.colors.red[900]} />
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+);
+
+ActivityRows.displayName = "ActivityRows";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(ActivityRows);

package/src/components/activity-step/index.tsx

@@ -0,0 +1,73 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useCallback } from "react";
+
+import { View, FlatList } from "react-native";
+
+// components
+import ActivityRows from "./components/activite-row";
+
+// typings
+import type { ActivityItemModel, ActivityTimelineProps } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { styles, ROW_HEIGHT } from "./styles";
+
+/**
+ * Componente ActivityTimeline para a interação da  ui.
+ */
+const ActivityTimeline = forwardRef<any, ActivityTimelineProps<any>>(
+  (
+    { data, onAdd, onEdit, onDelete, showIndexBadge = true, testID = "activity-timeline" },
+    ref
+  ): React.ReactElement => {
+    const keyExtractor = useCallback((it: ActivityItemModel) => String(it.id), []);
+
+    const renderItem = useCallback(
+      ({ item, index }: { item: ActivityItemModel; index: number }) => (
+        <ActivityRows
+          index={index}
+          items={data}
+          activities={item}
+          onAdd={onAdd}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          showIndexBadge={showIndexBadge}
+        />
+      ),
+      [onAdd, onEdit, onDelete, showIndexBadge]
+    );
+
+    const getItemLayout = useCallback(
+      (_: any, index: number) => ({
+        length: ROW_HEIGHT,
+        offset: ROW_HEIGHT * index,
+        index,
+      }),
+      []
+    );
+    return (
+      <FlatList
+        ref={ref}
+        testID={testID}
+        data={data}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        contentContainerStyle={styles.listContainer}
+        getItemLayout={getItemLayout}
+        initialNumToRender={10}
+        maxToRenderPerBatch={10}
+        removeClippedSubviews
+        windowSize={7}
+        ListEmptyComponent={<View style={{ height: 8 }} />}
+      />
+    );
+  }
+);
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(ActivityTimeline);

package/src/components/activity-step/interface.ts

@@ -0,0 +1,54 @@
+/* eslint-disable no-unused-vars */
+/**
+ * IMPORTS
+ */
+import type { TouchableOpacityProps } from "react-native";
+import type { SVG_NAME } from "../../common/icons-svg/constants";
+
+/**
+ * IMPORTS
+ */
+type ActivityId = string | number;
+
+type ActivityItemModel = {
+  id: ActivityId;
+  title: string; // "Operação com veículo", "Refeição", ...
+  date: Date | string; // pode vir Date ou string já formatada
+  time: Date | string; // idem
+  invalid?: boolean; // destaca em vermelho
+};
+
+type IconName = keyof typeof SVG_NAME;
+
+type OnActivity = (item: ActivityItemModel) => void;
+
+type ActivityTimelineProps<T> = TouchableOpacityProps & {
+  data: T[];
+  onAdd: T; // add novo após o item
+  onEdit: T;
+  onDelete: T;
+  showIndexBadge?: boolean; // mostra o “3/4/5”
+  testID?: string;
+};
+
+type IActivitieRowProps<T> = {
+  index: number;
+  activities: ActivityItemModel;
+  items: T[];
+  onAdd: OnActivity;
+  onEdit: OnActivity;
+  onDelete: OnActivity;
+  showIndexBadge?: boolean;
+};
+
+/**
+ * EXPORT
+ */
+export type {
+  ActivityId,
+  ActivityItemModel,
+  IconName,
+  OnActivity,
+  ActivityTimelineProps,
+  IActivitieRowProps,
+};

package/src/components/activity-step/styles.ts

@@ -0,0 +1,72 @@
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+export const ROW_HEIGHT = 72;
+
+const styles = StyleSheet.create({
+  listContainer: { paddingVertical: 8 },
+  row: {
+    width: "100%",
+    minHeight: ROW_HEIGHT,
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+  },
+  badge: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: theme.colors.blue[500],
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  card: {
+    flex: 1,
+    borderRadius: 10,
+  },
+  title: { marginBottom: 6 },
+  pill: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    gap: 4,
+  },
+  pillOk: {
+    backgroundColor: "#F3F3F5",
+    borderColor: "#C4D4E5",
+  },
+  pillInvalid: {
+    backgroundColor: "#FDE7E7",
+    borderColor: theme.colors.red[900],
+  },
+  sep: { marginHorizontal: 8, opacity: 0.5 },
+  actions: { flexDirection: "row", gap: 8 },
+  iconButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: theme.colors.neutral[25],
+    borderWidth: 1,
+    borderColor: theme.colors.neutral[200],
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 36,
+  },
+});
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/card-scheduled-journey/index.tsx

@@ -1,138 +1,140 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef } from "react";
-import { Dimensions } from "react-native";
-
-// components
-import Box from "../box";
-import Typography from "../typography";
-
-// typings
-import { asBaseComponent } from "../../@types/as-base-component";
-import { type ICardScheduledJourney } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-// icons / svg
-import { Icons } from "../../common/icons-svg";
-
-const CardScheduledJourney = forwardRef<any, ICardScheduledJourney>(
-  (props, ref): React.ReactElement => {
-    const {
-      title,
-      duracao,
-      color = {},
-      backgroundColor,
-      borderStyled,
-      paddingStyle,
-      marginStyle,
-      flexStyle,
-      style,
-      width,
-      widthChildren,
-      icon,
-      borderRight,
-    } = props;
-
-    const { width: widthScreen } = Dimensions.get("window");
-    const isMobile = widthScreen < 768;
-    return (
-      <Box
-        ref={ref}
-        style={style}
-        width={width}
-        height={80}
-        backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
-        borderStyled={{
-          borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
-          borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thin_bold,
-          borderColor: borderStyled?.borderColor ?? theme.colors.gray[700],
-        }}
-      >
-        {/**CHILDREN */}
-        <Box
-          flexStyle={{
-            flexDirection: "row",
-            justifyContent: "space-between",
-            alignItems: "center",
-          }}
-          width={widthChildren}
-          borderStyled={{
-            borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick,
-          }}
-          paddingStyle={{
-            paddingLeft: paddingStyle?.paddingLeft ?? 8,
-          }}
-        >
-          {/**ICONE*/}
-          <Box
-            width={65}
-            height={65}
-            backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
-            flexStyle={{
-              justifyContent: flexStyle?.justifyContent ?? "center",
-              alignItems: flexStyle?.alignItems ?? "center",
-            }}
-            borderStyled={{
-              borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
-              borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick,
-              borderColor: borderStyled?.borderColor ?? theme.colors.gray[700],
-            }}
-          >
-            {icon && <Icons icon={icon} size={theme.fontSizes["2xl"]} />}
-          </Box>
-
-          {/**TITLE E DESCRIÇÃO */}
-          <Box
-            width={isMobile ? "73%" : "90%"}
-            flexStyle={{
-              flexDirection: "column",
-              justifyContent: "space-between",
-            }}
-            marginStyle={{ marginTop: marginStyle?.marginTop ?? -20 }}
-          >
-            <Typography
-              text={title}
-              size={theme.fontSizes.sm}
-              fontFamily={theme.fonts.inter_bold_700}
-              fontWeight={"700"}
-              color={color.colorText ?? theme.colors.black[25]}
-              lineHeight={theme.fontSizes.lg}
-              letterSpacing={"regular"}
-            />
-
-            <Typography
-              text={`Duração: ${duracao}`}
-              size={theme.fontSizes.xs}
-              fontWeight={"300"}
-              fontFamily={theme.fonts.inter_light_300}
-              color={color.colorText ?? theme.colors.black[25]}
-              lineHeight={theme.fontSizes.lg}
-              letterSpacing={"regular"}
-            />
-          </Box>
-
-          {/**BORDAR */}
-          <Box
-            width={12}
-            height={78}
-            backgroundColor={borderRight ?? theme.colors.green[400]}
-            borderStyled={{
-              borderWidth: theme.borderWidths.thin,
-              borderTopRightRadius: theme.borderWidths.thick,
-              borderBottomRightRadius: theme.borderWidths.thick,
-              borderColor: borderRight ?? theme.colors.green[400],
-            }}
-          />
-        </Box>
-      </Box>
-    );
-  }
-);
-
-/**
- * Componente CardScheduledJourney para a interação da  ui.
- */
-export default asBaseComponent(CardScheduledJourney);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { Dimensions } from "react-native";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import { type ICardScheduledJourney } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+// icons / svg
+import { Icons } from "../../common/icons-svg";
+
+const CardScheduledJourney = forwardRef<any, ICardScheduledJourney>(
+  (props, ref): React.ReactElement => {
+    const {
+      title,
+      subTitle,
+      duracao,
+      color = {},
+      backgroundColor,
+      borderStyled,
+      paddingStyle,
+      marginStyle,
+      flexStyle,
+      style,
+      width,
+      widthChildren,
+      icon,
+      borderRight,
+    } = props;
+
+    const { width: widthScreen } = Dimensions.get("window");
+    const isMobile = widthScreen < 768;
+    return (
+      <Box
+        ref={ref}
+        style={style}
+        width={width}
+        height={80}
+        backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+        borderStyled={{
+          borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
+          borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thin_bold,
+          borderColor: borderStyled?.borderColor ?? theme.colors.gray[700],
+        }}
+      >
+        {/**CHILDREN */}
+        <Box
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+          width={widthChildren}
+          borderStyled={{
+            borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick,
+          }}
+          paddingStyle={{
+            paddingLeft: paddingStyle?.paddingLeft ?? 8,
+          }}
+        >
+          {/**ICONE*/}
+          <Box
+            width={65}
+            height={65}
+            backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+            flexStyle={{
+              justifyContent: flexStyle?.justifyContent ?? "center",
+              alignItems: flexStyle?.alignItems ?? "center",
+            }}
+            borderStyled={{
+              borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
+              borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick,
+              borderColor: borderStyled?.borderColor ?? theme.colors.gray[700],
+            }}
+          >
+            {icon && <Icons icon={icon} size={theme.fontSizes["2xl"]} />}
+          </Box>
+
+          {/**TITLE E DESCRIÇÃO */}
+          <Box
+            width={isMobile ? "73%" : "90%"}
+            flexStyle={{
+              flexDirection: "column",
+              justifyContent: "space-between",
+            }}
+            marginStyle={{ marginTop: marginStyle?.marginTop ?? -20 }}
+          >
+            <Typography
+              text={title}
+              size={theme.fontSizes.sm}
+              fontFamily={theme.fonts.inter_bold_700}
+              fontWeight={"700"}
+              color={color.colorText ?? theme.colors.black[25]}
+              lineHeight={theme.fontSizes.lg}
+              letterSpacing={"regular"}
+            />
+
+            <Typography
+              text={`${subTitle ?? "Duração"}: ${duracao}`}
+              size={theme.fontSizes.xs}
+              fontWeight={"300"}
+              fontFamily={theme.fonts.inter_light_300}
+              color={color.colorText ?? theme.colors.black[25]}
+              lineHeight={theme.fontSizes.lg}
+              letterSpacing={"regular"}
+              marginTop={4}
+            />
+          </Box>
+
+          {/**BORDAR */}
+          <Box
+            width={12}
+            height={78}
+            backgroundColor={borderRight ?? theme.colors.green[400]}
+            borderStyled={{
+              borderWidth: theme.borderWidths.thin,
+              borderTopRightRadius: theme.borderWidths.thick,
+              borderBottomRightRadius: theme.borderWidths.thick,
+              borderColor: borderRight ?? theme.colors.green[400],
+            }}
+          />
+        </Box>
+      </Box>
+    );
+  }
+);
+
+/**
+ * Componente CardScheduledJourney para a interação da  ui.
+ */
+export default asBaseComponent(CardScheduledJourney);