react-native-exp-fig 0.1.21 → 0.1.23

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

@@ -14,6 +14,7 @@ import { styles } from "./styles";
 import { Icons } from "../../common/icons-svg";
 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.
@@ -27,13 +28,54 @@ const StepIndicator: React.FC<IStepIndicator> = ({
   titleNumberColor,
 }) => {
   const StepDefault = () => {
+    const [isModalVisible, setIsModalVisible] = React.useState(false);
+    const [currentStepIndex, setCurrentStepIndex] = React.useState<number | null>(null);
+    const [stepData, setStepData] = React.useState(data);
+
+    const handleOpenModal = (index: number) => {
+      const stepItem = stepData[index];
+      const desc = stepItem?.descricao?.toLowerCase?.();
+      if (!desc) return;
+      
+      const isDescanso = [
+        "descanso",
+        "refeição",
+        "repouso_noturno",
+        "repouso_semanal",
+      ].includes(desc.replace(/\s+/g, "_"));
+
+      // Só abre o modal se for do tipo descanso E se estiver sincronizado
+      if (isDescanso && stepItem?.sincronizado === true) {
+        setCurrentStepIndex(index);
+        setIsModalVisible(true);
+      }
+    };
+
+    const handleConfirmModal = (newData: { label: string; value: string; key: number }) => {
+      if (currentStepIndex !== null) {
+        const newSteps = stepData.map((item, index) =>
+          index === currentStepIndex
+            ? { ...item, descricao: newData.label, tipo_atividade: newData.value, identificador: newData.key }
+            : item
+        );
+        setStepData(newSteps);
+      }
+
+      setIsModalVisible(false);
+      setCurrentStepIndex(null);
+    };
+
     return (
       <>
-        {data!.length > 0 &&
-          data!.map((history, index) => (
-            <View testID="step-indicator" style={styles({}).containerIndicator} key={history.id}>
+        {stepData.length > 0 &&
+          stepData.map((history, index) => (
+            <View
+              testID="step-indicator"
+              style={styles({}).containerIndicator}
+              key={`${history.id}-${index}`}
+            >
               <View style={styles({ sincronizado: history.sincronizado }).containerBall}>
-                {data!?.length > 1 && index < data!?.length - 1 && (
+                {stepData.length > 1 && index < stepData.length - 1 && (
                   <View
                     style={{
                       width: 2,
@@ -47,16 +89,19 @@ const StepIndicator: React.FC<IStepIndicator> = ({
                   />
                 )}
                 <Text style={styles({ titleNumberColor }).titleNumber}>
-                  {data!?.length - index}
+                  {stepData.length - index}
                 </Text>
               </View>
 
-              <View style={styles({}).containerMain}>
+              <View
+                style={styles({}).containerMain}
+                onTouchEnd={() => handleOpenModal(index)}
+              >
                 <Text style={styles({ titleColor }).title}>{history?.descricao}</Text>
 
                 {history?.data_inicio && (
                   <Text style={styles({ textColorDescription }).titleDescription}>
-                    {`Inicio: ${history.data_inicio} ás ${history.data_fim}`}
+                    {`Inicio: ${history.data_inicio} às ${history.data_fim}`}
                   </Text>
                 )}
 
@@ -68,10 +113,21 @@ const StepIndicator: React.FC<IStepIndicator> = ({
               </View>
             </View>
           ))}
+
+        {isModalVisible && currentStepIndex !== null && (
+          <ModalChangeActivity
+            visible={isModalVisible}
+            onClose={() => setIsModalVisible(false)}
+            modalConfirm={handleConfirmModal}
+            dataRegistro={""}
+            descricao={stepData[currentStepIndex!]?.descricao || ""}
+          />
+        )}
       </>
     );
   };
 
+
   const StepCustom = () => {
     return (
       <View

package/src/components/user-profile/index.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { Image, TouchableOpacity } from "react-native";
 
 // components
-import { Box } from "../box";
+import Box from "../box";
 import { Typography } from "../typography";
 
 // comons / constants

package/src/helpers/text-utils.ts

@@ -0,0 +1,15 @@
+/**
+ * Função para limitar a quantidade de caracteres de um texto
+ * @param text - O texto a ser limitado
+ * @param maxLength - Número máximo de caracteres (padrão: 20)
+ * @returns Texto limitado com "..." se exceder o limite
+ */
+export const truncateText = (text: string, maxLength: number = 20): string => {
+  if (!text) return "";
+
+  if (text.length <= maxLength) {
+    return text;
+  }
+
+  return text.substring(0, maxLength) + "...";
+};

package/src/index.ts

@@ -3,7 +3,7 @@
  */
 
 // Components
-export { Box } from "./components/box";
+export { default as Box } from "./components/box";
 export { Button } from "./components/button";
 export { StepIndicator } from "./components/step-indicator";
 export { Typography } from "./components/typography";
@@ -34,6 +34,8 @@ 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";

package/src/stories/box/box.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 
 // components
-import { Box } from "../../components/box";
+import Box from "../../components/box";
 import { Typography } from "../../components/typography";
 
 // styles

package/src/stories/history-activities-card/history-activities-card.stories.tsx

@@ -0,0 +1,107 @@
+import type { StoryObj, Meta } from "@storybook/react";
+
+import HistoryActivitiesCard from "../../components/history-activities-card";
+import { IMAGES } from "../../common/constants";
+
+const meta: Meta<typeof HistoryActivitiesCard> = {
+  title: "componente/HistoryActivitiesCard",
+  component: HistoryActivitiesCard,
+  args: {
+    name: "João Silva",
+    ciclo: "Ciclo 1",
+    data_start: "08:00",
+    data_end: "17:00",
+    idAtividade: 12345,
+    duration: "9:00m",
+    name_activitie: "Operação de Veículo",
+    referencia: "operacao_veiculo",
+    type_activitie: "Operação Veículo",
+    avatar: IMAGES.IMAGE_ANONIMA,
+  },
+  parameters: {
+    notes: `
+# HistoryActivitiesCard
+
+Este é um componente de Card de histórico de atividades.
+
+## Uso
+
+\`\`\`tsx
+<HistoryActivitiesCard
+  name="João Silva"
+  ciclo="Ciclo 1"
+  data_start="08:00"
+  data_end="17:00"
+  idAtividade={12345}
+  duration="9h 00m"
+  name_activitie="Operação de Veículo"
+  referencia="operacao_veiculo"
+  type_activitie="Operação Veículo"
+  avatar="https://randomuser.me/api/portraits/men/1.jpg"
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "default",
+};
+
+export const WithoutAvatar: Story = {
+  name: "sem-avatar",
+  args: {
+    avatar: "",
+    name: "Maria Santos",
+  },
+};
+
+export const LongActivity: Story = {
+  name: "atividade-longa",
+  args: {
+    name: "Pedro Oliveira",
+    ciclo: "Ciclo 2",
+    data_start: "06:00",
+    data_end: "22:00",
+    idAtividade: 67890,
+    duration: "16h 00m",
+    name_activitie: "Viagem Longa Distância",
+    referencia: "operacao_veiculo",
+    type_activitie: "Viagem Longa Distância",
+    avatar: "https://randomuser.me/api/portraits/men/2.jpg",
+  },
+};
+
+export const MinimalData: Story = {
+  name: "dados-minimos",
+  args: {
+    name: "Ana Costa",
+    data_start: "08:00",
+    duration: "8h 00m",
+    name_activitie: "Atividade Básica",
+    referencia: "descanso",
+    type_activitie: "Básico",
+    idAtividade: 11111,
+    // Outros campos serão undefined para testar fallbacks
+  },
+};
+
+export const CompleteData: Story = {
+  name: "dados-completos",
+  args: {
+    name: "Carlos Ferreira",
+    ciclo: "Ciclo 3",
+    data_start: "14:30",
+    data_end: "18:45",
+    idAtividade: 54321,
+    duration: "4h 15m",
+    name_activitie: "Manutenção de Equipamentos",
+    referencia: "manutencao",
+    type_activitie: "Manutenção",
+    avatar: "https://randomuser.me/api/portraits/men/3.jpg",
+  },
+};

package/src/stories/modal-change-activity/modal-change-activity.stories.tsx

@@ -0,0 +1,51 @@
+/**
+ * IMPORTS
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+// component
+import { ModalChangeActivity } from "../../components/modal-change-activity";
+
+const meta: Meta<typeof ModalChangeActivity> = {
+  title: "Componente/ModalChangeActivity",
+  component: ModalChangeActivity,
+  args: {
+    visible: true,
+    dataRegistro: "07/03/2024",
+    descricao: "Repouso Noturno",
+    imagemUrl: "https://via.placeholder.com/150",
+    onClose: () => {},
+    modalConfirm: () => {},
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# ModalChangeActivity
+
+Componente de modal para alterar a atividade do usuário.
+
+## Uso
+\`\`\`tsx
+<ModalChangeActivity
+  visible
+  dataRegistro="07/03/2024"
+  descricao="Repouso Noturno"
+  modalConfirm={(data) => console.log(data)}
+  onClose={() => console.log("fechar modal")}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Modal - Alterar Descanso",
+};

package/src/utils/get-icon-by-property/index.tsx

@@ -6,13 +6,25 @@ import React from "react";
 import { Icons } from "../../common/icons-svg";
 import { theme } from "../../styles/theme/theme";
 
+export type PropertyType =
+  | "operacao_veiculo"
+  | "manutencao"
+  | "aguardando_carga"
+  | "disposicao_veiculo_parado"
+  | "aguardando_descarga"
+  | "descanso"
+  | "repouso_semanal"
+  | "repouso_noturno"
+  | "refeicao"
+  | "ferias";
+
 /**
  * Function that will map property types to corresponding icons in SVG 🛠️.
  * @param propertyType
  * @param color
  * @returns SVG
  */
-const getIconByProperty: React.FC<any> = (propertyType: string, color?: string) => {
+const getIconByProperty = (propertyType: PropertyType, color?: string): React.ReactNode => {
   switch (propertyType) {
     
     case "operacao_veiculo":