jornada-ui 0.2.4

package/src/components/card-work-session/index.tsx

@@ -0,0 +1,172 @@
+/**
+ * Imports
+ */
+import React, { forwardRef } from "react";
+import { Image, TouchableOpacity } from "react-native";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+import { IMAGES } from "../../common/constants";
+
+// typings
+import { type ICardWorkSession } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+const CardWorkSession = forwardRef<any, ICardWorkSession>((props, ref): React.ReactElement => {
+  const {
+    name = "Weverson L.S",
+    workDate = "25/01/2025",
+    timeWork = "",
+    initialTime = "11:40",
+    duration = "05:20",
+    avatar = "",
+    backgroundColor,
+    width,
+    handleNavigation,
+  } = props;
+  return (
+    <Box
+      ref={ref}
+      width={width}
+      paddingStyle={{ padding: theme.paddings.md }}
+      borderStyled={{
+        borderBottomWidth: theme.borderWidths.thin,
+        borderColor: backgroundColor ?? theme.colors.neutral[200],
+      }}
+      backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+      style={{
+        position: "relative",
+      }}
+    >
+      {/* Cabeçalho com imagem e ícone */}
+      <Box
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <TouchableOpacity onPress={handleNavigation}>
+          <Image
+            style={{
+              width: 50,
+              height: 50,
+              borderRadius: 25,
+              borderWidth: theme.borderWidths.thin_medium,
+              borderColor: theme.colors.blue[500],
+            }}
+            source={{ uri: avatar || IMAGES.IMAGE_ANONIMA }}
+          />
+        </TouchableOpacity>
+
+        <Box style={{ position: "absolute", left: 57, top: 5 }}>
+          <Box flexStyle={{ flexDirection: "row" }} marginStyle={{ marginTop: -5 }}>
+            <Typography
+              text={"Jornada Trabalho: "}
+              fontFamily={theme.fonts.inter_bold_700}
+              size={12}
+              color={theme.colors.black[100]}
+              letterSpacing={"regular"}
+            />
+            <Typography
+              text={workDate}
+              size={12}
+              fontFamily={theme.fonts.inter_regular_400}
+              color={theme.colors.gray[800]}
+            />
+          </Box>
+
+          <Box flexStyle={{ flexDirection: "row" }} marginStyle={{ marginTop: -5 }}>
+            <Typography
+              text={"Tempo Jornada: "}
+              size={11}
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_bold_700}
+              letterSpacing={"regular"}
+            />
+
+            <Typography
+              text={timeWork}
+              size={11}
+              fontFamily={theme.fonts.inter_regular_400}
+              color={theme.colors.gray[800]}
+              letterSpacing={"regular"}
+            />
+          </Box>
+        </Box>
+
+        <Icons icon={"BELL"} size={28} />
+      </Box>
+
+      <Box
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <Typography
+          text={`Olá, ${name}`}
+          size={16}
+          color={theme.colors.black[100]}
+          fontFamily={theme.fonts.inter_bold_700}
+          marginLeft={-5}
+        />
+
+        {/* Seção de horário */}
+        <Box flexStyle={{ flexDirection: "row" }}>
+          <Box marginStyle={{ marginRight: 15 }}>
+            <Typography
+              text={`${initialTime}`}
+              size={15}
+              align="center"
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+            />
+
+            <Typography
+              text={"INÍCIO"}
+              size={10}
+              align="center"
+              color={theme.colors.neutral[200]}
+              fontFamily={theme.fonts.inter_medium_500}
+              marginTop={-8}
+            />
+          </Box>
+          <Box>
+            <Typography
+              text={`${duration}`}
+              size={15}
+              align="center"
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+            />
+
+            <Typography
+              text={"DURAÇÃO"}
+              size={10}
+              align="center"
+              color={theme.colors.neutral[200]}
+              fontFamily={theme.fonts.inter_medium_500}
+              marginTop={-8}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+});
+
+CardWorkSession.displayName = "CardWorkSession";
+
+/**
+ * Componente CardWorkSession para a interação da  ui.
+ */
+export default asBaseComponent(CardWorkSession);

package/src/components/card-work-session/interface.d.ts

@@ -0,0 +1,150 @@
+/*
+ * IMPORTS
+ */
+import type React from "react";
+import { ViewProps, type DimensionValue } from "react-native";
+
+/**
+ * INTERFACE
+ */
+type ICardWorkSession = ViewProps & {
+  /**
+   * props que mostra o nome do usuário
+   */
+  name: string;
+
+  /**
+   * props que mostra a data
+   */
+  workDate: string;
+
+  /**
+   * props que mostra o tempo de jornada
+   */
+  timeWork?: string;
+
+  /**
+   * props que mostra o horário inicial
+   */
+  initialTime?: string;
+
+  /**
+   * props que mostra a duração
+   */
+  duration?: string;
+
+  /**
+   * props que mostra o avatar do usuário
+   */
+  avatar: string;
+
+  handleNavigation: () => void;
+
+  children?: React.ReactNode;
+
+  /**
+   * TestID para testes automático e identificação
+   */
+  testID?: string;
+
+  /**
+   * A propriedade CSS abreviada border define a borda de um elemento. Ele define os valores de largura da borda, estilo da borda e cor da borda.
+   */
+  borderStyled?: {
+    borderStyle?: "solid" | "dotted" | "dashed";
+
+    borderRadius?: number | DimensionValue;
+    borderTopRightRadius?: number | DimensionValue;
+    borderTopLeftRadius?: number | DimensionValue;
+    borderBottomRightRadius?: number | DimensionValue;
+    borderBottomLeftRadius?: number | DimensionValue;
+
+    borderWidth?: number | DimensionValue;
+    borderLeftWidth?: number | DimensionValue;
+    borderRightWidth?: number | DimensionValue;
+    borderTopWidth?: number | DimensionValue;
+    borderBottomWidth?: number | DimensionValue;
+
+    borderColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderRightColor?: string;
+    borderTopColor?: string;
+  };
+
+  /**
+   * Propriedades que define a orientação do button que é usada para representar uma página. Na maioria das vezes, esse valores corresponde ao posicionamento alvo da página impressa, se aplicável.
+   */
+  flexStyle?: {
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    flex?: string | number;
+    flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    textAlign?: "auto" | "center" | "left" | "right" | "justify";
+    justifyContent?:
+      | "flex-start"
+      | "flex-end"
+      | "center"
+      | "space-between"
+      | "space-around"
+      | "space-evenly";
+  };
+
+  /**
+   * 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).
+   */
+  marginStyle?: {
+    margin?: number | DimensionValue;
+    marginLeft?: number | DimensionValue;
+    marginRight?: number | DimensionValue;
+    marginTop?: number | DimensionValue;
+    marginBottom?: number | DimensionValue;
+  };
+
+  /**
+   * 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).
+   */
+  paddingStyle?: {
+    padding?: number | DimensionValue;
+    paddingLeft?: number | DimensionValue;
+    paddingRight?: number | DimensionValue;
+    paddingTop?: number | DimensionValue;
+    paddingBottom?: number | DimensionValue;
+  };
+
+  /**
+   * A propriedade CSS height define a altura de um elemento. A altura de um elemento é a distância do topo da borda superior do elemento ao fundo da borda inferior.
+   */
+  height?: number | DimensionValue;
+
+  /**
+   * 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.
+   */
+  width?: number | DimensionValue;
+
+  /**
+   * O fundo abreviado CSS Propriedade define todas as propriedades do estilo de fundo de uma só vez, como cor, imagem, origem e tamanho ou método de repetição. As propriedades dos componentes não definidas no fundo da declaração de valor da propriedade abreviada são definidas como seus valores padrão..
+   */
+  backgroundColor?: string;
+
+  /**
+   * Propriedade texto que sera 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?: {
+    colorSvg?: string;
+    colorText?: string;
+    colorTextBold?: string;
+    colorTextData?: string;
+  };
+};
+
+/**
+ * EXPORTS
+ */
+export type { ICardWorkSession };

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

@@ -0,0 +1,137 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import { type IHeaderProps } from "./interface";
+
+// commons
+import { Icons } from "../../common/icons-svg";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const HeaderNavigation = forwardRef<any, IHeaderProps>((props, ref): React.ReactElement => {
+  const {
+    title,
+    color,
+    testID,
+    arrow,
+    // propsNav,
+    permission,
+    bluetoothIsConnected,
+    isInternetReachable,
+    handleNavigation,
+  } = props;
+
+  return (
+    <Box
+      ref={ref}
+      testID={testID}
+      width={"100%"}
+      backgroundColor={theme.colors.blue[525]}
+      flexStyle={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}
+    >
+      <Box
+        width={"20%"}
+        backgroundColor={theme.colors.blue[525]}
+        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={theme.colors.neutral[25]} />
+                <Box marginStyle={{ marginBottom: 8 }} />
+              </>
+            ) : (
+              arrow && <Icons icon="ARROW_LEFT" />
+            )}
+          </TouchableOpacity>
+        )}
+      </Box>
+
+      <Box
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "center",
+          flex: 1,
+        }}
+      >
+        <Typography
+          text={title ? title : "Login"}
+          size={theme.fontSizes.md}
+          fontFamily="inter_bold"
+          fontWeight="700"
+          align="center"
+          color={color?.colorText ?? theme.colors.neutral[25]}
+          lineHeight={theme.fontSizes["2xl"]}
+          letterSpacing={"regular"}
+        />
+      </Box>
+
+      <Box
+        backgroundColor={theme.colors.blue[525]}
+        width={"20%"}
+        flexStyle={{
+          alignItems: "center",
+          justifyContent: "flex-end",
+          flexDirection: "row",
+        }}
+        paddingStyle={{
+          paddingLeft: 16,
+          paddingRight: 16,
+        }}
+      >
+        {permission ? (
+          <Box marginStyle={{ marginTop: 2 }} />
+        ) : (
+          <>
+            <Box
+              marginStyle={{ marginRight: 8 }}
+              flexStyle={{ flexDirection: "row", justifyContent: "space-between" }}
+            >
+              {bluetoothIsConnected && (
+                <Icons
+                  icon={bluetoothIsConnected ? "BLUETOOTH_CONNECTED" : "BLUETOOTH"}
+                  color={bluetoothIsConnected ? theme.colors.green[400] : theme.colors.red[900]}
+                />
+              )}
+            </Box>
+
+            <Box flexStyle={{ flexDirection: "row", justifyContent: "space-between" }}>
+              <Icons
+                icon={isInternetReachable ? "WIFI_HIGH" : "WIFI_X"}
+                color={isInternetReachable ? theme.colors.orange[150] : theme.colors.red[800]}
+              />
+            </Box>
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+});
+
+/**
+ * Componente HeaderNavigation para a interação da  ui.
+ */
+export default asBaseComponent(HeaderNavigation);

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

@@ -0,0 +1,143 @@
+/**
+ * IMPORTS
+ */
+import type React from "react";
+import { ViewProps, type DimensionValue } from "react-native";
+
+type IHeaderProps = ViewProps & {
+  title: 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
+   */
+
+  handleNavigation: () => void;
+
+  children?: React.ReactNode;
+
+  /**
+   * TestID para testes automático e identificação
+   */
+  testID?: string;
+
+  /**
+   * A propriedade CSS abreviada border define a borda de um elemento. Ele define os valores de largura da borda, estilo da borda e cor da borda.
+   */
+  borderStyled?: {
+    borderStyle?: "solid" | "dotted" | "dashed";
+
+    borderRadius?: number | DimensionValue;
+    borderTopRightRadius?: number | DimensionValue;
+    borderTopLeftRadius?: number | DimensionValue;
+    borderBottomRightRadius?: number | DimensionValue;
+    borderBottomLeftRadius?: number | DimensionValue;
+
+    borderWidth?: number | DimensionValue;
+    borderLeftWidth?: number | DimensionValue;
+    borderRightWidth?: number | DimensionValue;
+    borderTopWidth?: number | DimensionValue;
+    borderBottomWidth?: number | DimensionValue;
+
+    borderColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderRightColor?: string;
+    borderTopColor?: string;
+  };
+
+  /**
+   * Propriedades que define a orientação do button que é usada para representar uma página. Na maioria das vezes, esse valores corresponde ao posicionamento alvo da página impressa, se aplicável.
+   */
+  flexStyle?: {
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    flex?: string | number;
+    flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    textAlign?: "auto" | "center" | "left" | "right" | "justify";
+    justifyContent?:
+      | "flex-start"
+      | "flex-end"
+      | "center"
+      | "space-between"
+      | "space-around"
+      | "space-evenly";
+  };
+
+  /**
+   * 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).
+   */
+  marginStyle?: {
+    margin?: number | DimensionValue;
+    marginLeft?: number | DimensionValue;
+    marginRight?: number | DimensionValue;
+    marginTop?: number | DimensionValue;
+    marginBottom?: number | DimensionValue;
+  };
+
+  /**
+   * 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).
+   */
+  paddingStyle?: {
+    padding?: number | DimensionValue;
+    paddingLeft?: number | DimensionValue;
+    paddingRight?: number | DimensionValue;
+    paddingTop?: number | DimensionValue;
+    paddingBottom?: number | DimensionValue;
+  };
+
+  /**
+   * A propriedade CSS height define a altura de um elemento. A altura de um elemento é a distância do topo da borda superior do elemento ao fundo da borda inferior.
+   */
+  height?: number | DimensionValue;
+
+  /**
+   * 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.
+   */
+  width?: number | DimensionValue;
+
+  /**
+   * O fundo abreviado CSS Propriedade define todas as propriedades do estilo de fundo de uma só vez, como cor, imagem, origem e tamanho ou método de repetição. As propriedades dos componentes não definidas no fundo da declaração de valor da propriedade abreviada são definidas como seus valores padrão..
+   */
+  backgroundColor?: 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?: {
+    colorSvg?: string;
+    colorText?: string;
+    colorTextBold?: string;
+    colorTextData?: string;
+  };
+};
+
+/**
+ * EXPORTS
+ */
+export type { IHeaderProps };

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

@@ -0,0 +1,95 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { useState } from "react";
+import { View, Text, TouchableOpacity, Modal, FlatList } from "react-native";
+
+// commons / svg
+import { Icons } from "../../../common/icons-svg";
+
+// typings
+import { asBaseComponent } from "../../../@types/as-base-component";
+import type { ISelectDropDownProps } from "./interface";
+
+// styles
+import { styles } from "./styles";
+import { theme } from "../../../styles/theme/theme";
+
+const SelectOption = forwardRef<any, ISelectDropDownProps>((props, ref): React.ReactElement => {
+  const { dataOption, handleSelectDown, titleLabel, sizeTitleLabel, colortitleLabel } = props;
+
+  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 ref={ref} 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>
+  );
+});
+
+/**
+ * Componente SelectOption para a interação da  ui.
+ */
+export default asBaseComponent(SelectOption);