react-native-exp-fig 0.1.0

package/src/components/capture-photo/index.tsx

@@ -0,0 +1,125 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Image, TouchableOpacity } from "react-native";
+
+// components
+import { Typography } from "../typography";
+
+// icons / svg
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import { ICapturePhotoProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { styles } from "./styles";
+
+/**
+ * Componente Capturar foto para a interação do usuário com ui.
+ */
+const CapturePhoto: React.FC<ICapturePhotoProps> = ({
+  imageComprovante,
+  takePhotoWithImagePicker,
+  testID,
+  width,
+  height,
+  marginStyle,
+  flexStyle,
+  title,
+  borderStyled,
+  color,
+  fontStyle,
+  opacity,
+  style,
+  smallText,
+  paddingStyle,
+}) => {
+  const styleProps = {
+    imageComprovante,
+    takePhotoWithImagePicker,
+    testID,
+    width,
+    height,
+    marginStyle,
+    flexStyle,
+    title,
+    borderStyled,
+    color,
+    fontStyle,
+    opacity,
+    style,
+    smallText,
+    paddingStyle,
+  } as ICapturePhotoProps;
+
+  return (
+    <>
+      {imageComprovante ? (
+        <TouchableOpacity activeOpacity={0.7} onPress={takePhotoWithImagePicker} testID={testID}>
+          <Image
+            style={[
+              {
+                width,
+                height,
+                borderWidth: Number(borderStyled?.borderWidth),
+                borderColor: borderStyled?.borderColor,
+                borderRadius: Number(borderStyled?.borderRadius),
+              },
+              styles(styleProps).capturePhoto,
+            ]}
+            source={{ uri: imageComprovante }}
+          />
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity
+          activeOpacity={0.7}
+          style={[styles(styleProps).capturePhoto, style]}
+          onPress={takePhotoWithImagePicker}
+          testID={testID}
+        >
+          <Icons icon={"CAMERA_PLUS"} size={theme.fontSizes["2xl"] || 24} color={color?.colorSvg} />
+          <Typography
+            text={title.text || "Sem foto capturada."}
+            align={
+              flexStyle?.textAlign === "left" || flexStyle?.textAlign === "right"
+                ? flexStyle.textAlign
+                : "center"
+            }
+            color={color?.colorText ? color.colorText : theme.colors.gray[875]}
+            size={fontStyle?.fontSize ? fontStyle?.fontSize : theme.fontSizes.md}
+            fontFamily={
+              fontStyle?.fontFamily ? fontStyle?.fontFamily : theme.fonts.inter_regular_400
+            }
+            lineHeight={fontStyle?.lineHeight ? fontStyle?.lineHeight : theme.fontSizes["2xl"]}
+            letterSpacing={fontStyle?.letterSpacing ? fontStyle?.letterSpacing : "regular"}
+          />
+          {smallText && (
+            <Typography
+              text={title.textSmallPhoto || "aqui vai o texto de baixo da foto"}
+              align={
+                flexStyle?.textAlign === "left" || flexStyle?.textAlign === "right"
+                  ? flexStyle.textAlign
+                  : "center"
+              }
+              color={color?.colorText ? color.colorText : theme.colors.gray[875]}
+              size={fontStyle?.fontSize ? fontStyle?.fontSize : theme.fontSizes.sm}
+              fontFamily={
+                fontStyle?.fontFamily ? fontStyle?.fontFamily : theme.fonts.inter_regular_400
+              }
+              lineHeight={fontStyle?.lineHeight ? fontStyle?.lineHeight : theme.fontSizes.md}
+              letterSpacing={fontStyle?.letterSpacing ? fontStyle?.letterSpacing : "regular"}
+            />
+          )}
+        </TouchableOpacity>
+      )}
+    </>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { CapturePhoto };

package/src/components/capture-photo/interface.d.ts

@@ -0,0 +1,44 @@
+/**
+ * IMPORTS
+ */
+import { TouchableOpacityProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface ICapturePhotoProps extends TouchableOpacityProps, IGlobalCss {
+  /**
+   * Estilo customizado
+   */
+  style?: any;
+
+  /**
+   * Função que tira uma foto.
+   */
+  takePhotoWithImagePicker: () => void;
+
+  /**
+   * Valor com a foto do capturada
+   */
+  imageComprovante: string | null;
+
+  /**
+   * 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;
+
+  /**
+   * A propriedade smallPhoto define quando vai ser foto pequena exemplo para manutenção : foto1 em baixo o texto informando o lado :direito , esquerdo ou frente.
+   */
+  smallText: boolean;
+
+  title: {
+    text: string;
+    textSmallPhoto?: string;
+  };
+}
+
+/**
+ * EXPORTS
+ */
+export type { ICapturePhotoProps };

package/src/components/capture-photo/styles.ts

@@ -0,0 +1,24 @@
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+
+// typing
+import { ICapturePhotoProps } from "./interface";
+import { stylesGlobal } from "../../styles/global/styles";
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface CapturePhotoProps extends ICapturePhotoProps, IGlobalCss {}
+const styles = (props: CapturePhotoProps) =>
+  StyleSheet.create({
+    capturePhoto: {
+      ...stylesGlobal(props),
+      opacity: props.opacity,
+      ...props,
+    } as IGlobalCss,
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/card-hours/index.tsx

@@ -0,0 +1,118 @@
+/**
+ * IMPORTS
+ */ import React from "react";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// typing
+import { ICardHoursProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const CardHours: React.FC<ICardHoursProps> = ({
+  hoursWorked,
+  handleFormatDataInDayMonthYearNotHours,
+  width,
+  height,
+  marginStyle,
+  paddingStyle,
+  flexStyle,
+  text,
+  borderStyled,
+  color,
+  fontStyle,
+  backgroundColor,
+  sizeHours,
+  sizeDescription,
+  style,
+  testID,
+}) => {
+  const styleProps = {
+    width,
+    height,
+    marginStyle,
+    paddingStyle,
+    flexStyle,
+    text,
+    borderStyled,
+    color,
+    fontStyle,
+    backgroundColor,
+    sizeHours,
+    sizeDescription,
+    style,
+    testID,
+  } as ICardHoursProps;
+
+  return (
+    <Box
+      testID={testID}
+      width={width ?? "100%"}
+      height={height}
+      backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+      borderStyled={{
+        borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
+        borderColor: borderStyled?.borderColor ?? theme.colors.gray[400],
+        borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick_medium,
+      }}
+    >
+      <Typography
+        text={text ?? "Informe texto:"}
+        size={Number(styleProps.fontStyle?.fontSize)}
+        fontFamily={styleProps.fontStyle?.fontFamily}
+        color={color?.colorText ?? theme.colors.gray[700]}
+        lineHeight={fontStyle?.lineHeight ?? theme.fontSizes.xl}
+        letterSpacing={"regular"}
+        paddingTop={theme.paddings["2xs"]}
+        paddingLeft={theme.paddings["2xs"]}
+      />
+
+      <Box
+        flexStyle={{
+          flexDirection: "row",
+          alignItems: "flex-end",
+          justifyContent: "space-between",
+        }}
+        paddingStyle={{
+          paddingLeft: theme.paddings["2xs"],
+          paddingRight: theme.paddings["2xs"],
+        }}
+        backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+        width={"100%"}
+        borderStyled={{
+          borderBottomLeftRadius:
+            borderStyled?.borderBottomLeftRadius ?? theme.borderWidths.thick_medium,
+          borderBottomRightRadius:
+            borderStyled?.borderBottomRightRadius ?? theme.borderWidths.thick_medium,
+        }}
+      >
+        <Typography
+          text={`${hoursWorked ?? "00:00 H"}`}
+          size={sizeHours ?? theme.fontSizes["3xl"]}
+          fontFamily={theme.fonts.inter_bold ?? "inter_bold"}
+          fontWeight="700"
+          color={color?.colorTextBold ?? theme.colors.orange[150]}
+          lineHeight={fontStyle?.lineHeight ?? theme.fontSizes["5xl"]}
+          letterSpacing={"regular"}
+        />
+
+        <Typography
+          text={`Última atualização: ${handleFormatDataInDayMonthYearNotHours(new Date())}`}
+          size={sizeDescription ?? theme.fontSizes.xs}
+          fontFamily={"inter_light_300"}
+          color={color?.colorTextData ?? theme.colors.gray[700]}
+          lineHeight={fontStyle?.lineHeight ?? theme.fontSizes["xl"]}
+          letterSpacing={"regular"}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { CardHours };

package/src/components/card-hours/interface.d.ts

@@ -0,0 +1,37 @@
+/*
+ * IMPORTS
+ */
+import { ViewProps } from "react-native";
+
+/**
+ * INTERFACE
+ */
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface ICardHoursProps extends ViewProps, IGlobalCss {
+  /**
+   *  props que mostra os valores de horas trabalhadas
+   */
+  hoursWorked: string | null;
+
+  /**
+   *  props que mostra a data do horário correspondentes para a ultima atualização
+   */
+  // eslint-disable-next-line no-unused-vars
+  handleFormatDataInDayMonthYearNotHours: (date: Date) => {};
+
+  /**
+   * props que mostra o tamanho da fonte
+   */
+  sizeDescription?: number;
+
+  /**
+   * props que mostra o tamanho da fonte
+   */
+  sizeHours?: number;
+}
+
+/**
+ * EXPORTS
+ */
+export type { ICardHoursProps };

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

@@ -0,0 +1,138 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Dimensions } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// typings
+import { ICardScheduledJourney } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+// icons / svg
+import { Icons } from "../../common/icons-svg";
+
+/**
+ * Componente CardScheduledJourney para a interação da  ui.
+ */
+const CardScheduledJourney: React.FC<ICardScheduledJourney> = ({
+  title,
+  duracao,
+  color = {},
+  backgroundColor,
+  borderStyled,
+  paddingStyle,
+  marginStyle,
+  flexStyle,
+  style,
+  width,
+  widthChildren,
+  icon,
+  borderRight,
+}) => {
+  const { width: widthScreen } = Dimensions.get("window");
+  const isMobile = widthScreen < 768;
+  return (
+    <Box
+      style={style}
+      width={width}
+      height={80}
+      backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+      borderStyled={{
+        borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
+        borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick,
+        borderColor: borderStyled?.borderColor ?? theme.colors.gray[700],
+      }}
+    >
+      {/**CHILDREN */}
+      <Box
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+        backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+        width={widthChildren}
+        borderStyled={{
+          borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick,
+        }}
+        paddingStyle={{
+          paddingLeft: paddingStyle?.paddingLeft ?? 8,
+        }}
+      >
+        {/**ICONE*/}
+        <Box
+          width={65}
+          height={65}
+          backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+          flexStyle={{
+            flexDirection: flexStyle?.flexDirection ?? "column",
+            justifyContent: flexStyle?.justifyContent ?? "center",
+            alignItems: flexStyle?.alignItems ?? "center",
+          }}
+          borderStyled={{
+            borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
+            borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick,
+            borderColor: borderStyled?.borderColor ?? theme.colors.gray[700],
+          }}
+        >
+          {icon && <Icons icon={icon} size={theme.fontSizes["2xl"]} />}
+        </Box>
+
+        {/**TITLE E DESCRIÇÃO */}
+        <Box
+          width={isMobile ? "72%" : "90%"}
+          backgroundColor={theme.colors.neutral[25]}
+          flexStyle={{
+            flexDirection: "column",
+            justifyContent: "space-between",
+          }}
+          marginStyle={{ marginTop: marginStyle?.marginTop ?? -20 }}
+        >
+          <Typography
+            text={title}
+            size={theme.fontSizes.sm}
+            fontWeight={"700"}
+            fontFamily={theme.fonts.inter_bold_700}
+            color={color.colorText ?? theme.colors.black[25]}
+            lineHeight={theme.fontSizes["2xl"]}
+            letterSpacing={"regular"}
+          />
+
+          <Typography
+            text={`Duração: ${duracao}`}
+            size={theme.fontSizes.sm}
+            fontWeight={"300"}
+            fontFamily={theme.fonts.inter_light_300}
+            color={color.colorText ?? theme.colors.black[25]}
+            lineHeight={theme.fontSizes["2xl"]}
+            letterSpacing={"regular"}
+          />
+        </Box>
+
+        {/**BORDAR */}
+        <Box
+          width={12}
+          height={79}
+          backgroundColor={borderRight ?? theme.colors.green[400]}
+          borderStyled={{
+            borderWidth: theme.borderWidths.thin,
+            borderTopRightRadius: theme.borderWidths.thick,
+            borderBottomRightRadius: theme.borderWidths.thick,
+            borderColor: borderRight ?? theme.colors.green[400],
+          }}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { CardScheduledJourney };

package/src/components/card-scheduled-journey/interface.ts

@@ -0,0 +1,42 @@
+/*
+ * IMPORTS
+ */
+import { DimensionValue, ViewProps } from "react-native";
+
+/**
+ * INTERFACE
+ */
+import { IGlobalCss } from "../../styles/global/interface";
+import { SVG_NAME } from "../../common/icons-svg/constants";
+
+interface ICardScheduledJourney extends ViewProps, IGlobalCss {
+  /**
+   *  props que mostra o titulo correspondentes para a ultima atualização
+   */
+  title: string;
+
+  /**
+   *  props que mostra a duração correspondentes para a ultima atualização
+   */
+  duracao: string;
+
+  /**
+   * A propriedade CSS width define a largura de um elemento. A largura de um elemento é a distância do topo da borda esquerda do elemento ao fundo da borda direita.
+   */
+  widthChildren?: number | DimensionValue;
+
+  /**
+   * A propriedade que define o tipo que icones serao usados
+   */
+  icon?: keyof typeof SVG_NAME;
+
+  /**
+   * A propriedade CSS borderRight define a cor de fundo de um elemento do lado direito.
+   */
+  borderRight?: string;
+}
+
+/**
+ * EXPORTS
+ */
+export type { ICardScheduledJourney };

package/src/components/card-scheduled-journey/styles.ts

@@ -0,0 +1,26 @@
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+
+// typing
+import { ICardScheduledJourney } from "./interface";
+import { IGlobalCss } from "../../styles/global/interface";
+
+// styles
+import { stylesGlobal } from "../../styles/global/styles";
+
+interface CardScheduledJourneyProps extends ICardScheduledJourney, IGlobalCss {}
+
+const styles = (props: CardScheduledJourneyProps) =>
+  StyleSheet.create({
+    cardScheduledJourney: {
+      ...stylesGlobal(props),
+      ...props,
+    } as ICardScheduledJourney,
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

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

@@ -0,0 +1,128 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Dimensions, TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// typings
+import { IHeaderProps } from "./interface";
+
+// commons
+import { Icons } from "../../common/icons-svg";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente Header para a interação do usuário com ui.
+ */
+const Header: React.FC<IHeaderProps> = ({
+  title,
+  color,
+  testID,
+  arrow,
+  // propsNav,
+  permission,
+  bluetoothIsConnected,
+  isInternetReachable,
+  handleNavigation,
+}) => {
+  const { width: widthScreen } = Dimensions.get("window");
+  const isMobile = widthScreen < 768;
+
+  return (
+    <Box
+      testID={testID}
+      width={"100%"}
+      height={45}
+      backgroundColor={theme.colors.blue[500]}
+      flexStyle={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}
+    >
+      <Box
+        width={"10%"}
+        height={45}
+        backgroundColor={theme.colors.blue[500]}
+        flexStyle={{ flexDirection: "column", justifyContent: "center", alignItems: "flex-start" }}
+        paddingStyle={{ paddingLeft: 16 }}
+      >
+        {arrow && title !== "Login" && (
+          <TouchableOpacity
+            disabled={!arrow}
+            onPress={handleNavigation}
+            style={{
+              width: 50,
+              height: 45,
+              flexDirection: "column",
+              alignItems: "flex-start",
+              justifyContent: "center",
+            }}
+          >
+            {title === "Controle de Jornada" ? (
+              <>
+                <Icons icon="LIST" color="#fff" />
+                <Box marginStyle={{ marginBottom: 8 }} />
+              </>
+            ) : (
+              arrow && <Icons icon="ARROW_LEFT" />
+            )}
+          </TouchableOpacity>
+        )}
+      </Box>
+
+      <Box
+        width={"68%"}
+        height={45}
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "center",
+          flex: 0.9,
+        }}
+      >
+        <Typography
+          text={title ? title : "Login"}
+          size={15.4}
+          fontFamily="inter_bold"
+          color={color?.colorText ?? theme.colors.neutral[25]}
+          lineHeight={theme.fontSizes["2xl"]}
+          letterSpacing={"regular"}
+          marginLeft={30}
+        />
+      </Box>
+
+      <Box
+        marginStyle={{ marginRight: isMobile ? 10 : 60 }}
+        borderStyled={{ borderRadius: 10 }}
+        width={50}
+        height={24}
+      >
+        {permission ? (
+          <Box marginStyle={{ marginTop: 2 }} />
+        ) : (
+          <Box
+            marginStyle={{ marginTop: 2 }}
+            flexStyle={{ flexDirection: "row", justifyContent: "space-between" }}
+          >
+            <Icons
+              icon={bluetoothIsConnected ? "BLUETOOTH_CONNECTED" : "BLUETOOTH"}
+              color={bluetoothIsConnected ? theme.colors.green[400] : theme.colors.red[900]}
+            />
+            <Icons
+              icon={isInternetReachable ? "WIFI_HIGH" : "WIFI_X"}
+              color={isInternetReachable ? theme.colors.orange[150] : theme.colors.red[800]}
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { Header };