react-native-exp-fig 0.1.0

package/src/components/header-profile/interface.d.ts

@@ -0,0 +1,52 @@
+/**
+ * IMPORTS
+ */
+import { ViewProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface IHeaderProps extends ViewProps, IGlobalCss {
+  title: string;
+
+  /**
+   * TestID para testes automático e identificação
+   */
+  testID?: string;
+
+  /**
+   * prop de navegação
+   */
+  propsNav?: any;
+
+  /**
+   * arrow para coloca o ícone da flecha ou lista
+   */
+  arrow: boolean;
+
+  /**
+   * permission boolean
+   */
+  permission: boolean;
+
+  /**
+   * isInternetReachable boolean que consta se está conectado a internet
+   */
+  isInternetReachable: boolean;
+
+  /**
+   * verifica se o bluetooth esta conectado
+   */
+  bluetoothIsConnected: boolean;
+
+  /**
+   * direciona para navegação correspondente
+   */
+  // eslint-disable-next-line no-unused-vars
+  handleNavigation: (propsNav: any) => void;
+}
+
+/**
+ * EXPORTS
+ */
+export type { IHeaderProps };

package/src/components/input/index.tsx

@@ -0,0 +1,180 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Dimensions, TouchableOpacity, TextInput, ViewStyle } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import { type IInputProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { styles } from "./styles";
+
+/**
+ *
+ * Componente Input para a interação do usuário com ui.
+ */
+const Input: React.FC<IInputProps> = ({
+  name,
+  textLabel,
+  messageError,
+  width,
+  backgroundColor,
+  marginStyle,
+  paddingStyle,
+  borderStyled,
+  isVisiblyPassword, // password
+  testID,
+  opacity,
+  children,
+  fontStyle,
+  style,
+  flexStyle,
+  handlePressIsVisiblyPassword, // password
+  append,
+  color,
+  placeholder,
+  textLabelPlaceholder,
+  secureTextEntry,
+  ...props
+}) => {
+  const styleProps = {
+    width,
+    backgroundColor,
+    borderStyled,
+    flexStyle,
+    paddingStyle,
+    marginStyle,
+    testID,
+    opacity,
+    children,
+    fontStyle,
+    color,
+    style,
+    name,
+  } as IInputProps;
+
+  const { width: widthScreen } = Dimensions.get("window");
+  const isMobile = widthScreen < 768;
+
+  const positionIcon: ViewStyle = {
+    position: "absolute",
+    right: 15,
+    top: isMobile ? 65 : 40,
+  };
+  const positionIconPassword: ViewStyle = {
+    position: "absolute",
+    right: 25,
+    top: isMobile ? 60 : 38,
+  };
+  const positionLabel: ViewStyle = { position: "absolute", right: 35, top: 60 };
+
+  return (
+    <Box paddingStyle={paddingStyle} marginStyle={marginStyle} style={{ position: "relative" }}>
+      <Box>
+        <Typography
+          size={theme.fontSizes["lg"]}
+          text={String(textLabel)}
+          color={color?.colorText ?? theme.colors.black[100]}
+        />
+
+        <TextInput
+          // @ts-ignore
+          style={[styles(styleProps).input, { backgroundColor }, style]}
+          placeholder={placeholder}
+          secureTextEntry={secureTextEntry}
+          {...props}
+        />
+      </Box>
+      {append && (
+        <Box>
+          <Typography
+            size={theme.fontSizes["lg"]}
+            text={append.appendText ?? ""}
+            color={append.appendColor ?? "#000"}
+          />
+        </Box>
+      )}
+
+      {name === "label" && (
+        <Box backgroundColor={"transparent"} style={positionLabel}>
+          <Typography
+            text={textLabelPlaceholder ?? ""}
+            size={theme.fontSizes["sm"]}
+            fontWeight="400"
+            fontFamily={theme.fonts.inter_regular_400}
+            color={theme.colors.blue[500]}
+            lineHeight={24}
+            letterSpacing={"regular"}
+          />
+        </Box>
+      )}
+
+      {name === "password" ||
+        (name === "senha" && (
+          <Box backgroundColor={"transparent"} style={positionIconPassword}>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              testID="eye-icon"
+              onPress={handlePressIsVisiblyPassword}
+            >
+              <Icons
+                size={theme.fontSizes["3xl"]}
+                color={theme.colors.blue[500]}
+                icon={isVisiblyPassword ? "EYE" : "EYE_SLASH"}
+              />
+            </TouchableOpacity>
+          </Box>
+        ))}
+      {name === "data" && (
+        <Box width={40} height={70} backgroundColor={"transparent"} style={positionIcon}>
+          <Icons
+            testID="CALENDAR"
+            size={theme.fontSizes["lg"]}
+            color={theme.colors.gray[700]}
+            icon={"CALENDAR"}
+          />
+        </Box>
+      )}
+      {name === "hours" && (
+        <Box width={40} height={70} backgroundColor={"transparent"} style={positionIcon}>
+          <Icons size={theme.fontSizes["lg"]} color={theme.colors.gray[700]} icon={"TIMER"} />
+        </Box>
+      )}
+      {name === "litragem" && (
+        <Box width={40} height={70} backgroundColor={"transparent"} style={positionIcon}>
+          <Icons size={theme.fontSizes["lg"]} color={theme.colors.gray[700]} icon={"GAS_PUMP"} />
+        </Box>
+      )}
+      {name === "value" && (
+        <Box width={40} height={70} backgroundColor={"transparent"} style={positionIcon}>
+          <Icons size={theme.fontSizes["lg"]} color={theme.colors.gray[700]} icon={"CURRENCY"} />
+        </Box>
+      )}
+      {Boolean(messageError) && (
+        <Box width={"100%"} backgroundColor={backgroundColor}>
+          <Typography
+            text={messageError ?? ""}
+            size={theme.fontSizes["sm"]}
+            fontFamily="inter_regular_400"
+            color={theme.colors.red[900] ?? "#9F0000"}
+            lineHeight={24}
+            letterSpacing={"regular"}
+            marginTop={2}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { Input };

package/src/components/input/interface.d.ts

@@ -0,0 +1,55 @@
+/**
+ * IMPORTS
+ */
+import { type TextInputProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface IInputProps extends TextInputProps, IGlobalCss {
+  /**
+   * Propriedade que define se o botão estará visivel ou não a senha.
+   */
+  handlePressIsVisiblyPassword?: () => void;
+  isVisiblyPassword?: boolean;
+
+  /**
+   * Propriedade que define o nome que vem no input.
+   */
+  name: string;
+
+  /**
+   * Propriedade que define a label.
+   */
+  textLabel?: string;
+
+  /**
+   * Propriedade que define o placeholder dentro do input
+   */
+  textLabelPlaceholder?: string;
+
+  /**
+   * Propriedade que define a mensagem de erro.
+   */
+  messageError?: string;
+
+  /**
+   * A propriedade CSS de Shadow Box adiciona efeitos de sombra em torno da estrutura de um elemento. Você pode definir vários efeitos separados por vírgulas. Uma sombra de caixa é descrita por compensações x e y em relação ao elemento, borrão e raio espalhado e cor.
+   */
+  boxShadow?: string;
+
+  /**
+   * A propriedade CSS opacity define a transparência de um elemento, ou seja, o grau em que o fundo atrás do elemento é sobreposto. A propriedade aceita um valor entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).
+   */
+  opacity?: number;
+
+  append?: {
+    appendText?: string;
+    appendColor?: string;
+  };
+}
+
+/**
+ * EXPORT
+ */
+export type { IInputProps };

package/src/components/input/styles.ts

@@ -0,0 +1,23 @@
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+
+// typings
+import { type IInputProps } from "./interface";
+
+import { stylesGlobal } from "../../styles/global/styles";
+
+/**
+ * Interface InputProps
+ */
+
+const styles = (props: IInputProps) =>
+  StyleSheet.create({
+    input: { ...stylesGlobal(props), ...props } as IInputProps,
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/scheduled-journey-indicators/index.tsx

@@ -0,0 +1,99 @@
+/**
+ * IMPORTS
+ */
+
+import React from "react";
+import { Dimensions, TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// commons / Icon
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import { IScheduledJourneyIndicators } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const { width: widthScreen } = Dimensions.get("window");
+const isMobile = widthScreen < 768;
+
+const ScheduledJourneyIndicators: React.FC<IScheduledJourneyIndicators> = ({
+  journey,
+  isEdit,
+  handleOpenEditModal,
+}) => {
+  return (
+    <TouchableOpacity
+      onPress={handleOpenEditModal}
+      disabled={!isEdit}
+      activeOpacity={0.7}
+      style={{
+        backgroundColor: theme.colors.neutral[25],
+        borderRadius: 8,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: theme.paddings.xs,
+        marginBottom: 16,
+      }}
+    >
+      <Box
+        flexStyle={{
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+        marginStyle={{ marginLeft: isMobile ? 0 : theme.margins.xs }}
+      >
+        <Icons
+          icon={isEdit ? "NOTE_PINCEL" : "CHECK_CIRCLE"}
+          color={isEdit ? theme.colors.blue[350] : theme.colors.green[400]}
+        />
+      </Box>
+
+      <Box
+        flexStyle={{
+          flex: 0.72,
+          alignItems: "flex-start",
+        }}
+      >
+        <Typography
+          text={journey?.descricao}
+          color={theme.colors.black[100]}
+          size={theme.fontSizes.sm}
+          fontWeight="700"
+          fontFamily={theme.fonts.inter_bold}
+          lineHeight={theme.fontSizes.lg}
+          letterSpacing={"o_16"}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        />
+      </Box>
+
+      <Box
+        flexStyle={{
+          flex: 0.22,
+          alignItems: "flex-end",
+        }}
+      >
+        <Typography
+          text={journey?.duracao_horas}
+          color={theme.colors.gray[700]}
+          size={theme.fontSizes.sm}
+          fontWeight="600"
+          fontFamily={theme.fonts.inter_semi_bold_600}
+          lineHeight={24}
+          letterSpacing={"o_16"}
+        />
+      </Box>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { ScheduledJourneyIndicators };

package/src/components/scheduled-journey-indicators/interface.d.ts

@@ -0,0 +1,18 @@
+/**
+ * IMPORTS
+ */
+import { TouchableOpacityProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface IScheduledJourneyIndicators extends TouchableOpacityProps, IGlobalCss {
+  journey: any;
+  isEdit: boolean;
+  handleOpenEditModal: () => void;
+}
+
+/**
+ * EXPORTS
+ */
+export { IScheduledJourneyIndicators };

package/src/components/selects/select-option/index.tsx

@@ -0,0 +1,104 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { useState } from "react";
+import { View, Text, TouchableOpacity, Modal, FlatList } from "react-native";
+
+// common / svg
+import { SvgIconArrowDropDown } from "../../../common/icons-svg/arrow-drop-down";
+import { SvgIconClosed } from "../../../common/icons-svg/closed";
+
+// typings
+import { ISelectDropDownProps } from "./interface";
+
+// styles
+import { styles } from "./styles";
+import { Icons } from "../../../common/icons-svg";
+import { theme } from "../../../styles/theme/theme";
+
+/**
+ * Componente SelectOption para a interação da  ui.
+ */
+const SelectOption: React.FC<ISelectDropDownProps> = ({
+  dataOption,
+  handleSelectDown,
+  titleLabel,
+  sizeTitleLabel,
+  colortitleLabel,
+}: ISelectDropDownProps) => {
+  const [selectedValue, setSelectedValue] = useState(dataOption[0]?.value || "");
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const handleSelect = (value: string) => {
+    setSelectedValue(value);
+    setModalVisible(false);
+    handleSelectDown(value);
+  };
+
+  const styleProps = {
+    dataOption,
+    handleSelectDown,
+    titleLabel,
+    sizeTitleLabel,
+    colortitleLabel,
+  } as ISelectDropDownProps;
+
+  return (
+    <View style={styles(styleProps).container}>
+      {/* Titulo para exibir o label */}
+      <Text style={styles(styleProps).label}>{`${titleLabel ?? "Selecione uma opção"}`}:</Text>
+
+      {/* Botão para abrir o modal */}
+      <TouchableOpacity
+        testID="select-box"
+        style={styles(styleProps).selectBox}
+        onPress={() => setModalVisible(true)}
+      >
+        <Text style={styles(styleProps).selectedText}>
+          {dataOption.find((item) => item.value === selectedValue)?.label}
+        </Text>
+
+        <Icons
+          size={theme.fontSizes["md"]}
+          color={theme.colors.blue[500]}
+          icon={"ARROW_DROP_DOWN"}
+        />
+      </TouchableOpacity>
+
+      {/* Modal para exibir as opções */}
+      <Modal testID="modal-container" visible={modalVisible} transparent animationType="fade">
+        <View style={styles(styleProps).modalOverlay}>
+          <View style={styles(styleProps).modalContainer}>
+            <View style={{ width: "100%", alignItems: "flex-end" }}>
+              <TouchableOpacity testID="close-icon" onPress={() => setModalVisible(false)}>
+                <Icons
+                  size={theme.fontSizes["md"]}
+                  color={theme.colors.blue[500]}
+                  icon={"CLOSED"}
+                />
+              </TouchableOpacity>
+            </View>
+            <FlatList
+              data={dataOption || []}
+              keyExtractor={(item) => item.value}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={styles(styleProps).option}
+                  onPress={() => handleSelect(item.value)}
+                >
+                  <Text style={styles(styleProps).optionText}>{item.label}</Text>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { SelectOption };

package/src/components/selects/select-option/interface.d.ts

@@ -0,0 +1,18 @@
+/**
+ * IMPORTS
+ */
+type ISelectDropDownProps = {
+  dataOption: any[];
+  titleLabel: string;
+  sizeTitleLabel?: number;
+  colortitleLabel?: string;
+
+  /**retorna o valor selecionado              */
+  // eslint-disable-next-line no-unused-vars
+  handleSelectDown: (value: string) => void;
+};
+
+/**
+ * EXPORTS
+ */
+export { ISelectDropDownProps };

package/src/components/selects/select-option/styles.ts

@@ -0,0 +1,75 @@
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+
+// typings
+import { ISelectDropDownProps } from "./interface";
+
+// theme
+import { theme } from "../../../styles/theme/theme";
+
+const styles = (props: ISelectDropDownProps) =>
+  StyleSheet.create({
+    container: {
+      width: "100%",
+      marginBottom: 16,
+    },
+    label: {
+      fontSize: props.sizeTitleLabel ?? 16,
+      fontWeight: "bold",
+      color: props.colortitleLabel ?? theme.colors.black[100],
+      marginBottom: 5,
+    },
+    selectBox: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+      height: 45,
+      borderWidth: 1,
+      borderColor: theme.colors.gray[700],
+      borderRadius: 10,
+      backgroundColor: theme.colors.neutral[25],
+      paddingHorizontal: 10,
+    },
+    selectedText: {
+      fontSize: 14,
+      color: "#666",
+    },
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: "rgba(0,0,0,0.5)",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: 24,
+    },
+    modalContainer: {
+      width: "100%",
+      backgroundColor: theme.colors.neutral[25],
+      borderRadius: 10,
+      padding: 15,
+      alignItems: "center",
+    },
+    option: {
+      width: "100%",
+      padding: 10,
+      alignItems: "flex-start",
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.gray[300],
+    },
+    optionText: {
+      fontSize: 14,
+      color: theme.colors.black[100],
+      fontWeight: "500",
+    },
+    closeButtonText: {
+      color: theme.colors.neutral[25],
+      fontWeight: "bold",
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/step-indicator/helpers/get-icon-by-status.tsx

@@ -0,0 +1,20 @@
+/**
+ * IMPORTS
+ */
+import { SVG_NAME } from "../../../common/icons-svg/constants";
+
+/**
+ * Função que mapeará os ícones correspondentes em SVG 🛠️.
+ * @param propertyType
+ * @returns SVG
+ */
+const getIconKeyByValue = (propertyType: string): keyof typeof SVG_NAME | undefined => {
+  return (Object.keys(SVG_NAME) as Array<keyof typeof SVG_NAME>).find(
+    (key) => SVG_NAME[key] === propertyType
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { getIconKeyByValue };