jornada-ui 0.4.10 → 0.4.12

package/src/components/list-devices/styles.ts

@@ -0,0 +1,68 @@
+import { StyleSheet } from "react-native";
+import { type IListDevices } from "./interface";
+import { theme } from "../../styles/theme/theme";
+
+type Extra = { disabled?: boolean; isSelected?: boolean };
+
+const styles = (props: Partial<IListDevices & Extra> = {}) =>
+  StyleSheet.create({
+    containerIndicator: {
+      width: "100%",
+      flexDirection: "row",
+      justifyContent: "flex-start",
+      alignItems: "center",
+      marginTop: 8,
+      paddingVertical: 8,
+      paddingHorizontal: 8,
+      opacity: props.disabled ? 0.6 : 1,
+    },
+
+    containerIndicatorSelected: {
+      backgroundColor: theme.colors.green[250],
+      borderRadius: 30,
+    },
+
+    separator: {
+      borderBottomWidth: 1,
+      borderBottomColor: props.isSelected
+        ? "transparent"
+        : theme.colors.gray[700],
+    },
+
+    title: {
+      color: props.titleColor ?? theme.colors.black[10],
+      textAlign: "center",
+      lineHeight: 20,
+      fontSize: theme.fontSizes.sm,
+      fontWeight: "500",
+      marginLeft: theme.margins.xs,
+    },
+
+    titleSelected: {
+      color: theme.colors.neutral[25],
+      fontWeight: "600",
+    },
+
+    titleDescription: {
+      color: props.textColorDescription ?? theme.colors.gray[600],
+      textAlign: "center",
+      lineHeight: 16,
+      fontSize: 18,
+      fontFamily: theme.fonts.inter_light_300,
+      marginLeft: theme.margins.xs,
+    },
+    
+    descSelected: {
+      color: theme.colors.neutral[25],
+    },
+
+    containerMain: {
+      width: "100%",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      marginLeft: 2,
+      justifyContent: "center",
+    },
+  });
+
+export { styles };

package/src/components/list-supplies/index.tsx

@@ -0,0 +1,153 @@
+/**
+ * IMPORTS
+ */
+import React, { useEffect } from "react";
+import { Image, View, UIManager, Platform } from "react-native";
+
+// components
+import Box from "../../components/box";
+import Typography from "../../components/typography";
+
+// style
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import type { IListSupplies } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+const ListSupplies: React.FC<IListSupplies> = ({
+  dataRegistro,
+  namePosto,
+  litragem,
+  valor,
+  imagemUrl,
+  corBarra,
+}) => {
+
+  useEffect(() => {
+    if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
+      UIManager.setLayoutAnimationEnabledExperimental(true);
+    }
+  }, []);
+
+  return (
+    <Box
+      width={"100%"}
+      flexStyle={{ flexDirection: "row" }}
+      backgroundColor={theme.colors.neutral[25]}
+      borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+    >
+      {/* faixa lateral */}
+      <View
+        style={{
+          width: 15,
+          backgroundColor: corBarra ?? theme.colors.blue[375],
+          borderTopLeftRadius: theme.borderWidths.thick_medium,
+          borderBottomLeftRadius: theme.borderWidths.thick_medium,
+        }}
+      />
+
+      <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings["2xs"] }}>
+            <Box
+              marginStyle={{ marginBottom: theme.margins.fn}}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={`${namePosto || "Não informado"}`}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.sm}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginBottom: theme.margins.fn}}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Litragem: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.sm}
+              />
+              <Box
+                flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              >
+              <Typography
+                text={`${litragem || "Não informado"}`}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.sm}
+              />
+              <Typography
+                text={` LT`}
+                color={theme.colors.red[400]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.sm}
+              />
+              </Box>
+            </Box>
+
+            <Box
+              marginStyle={{ marginBottom: theme.margins.fn}}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Valor: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.sm}
+              />
+              <Typography
+                text={`R$ ${valor || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.sm}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginBottom: theme.margins.fn}}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={"Data: "}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.sm}
+              />
+              <Typography
+                text={`${dataRegistro || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.sm}
+              />
+            </Box>
+            <Box
+              borderStyled={{
+                borderWidth: 1,
+                borderColor: theme.colors.black[25],
+                borderRadius: theme.borderWidths.thick_medium,
+              }}
+              flexStyle={{
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <Image
+                source={{ uri: imagemUrl ?? "https://placehold.co/300x300" }}
+                style={{
+                  width: "100%",
+                  height: 139,
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+                resizeMode="cover"
+              />
+            </Box>
+      </Box>
+    </Box>
+  );
+};
+
+ListSupplies.displayName = "ListSupplies";
+export default asBaseComponent(ListSupplies);

package/src/components/list-supplies/interface.d.ts

@@ -0,0 +1,9 @@
+export interface IListSupplies {
+  dataRegistro: string;
+  namePosto: string;
+  litragem: number;
+  valor?: number;
+  peso?: number;
+  imagemUrl?: string;
+  corBarra?: string;
+}

package/src/components/maintenance-description-input/index.tsx

@@ -43,6 +43,7 @@ const MaintenanceDescriptionInput = forwardRef<any, MaintenanceDescriptionInputP
 
         <Box
           flexStyle={{ flexDirection: "row", justifyContent: error ? "space-between" : "flex-end" }}
+          marginStyle={{ marginBottom: 16 }}
         >
           {error && <Text style={stylesInput.errorText}>{error}</Text>}
           <Text style={stylesInput.charCount}>{`${text.length}/${MAX_LENGTH}`}</Text>

package/src/components/maintenance-description-input/styles.ts

@@ -3,7 +3,7 @@ import { theme } from "../../styles/theme/theme";
 
 const stylesInput = StyleSheet.create({
   label: {
-    fontFamily: theme.fonts.inter_regular_400,
+    fontFamily: theme.fonts.inter_medium_500,
     fontSize: theme.fontSizes.md,
     color: theme.colors.black[100],
     marginBottom: theme.margins["1xs"],

package/src/components/modals/modal-activity-reason/index.tsx

@@ -0,0 +1,168 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Modal, View } from "react-native";
+
+// components
+import Box from "../../box";
+import Typography from "../../typography";
+import Button from "../../button";
+import MaintenanceDescriptionInput from "../../maintenance-description-input";
+
+// commons / svg
+import { Icons } from "../../../common/icons-svg";
+
+// typings
+import type { IModalActivityReasonProps } from ".//interface";
+import { asBaseComponent } from "../../../@types/as-base-component";
+
+// styles
+import { theme } from "../../../styles/theme/theme";
+
+const MAX_LEN = 150;
+
+const ModalActivityReason: React.FC<IModalActivityReasonProps<any>> = ({
+  visible,
+  onClose,
+  modalConfirm,
+  textTitle,
+}) => {
+  const [textInput, setTextInput] = React.useState("");
+
+  const messaError =
+    textInput.length >= MAX_LEN ? `Limite máximo de ${MAX_LEN} caracteres atingido!` : "";
+
+  return (
+    <Modal animationType="fade" transparent visible={visible}>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: theme.shadows.z1,
+        }}
+      >
+        <Box
+          width={"90%"}
+          backgroundColor={theme.colors.orange[500]}
+          borderStyled={{
+            borderRadius: theme.borderWidths.thick_medium,
+          }}
+          paddingStyle={{
+            paddingLeft: theme.paddings["2xs"],
+            paddingRight: theme.paddings["2xs"],
+            paddingTop: theme.paddings.sm,
+            paddingBottom: theme.paddings.sm,
+          }}
+        >
+          <Box
+            marginStyle={{ marginBottom: 10, marginLeft: 4 }}
+            flexStyle={{ flexDirection: "row", alignItems: "center" }}
+          >
+            <Icons
+              icon="EXCLAMATION_TRIANGLE"
+              color={theme.colors.orange[500]}
+              background={theme.colors.neutral[300]}
+              size={22}
+            />
+            <Typography
+              text={`${textTitle ?? "Motivo da exclusão"}`}
+              color={theme.colors.neutral[25]}
+              marginLeft={theme.margins["2xs"]}
+              fontFamily={theme.fonts.inter_bold_700}
+              size={theme.fontSizes.lg}
+            />
+          </Box>
+
+          <Box
+            backgroundColor={theme.colors.neutral[300]}
+            paddingStyle={{
+              padding: theme.paddings.xs,
+            }}
+            borderStyled={{
+              borderRadius: theme.borderWidths.thick_medium,
+            }}
+          >
+            <Box width="100%">
+              <MaintenanceDescriptionInput
+                label={`${textTitle || "Motivo da exclusão"}`}
+                placeholderTextColor={theme.colors.gray[700]}
+                placeholder="Motivo da exclusão"
+                onChangeText={setTextInput}
+                error={messaError}
+              />
+            </Box>
+            <Box
+              marginStyle={{ marginTop: 4 }}
+              flexStyle={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+              }}
+            >
+              <Button
+                title="CANCELAR"
+                onPress={onClose}
+                width={"48%"}
+                height={40}
+                isLoading={false}
+                disabled={false}
+                backgroundColor={theme.colors.neutral[300]}
+                buttonTextStyle={{
+                  color: theme.colors.blue[100],
+                  fontFamily: "Inter-Medium",
+                  fontSize: theme.fontSizes.xs,
+                  fontWeight: "500",
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+                borderStyled={{
+                  borderWidth: theme.borderWidths.thin,
+                  borderColor: theme.colors.blue[100],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              />
+              <Button
+                title="CONFIRMAR"
+                onPress={() => {
+                  modalConfirm(textInput);
+                  onClose();
+                }}
+                width={"48%"}
+                height={40}
+                isLoading={false}
+                disabled={false}
+                backgroundColor={theme.colors.blue[500]}
+                buttonTextStyle={{
+                  color: theme.colors.neutral[25],
+                  fontFamily: "Inter-Medium",
+                  fontSize: theme.fontSizes.xs,
+                  fontWeight: "500",
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+                borderStyled={{
+                  borderWidth: theme.borderWidths.thin,
+                  borderColor: theme.colors.blue[100],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </View>
+    </Modal>
+  );
+};
+
+ModalActivityReason.displayName = "ModalActivityReason";
+
+export default asBaseComponent(ModalActivityReason);

package/src/components/modals/modal-activity-reason/interface.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable no-unused-vars */
+interface IModalActivityReasonProps<T> {
+  visible: boolean;
+  onClose: () => void;
+  modalConfirm: (value: T) => void;
+  textTitle?: string;
+}
+
+export type { IModalActivityReasonProps };

package/src/components/modals/modal-create-activitie/helpers/index.ts

@@ -0,0 +1,14 @@
+/**
+ * IMPORTS
+ */
+const OPTIONS = [
+  { label: "Disp com veículo parado", value: "option1" },
+  { label: "Operação com veículo", value: "option2" },
+  { label: "Em carga", value: "option3" },
+  { label: "Em descarga", value: "option4" },
+] as const;
+
+/**
+ * EXPORTS
+ */
+export { OPTIONS };

package/src/components/modals/modal-create-activitie/index.tsx

@@ -0,0 +1,210 @@
+/**
+ * IMPORTS
+ */
+import React, { useMemo, useState, useCallback } from "react";
+import { Modal, View, Pressable } from "react-native";
+
+// components
+import Box from "../../box";
+import Button from "../../button";
+
+import Typography from "../../typography";
+
+import ActivityFields from "../../selects/select-date-and-hours";
+
+import SelectOption from "../../selects/select-option";
+
+// commons
+import { Icons } from "../../../common/icons-svg";
+import { asBaseComponent } from "../../../@types/as-base-component";
+
+// helpers
+import { OPTIONS } from "./helpers";
+
+// typings
+import type { IDateAndHoursProps, IModalCreateActivitieProps } from "./interface";
+
+// styles / theme
+import { theme } from "../../../styles/theme/theme";
+import { styles } from "./styles";
+
+const ModalCreteActivitie: React.FC<IModalCreateActivitieProps<any>> = React.memo(
+  ({ visible, onClose, onPressConfirm, textTitle }) => {
+    const [dateAndHours, setDateAndHours] = useState<IDateAndHoursProps>({
+      date: "",
+      hours: "00:00",
+    });
+
+    // estados controlados mínimos
+    const [selectedActivitie, setSelectedActivitie] = useState<string | null>(
+      OPTIONS[0]?.value ?? null
+    );
+
+    // label do motivo derivada com memo
+    const activitieLabel = useMemo(
+      () => OPTIONS.find((activitie) => activitie.value === selectedActivitie)?.label ?? null,
+      [selectedActivitie]
+    );
+
+    // handlers estáveis
+    const handleChangeReason = useCallback((value: string | null) => {
+      setSelectedActivitie(value);
+    }, []);
+
+    const handleCancel = useCallback(() => {
+      onClose?.();
+    }, [onClose]);
+
+    const handleConfirm = useCallback(() => {
+      onPressConfirm?.({
+        reasonValue: selectedActivitie,
+        label: activitieLabel,
+        dateAndHours: dateAndHours,
+      });
+
+      onClose?.();
+    }, [onPressConfirm, onClose, activitieLabel, selectedActivitie, dateAndHours]);
+
+    return (
+      <Modal
+        animationType="fade"
+        transparent
+        visible={visible}
+        onRequestClose={handleCancel}
+        statusBarTranslucent
+      >
+        <Pressable style={styles.overlay} onPress={handleCancel}>
+          <Box
+            width="90%"
+            backgroundColor={theme.colors.orange[500]}
+            borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+            paddingStyle={{
+              paddingLeft: theme.paddings["2xs"],
+              paddingRight: theme.paddings["2xs"],
+              paddingTop: theme.paddings.sm,
+              paddingBottom: theme.paddings.sm,
+            }}
+          >
+            <View style={styles.headerRow}>
+              <Icons
+                icon="EXCLAMATION_TRIANGLE"
+                color={theme.colors.orange[500]}
+                background={theme.colors.neutral[300]}
+                size={22}
+              />
+              <Typography
+                text={textTitle ?? "Incluir atividade"}
+                color={theme.colors.neutral[25]}
+                marginLeft={theme.margins["2xs"]}
+                fontFamily={theme.fonts.inter_bold}
+                fontWeight="700"
+                size={theme.fontSizes.lg}
+              />
+            </View>
+
+            <Box
+              backgroundColor={theme.colors.neutral[300]}
+              paddingStyle={{ padding: theme.paddings.xs }}
+              borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+            >
+              <Typography
+                text="Preencha os dados da atividade que deseja incluir."
+                color={theme.colors.black[100]}
+                fontFamily={theme.fonts.inter_regular_400}
+                fontWeight="400"
+                lineHeight={theme.lineHeight["2xl"]}
+                size={theme.fontSizes.sm}
+                marginBottom={16}
+              />
+
+              <SelectOption
+                titleLabel="Selecione um motivo"
+                sizeTitleLabel={18}
+                dataOption={OPTIONS as any}
+                handleSelectDown={handleChangeReason}
+                backgroundColor={theme.colors.neutral[300]}
+              />
+
+              <ActivityFields
+                disabled={false}
+                icon={"CALENDAR"}
+                value={"09/09/2025"}
+                onPressConfirm={(value) =>
+                  setDateAndHours({ date: value, hours: dateAndHours?.hours })
+                }
+              />
+
+              <ActivityFields
+                disabled={false}
+                icon={"TIMER"}
+                value={"00:00"}
+                onPressConfirm={(value) =>
+                  setDateAndHours({ date: dateAndHours?.date, hours: value })
+                }
+              />
+
+              <View style={styles.actions}>
+                <Button
+                  title="CANCELAR"
+                  onPress={handleCancel}
+                  width="48%"
+                  height={40}
+                  isLoading={false}
+                  disabled={false}
+                  backgroundColor={theme.colors.neutral[300]}
+                  buttonTextStyle={{
+                    color: theme.colors.blue[500],
+                    fontFamily: theme.fonts.inter_medium_500,
+                    fontSize: theme.fontSizes.xs,
+                    fontWeight: "500",
+                  }}
+                  flexStyle={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    textAlign: "center",
+                  }}
+                  borderStyled={{
+                    borderWidth: theme.borderWidths.thin,
+                    borderColor: theme.colors.blue[100],
+                    borderRadius: theme.borderWidths.thick_medium,
+                  }}
+                />
+
+                <Button
+                  title="CONFIRMAR"
+                  onPress={handleConfirm}
+                  width="48%"
+                  height={40}
+                  isLoading={false}
+                  disabled={false}
+                  backgroundColor={theme.colors.blue[500]}
+                  buttonTextStyle={{
+                    color: theme.colors.neutral[25],
+                    fontFamily: theme.fonts.inter_medium_500,
+                    fontSize: theme.fontSizes.xs,
+                    fontWeight: "500",
+                  }}
+                  flexStyle={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    textAlign: "center",
+                  }}
+                  borderStyled={{
+                    borderWidth: theme.borderWidths.thin,
+                    borderColor: theme.colors.blue[100],
+                    borderRadius: theme.borderWidths.thick_medium,
+                  }}
+                />
+              </View>
+            </Box>
+          </Box>
+        </Pressable>
+      </Modal>
+    );
+  }
+);
+
+ModalCreteActivitie.displayName = "ModalCreteActivitie";
+export default asBaseComponent(ModalCreteActivitie);

package/src/components/modals/modal-create-activitie/interface.ts

@@ -0,0 +1,22 @@
+/* eslint-disable no-unused-vars */
+/**
+ * IMPORTS
+ */
+
+type IModalCreateActivitieProps<T> = {
+  visible: boolean;
+  textTitle?: string;
+  options?: T;
+  onClose: () => void;
+  onPressConfirm: (value: T) => void;
+};
+
+type IDateAndHoursProps = {
+  date: string;
+  hours: string;
+};
+
+/**
+ * EXPORTS
+ */
+export type { IModalCreateActivitieProps, IDateAndHoursProps };