react-native-exp-fig 0.1.17 → 0.1.18

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

@@ -1,211 +1,221 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { Image, TouchableOpacity } from "react-native";
-
-// components
-import { Box } from "../box";
-import { Typography } from "../typography";
-
-// typings
-import { ICardHistory } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-/**
- *
- * Componente CardLoading para a interação do usuário com ui.
- */
-const CardHistory: React.FC<ICardHistory> = ({
-  width,
-  title = "Carregamento #01020304050607",
-  local = "Doca 1, Patío 03 - Usiminas Ipatinga",
-  vehicle = "EXP-0000",
-  data_start = "12:34 10/03/2025",
-  data_end = "13:34 10/03/2025",
-  duration = "01:34",
-  testID,
-  handleNavigation,
-}: ICardHistory) => {
-  return (
-    <TouchableOpacity onPress={handleNavigation} activeOpacity={0.7}>
-      <Box
-        testID={testID}
-        width={width ?? "100%"}
-        backgroundColor={theme.colors.blue[400]}
-        marginStyle={{ marginBottom: theme.margins.md }}
-        paddingStyle={{ padding: theme.paddings["2xs"] }}
-        borderStyled={{
-          borderWidth: theme.borderWidths.thin,
-          borderColor: theme.colors.blue[400],
-          borderRadius: theme.borderWidths.thick_medium,
-        }}
-        flexStyle={{ flexDirection: "row", justifyContent: "flex-start", alignItems: "center" }}
-      >
-        <Box width={"25%"} borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}>
-          <Image
-            source={{
-              uri: "https://th.bing.com/th/id/OIP.Rr9_IUNo8J66QbvQkxzXtwHaEJ?w=276&h=180&c=7&r=0&o=5&pid=1.7",
-            }}
-            style={{
-              width: "100%",
-              flex: 1,
-              borderRadius: theme.borderWidths.thick_medium,
-            }}
-          />
-        </Box>
-
-        <Box width={"75%"} paddingStyle={{ paddingLeft: theme.paddings["2xs"] }}>
-          <Typography
-            text={title}
-            ellipsizeMode="tail"
-            numberOfLines={1}
-            color={theme.colors.neutral[25]}
-            size={theme.fontSizes.sm}
-            fontFamily={theme.fonts.inter_bold_700}
-            lineHeight={theme.fontSizes.xl ?? 20}
-            letterSpacing={"regular"}
-            marginBottom={4}
-          />
-
-          <Typography
-            text={local}
-            color={theme.colors.neutral[25]}
-            size={theme.fontSizes.xs}
-            fontFamily={theme.fonts.inter_regular_400}
-            lineHeight={theme.fontSizes.md ?? 16}
-            letterSpacing={"regular"}
-            marginBottom={4}
-          />
-
-          {/**DADOS DO VEÍCULOS */}
-          <Box
-            flexStyle={{
-              flexDirection: "row",
-              justifyContent: "flex-start",
-              alignItems: "center",
-            }}
-            marginStyle={{
-              marginBottom: 4,
-            }}
-          >
-            <Typography
-              text={"Dados Veículo:"}
-              color={theme.colors.neutral[25]}
-              size={theme.fontSizes.xs}
-              fontFamily={theme.fonts.inter_regular_400}
-              lineHeight={theme.fontSizes.md ?? 16}
-              letterSpacing={"regular"}
-            />
-            <Typography
-              text={vehicle}
-              color={theme.colors.neutral[25]}
-              size={theme.fontSizes.xs}
-              fontFamily={theme.fonts.inter_bold_700}
-              lineHeight={theme.fontSizes.md ?? 16}
-              letterSpacing={"regular"}
-              marginLeft={4}
-            />
-          </Box>
-
-          {/**DATA INICIO DO CARREGAMENTO */}
-          <Box
-            flexStyle={{
-              flexDirection: "row",
-              justifyContent: "flex-start",
-              alignItems: "center",
-            }}
-            marginStyle={{
-              marginBottom: 4,
-            }}
-          >
-            <Typography
-              text={"Data Inicio:"}
-              color={theme.colors.neutral[25]}
-              size={theme.fontSizes.xs}
-              fontFamily={theme.fonts.inter_regular_400}
-              lineHeight={theme.fontSizes.md ?? 16}
-              letterSpacing={"regular"}
-            />
-            <Typography
-              text={data_start}
-              color={theme.colors.neutral[25]}
-              size={theme.fontSizes.xs}
-              fontFamily={theme.fonts.inter_bold_700}
-              lineHeight={theme.fontSizes.md ?? 16}
-              letterSpacing={"regular"}
-              marginLeft={4}
-            />
-          </Box>
-
-          {/**DATA FIM DO CARREGAMENTO */}
-          <Box
-            flexStyle={{
-              flexDirection: "row",
-              justifyContent: "flex-start",
-              alignItems: "center",
-            }}
-            marginStyle={{
-              marginBottom: 4,
-            }}
-          >
-            <Typography
-              text={"Data Fim:"}
-              color={theme.colors.neutral[25]}
-              size={theme.fontSizes.xs}
-              fontFamily={theme.fonts.inter_regular_400}
-              lineHeight={theme.fontSizes.md ?? 16}
-              letterSpacing={"regular"}
-            />
-            <Typography
-              text={data_end}
-              color={theme.colors.neutral[25]}
-              size={theme.fontSizes.xs}
-              fontFamily={theme.fonts.inter_bold_700}
-              lineHeight={theme.fontSizes.md ?? 16}
-              letterSpacing={"regular"}
-              marginLeft={4}
-            />
-          </Box>
-
-          {/**DURAÇÃO DO CARREGAMENTO */}
-          <Box
-            flexStyle={{
-              flexDirection: "row",
-              justifyContent: "flex-start",
-              alignItems: "center",
-            }}
-            marginStyle={{
-              marginBottom: 4,
-            }}
-          >
-            <Typography
-              text={"Duração:"}
-              color={theme.colors.neutral[25]}
-              size={theme.fontSizes.xs}
-              fontFamily={theme.fonts.inter_regular_400}
-              lineHeight={theme.fontSizes.md ?? 16}
-              letterSpacing={"regular"}
-            />
-            <Typography
-              text={duration}
-              color={theme.colors.neutral[25]}
-              size={theme.fontSizes.xs}
-              fontFamily={theme.fonts.inter_bold_700}
-              lineHeight={theme.fontSizes.md ?? 16}
-              letterSpacing={"regular"}
-              marginLeft={4}
-            />
-          </Box>
-        </Box>
-      </Box>
-    </TouchableOpacity>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { CardHistory };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Image, TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// typings
+import { ICardHistory } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { Icons } from "../../common/icons-svg";
+
+/**
+ *
+ * Componente CardLoading para a interação do usuário com ui.
+ */
+const CardHistory: React.FC<ICardHistory> = ({
+  width,
+  title = "Carregamento #01020304050607",
+  local = "Doca 1, Patío 03 - Usiminas Ipatinga",
+  vehicle = "EXP-0000",
+  data_start = "12:34 10/03/2025",
+  data_end = "13:34 10/03/2025",
+  duration = "01:34",
+  testID,
+  handleNavigation,
+  status_carregamento,
+}: ICardHistory) => {
+  return (
+    <TouchableOpacity onPress={handleNavigation} activeOpacity={0.7}>
+      <Box
+        testID={testID}
+        width={width ?? "100%"}
+        backgroundColor={theme.colors.blue[400]}
+        marginStyle={{ marginBottom: theme.margins.md }}
+        paddingStyle={{ padding: theme.paddings["2xs"] }}
+        borderStyled={{
+          borderWidth: theme.borderWidths.thin,
+          borderColor: theme.colors.blue[400],
+          borderRadius: theme.borderWidths.thick_medium,
+        }}
+        flexStyle={{ flexDirection: "row", justifyContent: "flex-start", alignItems: "center" }}
+      >
+        <Box width={"25%"} borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}>
+          <Image
+            source={{
+              uri: "https://th.bing.com/th/id/OIP.Rr9_IUNo8J66QbvQkxzXtwHaEJ?w=276&h=180&c=7&r=0&o=5&pid=1.7",
+            }}
+            style={{
+              width: "100%",
+              flex: 1,
+              borderRadius: theme.borderWidths.thick_medium,
+            }}
+          />
+        </Box>
+
+        <Box width={"75%"} paddingStyle={{ paddingLeft: theme.paddings["2xs"] }}>
+          <Typography
+            text={title}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            color={theme.colors.neutral[25]}
+            size={theme.fontSizes.sm}
+            fontFamily={theme.fonts.inter_bold_700}
+            lineHeight={theme.fontSizes.xl ?? 20}
+            letterSpacing={"regular"}
+            marginBottom={4}
+          />
+
+          <Typography
+            text={local}
+            color={theme.colors.neutral[25]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_regular_400}
+            lineHeight={theme.fontSizes.md ?? 16}
+            letterSpacing={"regular"}
+            marginBottom={4}
+          />
+
+          {/**DADOS DO VEÍCULOS */}
+          <Box
+            flexStyle={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+            marginStyle={{
+              marginBottom: 4,
+            }}
+          >
+            <Box
+              flexStyle={{
+                flexDirection: "row",
+                alignItems: "center",
+              }}
+            >
+              <Typography
+                text={"Dados Veículo:"}
+                color={theme.colors.neutral[25]}
+                size={theme.fontSizes.xs}
+                fontFamily={theme.fonts.inter_regular_400}
+                lineHeight={theme.fontSizes.md ?? 16}
+                letterSpacing={"regular"}
+              />
+              <Typography
+                text={vehicle}
+                color={theme.colors.neutral[25]}
+                size={theme.fontSizes.xs}
+                fontFamily={theme.fonts.inter_bold_700}
+                lineHeight={theme.fontSizes.md ?? 16}
+                letterSpacing={"regular"}
+                marginLeft={4}
+              />
+            </Box>
+            <Icons size={9} color={status_carregamento} icon={"ELLIPSE"} />
+          </Box>
+
+          {/**DATA INICIO DO CARREGAMENTO */}
+          <Box
+            flexStyle={{
+              flexDirection: "row",
+              justifyContent: "flex-start",
+              alignItems: "center",
+            }}
+            marginStyle={{
+              marginBottom: 4,
+            }}
+          >
+            <Typography
+              text={"Data Inicio:"}
+              color={theme.colors.neutral[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_regular_400}
+              lineHeight={theme.fontSizes.md ?? 16}
+              letterSpacing={"regular"}
+            />
+            <Typography
+              text={data_start}
+              color={theme.colors.neutral[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_bold_700}
+              lineHeight={theme.fontSizes.md ?? 16}
+              letterSpacing={"regular"}
+              marginLeft={4}
+            />
+          </Box>
+
+          {/**DATA FIM DO CARREGAMENTO */}
+          <Box
+            flexStyle={{
+              flexDirection: "row",
+              justifyContent: "flex-start",
+              alignItems: "center",
+            }}
+            marginStyle={{
+              marginBottom: 4,
+            }}
+          >
+            <Typography
+              text={"Data Fim:"}
+              color={theme.colors.neutral[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_regular_400}
+              lineHeight={theme.fontSizes.md ?? 16}
+              letterSpacing={"regular"}
+            />
+            <Typography
+              text={data_end}
+              color={theme.colors.neutral[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_bold_700}
+              lineHeight={theme.fontSizes.md ?? 16}
+              letterSpacing={"regular"}
+              marginLeft={4}
+            />
+          </Box>
+
+          {/**DURAÇÃO DO CARREGAMENTO */}
+          <Box
+            flexStyle={{
+              flexDirection: "row",
+              justifyContent: "flex-start",
+              alignItems: "center",
+            }}
+            marginStyle={{
+              marginBottom: 4,
+            }}
+          >
+            <Typography
+              text={"Duração:"}
+              color={theme.colors.neutral[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_regular_400}
+              lineHeight={theme.fontSizes.md ?? 16}
+              letterSpacing={"regular"}
+            />
+            <Typography
+              text={duration}
+              color={theme.colors.neutral[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_bold_700}
+              lineHeight={theme.fontSizes.md ?? 16}
+              letterSpacing={"regular"}
+              marginLeft={4}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { CardHistory };

package/src/components/card-history/interface.d.ts

@@ -1,34 +1,38 @@
-/**
- * IMPORTS
- */
-import { TouchableOpacityProps } from "react-native";
-
-// typing
-import { IGlobalCss } from "../../styles/global/interface";
-
-interface ICardHistory extends TouchableOpacityProps, IGlobalCss {
-  /**propriedade que indica o título do carregamento */
-  title?: string;
-
-  /**propriedade que indica o local do carregamento */
-  local?: string;
-
-  /**propriedade que indica o veiculo */
-  vehicle?: string;
-
-  /**propriedade que indica inicio do carregamento */
-  data_start?: string;
-
-  /**propriedade que indica fim do carregamento */
-  data_end?: string;
-
-  /**propiedade que infica o a duração gasta no carregamento */
-  duration?: string;
-
-  handleNavigation: () => void;
-}
-
-/**
- * EXPORTS
- */
-export { ICardHistory };
+/**
+ * IMPORTS
+ */
+import { TouchableOpacityProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface ICardHistory extends TouchableOpacityProps, IGlobalCss {
+  /**propriedade que indica o título do carregamento */
+  title?: string;
+
+  /**propriedade que indica o local do carregamento */
+  local?: string;
+
+  /**propriedade que indica o veiculo */
+  vehicle?: string;
+
+  /**propriedade que indica inicio do carregamento */
+  data_start?: string;
+
+  /**propriedade que indica fim do carregamento */
+  data_end?: string;
+
+  /**propriedade que mostra a duração gasta no carregamento */
+  duration?: string;
+
+  /**função de navegação para outra tela  */
+  handleNavigation: () => void;
+
+  /**propriedade que pega o status do carregamento */
+  status_carregamento: string;
+}
+
+/**
+ * EXPORTS
+ */
+export { ICardHistory };

package/src/components/menu-item/interface.d.ts

@@ -10,7 +10,7 @@ interface IMenuItem extends ViewProps, IGlobalCss {
   title?: string;
   handleNavigation: () => void;
   selected: boolean;
-  typeSelected: "LOADING" | "COIL" | "HISTORY";
+  typeSelected: "LOADING" | "ACTIVITY" | "HISTORY";
 }
 
 /**

package/src/stories/activities-progress/activities-progress.stories.tsx

@@ -1,61 +1,71 @@
-import type { StoryObj, Meta } from "@storybook/react";
-
-import { ActivitiesProgress } from "../../components/activities-progress";
-
-const meta: Meta<typeof ActivitiesProgress> = {
-  title: "componente/ActivitiesProgress",
-  component: ActivitiesProgress,
-  args: {
-    data_fim: "11/05/2025",
-    duracao: "00:30",
-    data_inicio: "17:20",
-    titleLabel: "Descanso",
-  },
-  parameters: {
-    notes: `
-# ActivitiesProgress
-
-Este é um componente de progresso de atividades.
-Você usa assim:
-\`\`\`tsx
-<ActivitiesProgress
-  data_fim="11/05/2025"
-  duracao="00:30"
-  data_inicio="17:20"
-  titleLabel="Descanso"
-/>
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const ActivitiesProgressPadrao: Story = {
-  name: "activities-progress-padrao",
-  args: {},
-};
-
-export const ActivitiesProgressTrabalho: Story = {
-  name: "activities-progress-trabalho",
-  args: {
-    data_fim: "15/06/2023",
-    duracao: "01:45",
-    data_inicio: "14:30",
-    titleLabel: "Trabalho",
-    situation: true,
-  },
-};
-
-export const ActivitiesProgressDescanso: Story = {
-  name: "activities-progress-descanso",
-  args: {
-    data_fim: "20/07/2023",
-    duracao: "00:15",
-    data_inicio: "12:00",
-    titleLabel: "Descanso",
-    situation: true,
-  },
-};
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { ActivitiesProgress } from "../../components/activities-progress";
+
+const meta: Meta<typeof ActivitiesProgress> = {
+  title: "componente/ActivitiesProgress",
+  component: ActivitiesProgress,
+  args: {
+    data_inicio: "11/05/2025",
+    duracao: "00:30",
+    data_inicio_horario: "17:20",
+    tipo_atividade: "trabalho",
+    titleLabel: "Operação com Veículo",
+    criado_ofiline: true,
+    referencia: "repouso_semanal",
+  },
+  parameters: {
+    notes: `
+# ActivitiesProgress
+
+Este é um componente de progresso de atividades.
+Você usa assim:
+\`\`\`tsx
+<ActivitiesProgress
+  data_inicio="11/05/2025"
+  duracao="00:30"
+  data_inicio_horario="17:20"
+  tipo_atividade="descanso"
+  titleLabel="Repouso Noturno"
+  criado_ofiline=true
+  referencia="repouso_semanal"
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ActivitiesProgressPadrao: Story = {
+  name: "activities-progress-padrao",
+  args: {},
+};
+
+export const ActivitiesProgressTrabalho: Story = {
+  name: "activities-progress-trabalho",
+  args: {
+    data_inicio: "15/06/2023",
+    duracao: "01:45",
+    data_inicio_horario: "14:30",
+    titleLabel: "Em Carga",
+    tipo_atividade: "trabalho",
+    criado_ofiline: true,
+    referencia: "operacao_veiculo",
+  },
+};
+
+export const ActivitiesProgressDescanso: Story = {
+  name: "activities-progress-descanso",
+  args: {
+    data_inicio: "20/07/2023",
+    duracao: "00:15",
+    data_inicio_horario: "12:00",
+    titleLabel: "Refeição",
+    tipo_atividade: "descanso",
+    criado_ofiline: false,
+    referencia: "refeicao",
+  },
+};