react-native-exp-fig 0.1.1 → 0.1.3

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

@@ -1,99 +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 };
+/**
+ * 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

@@ -1,18 +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 };
+/**
+ * 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

@@ -1,104 +1,100 @@
-/**
- * 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 };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { useState } from "react";
+import { View, Text, TouchableOpacity, Modal, FlatList } from "react-native";
+
+// 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

@@ -1,18 +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 };
+/**
+ * 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

@@ -1,75 +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 };
+/**
+ * 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

@@ -1,20 +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 };
+/**
+ * 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 };