react-native-exp-fig 0.1.23 → 0.1.25

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

@@ -1,68 +1,66 @@
-/**
- * IMPORTS
- */
-
-import { StyleSheet } from "react-native";
-
-// typings
-import { IStepIndicator } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-const styles = (props: IStepIndicator) =>
-  StyleSheet.create({
-    containerIndicator: {
-      width: "100%",
-      height: 86,
-      flexDirection: "row",
-      justifyContent: "flex-start",
-      // backgroundColor: theme.colors.gray[300],
-    },
-    containerBall: {
-      width: 32,
-      height: 32,
-      backgroundColor: props.sincronizado ? theme.colors.blue[500] : theme.colors.orange[150],
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      borderRadius: 16,
-    },
-    title: {
-      color: props.titleColor ?? "black",
-      textAlign: "center",
-      lineHeight: 20,
-      fontSize: theme.fontSizes["sm"],
-      fontWeight: "500",
-      marginLeft: 8,
-    },
-    titleNumber: {
-      color: props.titleNumberColor ?? theme.colors.neutral[25],
-      textAlign: "center",
-      lineHeight: 16,
-      fontFamily: theme.fonts.inter_regular_400,
-      fontSize: theme.fontSizes["xs"],
-      position: "absolute",
-    },
-    titleDescription: {
-      color: props.textColorDescription ?? theme.colors.gray[700],
-      textAlign: "center",
-      lineHeight: 16,
-      fontSize: theme.fontSizes["xs"],
-      fontFamily: theme.fonts.inter_regular_400,
-      fontWeight: "400",
-      marginLeft: 8,
-    },
-    containerMain: {
-      width: "100%",
-      height: 56,
-      flexDirection: "column",
-      alignItems: "flex-start",
-      marginLeft: 2,
-    },
-  });
-
-/**
- * EXPORTS
- */
-export { styles };
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+
+// typings
+import { type IStyleProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const styles = (props: IStyleProps) =>
+  StyleSheet.create({
+    containerIndicator: {
+      width: "100%",
+      height: 86,
+      flexDirection: "row",
+      justifyContent: "flex-start",
+    },
+    containerBall: {
+      width: 32,
+      height: 32,
+      backgroundColor: props.sincronizado ? theme.colors.blue[500] : theme.colors.orange[150],
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: 16,
+    },
+    title: {
+      color: props.titleColor ?? "black",
+      textAlign: "center",
+      lineHeight: 24,
+      fontSize: theme.fontSizes["sm"],
+      fontWeight: "500",
+      marginLeft: 8,
+    },
+    titleNumber: {
+      color: props.titleNumberColor ?? theme.colors.neutral[25],
+      textAlign: "center",
+      lineHeight: 18,
+      fontFamily: theme.fonts.inter_regular_400,
+      fontSize: theme.fontSizes["xs"],
+      position: "absolute",
+    },
+    titleDescription: {
+      color: props.textColorDescription ?? theme.colors.gray[700],
+      textAlign: "center",
+      lineHeight: 16,
+      fontSize: 12,
+      fontFamily: theme.fonts.inter_light_300,
+      marginLeft: 8,
+    },
+    containerMain: {
+      width: "100%",
+      height: 56,
+      flexDirection: "column",
+      alignItems: "flex-start",
+      marginLeft: 2,
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/index.ts

@@ -5,7 +5,7 @@
 // Components
 export { default as Box } from "./components/box";
 export { Button } from "./components/button";
-export { StepIndicator } from "./components/step-indicator";
+export { default as StepIndicator } from "./components/step-indicator";
 export { Typography } from "./components/typography";
 export { Input } from "./components/input";
 export { CapturePhoto } from "./components/capture-photo";

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

@@ -12,9 +12,7 @@ const meta: Meta<typeof ModalChangeActivity> = {
   component: ModalChangeActivity,
   args: {
     visible: true,
-    dataRegistro: "07/03/2024",
     descricao: "Repouso Noturno",
-    imagemUrl: "https://via.placeholder.com/150",
     onClose: () => {},
     modalConfirm: () => {},
   },

package/src/stories/step-indicator/step-indicator.stories.tsx

@@ -1,154 +1,159 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-// components
-import { StepIndicator } from "../../components/step-indicator";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-const meta: Meta<typeof StepIndicator> = {
-  title: "Componente/StepIndicator",
-  component: StepIndicator,
-  args: {
-    data: [
-      {
-        id: 1,
-        descricao: "Repouso Noturno",
-        data_inicio: "07/03/2024 14:52",
-        data_fim: "07/03/2024 17:52",
-        duracao_segundos: "3601",
-        sincronizado: true,
-      },
-    ],
-    titleColor: theme.colors.neutral[25],
-    titleNumberColor: theme.colors.neutral[25],
-  },
-  parameters: {
-    notes: `
-# StepIndicator
-
-Este é um componente de step indicator.
-Você usa assim:
-\`\`\`tsx
-<StepIndicator
-    type="default"
-    data={dataMock}
-  />
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const dataMock = [
-  {
-    id: 1,
-    descricao: "Repouso Noturno",
-    data_inicio: "07/03/2024 14:52",
-    data_fim: "07/03/2024 17:52",
-    duracao_segundos: "3601",
-    sincronizado: true,
-  },
-  {
-    id: 2,
-    descricao: "Descarga",
-    data_inicio: "06/03/2024 14:52",
-    data_fim: "06/03/2024 16:52",
-    duracao_segundos: "7200",
-    sincronizado: true,
-  },
-];
-const dataMockFalse = [
-  {
-    id: 1,
-    descricao: "Repouso Noturno",
-    data_inicio: "07/03/2024 14:52",
-    data_fim: "07/03/2024 17:52",
-    duracao_segundos: "3601",
-    sincronizado: false,
-  },
-  {
-    id: 2,
-    descricao: "Descarga",
-    data_inicio: "06/03/2024 14:52",
-    data_fim: "06/03/2024 16:52",
-    duracao_segundos: "7200",
-    sincronizado: false,
-  },
-];
-
-const dataMockCustom = [
-  {
-    id: 1,
-    descricao: "Pedido Realizado",
-    data_inicio: "",
-    data_fim: "",
-    duracao_segundos: "",
-  },
-  {
-    id: 2,
-    descricao: "Pagamento Aprovado",
-    data_inicio: "07/03/2024 14:52",
-    data_fim: "07/03/2024 17:52",
-    duracao_segundos: "3601",
-  },
-  {
-    id: 3,
-    descricao: "Pedido Faturado",
-    data_inicio: "",
-    data_fim: "",
-    duracao_segundos: "",
-  },
-  {
-    id: 4,
-    descricao: "Pedido Enviado",
-    data_inicio: "",
-    data_fim: "",
-    duracao_segundos: "",
-  },
-  {
-    id: 4,
-    descricao: "Pedido Entregue",
-    data_inicio: "07/03/2024 14:52",
-    data_fim: "07/03/2024 17:52",
-    duracao_segundos: "3601",
-  },
-];
-
-export const StepIndicatorDefault: Story = {
-  name: "step-indicator-default",
-  args: {
-    data: dataMock,
-    type: "default",
-    sincronizado: true,
-    titleColor: theme.colors.neutral[25],
-    textColorDescription: theme.colors.gray[300],
-    titleNumberColor: theme.colors.neutral[25],
-  },
-};
-export const StepIndicatorSincronizadoFalse: Story = {
-  name: "step-indicator-sincronizado-false",
-  args: {
-    data: dataMockFalse,
-    type: "default",
-    sincronizado: false,
-    titleColor: theme.colors.neutral[25],
-    textColorDescription: theme.colors.gray[300],
-    titleNumberColor: theme.colors.neutral[25],
-  },
-};
-
-export const StepIndicationCustom: Story = {
-  name: "step-indicator-custom",
-  args: {
-    data: dataMockCustom,
-    type: "custom",
-    backgroundColorBall: theme.colors.orange[150],
-    titleColor: theme.colors.blue[500],
-    textColorDescription: theme.colors.gray[300],
-    titleNumberColor: theme.colors.neutral[25],
-  },
-};
+import { Meta, StoryObj } from "@storybook/react";
+
+// components
+import StepIndicator from "../../components/step-indicator";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof StepIndicator> = {
+  title: "Componente/StepIndicator",
+  component: StepIndicator,
+  args: {
+    data: [
+      {
+        jr_tipo_atividade_id: 1,
+        descricao: "Repouso Noturno",
+        data_inicio: "07/03/2024 14:52",
+        data_fim: "07/03/2024 17:52",
+        duracao_segundos: "3601",
+        sincronizado: true,
+        referencia: "repouso_notuno",
+        tipo: "descanso",
+      },
+    ],
+    titleColor: theme.colors.neutral[25],
+    titleNumberColor: theme.colors.neutral[25],
+  },
+  parameters: {
+    notes: `
+# StepIndicator
+
+Este é um componente de step indicator.
+Você usa assim:
+\`\`\`tsx
+<StepIndicator
+  type="default"
+  data={dataMock}
+  onChangeActivity={(activity) => {
+    console.log("Atividade selecionada:", activity);
+  }}
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const dataMock = [
+  {
+    id: 1,
+    descricao: "Repouso Noturno",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    duracao_segundos: "3601",
+    sincronizado: true,
+  },
+  {
+    id: 2,
+    descricao: "Descarga",
+    data_inicio: "06/03/2024 14:52",
+    data_fim: "06/03/2024 16:52",
+    duracao_segundos: "7200",
+    sincronizado: true,
+  },
+];
+const dataMockFalse = [
+  {
+    id: 1,
+    descricao: "Repouso Noturno",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    duracao_segundos: "3601",
+    sincronizado: false,
+  },
+  {
+    id: 2,
+    descricao: "Descarga",
+    data_inicio: "06/03/2024 14:52",
+    data_fim: "06/03/2024 16:52",
+    duracao_segundos: "7200",
+    sincronizado: false,
+  },
+];
+
+const dataMockCustom = [
+  {
+    id: 1,
+    descricao: "Pedido Realizado",
+    data_inicio: "",
+    data_fim: "",
+    duracao_segundos: "",
+  },
+  {
+    id: 2,
+    descricao: "Pagamento Aprovado",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    duracao_segundos: "3601",
+  },
+  {
+    id: 3,
+    descricao: "Pedido Faturado",
+    data_inicio: "",
+    data_fim: "",
+    duracao_segundos: "",
+  },
+  {
+    id: 4,
+    descricao: "Pedido Enviado",
+    data_inicio: "",
+    data_fim: "",
+    duracao_segundos: "",
+  },
+  {
+    id: 4,
+    descricao: "Pedido Entregue",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    duracao_segundos: "3601",
+  },
+];
+
+export const StepIndicatorDefault: Story = {
+  name: "step-indicator-default",
+  args: {
+    data: dataMock,
+    type: "default",
+    sincronizado: true,
+    titleColor: theme.colors.neutral[25],
+    textColorDescription: theme.colors.gray[300],
+    titleNumberColor: theme.colors.neutral[25],
+  },
+};
+export const StepIndicatorSincronizadoFalse: Story = {
+  name: "step-indicator-sincronizado-false",
+  args: {
+    data: dataMockFalse,
+    type: "default",
+    sincronizado: false,
+    titleColor: theme.colors.neutral[25],
+    textColorDescription: theme.colors.gray[300],
+    titleNumberColor: theme.colors.neutral[25],
+  },
+};
+
+export const StepIndicationCustom: Story = {
+  name: "step-indicator-custom",
+  args: {
+    data: dataMockCustom,
+    type: "custom",
+    backgroundColorBall: theme.colors.orange[150],
+    titleColor: theme.colors.blue[500],
+    textColorDescription: theme.colors.gray[300],
+    titleNumberColor: theme.colors.neutral[25],
+  },
+};

package/src/utils/format-date/index.ts

@@ -0,0 +1,58 @@
+/**
+ * Formata uma data do tipo Date para o formato DD/MM/YYYY
+ * @param date Objeto Date a ser formatado
+ * @returns String no formato DD/MM/YYYY
+ */
+const formatDate = (date: Date): string => {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0"); // Mês começa em 0
+  const year = date.getFullYear();
+
+  return `${day}/${month}/${year}`;
+};
+
+export { formatDate };
+
+/**
+ * Formata uma data do tipo Date para o formato DD/MM/YYYY
+ * @param date Objeto Date a ser formatado
+ * @returns String no formato DD/MM/YYYY
+ */
+const formHoursMinute = (segundos: string): string => {
+  const totalSegundos = parseInt(segundos, 10);
+  const horas = Math.floor(totalSegundos / 3600);
+  const minutos = Math.floor((totalSegundos % 3600) / 60);
+
+  const horasFormatadas = String(horas).padStart(2, "0");
+  const minutosFormatados = String(minutos).padStart(2, "0");
+
+  return `${horasFormatadas}:${minutosFormatados}`;
+};
+
+export { formHoursMinute };
+
+/**
+ * Retorna as sete últimas datas do dias
+ * @returns Array<{ date: number, dayName: string, fullDate: Date }>
+ */
+
+const getLastSevenDays = () => {
+  const today = new Date();
+  const days = [];
+  const dayNames = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
+
+  for (let i = 7; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(today.getDate() - i);
+
+    days.push({
+      date: date.getDate(),
+      dayName: dayNames[date.getDay()],
+      fullDate: date,
+    });
+  }
+
+  return days;
+};
+
+export { getLastSevenDays };

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

@@ -1,67 +1,65 @@
-/**
- * IMPORTS
- */
-
-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 = (propertyType: PropertyType, color?: string): React.ReactNode => {
-  switch (propertyType) {
-    
-    case "operacao_veiculo":
-      return <Icons color={color} icon="STEERING_WHEEL" />;
-
-    case "manutencao":
-      return <Icons color={color} icon="GEAR" />;
-
-    case "aguardando_carga":
-      return <Icons color={color} icon="TIMER" />;
-
-    case "disposicao_veiculo_parado":
-      return <Icons color={theme.colors.blue[500]} size={20} icon="TRUCK_ACTIVITY" />;
-
-    case "aguardando_descarga":
-      return <Icons color={color} icon="HOURGLASS" />;
-
-    case "descanso":
-      return <Icons color={color} icon="COFFEE" />;
-
-    case "repouso_semanal":
-      return <Icons color={color} icon="HOUSE" />;
-
-    case "repouso_noturno":
-      return <Icons color={color} icon="MOON_STARS" />;
-
-    case "refeicao":
-      return <Icons color={color} icon="CALL_BELL" />;
-
-    case "ferias":
-      return <Icons color={color} icon="ISLAND" />;
-    default:
-      return <Icons color={color} icon="STEERING_WHEEL" />; // Retorna uma Svg default caso o tipo de propriedade não for reconhecido.
-  }
-};
-
-/**
- * EXPORTS
- */
-export { getIconByProperty };
+/**
+ * IMPORTS
+ */
+
+import React from "react";
+import { Icons } from "../../common/icons-svg";
+
+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 = (propertyType: PropertyType, color?: string): React.ReactNode => {
+  switch (propertyType) {
+    case "operacao_veiculo":
+      return <Icons color={color} icon="STEERING_WHEEL" />;
+
+    case "manutencao":
+      return <Icons color={color} icon="GEAR" />;
+
+    case "aguardando_carga":
+      return <Icons color={color} icon="TIMER" />;
+
+    case "disposicao_veiculo_parado":
+      return <Icons color={color} size={20} icon="TRUCK_ACTIVITY" />;
+
+    case "aguardando_descarga":
+      return <Icons color={color} icon="HOURGLASS" />;
+
+    case "descanso":
+      return <Icons color={color} icon="COFFEE" />;
+
+    case "repouso_semanal":
+      return <Icons color={color} icon="HOUSE" />;
+
+    case "repouso_noturno":
+      return <Icons color={color} icon="MOON_STARS" />;
+
+    case "refeicao":
+      return <Icons color={color} icon="CALL_BELL" />;
+
+    case "ferias":
+      return <Icons color={color} icon="ISLAND" />;
+    default:
+      return <Icons color={color} icon="STEERING_WHEEL" />; // Retorna uma Svg default caso o tipo de propriedade não for reconhecido.
+  }
+};
+
+/**
+ * EXPORTS
+ */
+export { getIconByProperty };