react-native-exp-fig 0.1.26 → 0.1.28

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

@@ -1,235 +1,235 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { View, Text, TouchableOpacity } from "react-native";
-
-// commons / svg
-import { Icons } from "../../common/icons-svg";
-
-// helpers
-import { getIconKeyByValue } from "./helpers/get-icon-by-status";
-
-// typings
-import type { IStepIndicator } from "./interface";
-
-// styles
-import { styles } from "./styles";
-import { formHoursMinute } from "../../utils/format-data";
-import { theme } from "../../styles/theme/theme";
-import { ModalChangeActivity } from "../modal-change-activity";
-
-/**
- * Componente StepIndicator para a interação da ui.
- */
-const StepIndicator: React.FC<IStepIndicator> = ({
-  data = [],
-  type,
-  textColorDescription,
-  titleColor,
-  titleNumberColor,
-  onChangeActivity,
-}) => {
-  const StepDefault = () => {
-    const [isModalVisible, setIsModalVisible] = React.useState(false);
-    const [currentStepIndex, setCurrentStepIndex] = React.useState<number | null>(null);
-    const [stepData, setStepData] = React.useState(data);
-
-    const handleOnPressActivitie = (stepItem: any, index: number) => {
-      const desc = stepItem?.descricao?.toLowerCase?.();
-      if (!desc) return;
-
-      const isDescanso = ["descanso", "refeição", "repouso_noturno", "repouso_semanal"].includes(
-        desc.replace(/\s+/g, "_")
-      );
-
-      if (isDescanso && stepItem?.sincronizado === true) {
-        setCurrentStepIndex(index);
-        setIsModalVisible(true);
-      }
-    };
-
-    const handleConfirmModal = (newData: { label: string; value: string; key: number }) => {
-      if (currentStepIndex !== null) {
-        const updatedStep = {
-          ...stepData[currentStepIndex],
-          descricao: newData.label,
-          referencia: newData.value,
-          ec_tipo_atividade_id: newData.key,
-        };
-
-        const newSteps = stepData.map((item, index) =>
-          index === currentStepIndex ? updatedStep : item
-        );
-
-        setStepData(newSteps as any);
-
-        if (onChangeActivity) {
-          onChangeActivity(updatedStep);
-        }
-      }
-
-      setIsModalVisible(false);
-      setCurrentStepIndex(null);
-    };
-
-    return (
-      <>
-        {stepData.length > 0 &&
-          stepData.map((history, index) => {
-            const isFirst = index === 0;
-            const isEditableType = history.tipo === "descanso";
-            const isSynced = history?.sincronizado === true;
-            const canEdit = isFirst && isEditableType && isSynced;
-
-            return (
-              <TouchableOpacity
-                testID="step-indicator"
-                activeOpacity={0.7}
-                key={history?.id}
-                style={styles({}).containerIndicator}
-                disabled={!canEdit}
-                onPress={() => handleOnPressActivitie(history, index)}
-              >
-                <View style={styles({ sincronizado: history.sincronizado }).containerBall}>
-                  {stepData.length > 1 && index < stepData.length - 1 && (
-                    <View
-                      style={{
-                        width: 2,
-                        height: 84,
-                        marginTop: 116,
-                        position: "relative",
-                        backgroundColor: history.sincronizado
-                          ? theme.colors.blue[500]
-                          : theme.colors.orange[150],
-                      }}
-                    />
-                  )}
-                  <Text style={styles({ titleNumberColor }).titleNumber}>
-                    {stepData.length - index}
-                  </Text>
-                </View>
-
-                <View style={styles({}).containerMain}>
-                  <Text style={styles({ titleColor }).title}>{history?.descricao}</Text>
-
-                  {history?.data_inicio && (
-                    <Text style={styles({ textColorDescription }).titleDescription}>
-                      {`Inicio: ${history.data_inicio} ás ${history.data_fim}`}
-                    </Text>
-                  )}
-
-                  {history.duracao_segundos && (
-                    <Text style={styles({ textColorDescription }).titleDescription}>
-                      Duração: {formHoursMinute(history?.duracao_segundos as string)}
-                    </Text>
-                  )}
-                </View>
-              </TouchableOpacity>
-            );
-          })}
-
-        {isModalVisible && (
-          <ModalChangeActivity
-            visible={isModalVisible}
-            modalConfirm={handleConfirmModal}
-            descricao=""
-            onClose={() => setIsModalVisible(false)}
-          />
-        )}
-      </>
-    );
-  };
-
-  const StepCustom = () => {
-    return (
-      <View
-        style={{
-          width: "100%",
-          height: 84,
-          paddingHorizontal: 24,
-          display: "flex",
-          flexDirection: "row",
-        }}
-      >
-        {data.map((step, indexCustom) => {
-          const descricao = getIconKeyByValue(step.descricao);
-
-          return (
-            <React.Fragment key={`step-${indexCustom}`}>
-              <View
-                style={{
-                  width: 45,
-                  height: 45,
-                  backgroundColor: indexCustom <= 3 ? "orange" : "transparent",
-                  borderRadius: 50,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  borderWidth: 1,
-                  borderColor: "#fff",
-                }}
-              >
-                <View
-                  style={{
-                    width: 45,
-                    height: 45,
-                    backgroundColor: "transparent",
-                    borderRadius: 50,
-                    alignItems: "center",
-                    justifyContent: "center",
-                  }}
-                >
-                  {descricao && <Icons icon={descricao} />}
-                </View>
-                <Text
-                  style={{
-                    position: "absolute",
-                    top: 56,
-                    fontWeight: "600",
-                    fontSize: 10,
-                    lineHeight: 14,
-                    textAlign: "center",
-                    color: "#fff",
-                    width: 75,
-                  }}
-                >
-                  {step.descricao}
-                </Text>
-              </View>
-
-              {data?.length > 1 && indexCustom < data?.length - 1 && (
-                <View
-                  style={{
-                    width: 35,
-                    height: 2,
-                    marginTop: 24,
-                    position: "relative",
-                    backgroundColor: "orange",
-                  }}
-                />
-              )}
-            </React.Fragment>
-          );
-        })}
-      </View>
-    );
-  };
-
-  const handleRenderComponent = (stepType: "default" | "custom") => {
-    switch (stepType) {
-      case "default":
-        return <StepDefault />;
-      case "custom":
-        return <StepCustom />;
-      default:
-        return <View />;
-    }
-  };
-
-  return <>{handleRenderComponent(type!)}</>;
-};
-
-/**
- * EXPORTS
- */
-export default StepIndicator;
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+
+// commons / svg
+import { Icons } from "../../common/icons-svg";
+
+// helpers
+import { getIconKeyByValue } from "./helpers/get-icon-by-status";
+
+// typings
+import type { IStepIndicator } from "./interface";
+
+// styles
+import { styles } from "./styles";
+import { formHoursMinute } from "../../utils/format-data";
+import { theme } from "../../styles/theme/theme";
+import { ModalChangeActivity } from "../modals/modal-change-activity";
+
+/**
+ * Componente StepIndicator para a interação da ui.
+ */
+const StepIndicator: React.FC<IStepIndicator> = ({
+  data = [],
+  type,
+  textColorDescription,
+  titleColor,
+  titleNumberColor,
+  onChangeActivity,
+}) => {
+  const StepDefault = () => {
+    const [isModalVisible, setIsModalVisible] = React.useState(false);
+    const [currentStepIndex, setCurrentStepIndex] = React.useState<number | null>(null);
+    const [stepData, setStepData] = React.useState(data);
+
+    const handleOnPressActivitie = (stepItem: any, index: number) => {
+      const desc = stepItem?.descricao?.toLowerCase?.();
+      if (!desc) return;
+
+      const isDescanso = ["descanso", "refeição", "repouso_noturno", "repouso_semanal"].includes(
+        desc.replace(/\s+/g, "_")
+      );
+
+      if (isDescanso && stepItem?.sincronizado === true) {
+        setCurrentStepIndex(index);
+        setIsModalVisible(true);
+      }
+    };
+
+    const handleConfirmModal = (newData: { label: string; value: string; key: number }) => {
+      if (currentStepIndex !== null) {
+        const updatedStep = {
+          ...stepData[currentStepIndex],
+          descricao: newData.label,
+          referencia: newData.value,
+          ec_tipo_atividade_id: newData.key,
+        };
+
+        const newSteps = stepData.map((item, index) =>
+          index === currentStepIndex ? updatedStep : item
+        );
+
+        setStepData(newSteps as any);
+
+        if (onChangeActivity) {
+          onChangeActivity(updatedStep);
+        }
+      }
+
+      setIsModalVisible(false);
+      setCurrentStepIndex(null);
+    };
+
+    return (
+      <>
+        {stepData.length > 0 &&
+          stepData.map((history, index) => {
+            const isFirst = index === 0;
+            const isEditableType = history.tipo === "descanso";
+            const isSynced = history?.sincronizado === true;
+            const canEdit = isFirst && isEditableType && isSynced;
+
+            return (
+              <TouchableOpacity
+                testID="step-indicator"
+                activeOpacity={0.7}
+                key={history?.id}
+                style={styles({}).containerIndicator}
+                disabled={!canEdit}
+                onPress={() => handleOnPressActivitie(history, index)}
+              >
+                <View style={styles({ sincronizado: history.sincronizado }).containerBall}>
+                  {stepData.length > 1 && index < stepData.length - 1 && (
+                    <View
+                      style={{
+                        width: 2,
+                        height: 84,
+                        marginTop: 116,
+                        position: "relative",
+                        backgroundColor: history.sincronizado
+                          ? theme.colors.blue[500]
+                          : theme.colors.orange[150],
+                      }}
+                    />
+                  )}
+                  <Text style={styles({ titleNumberColor }).titleNumber}>
+                    {stepData.length - index}
+                  </Text>
+                </View>
+
+                <View style={styles({}).containerMain}>
+                  <Text style={styles({ titleColor }).title}>{history?.descricao}</Text>
+
+                  {history?.data_inicio && (
+                    <Text style={styles({ textColorDescription }).titleDescription}>
+                      {`Inicio: ${history.data_inicio} ás ${history.data_fim}`}
+                    </Text>
+                  )}
+
+                  {history.duracao_segundos && (
+                    <Text style={styles({ textColorDescription }).titleDescription}>
+                      Duração: {formHoursMinute(history?.duracao_segundos as string)}
+                    </Text>
+                  )}
+                </View>
+              </TouchableOpacity>
+            );
+          })}
+
+        {isModalVisible && (
+          <ModalChangeActivity
+            visible={isModalVisible}
+            modalConfirm={handleConfirmModal}
+            descricao=""
+            onClose={() => setIsModalVisible(false)}
+          />
+        )}
+      </>
+    );
+  };
+
+  const StepCustom = () => {
+    return (
+      <View
+        style={{
+          width: "100%",
+          height: 84,
+          paddingHorizontal: 24,
+          display: "flex",
+          flexDirection: "row",
+        }}
+      >
+        {data.map((step, indexCustom) => {
+          const descricao = getIconKeyByValue(step.descricao);
+
+          return (
+            <React.Fragment key={`step-${indexCustom}`}>
+              <View
+                style={{
+                  width: 45,
+                  height: 45,
+                  backgroundColor: indexCustom <= 3 ? "orange" : "transparent",
+                  borderRadius: 50,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderWidth: 1,
+                  borderColor: "#fff",
+                }}
+              >
+                <View
+                  style={{
+                    width: 45,
+                    height: 45,
+                    backgroundColor: "transparent",
+                    borderRadius: 50,
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  {descricao && <Icons icon={descricao} />}
+                </View>
+                <Text
+                  style={{
+                    position: "absolute",
+                    top: 56,
+                    fontWeight: "600",
+                    fontSize: 10,
+                    lineHeight: 14,
+                    textAlign: "center",
+                    color: "#fff",
+                    width: 75,
+                  }}
+                >
+                  {step.descricao}
+                </Text>
+              </View>
+
+              {data?.length > 1 && indexCustom < data?.length - 1 && (
+                <View
+                  style={{
+                    width: 35,
+                    height: 2,
+                    marginTop: 24,
+                    position: "relative",
+                    backgroundColor: "orange",
+                  }}
+                />
+              )}
+            </React.Fragment>
+          );
+        })}
+      </View>
+    );
+  };
+
+  const handleRenderComponent = (stepType: "default" | "custom") => {
+    switch (stepType) {
+      case "default":
+        return <StepDefault />;
+      case "custom":
+        return <StepCustom />;
+      default:
+        return <View />;
+    }
+  };
+
+  return <>{handleRenderComponent(type!)}</>;
+};
+
+/**
+ * EXPORTS
+ */
+export default StepIndicator;

package/src/index.ts

@@ -1,45 +1,50 @@
-/**
- * EXPORTS
- */
-
-// Components
-export { default as Box } from "./components/box";
-export { Button } from "./components/button";
-export { default as StepIndicator } from "./components/step-indicator";
-export { Typography } from "./components/typography";
-export { Input } from "./components/input";
-export { CapturePhoto } from "./components/capture-photo";
-export { CardHours } from "./components/card-hours";
-export { SelectOption } from "./components/selects/select-option";
-export { Header } from "./components/header-profile";
-export { ScheduledJourneyIndicators } from "./components/scheduled-journey-indicators";
-export { CardScheduledJourney } from "./components/card-scheduled-journey";
-export { UserProfile } from "./components/user-profile";
-export { MenuItem } from "./components/menu-item";
-export { CardLoading } from "./components/card-loading";
-export { CardWorkSession } from "./components/card-work-session";
-export { LoadingProgress } from "./components/loading-progress";
-export { NoData } from "./components/no-data";
-export { FilterJourney } from "./components/filter-journey";
-export { Coil } from "./components/coil";
-export { FilterDateSelector } from "./components/filter-date-selector";
-export { CardHistory } from "./components/card-history";
-export { NotificationLoading } from "./components/notification-loading";
-export { CheckBox } from "./components/check-box";
-export { ImageCaptureWithRemove } from "./components/image-capture-with-remove";
-export { LoadingDetails } from "./components/loading-details";
-export { AvatarProfile } from "./components/avatar-profile";
-export { HistoryDetails } from "./components/history-details";
-export { ActivitiesDaily } from "./components/activities-daily";
-export { ActivitiesProgress } from "./components/activities-progress";
-export { ProfileMenuOption } from "./components/profile-menu-option";
-export { ModalActivities } from "./components/modal-activities";
-export { HistoryActivitiesCard } from "./components/history-activities-card";
-export { ModalChangeActivity } from "./components/modal-change-activity";
-
-// Utilities
-export { multiply } from "./utils/mutiply";
-export { formatDate, getLastSevenDays, formHoursMinute } from "./utils/format-data";
-
-// Styles
-export { theme } from "./styles/theme/theme";
+/**
+ * EXPORTS
+ */
+
+// Components
+export { default as Box } from "./components/box";
+export { Button } from "./components/button";
+export { default as StepIndicator } from "./components/step-indicator";
+export { Typography } from "./components/typography";
+export { Input } from "./components/input";
+export { CapturePhoto } from "./components/capture-photo";
+export { CardHours } from "./components/card-hours";
+export { default as SelectOption } from "./components/selects/select-option";
+export { Header } from "./components/header-profile";
+export { ScheduledJourneyIndicators } from "./components/scheduled-journey-indicators";
+export { CardScheduledJourney } from "./components/card-scheduled-journey";
+export { UserProfile } from "./components/user-profile";
+export { MenuItem } from "./components/menu-item";
+export { CardLoading } from "./components/card-loading";
+export { CardWorkSession } from "./components/card-work-session";
+export { LoadingProgress } from "./components/loading-progress";
+export { NoData } from "./components/no-data";
+export { FilterJourney } from "./components/filter-journey";
+export { Coil } from "./components/coil";
+export { FilterDateSelector } from "./components/filter-date-selector";
+export { CardHistory } from "./components/card-history";
+export { NotificationLoading } from "./components/notification-loading";
+export { CheckBox } from "./components/check-box";
+export { ImageCaptureWithRemove } from "./components/image-capture-with-remove";
+export { LoadingDetails } from "./components/loading-details";
+export { AvatarProfile } from "./components/avatar-profile";
+export { HistoryDetails } from "./components/history-details";
+export { ActivitiesDaily } from "./components/activities-daily";
+export { ActivitiesProgress } from "./components/activities-progress";
+export { ProfileMenuOption } from "./components/profile-menu-option";
+export { ModalActivities } from "./components/modals/modal-activities";
+export { HistoryActivitiesCard } from "./components/history-activities-card";
+export { ModalChangeActivity } from "./components/modals/modal-change-activity";
+export { default as ModalActivityReason } from "./components/modals/modal-activity-reason";
+export { default as InputTextCounter } from "./components/input-text-counter";
+export { default as ModalCreteActivitie } from "./components/modal-create-activitie";
+export { default as ModalJourneyRectification } from "./components/modal-journey-rectification";
+export { default as ActivityTimeline } from "./components/activity-timeline";
+
+// Utilities
+export { multiply } from "./utils/mutiply";
+export { formatDate, getLastSevenDays, formHoursMinute } from "./utils/format-data";
+
+// Styles
+export { theme } from "./styles/theme/theme";

package/src/stories/activity-timeline/activity-timeline.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ActivityTimeline from "../../components/activity-timeline";
+
+import type { ActivityItemModel } from "../../components/activity-timeline/interface";
+
+const sampleData: ActivityItemModel[] = [
+  {
+    id: 1,
+    title: "Operação com veículo",
+    date: "24/03/2025",
+    time: "08:00",
+  },
+  {
+    id: 2,
+    title: "Refeição",
+    date: "24/03/2025",
+    time: "12:30",
+  },
+  {
+    id: 3,
+    title: "Aguardando carga",
+    date: "24/03/2025",
+    time: "14:00",
+    invalid: true,
+  },
+  {
+    id: 4,
+    title: "Descanso",
+    date: "24/03/2025",
+    time: "18:45",
+  },
+];
+
+const meta: Meta<typeof ActivityTimeline> = {
+  title: "componente/ActivityTimeline",
+  component: ActivityTimeline,
+  args: {
+    data: sampleData,
+    showIndexBadge: true,
+    onAdd: (item: ActivityItemModel) => console.log("onAdd", item),
+    onEdit: (item: ActivityItemModel) => console.log("onEdit", item),
+    onDelete: (item: ActivityItemModel) => console.log("onDelete", item),
+  },
+  parameters: {
+    notes: `
+# ActivityTimeline
+
+Lista de atividades com ações de adicionar, editar e excluir.
+
+Exemplo de uso:
+
+\`\`\`tsx
+<ActivityTimeline
+  data={data}
+  showIndexBadge
+  onAdd={(item) => console.log('onAdd', item)}
+  onEdit={(item) => console.log('onEdit', item)}
+  onDelete={(item) => console.log('onDelete', item)}
+/>
+\`\`\`
+    `,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Padrao: Story = {
+  name: "activity-timeline-padrao",
+  args: {
+    data: sampleData,
+    showIndexBadge: true,
+  },
+};
+
+export const SemBadge: Story = {
+  name: "activity-timeline-sem-badge",
+  args: {
+    data: sampleData,
+    showIndexBadge: false,
+  },
+};
+
+export const ListaVazia: Story = {
+  name: "activity-timeline-lista-vazia",
+  args: {
+    data: [],
+  },
+};