react-native-exp-fig 0.1.1 → 0.1.2

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

@@ -1,102 +1,102 @@
-/**
- * IMPORTS
- */
-import { TextProps } from "react-native";
-
-import { theme } from "../../styles/theme/theme";
-
-interface ITextInterface extends TextProps {
-  /**
-   * Propiedade texto que serar renderizado pro usuário final
-   */
-  text: string;
-
-  /**
-   * A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
-   */
-  color?: string;
-
-  /**
-   * Propiedade size define o tamanho e a orientação da caixa que é usada para representar uma página. Na maioria das vezes, esse tamanho corresponde ao tamanho alvo da página impressa, se aplicável.
-   */
-  size?: number;
-
-  align?: "center" | "left" | "right";
-  lineHeight?: number;
-  letterSpacing?: keyof typeof theme.letterSpacing;
-
-  /**
-   * A propriedade text-decoration do CSS é usada para definir a formatação de underline, overline, line-through ou blink. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.
-   */
-  textDecoration?: "line-through" | "underline" | "none";
-
-  /**
-   * A propriedade CSS font-weight define o peso (ou negrito) da fonte. Os pesos disponíveis dependem da família de fontes definida atualmente.
-   */
-  fontWeight?: "100" | "300" | "400" | "500" | "600" | "700";
-
-  // fontFamily?: keyof typeof theme.fonts;
-  fontFamily?: string | undefined;
-
-  /**
-   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
-   */
-  margin?: number;
-
-  /**
-   * A propriedade CSS define a área de margem no lado esquerdo de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-left
-   */
-  marginLeft?: number;
-
-  /**
-   * A propriedade CSS define a área de margem no lado direito de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-right
-   */
-  marginRight?: number;
-
-  /**
-   * A propriedade CSS margin-top de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.
-   */
-  marginTop?: number;
-
-  /**
-   * A propriedade CSS margin-bottom define a margin area na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.
-   */
-  marginBottom?: number;
-
-  /**
-   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
-   */
-  padding?: number;
-
-  /**
-   * A propriedade CSS padding-left é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. padding area é o espaço entre o conteúdo do elemento e a borda. Um valor negativo não é permitido.
-   */
-  paddingLeft?: number;
-
-  /**
-   * A propriedade CSS define a largura da área de preenchimento à direita de um elemento.padding-right
-   */
-  paddingRight?: number;
-
-  /**
-   * A propriedade CSS define a altura da área de preenchimento na parte superior de um elemento.padding-top
-   */
-  paddingTop?: number;
-
-  /**
-   * A propriedade CSS define a altura da área de preenchimento na parte inferior de um elemento.padding-bottom
-   */
-  paddingBottom?: number;
-
-  /**
-   * Define o número máximo de linhas que o texto pode ocupar. Se o texto for maior que esse limite, ele será truncado.  numberOfLines
-   *
-   * Define onde a elipse (...) será adicionada quando o texto for cortado devido ao numberOfLines.
-   */
-  numberOfLines?: number;
-  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
-}
-/**
- * EXPORTS
- */
-export { ITextInterface };
+/**
+ * IMPORTS
+ */
+import { TextProps } from "react-native";
+
+import { theme } from "../../styles/theme/theme";
+
+interface ITextInterface extends TextProps {
+  /**
+   * Propiedade texto que serar renderizado pro usuário final
+   */
+  text: string;
+
+  /**
+   * A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
+   */
+  color?: string;
+
+  /**
+   * Propiedade size define o tamanho e a orientação da caixa que é usada para representar uma página. Na maioria das vezes, esse tamanho corresponde ao tamanho alvo da página impressa, se aplicável.
+   */
+  size?: number;
+
+  align?: "center" | "left" | "right";
+  lineHeight?: number;
+  letterSpacing?: keyof typeof theme.letterSpacing;
+
+  /**
+   * A propriedade text-decoration do CSS é usada para definir a formatação de underline, overline, line-through ou blink. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.
+   */
+  textDecoration?: "line-through" | "underline" | "none";
+
+  /**
+   * A propriedade CSS font-weight define o peso (ou negrito) da fonte. Os pesos disponíveis dependem da família de fontes definida atualmente.
+   */
+  fontWeight?: "100" | "300" | "400" | "500" | "600" | "700";
+
+  // fontFamily?: keyof typeof theme.fonts;
+  fontFamily?: string | undefined;
+
+  /**
+   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
+   */
+  margin?: number;
+
+  /**
+   * A propriedade CSS define a área de margem no lado esquerdo de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-left
+   */
+  marginLeft?: number;
+
+  /**
+   * A propriedade CSS define a área de margem no lado direito de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-right
+   */
+  marginRight?: number;
+
+  /**
+   * A propriedade CSS margin-top de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.
+   */
+  marginTop?: number;
+
+  /**
+   * A propriedade CSS margin-bottom define a margin area na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.
+   */
+  marginBottom?: number;
+
+  /**
+   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
+   */
+  padding?: number;
+
+  /**
+   * A propriedade CSS padding-left é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. padding area é o espaço entre o conteúdo do elemento e a borda. Um valor negativo não é permitido.
+   */
+  paddingLeft?: number;
+
+  /**
+   * A propriedade CSS define a largura da área de preenchimento à direita de um elemento.padding-right
+   */
+  paddingRight?: number;
+
+  /**
+   * A propriedade CSS define a altura da área de preenchimento na parte superior de um elemento.padding-top
+   */
+  paddingTop?: number;
+
+  /**
+   * A propriedade CSS define a altura da área de preenchimento na parte inferior de um elemento.padding-bottom
+   */
+  paddingBottom?: number;
+
+  /**
+   * Define o número máximo de linhas que o texto pode ocupar. Se o texto for maior que esse limite, ele será truncado.  numberOfLines
+   *
+   * Define onde a elipse (...) será adicionada quando o texto for cortado devido ao numberOfLines.
+   */
+  numberOfLines?: number;
+  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
+}
+/**
+ * EXPORTS
+ */
+export { ITextInterface };

package/src/components/typography/styles.ts

@@ -1,34 +1,34 @@
-/**
- * IMPORTS
- */
-
-import { StyleSheet } from "react-native";
-import { ITextInterface } from "./interface";
-
-const styles = (props: ITextInterface) =>
-  StyleSheet.create({
-    text: {
-      textAlign: props?.align,
-      fontSize: props?.size ?? 20,
-      fontWeight: props?.fontWeight,
-      fontFamily: props.fontFamily ?? "Inter-Medium",
-      color: props?.color,
-      lineHeight: props?.lineHeight,
-      letterSpacing: 0.5,
-      margin: props?.margin,
-      marginLeft: props?.marginLeft ?? 0,
-      marginRight: props?.marginRight ?? 0,
-      marginTop: props?.marginTop ?? 0,
-      marginBottom: props?.marginBottom ?? 0,
-      padding: props?.padding ?? 0,
-      paddingLeft: props?.paddingLeft ?? 0,
-      paddingRight: props?.paddingRight ?? 0,
-      paddingTop: props?.paddingTop ?? 0,
-      paddingBottom: props?.paddingBottom ?? 0,
-    },
-  });
-
-/**
- * EXPORTS
- */
-export { styles };
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+import { ITextInterface } from "./interface";
+
+const styles = (props: ITextInterface) =>
+  StyleSheet.create({
+    text: {
+      textAlign: props?.align,
+      fontSize: props?.size ?? 20,
+      fontWeight: props?.fontWeight,
+      fontFamily: props.fontFamily ?? "Inter-Medium",
+      color: props?.color,
+      lineHeight: props?.lineHeight,
+      letterSpacing: 0.5,
+      margin: props?.margin,
+      marginLeft: props?.marginLeft ?? 0,
+      marginRight: props?.marginRight ?? 0,
+      marginTop: props?.marginTop ?? 0,
+      marginBottom: props?.marginBottom ?? 0,
+      padding: props?.padding ?? 0,
+      paddingLeft: props?.paddingLeft ?? 0,
+      paddingRight: props?.paddingRight ?? 0,
+      paddingTop: props?.paddingTop ?? 0,
+      paddingBottom: props?.paddingBottom ?? 0,
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

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

@@ -0,0 +1,216 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Image, TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// comons / constants
+import { IMAGES } from "../../common/constants";
+
+// typings
+import { IUserProfile } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+/**
+ *
+ * Componente Header para a interação do usuário com ui.
+ */
+const UserProfile: React.FC<IUserProfile> = ({
+  nome,
+  avatar,
+  cpf,
+  placa_cavalo,
+  bluetoothIsConnected,
+  app_version,
+  color,
+  width,
+  height,
+  handleProfileView,
+  testID,
+}: IUserProfile) => {
+  return (
+    <Box
+      testID={testID}
+      width={width ?? "100%"}
+      height={height ?? 260}
+      backgroundColor={theme.colors.blue[500]}
+      marginStyle={{ marginBottom: 16 }}
+      paddingStyle={{ paddingLeft: 16, paddingRight: 16 }}
+    >
+      <Box
+        width={"100%"}
+        flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "center" }}
+        paddingStyle={{ paddingTop: 28 }}
+      >
+        <TouchableOpacity
+          activeOpacity={0.7}
+          style={{
+            width: 100,
+            height: 80,
+            borderRadius: 50,
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+          onPress={handleProfileView}
+        >
+          <Image
+            testID="user-profile-avatar"
+            source={{
+              uri: avatar || IMAGES.IMAGE_ANONIMA,
+            }}
+            style={{
+              width: 120,
+              height: 120,
+              borderRadius: 60,
+              borderWidth: 2,
+              borderColor: theme.colors.green[400],
+            }}
+          />
+        </TouchableOpacity>
+      </Box>
+
+      <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",
+          }}
+        >
+          <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}
+            letterSpacing={"regular"}
+          />
+        </Box>
+        <Box
+          width={"100%"}
+          height={30}
+          flexStyle={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            textAlign: "center",
+          }}
+        >
+          <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}
+            letterSpacing={"regular"}
+          />
+
+          <Typography
+            text={cpf}
+            color={color?.colorText ?? theme.colors.neutral[25]}
+            size={theme.fontSizes.sm}
+            fontFamily={theme.fonts.inter_medium_500}
+            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            letterSpacing={"regular"}
+          />
+        </Box>
+        <Box
+          width={"100%"}
+          height={30}
+          flexStyle={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            textAlign: "center",
+          }}
+        >
+          <Typography
+            text={"CONECTADO: "}
+            color={color?.colorText ?? theme.colors.neutral[25]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_medium_500}
+            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            letterSpacing={"regular"}
+          />
+
+          <Typography
+            text={bluetoothIsConnected ? placa_cavalo : ""}
+            color={theme.colors.green[400]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_bold_700}
+            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            letterSpacing={"regular"}
+          />
+        </Box>
+      </Box>
+
+      <Box
+        width={"100%"}
+        height={30}
+        flexStyle={{
+          flexDirection: "row",
+          alignItems: "flex-end",
+          justifyContent: "flex-end",
+        }}
+        marginStyle={{ marginTop: 16 }}
+      >
+        <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={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>
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { UserProfile };

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

@@ -0,0 +1,22 @@
+/**
+ * IMPORTS
+ */
+import { ViewProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface IUserProfile extends ViewProps, IGlobalCss {
+  nome: string;
+  avatar: string;
+  cpf: string;
+  placa_cavalo: string;
+  bluetoothIsConnected: boolean;
+  app_version: string;
+  handleProfileView: () => void;
+}
+
+/**
+ * EXPORTS
+ */
+export { IUserProfile };

package/src/{index.ts → index.tsx}

@@ -14,6 +14,8 @@ export { SelectOption } from "./components/selects/select-option";
 export { Header } from "./components/header-profile";
 export { ScheduledJourneyIndicators } from "./components/scheduled-journey-indicators";
 export { CardScheduledJourney } from "./components/card-scheduled-journey";
+export { UserProfile } from "./components/user-profile";
+export { MenuItem } from "./components/menu-item";
 
 // Utilities
 export { multiply } from "./utils/mutiply";