react-native-exp-fig 0.1.9 → 0.1.10

package/src/components/activities-daily/index.tsx

@@ -0,0 +1,116 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../../components/box";
+import { Typography } from "../../components/typography";
+
+//commons/ icons
+import { Icons } from "../../common/icons-svg";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import { IActivitiesDaily } from "./interface";
+
+const ActivitiesDaily: React.FC<IActivitiesDaily> = ({ handleActivity }) => {
+  return (
+    <Box
+      testID={"activities-daily"}
+      width={"100%"}
+      height={100}
+      backgroundColor={theme.colors.neutral[25]}
+      borderStyled={{
+        borderRadius: theme.borderWidths.thick_medium,
+      }}
+    >
+      <Box
+        width={"100%"}
+        height={30}
+        backgroundColor={theme.colors.blue[400]}
+        borderStyled={{
+          borderTopLeftRadius: theme.borderWidths.thin_bold,
+          borderTopRightRadius: theme.borderWidths.thin_bold,
+          borderColor: theme.colors.blue[400],
+        }}
+        flexStyle={{
+          justifyContent: "center",
+        }}
+      >
+        <Typography
+          text={"Atividades diárias"}
+          color={theme.colors.neutral[25]}
+          size={theme.fontSizes.sm}
+          fontFamily={theme.fonts.inter_medium_500}
+          fontWeight={"500"}
+          lineHeight={theme.fontSizes.lg}
+          marginLeft={theme.margins["2xs"]}
+        />
+      </Box>
+      <Box
+        width={"100%"}
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+        paddingStyle={{
+          padding: theme.paddings["2xs"],
+        }}
+      >
+        <Typography
+          text={"Selecione uma das opções"}
+          color={theme.colors.blue[500]}
+          size={theme.fontSizes.xs}
+          fontFamily={theme.fonts.inter_bold_700}
+          fontWeight={"700"}
+          lineHeight={theme.fontSizes.md}
+        />
+
+        <Box flexStyle={{ flexDirection: "row" }} marginStyle={{ marginTop: 5 }}>
+          <TouchableOpacity
+            activeOpacity={0.7}
+            style={{ marginRight: theme.margins.xl, alignItems: "center" }}
+            onPress={() => handleActivity("trabalho")}
+          >
+            <Icons icon={"TRUCK_ACTIVITY"} />
+            <Typography
+              text={"Trabalho"}
+              color={theme.colors.black[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_bold_700}
+              fontWeight={"700"}
+              lineHeight={theme.fontSizes.sm}
+              marginTop={4}
+            />
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            activeOpacity={0.7}
+            style={{ alignItems: "center" }}
+            onPress={() => handleActivity("descanso")}
+          >
+            <Icons icon={"BED"} />
+            <Typography
+              text={"Descanso"}
+              color={theme.colors.black[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_bold_700}
+              fontWeight={"700"}
+              lineHeight={theme.fontSizes.sm}
+              marginTop={4}
+            />
+          </TouchableOpacity>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { ActivitiesDaily };

package/src/components/activities-daily/interface.d.ts

@@ -0,0 +1,22 @@
+/**
+ * IMPORTS
+ */
+
+import { type ViewProps } from "react-native";
+/**
+ * INTERFACE
+ */
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface IActivitiesDaily extends ViewProps, IGlobalCss {
+  /**
+   * function que pega o valor do tipo de atividade
+   */
+  // eslint-disable-next-line no-unused-vars
+  handleActivity: (activity: string) => void;
+}
+
+/**
+ * EXPORT
+ */
+export type { IActivitiesDaily };

package/src/components/activities-progress/index.tsx

@@ -0,0 +1,162 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+
+// components
+import { Box } from "../../components/box";
+import { Typography } from "../../components/typography";
+
+//commons/ icons
+import { Icons } from "../../common/icons-svg";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import { IActivitiesProgress } from "./interface";
+
+const ActivitiesProgress: React.FC<IActivitiesProgress> = ({
+  data_fim = "11/05/2025",
+  duracao = "00:30",
+  data_inicio = "17:20",
+  titleLabel = "Descanso",
+  situation = true,
+}) => {
+  return (
+    <Box
+      width={"100%"}
+      height={100}
+      backgroundColor={theme.colors.neutral[25]}
+      borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+    >
+      <Box
+        width={"100%"}
+        height={30}
+        backgroundColor={theme.colors.blue[400]}
+        borderStyled={{
+          borderTopLeftRadius: theme.borderWidths.thin_bold,
+          borderTopRightRadius: theme.borderWidths.thin_bold,
+          borderColor: theme.colors.blue[400],
+        }}
+        flexStyle={{
+          justifyContent: "space-between",
+          flexDirection: "row",
+        }}
+      >
+        <Box
+          flexStyle={{
+            flexDirection: "row",
+            alignItems: "center",
+          }}
+        >
+          <Typography
+            text={"Status: "}
+            color={theme.colors.neutral[25]}
+            size={theme.fontSizes.sm}
+            fontFamily={theme.fonts.inter_medium_500}
+            fontWeight={"500"}
+            lineHeight={theme.fontSizes.lg}
+            marginLeft={theme.margins["2xs"]}
+          />
+          <Typography
+            text={titleLabel}
+            color={titleLabel === "Trabalho" ? theme.colors.green[400] : theme.colors.orange[500]}
+            size={theme.fontSizes.sm}
+            fontFamily={theme.fonts.inter_semi_bold_600}
+            fontWeight={"600"}
+            lineHeight={theme.fontSizes.lg}
+          />
+        </Box>
+
+        <Box
+          style={{ marginRight: theme.margins["2xs"], marginTop: theme.margins["1xs"] }}
+          height={20}
+          width={20}
+        >
+          <Icons
+            icon={"CHECK_OUTLINE"}
+            color={situation ? theme.colors.green[400] : theme.colors.orange[500]}
+          />
+        </Box>
+      </Box>
+
+      <Box
+        width={"100%"}
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+        paddingStyle={{
+          padding: theme.paddings["2xs"],
+        }}
+      >
+        <Box height={20} flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+          <Icons icon={"COFFEE"} size={24} />
+          <Typography
+            text={data_fim}
+            color={theme.colors.black[25]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_bold_700}
+            fontWeight={"700"}
+            lineHeight={theme.fontSizes.lg}
+            marginLeft={4}
+          />
+        </Box>
+
+        <Box height={50} flexStyle={{ flexDirection: "row", alignItems: "flex-end" }}>
+          <Box
+            flexStyle={{ alignItems: "center" }}
+            marginStyle={{ marginRight: theme.margins["2xs"] }}
+          >
+            <Typography
+              text={data_inicio}
+              color={theme.colors.blue[500]}
+              size={theme.fontSizes.sm}
+              fontFamily={theme.fonts.inter_bold}
+              fontWeight={"700"}
+              lineHeight={theme.fontSizes.md}
+            />
+            <Typography
+              text={"INICIO"}
+              color={theme.colors.gray[600]}
+              size={theme.fontSizes["2xs"]}
+              fontFamily={theme.fonts.inter_medium_500}
+              fontWeight={"500"}
+              lineHeight={theme.fontSizes.xs}
+              marginTop={4}
+            />
+          </Box>
+
+          <Box
+            flexStyle={{ alignItems: "center" }}
+            marginStyle={{ marginRight: theme.margins["2xs"] }}
+          >
+            <Typography
+              text={duracao}
+              color={theme.colors.blue[500]}
+              size={theme.fontSizes.sm}
+              fontFamily={theme.fonts.inter_bold}
+              fontWeight={"700"}
+              lineHeight={theme.fontSizes.md}
+            />
+            <Typography
+              text={"DURAÇÃO"}
+              color={theme.colors.gray[600]}
+              size={theme.fontSizes["2xs"]}
+              fontFamily={theme.fonts.inter_medium_500}
+              fontWeight={"500"}
+              lineHeight={theme.fontSizes.xs}
+              marginTop={4}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { ActivitiesProgress };

package/src/components/activities-progress/interface.d.ts

@@ -0,0 +1,41 @@
+/**
+ * IMPORTS
+ */
+
+import { type ViewProps } from "react-native";
+/**
+ * INTERFACE
+ */
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface IActivitiesProgress extends ViewProps, IGlobalCss {
+  /**
+   * Data de fim da atividade
+   */
+  data_fim?: string;
+
+  /**
+   * Duração da atividade
+   */
+  duracao?: string;
+
+  /**
+   * Horário de início da atividade
+   */
+  data_inicio?: string;
+
+  /**
+   * Título/label da atividade
+   */
+  titleLabel?: string;
+
+  /**
+   * Situação da atividade
+   */
+  situation: boolean;
+}
+
+/**
+ * EXPORT
+ */
+export type { IActivitiesProgress };

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

@@ -0,0 +1,95 @@
+import React from "react";
+import { TouchableOpacity, Image } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+// icons
+import { Icons } from "../../common/icons-svg";
+
+// types
+import { IAvatarProfile } from "./interface";
+
+const AvatarProfile: React.FC<IAvatarProfile> = ({
+  avatar,
+  isEdit = false,
+  handleTakePicker,
+  name,
+  email,
+  testID,
+}) => {
+  return (
+    <Box flexStyle={{ justifyContent: "center", alignItems: "center" }}>
+      <Box
+        backgroundColor={theme.colors.neutral[25]}
+        width={96}
+        height={96}
+        borderStyled={{ borderRadius: 50 }}
+        flexStyle={{ justifyContent: "center", alignItems: "center" }}
+        testID={testID}
+      >
+        <Image
+          source={{ uri: avatar ?? "" }}
+          alt={avatar ?? "foto de perfil"}
+          style={{
+            width: 90,
+            height: 90,
+            borderRadius: 45,
+            borderWidth: theme.borderWidths.thin_medium,
+            borderColor: theme.colors.black[25],
+          }}
+        />
+        {isEdit && (
+          <Box
+            width={20}
+            height={20}
+            backgroundColor={theme.colors.blue[350]}
+            borderStyled={{
+              borderRadius: 10,
+              borderWidth: theme.borderWidths.thin_medium,
+              borderColor: theme.colors.black[25],
+            }}
+            flexStyle={{ justifyContent: "center", alignItems: "center" }}
+            style={{
+              position: "absolute",
+              bottom: 5,
+              right: 5,
+            }}
+          >
+            <TouchableOpacity
+              activeOpacity={0.7}
+              onPress={handleTakePicker}
+              testID="avatar-profile"
+            >
+              <Icons size={12} icon={"PENCIL"} />
+            </TouchableOpacity>
+          </Box>
+        )}
+      </Box>
+
+      {/* Informações do usuário */}
+      <Typography
+        text={name}
+        size={theme.fontSizes.xl}
+        fontFamily={theme.fonts.inter_bold_700}
+        fontWeight={"700"}
+        lineHeight={theme.fontSizes["2xl"]}
+        color={theme.colors.black[100]}
+      />
+      <Typography
+        text={email}
+        size={theme.fontSizes.xs}
+        fontFamily={theme.fonts.inter_regular_400}
+        fontWeight={"400"}
+        lineHeight={theme.fontSizes.sm}
+        color={theme.colors.gray[900]}
+      />
+    </Box>
+  );
+};
+
+export { AvatarProfile };

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

@@ -0,0 +1,39 @@
+/**
+ * IMPORTS
+ */
+import { ViewProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface IAvatarProfile extends ViewProps, IGlobalCss {
+  /**
+   * Função que tira uma foto e editar.
+   */
+  handleTakePicker?: () => void;
+
+  /**
+   * foto do usuário.
+   */
+  avatar: string;
+
+  /**
+   * nome do usuário.
+   */
+  name: string;
+
+  /**
+   * email do usuário.
+   */
+  email: string;
+
+  /**
+   * A propriedade para editar a foto do usuário.
+   */
+  isEdit: boolean;
+}
+
+/**
+ * EXPORTS
+ */
+export type { IAvatarProfile };