react-native-exp-fig 0.1.9 → 0.1.10

package/src/components/step-indicator/index.tsx

@@ -1,164 +1,164 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { View, Text } from "react-native";
-
-import { getIconKeyByValue } from "./helpers/get-icon-by-status";
-
-// typings
-import { IStepIndicator } from "./interface";
-
-// styles
-import { styles } from "./styles";
-import { Icons } from "../../common/icons-svg";
-
-/**
- * Componente StepIndicator para a interação da ui.
- */
-
-const StepIndicator: React.FC<IStepIndicator> = ({
-  data = [],
-  type,
-  backgroundColorBall,
-  textColorDescription,
-  titleColor,
-  titleNumberColor,
-}) => {
-  const StepDefault = () => {
-    return (
-      <>
-        {data!.length > 0 &&
-          data!.map((history, index) => (
-            <View testID="step-indicator" style={styles({}).containerIndicator} key={history.id}>
-              <View style={styles({ backgroundColorBall }).containerBall}>
-                {data!?.length > 1 && index < data!?.length - 1 && (
-                  <View
-                    style={{
-                      width: 2,
-                      height: 84,
-                      marginTop: 116,
-                      position: "relative",
-                      backgroundColor: "#050022",
-                    }}
-                  />
-                )}
-                <Text style={styles({ titleNumberColor }).titleNumber}>
-                  {data!?.length - index}
-                </Text>
-              </View>
-
-              <View style={styles({}).containerMain}>
-                <Text style={styles({ titleColor }).title}>{history?.titleLabel}</Text>
-
-                {history?.data_inicio && (
-                  <Text style={styles({ textColorDescription }).titleDescription}>
-                    {`Inicio: ${history.data_inicio} ás ${history.data_fim}`}
-                  </Text>
-                )}
-
-                {history.description && (
-                  <Text style={styles({ textColorDescription }).titleDescription}>
-                    Duração: {history?.description}
-                  </Text>
-                )}
-              </View>
-            </View>
-          ))}
-      </>
-    );
-  };
-
-  const StepCustom = () => {
-    return (
-      <View
-        style={{
-          width: "100%",
-          height: 84,
-          paddingHorizontal: 24,
-          display: "flex",
-          flexDirection: "row",
-        }}
-      >
-        {data.map((step, indexCustom) => {
-          const titleLabel = getIconKeyByValue(step.titleLabel);
-
-          return (
-            <>
-              <View
-                key={String(Math.random() * 10)}
-                style={{
-                  width: 45,
-                  height: 45,
-                  backgroundColor: indexCustom <= 3 ? "orange" : "transparent",
-                  borderRadius: 50,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  borderWidth: 1,
-                  borderColor: "#fff",
-                }}
-              >
-                <View
-                  style={{
-                    width: 45,
-                    height: 45,
-                    backgroundColor: "transparent",
-                    borderRadius: 50,
-                    alignItems: "center",
-                    justifyContent: "center",
-                  }}
-                >
-                  {titleLabel && <Icons icon={titleLabel} />}
-                </View>
-                <Text
-                  style={{
-                    position: "absolute",
-                    top: 56,
-                    fontWeight: "600",
-                    fontSize: 10,
-                    lineHeight: 14,
-                    textAlign: "center",
-                    color: "#fff",
-                  }}
-                >
-                  {step.titleLabel}
-                </Text>
-              </View>
-
-              {data!?.length > 1 && indexCustom < data!?.length - 1 && (
-                <View
-                  key={indexCustom}
-                  style={{
-                    width: 90,
-                    height: 2,
-                    marginTop: 24,
-                    position: "relative",
-                    backgroundColor: "orange",
-                  }}
-                />
-              )}
-            </>
-          );
-        })}
-      </View>
-    );
-  };
-
-  const handleRenderComponent = (stepType: "default" | "custom") => {
-    switch (stepType) {
-      case "default":
-        return <StepDefault />;
-      case "custom":
-        return <StepCustom />;
-      default:
-        return <View />;
-    }
-  };
-
-  return <>{handleRenderComponent(type!)}</>;
-};
-
-/**
- * EXPORTS
- */
-export { StepIndicator };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { View, Text } from "react-native";
+
+import { getIconKeyByValue } from "./helpers/get-icon-by-status";
+
+// typings
+import { IStepIndicator } from "./interface";
+
+// styles
+import { styles } from "./styles";
+import { Icons } from "../../common/icons-svg";
+import { formHoursMinute } from "../../utils/format-data";
+
+/**
+ * Componente StepIndicator para a interação da ui.
+ */
+
+const StepIndicator: React.FC<IStepIndicator> = ({
+  data = [],
+  type,
+  backgroundColorBall,
+  textColorDescription,
+  titleColor,
+  titleNumberColor,
+}) => {
+  const StepDefault = () => {
+    return (
+      <>
+        {data!.length > 0 &&
+          data!.map((history, index) => (
+            <View testID="step-indicator" style={styles({}).containerIndicator} key={history.id}>
+              <View style={styles({ backgroundColorBall }).containerBall}>
+                {data!?.length > 1 && index < data!?.length - 1 && (
+                  <View
+                    style={{
+                      width: 2,
+                      height: 84,
+                      marginTop: 116,
+                      position: "relative",
+                      backgroundColor: "#050022",
+                    }}
+                  />
+                )}
+                <Text style={styles({ titleNumberColor }).titleNumber}>
+                  {data!?.length - index}
+                </Text>
+              </View>
+
+              <View style={styles({}).containerMain}>
+                <Text style={styles({ titleColor }).title}>{history?.descricao}</Text>
+
+                {history?.data_inicio && (
+                  <Text style={styles({ textColorDescription }).titleDescription}>
+                    {`Inicio: ${history.data_inicio} ás ${history.data_fim}`}
+                  </Text>
+                )}
+
+                {history.duracao_segundos && (
+                  <Text style={styles({ textColorDescription }).titleDescription}>
+                    Duração: {formHoursMinute(history?.duracao_segundos as string)}
+                  </Text>
+                )}
+              </View>
+            </View>
+          ))}
+      </>
+    );
+  };
+
+  const StepCustom = () => {
+    return (
+      <View
+        style={{
+          width: "100%",
+          height: 84,
+          paddingHorizontal: 24,
+          display: "flex",
+          flexDirection: "row",
+        }}
+      >
+        {data.map((step, indexCustom) => {
+          const descricao = getIconKeyByValue(step.descricao);
+
+          return (
+            <React.Fragment key={`step-${indexCustom}`}>
+              <View
+                style={{
+                  width: 45,
+                  height: 45,
+                  backgroundColor: indexCustom <= 3 ? "orange" : "transparent",
+                  borderRadius: 50,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderWidth: 1,
+                  borderColor: "#fff",
+                }}
+              >
+                <View
+                  style={{
+                    width: 45,
+                    height: 45,
+                    backgroundColor: "transparent",
+                    borderRadius: 50,
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  {descricao && <Icons icon={descricao} />}
+                </View>
+                <Text
+                  style={{
+                    position: "absolute",
+                    top: 56,
+                    fontWeight: "600",
+                    fontSize: 10,
+                    lineHeight: 14,
+                    textAlign: "center",
+                    color: "#fff",
+                    width: 75,
+                  }}
+                >
+                  {step.descricao}
+                </Text>
+              </View>
+
+              {data?.length > 1 && indexCustom < data?.length - 1 && (
+                <View
+                  style={{
+                    width: 35,
+                    height: 2,
+                    marginTop: 24,
+                    position: "relative",
+                    backgroundColor: "orange",
+                  }}
+                />
+              )}
+            </React.Fragment>
+          );
+        })}
+      </View>
+    );
+  };
+
+  const handleRenderComponent = (stepType: "default" | "custom") => {
+    switch (stepType) {
+      case "default":
+        return <StepDefault />;
+      case "custom":
+        return <StepCustom />;
+      default:
+        return <View />;
+    }
+  };
+
+  return <>{handleRenderComponent(type!)}</>;
+};
+
+/**
+ * EXPORTS
+ */
+export { StepIndicator };

package/src/components/step-indicator/interface.d.ts

@@ -1,34 +1,34 @@
-/**
- * IMPORTS
- */
-
-type IData = {
-  id: number;
-  titleLabel: string;
-  data_inicio: string;
-  data_fim: string;
-  description: string;
-};
-interface IStepIndicator {
-  /**dados que vão ser renderizados */
-  data?: IData[];
-
-  /**tupo de renderização padrão ou customizada */
-  type?: "default" | "custom";
-
-  /**tamanho do step indicator */
-  backgroundColorBall?: string;
-
-  /**cor do texto */
-  titleColor?: string;
-
-  /**cor do numero do step indicator */
-  titleNumberColor?: string;
-
-  /**cor do texto da descrição */
-  textColorDescription?: string;
-}
-/**
- * EXPORTS
- */
-export { type IStepIndicator };
+/**
+ * IMPORTS
+ */
+
+type IData = {
+  id: number;
+  duracao_segundos: string | number;
+  data_inicio: string;
+  data_fim: string;
+  descricao: string;
+};
+interface IStepIndicator {
+  /**dados que vão ser renderizados */
+  data?: IData[];
+
+  /**tupo de renderização padrão ou customizada */
+  type?: "default" | "custom";
+
+  /**tamanho do step indicator */
+  backgroundColorBall?: string;
+
+  /**cor do texto */
+  titleColor?: string;
+
+  /**cor do numero do step indicator */
+  titleNumberColor?: string;
+
+  /**cor do texto da descrição */
+  textColorDescription?: string;
+}
+/**
+ * EXPORTS
+ */
+export { type IStepIndicator };

package/src/components/user-profile/index.tsx

@@ -18,7 +18,6 @@ import { IUserProfile } from "./interface";
 import { theme } from "../../styles/theme/theme";
 
 /**
- *
  * Componente Header para a interação do usuário com ui.
  */
 const UserProfile: React.FC<IUserProfile> = ({
@@ -38,27 +37,20 @@ const UserProfile: React.FC<IUserProfile> = ({
     <Box
       testID={testID}
       width={width ?? "100%"}
-      height={height ?? 260}
-      backgroundColor={theme.colors.blue[500]}
-      marginStyle={{ marginBottom: 16 }}
-      paddingStyle={{ paddingLeft: 16, paddingRight: 16 }}
+      height={height}
+      backgroundColor={theme.colors.blue[525]}
+      paddingStyle={{
+        paddingLeft: theme.paddings.md,
+        paddingRight: theme.paddings.md,
+        paddingBottom: theme.paddings["2xs"],
+      }}
     >
       <Box
         width={"100%"}
         flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "center" }}
-        paddingStyle={{ paddingTop: 28 }}
+        marginStyle={{ marginTop: theme.margins.md }}
       >
-        <TouchableOpacity
-          activeOpacity={0.7}
-          style={{
-            width: 100,
-            height: 80,
-            borderRadius: 50,
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-          onPress={handleProfileView}
-        >
+        <TouchableOpacity activeOpacity={0.7} onPress={handleProfileView}>
           <Image
             testID="user-profile-avatar"
             source={{
@@ -68,7 +60,7 @@ const UserProfile: React.FC<IUserProfile> = ({
               width: 120,
               height: 120,
               borderRadius: 60,
-              borderWidth: 2,
+              borderWidth: theme.borderWidths.thin_medium,
               borderColor: theme.colors.green[400],
             }}
           />
@@ -77,54 +69,57 @@ const UserProfile: React.FC<IUserProfile> = ({
 
       <Box
         width={"100%"}
-        height={70}
         flexStyle={{ flexDirection: "column", alignItems: "center", justifyContent: "center" }}
-        marginStyle={{ marginTop: 36 }}
       >
         <Box
           width={"100%"}
-          height={30}
           flexStyle={{
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "flex-start",
             textAlign: "center",
           }}
+          paddingStyle={{ paddingTop: theme.paddings["2xs"] }}
         >
           <Typography
             text={"Olá, "}
             color={color?.colorText ?? theme.colors.neutral[25]}
             size={theme.fontSizes.md}
             fontFamily={theme.fonts.inter_regular_400}
-            lineHeight={theme.fontSizes["2xl"] ?? 24}
-            letterSpacing={"regular"}
-          />
-
-          <Typography
-            text={nome}
-            color={color?.colorText ?? theme.colors.neutral[25]}
-            size={theme.fontSizes.sm}
-            fontFamily="inter_medium_500"
-            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            fontWeight="400"
+            lineHeight={theme.fontSizes.lg ?? 18}
             letterSpacing={"regular"}
           />
+          <Box width={"89%"}>
+            <Typography
+              text={nome}
+              color={color?.colorText ?? theme.colors.neutral[25]}
+              size={theme.fontSizes.sm}
+              fontFamily="inter_medium_500"
+              fontWeight="500"
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              lineHeight={theme.fontSizes.lg ?? 18}
+              letterSpacing={"regular"}
+            />
+          </Box>
         </Box>
         <Box
           width={"100%"}
-          height={30}
           flexStyle={{
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "flex-start",
             textAlign: "center",
           }}
+          paddingStyle={{ paddingTop: 5 }}
         >
           <Typography
             text={"CPF: "}
             color={color?.colorText ?? theme.colors.neutral[25]}
             size={theme.fontSizes.md}
             fontFamily={theme.fonts.inter_regular_400}
-            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            lineHeight={theme.fontSizes.lg ?? 18}
             letterSpacing={"regular"}
           />
 
@@ -132,36 +127,39 @@ const UserProfile: React.FC<IUserProfile> = ({
             text={cpf}
             color={color?.colorText ?? theme.colors.neutral[25]}
             size={theme.fontSizes.sm}
-            fontFamily={theme.fonts.inter_medium_500}
-            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            fontFamily={theme.fonts.inter_semi_bold_600}
+            fontWeight="600"
+            lineHeight={theme.fontSizes.lg ?? 18}
             letterSpacing={"regular"}
           />
         </Box>
         <Box
           width={"100%"}
-          height={30}
           flexStyle={{
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "flex-start",
             textAlign: "center",
           }}
+          paddingStyle={{ paddingTop: 5 }}
         >
           <Typography
             text={"CONECTADO: "}
             color={color?.colorText ?? theme.colors.neutral[25]}
-            size={theme.fontSizes.xs}
+            size={theme.fontSizes.sm}
             fontFamily={theme.fonts.inter_medium_500}
-            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            fontWeight="500"
+            lineHeight={theme.fontSizes.lg ?? 18}
             letterSpacing={"regular"}
           />
 
           <Typography
             text={bluetoothIsConnected ? placa_cavalo : ""}
             color={theme.colors.green[400]}
-            size={theme.fontSizes.xs}
+            size={theme.fontSizes.sm}
             fontFamily={theme.fonts.inter_bold_700}
-            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            fontWeight="700"
+            lineHeight={theme.fontSizes.lg ?? 18}
             letterSpacing={"regular"}
           />
         </Box>
@@ -169,42 +167,32 @@ const UserProfile: React.FC<IUserProfile> = ({
 
       <Box
         width={"100%"}
-        height={30}
         flexStyle={{
           flexDirection: "row",
-          alignItems: "flex-end",
+          alignItems: "center",
           justifyContent: "flex-end",
         }}
-        marginStyle={{ marginTop: 16 }}
+        marginStyle={{ marginTop: theme.margins.md }}
       >
-        <Box
-          width={"100%"}
-          height={30}
-          flexStyle={{
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "flex-end",
-            textAlign: "center",
-          }}
-        >
-          <Typography
-            text={"Versão: "}
-            color={color?.colorText ?? theme.colors.neutral[25]}
-            size={theme.fontSizes.md}
-            fontFamily={theme.fonts.inter_regular_400}
-            lineHeight={15}
-            letterSpacing={"regular"}
-          />
+        <Typography
+          text={"Versão: "}
+          color={color?.colorText ?? theme.colors.neutral[25]}
+          size={theme.fontSizes.md}
+          fontFamily={theme.fonts.inter_regular_400}
+          fontWeight="400"
+          lineHeight={theme.fontSizes.lg ?? 18}
+          letterSpacing={"regular"}
+        />
 
-          <Typography
-            text={app_version}
-            color={color?.colorText ?? theme.colors.neutral[25]}
-            size={theme.fontSizes.xs}
-            fontFamily={theme.fonts.inter_light_300}
-            lineHeight={theme.fontSizes["2xl"] ?? 24}
-            letterSpacing={"regular"}
-          />
-        </Box>
+        <Typography
+          text={app_version}
+          color={color?.colorText ?? theme.colors.neutral[25]}
+          size={theme.fontSizes.sm}
+          fontWeight="300"
+          fontFamily={theme.fonts.inter_light_300}
+          lineHeight={theme.fontSizes.lg ?? 18}
+          letterSpacing={"regular"}
+        />
       </Box>
     </Box>
   );