jornada-ui 0.4.11 → 0.4.13

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

@@ -0,0 +1,103 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { View, Text, TouchableOpacity, FlatList } from "react-native";
+
+// components
+import Box from "../box";
+
+// icons
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import type { IListDevices, IData } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { styles as makeStyles } from "./styles";
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente ListDevices para a interação da ui.
+ */
+const ListDevices = forwardRef<any, IListDevices>(
+  (
+    { data, textColorDescription, titleColor, selectedId, onSelect, defaultSelectedId, disabled },
+    ref
+  ): React.ReactElement => {
+    const isControlled = selectedId !== undefined;
+    const [internalSelected, setInternalSelected] = React.useState<number | null>(
+      defaultSelectedId!
+    );
+
+    const currentSelected = isControlled ? (selectedId ?? null) : internalSelected;
+
+    const handlePress = (device: IData) => {
+      if (disabled) return;
+      if (!isControlled) setInternalSelected(device.id);
+      onSelect?.(device);
+    };
+
+    if (!data?.length) return <Box />;
+
+    return (
+      <FlatList
+        data={data}
+        keyExtractor={({ id }) => String(id)}
+        renderItem={({ item: device, index }) => {
+          const isLast = index === data.length - 1;
+          const isSelected = currentSelected === device.id;
+
+          const s = makeStyles({
+            titleColor,
+            textColorDescription,
+            disabled,
+            isSelected,
+          });
+          return (
+            <TouchableOpacity
+              ref={ref}
+              activeOpacity={0.7}
+              testID="list-devices"
+              key={device.id}
+              onPress={() => handlePress(device)}
+              disabled={disabled}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isSelected, disabled }}
+              accessibilityLabel={`Dispositivo ${device.nameDevice}`}
+              style={[
+                s.containerIndicator,
+                !isLast && s.separator,
+                isSelected && s.containerIndicatorSelected,
+              ]}
+            >
+              <Icons
+                icon={"BLUETOOTH"}
+                size={26}
+                background={theme.colors.gray[600]}
+                color={theme.colors.gray[300]}
+              />
+
+              <View style={s.containerMain}>
+                <Text style={[s.title, isSelected && s.titleSelected]}>{device.nameDevice}</Text>
+                {!!device.macDevice && (
+                  <Text style={[s.titleDescription, isSelected && s.descSelected]}>
+                    {device.macDevice}
+                  </Text>
+                )}
+              </View>
+            </TouchableOpacity>
+          );
+        }}
+      />
+    );
+  }
+);
+
+ListDevices.displayName = "ListDevices";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(ListDevices);

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

@@ -0,0 +1,36 @@
+/* eslint-disable no-unused-vars */
+/**
+ * IMPORTS
+ */
+
+export type IData = {
+  id: number;
+  macDevice: string;
+  nameDevice: string;
+};
+
+export interface IListDevices {
+  /** dados que vão ser renderizados */
+  data?: IData[];
+
+  /** cor do texto */
+  titleColor?: string;
+
+  /** cor do titulo (não está sendo usada no componente atual, mantida por compat) */
+  titleNumberColor?: string;
+
+  /** cor do texto da descrição */
+  textColorDescription?: string;
+
+  /** (opcional) id selecionado - modo controlado */
+  selectedId?: number | null;
+
+  /** (opcional) seleção inicial - modo não-controlado */
+  defaultSelectedId?: number | null;
+
+  /** callback ao selecionar um item */
+  onSelect?: (device: IData) => void;
+
+  /** desabilita interação */
+  disabled?: boolean;
+}

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 };