react-native-exp-fig 0.1.1 → 0.1.3

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

@@ -1,138 +1,135 @@
-/**
- * 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 };
+/**
+ * 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.thin_bold,
+        borderColor: borderStyled?.borderColor ?? theme.colors.gray[700],
+      }}
+    >
+      {/**CHILDREN */}
+      <Box
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+        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={{
+            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 ? "73%" : "90%"}
+          flexStyle={{
+            flexDirection: "column",
+            justifyContent: "space-between",
+          }}
+          marginStyle={{ marginTop: marginStyle?.marginTop ?? -20 }}
+        >
+          <Typography
+            text={title}
+            size={theme.fontSizes.sm}
+            fontFamily={theme.fonts.inter_bold_700}
+            fontWeight={"700"}
+            color={color.colorText ?? theme.colors.black[25]}
+            lineHeight={theme.fontSizes.lg}
+            letterSpacing={"regular"}
+          />
+
+          <Typography
+            text={`Duração: ${duracao}`}
+            size={theme.fontSizes.xs}
+            fontWeight={"300"}
+            fontFamily={theme.fonts.inter_light_300}
+            color={color.colorText ?? theme.colors.black[25]}
+            lineHeight={theme.fontSizes.lg}
+            letterSpacing={"regular"}
+          />
+        </Box>
+
+        {/**BORDAR */}
+        <Box
+          width={12}
+          height={78}
+          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

@@ -1,42 +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 };
+/*
+ * 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

@@ -1,26 +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 };
+/**
+ * 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/card-work-session/index.tsx

@@ -0,0 +1,147 @@
+/**
+ * Imports
+ */
+import React from "react";
+import { Image } 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 { ICardWorkSession } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const CardWorkSession: React.FC<ICardWorkSession> = ({
+  name = "Weverson L.S",
+  workDate = "25/01/2025",
+  timeWork = "",
+  initialTime = "11:40",
+  duration = "05:20",
+  avatar = "",
+  width,
+}) => {
+  return (
+    <Box
+      width={width}
+      paddingStyle={{ padding: 15 }}
+      borderStyled={{ borderBottomWidth: 1, borderBottomColor: "#c6c6c6" }}
+      backgroundColor={theme.colors.neutral[25]}
+      style={{
+        position: "relative",
+      }}
+    >
+      {/* Cabeçalho com imagem e ícone */}
+      <Box
+        flexStyle={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}
+      >
+        <Image
+          style={{
+            width: 50,
+            height: 50,
+            borderRadius: 25,
+            borderWidth: 2,
+            borderColor: theme.colors.blue[500],
+          }}
+          source={{ uri: avatar || IMAGES.IMAGE_ANONIMA }}
+        />
+        <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}
+            />
+
+            <Typography
+              text={timeWork}
+              size={11}
+              fontFamily={theme.fonts.inter_regular_400}
+              color={theme.colors.gray[800]}
+            />
+          </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>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { CardWorkSession };

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

@@ -0,0 +1,46 @@
+/*
+ * IMPORTS
+ */
+import { ViewProps } from "react-native";
+
+/**
+ * INTERFACE
+ */
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface ICardWorkSession extends ViewProps, IGlobalCss {
+  /**
+   * 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;
+}
+
+/**
+ * EXPORTS
+ */
+export type { ICardWorkSession };