react-native-exp-fig 0.1.14 → 0.1.16

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

@@ -1,187 +1,187 @@
-/**
- * Imports
- */
-import React 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";
-
-// 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 = "",
-  counterBadge = 0,
-  backgroundColor,
-  handleNavigation,
-}) => {
-  return (
-    <Box
-      paddingStyle={{ padding: theme.paddings.md }}
-      borderStyled={{
-        borderBottomWidth: theme.borderWidths.thin,
-        borderColor: theme.colors.gray[400],
-      }}
-      backgroundColor={backgroundColor ?? theme.colors.gray[300]}
-      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: theme.borderWidths.thin_medium,
-            borderColor: theme.colors.blue[500],
-          }}
-          source={{
-            uri:
-              avatar ||
-              "https://static.vakinha.com.br/uploads/user/avatar/2251959/download.png?ims=225x225",
-          }}
-        />
-        <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={theme.fontSizes.sm}
-              color={theme.colors.black[100]}
-              letterSpacing={"regular"}
-            />
-            <Typography
-              text={workDate}
-              size={theme.fontSizes.xs}
-              fontFamily={theme.fonts.inter_regular_400}
-              color={theme.colors.black[100]}
-            />
-          </Box>
-          <Box flexStyle={{ flexDirection: "row" }}>
-            <Typography
-              text={"Tempo Jornada: "}
-              size={theme.fontSizes.sm}
-              color={theme.colors.black[100]}
-              fontFamily={theme.fonts.inter_bold_700}
-              letterSpacing={"regular"}
-            />
-
-            {timeWork && (
-              <Typography
-                text={timeWork}
-                size={theme.fontSizes.xs}
-                fontFamily={theme.fonts.inter_regular_400}
-                color={theme.colors.gray[800]}
-                letterSpacing={"regular"}
-              />
-            )}
-          </Box>
-        </Box>
-        <TouchableOpacity activeOpacity={0.7} onPress={handleNavigation}>
-          {counterBadge > 0 && (
-            <Box
-              backgroundColor={theme.colors.red[600]}
-              flexStyle={{ alignItems: "center", justifyContent: "center" }}
-              borderStyled={{ borderRadius: theme.borderWidths.hairline }}
-              style={[
-                counterBadge < 10
-                  ? { right: -5, top: -2, height: 16, width: 16 }
-                  : { right: -8, top: -5, padding: 2 },
-                { position: "absolute", zIndex: 10 },
-              ]}
-            >
-              <Typography
-                text={`${counterBadge}`}
-                align={"center"}
-                size={theme.fontSizes["2xs"]}
-                color={theme.colors.neutral[25]}
-                fontFamily={theme.fonts.inter_bold_700}
-                lineHeight={theme.fontSizes.sm}
-                letterSpacing={"regular"}
-              />
-            </Box>
-          )}
-          <Icons icon={"BELL"} size={28} style={{ position: "relative" }} />
-        </TouchableOpacity>
-      </Box>
-
-      <Box
-        flexStyle={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}
-      >
-        <Box width={"65%"}>
-          <Typography
-            text={`Olá, ${name}`}
-            size={16}
-            color={theme.colors.black[100]}
-            fontFamily={theme.fonts.inter_bold_700}
-            marginLeft={-5}
-          />
-        </Box>
-
-        {/* Seção de horário */}
-        <Box flexStyle={{ flexDirection: "row" }}>
-          <Box marginStyle={{ marginRight: 15 }}>
-            <Typography
-              text={`${initialTime}`}
-              size={theme.fontSizes.md}
-              align="center"
-              color={theme.colors.black[100]}
-              fontFamily={theme.fonts.inter_semi_bold_600}
-            />
-
-            <Typography
-              text={"INÍCIO"}
-              size={theme.fontSizes["2xs"]}
-              align="center"
-              color={theme.colors.black[100]}
-              fontFamily={theme.fonts.inter_medium_500}
-              fontWeight={"500"}
-              marginTop={-4}
-            />
-          </Box>
-
-          <Box>
-            <Typography
-              text={`${duration}`}
-              size={theme.fontSizes.md}
-              align="center"
-              color={theme.colors.black[100]}
-              fontFamily={theme.fonts.inter_semi_bold_600}
-            />
-
-            <Typography
-              text={"DURAÇÃO"}
-              size={theme.fontSizes["2xs"]}
-              align="center"
-              color={theme.colors.black[100]}
-              fontFamily={theme.fonts.inter_medium_500}
-              marginTop={-4}
-            />
-          </Box>
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { CardWorkSession };
+/**
+ * Imports
+ */
+import React 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";
+
+// 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 = "",
+  counterBadge = 0,
+  backgroundColor,
+  handleNavigation,
+}) => {
+  return (
+    <Box
+      paddingStyle={{ padding: theme.paddings.md }}
+      borderStyled={{
+        borderBottomWidth: theme.borderWidths.thin,
+        borderColor: theme.colors.gray[400],
+      }}
+      backgroundColor={backgroundColor ?? theme.colors.gray[300]}
+      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: theme.borderWidths.thin_medium,
+            borderColor: theme.colors.blue[500],
+          }}
+          source={{
+            uri:
+              avatar ||
+              "https://static.vakinha.com.br/uploads/user/avatar/2251959/download.png?ims=225x225",
+          }}
+        />
+        <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={theme.fontSizes.sm}
+              color={theme.colors.black[100]}
+              letterSpacing={"regular"}
+            />
+            <Typography
+              text={workDate}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_regular_400}
+              color={theme.colors.black[100]}
+            />
+          </Box>
+          <Box flexStyle={{ flexDirection: "row" }}>
+            <Typography
+              text={"Tempo Jornada: "}
+              size={theme.fontSizes.sm}
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_bold_700}
+              letterSpacing={"regular"}
+            />
+
+            {timeWork && (
+              <Typography
+                text={timeWork}
+                size={theme.fontSizes.xs}
+                fontFamily={theme.fonts.inter_regular_400}
+                color={theme.colors.gray[800]}
+                letterSpacing={"regular"}
+              />
+            )}
+          </Box>
+        </Box>
+        <TouchableOpacity activeOpacity={0.7} onPress={handleNavigation}>
+          {counterBadge > 0 && (
+            <Box
+              backgroundColor={theme.colors.red[600]}
+              flexStyle={{ alignItems: "center", justifyContent: "center" }}
+              borderStyled={{ borderRadius: theme.borderWidths.hairline }}
+              style={[
+                counterBadge < 10
+                  ? { right: -5, top: -2, height: 16, width: 16 }
+                  : { right: -8, top: -5, padding: 2 },
+                { position: "absolute", zIndex: 10 },
+              ]}
+            >
+              <Typography
+                text={`${counterBadge}`}
+                align={"center"}
+                size={theme.fontSizes["2xs"]}
+                color={theme.colors.neutral[25]}
+                fontFamily={theme.fonts.inter_bold_700}
+                lineHeight={theme.fontSizes.sm}
+                letterSpacing={"regular"}
+              />
+            </Box>
+          )}
+          <Icons icon={"BELL"} size={28} style={{ position: "relative" }} />
+        </TouchableOpacity>
+      </Box>
+
+      <Box
+        flexStyle={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}
+      >
+        <Box width={"65%"}>
+          <Typography
+            text={`Olá, ${name}`}
+            size={16}
+            color={theme.colors.black[100]}
+            fontFamily={theme.fonts.inter_bold_700}
+            marginLeft={-5}
+          />
+        </Box>
+
+        {/* Seção de horário */}
+        <Box flexStyle={{ flexDirection: "row" }}>
+          <Box marginStyle={{ marginRight: 15 }}>
+            <Typography
+              text={`${initialTime}`}
+              size={theme.fontSizes.md}
+              align="center"
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+            />
+
+            <Typography
+              text={"INÍCIO"}
+              size={theme.fontSizes["2xs"]}
+              align="center"
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_medium_500}
+              fontWeight={"500"}
+              marginTop={-4}
+            />
+          </Box>
+
+          <Box>
+            <Typography
+              text={`${duration}`}
+              size={theme.fontSizes.md}
+              align="center"
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+            />
+
+            <Typography
+              text={"DURAÇÃO"}
+              size={theme.fontSizes["2xs"]}
+              align="center"
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_medium_500}
+              marginTop={-4}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { CardWorkSession };

package/src/components/check-box/index.tsx

@@ -1,94 +1,94 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { TouchableOpacity } from "react-native";
-
-// components
-import { Typography } from "../typography";
-
-// commons icons-svg
-import { Icons } from "../../common/icons-svg";
-
-// typings
-import { ICheckBoxProps } from "./interface";
-
-// styles
-import { Box } from "../box";
-
-/**
- * Componente CheckBox para a interação da  ui.
- */
-const CheckBox: React.FC<ICheckBoxProps> = ({
-  widthBoxCheckIcon,
-  isChecked,
-  backgroundColorCheck,
-  backgroundBoxCheckIcon,
-  textLabel,
-  textSizeLabel,
-  colorTextLabel,
-  onPress,
-  ...res
-}: ICheckBoxProps) => {
-  return (
-    <TouchableOpacity testID="checkbox-button" onPress={onPress} {...res}>
-      {isChecked ? (
-        <Box
-          width={"100%"}
-          paddingStyle={{ paddingLeft: 16, paddingRight: 16 }}
-          flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start" }}
-        >
-          <Box
-            testID="check-box-true"
-            width={widthBoxCheckIcon ? widthBoxCheckIcon : 30}
-            height={40}
-            backgroundColor={backgroundBoxCheckIcon ? backgroundBoxCheckIcon : "transparent"}
-            flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start" }}
-          >
-            <Icons size={24} color={backgroundColorCheck} icon="CHECK_BOX_OUTLINE" />
-          </Box>
-
-          {textLabel && (
-            <Typography
-              text={textLabel ? textLabel : "Label"}
-              color={colorTextLabel ? colorTextLabel : "white"}
-              size={textLabel ? textSizeLabel : 16}
-              lineHeight={18}
-              letterSpacing={"regular"}
-            />
-          )}
-        </Box>
-      ) : (
-        <Box
-          width={"100%"}
-          paddingStyle={{ paddingLeft: 16, paddingRight: 16 }}
-          flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start" }}
-          testID="check-box-falso"
-        >
-          <Box
-            width={widthBoxCheckIcon ? widthBoxCheckIcon : 30}
-            height={40}
-            backgroundColor={backgroundBoxCheckIcon ? backgroundBoxCheckIcon : "transparent"}
-            flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start" }}
-          >
-            <Icons size={19} background={backgroundColorCheck} icon="CHECK_BOX" />
-          </Box>
-
-          {textLabel && (
-            <Typography
-              text={textLabel ? textLabel : "Label"}
-              color={colorTextLabel ? colorTextLabel : "white"}
-              size={textLabel ? textSizeLabel : 16}
-              lineHeight={18}
-              letterSpacing={"regular"}
-            />
-          )}
-        </Box>
-      )}
-    </TouchableOpacity>
-  );
-};
-/**
- * EXPORTS
- */
-export { CheckBox };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import { Typography } from "../typography";
+
+// commons icons-svg
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import { ICheckBoxProps } from "./interface";
+
+// styles
+import { Box } from "../box";
+
+/**
+ * Componente CheckBox para a interação da  ui.
+ */
+const CheckBox: React.FC<ICheckBoxProps> = ({
+  widthBoxCheckIcon,
+  isChecked,
+  backgroundColorCheck,
+  backgroundBoxCheckIcon,
+  textLabel,
+  textSizeLabel,
+  colorTextLabel,
+  onPress,
+  ...res
+}: ICheckBoxProps) => {
+  return (
+    <TouchableOpacity testID="checkbox-button" onPress={onPress} {...res}>
+      {isChecked ? (
+        <Box
+          width={"100%"}
+          paddingStyle={{ paddingLeft: 16, paddingRight: 16 }}
+          flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start" }}
+        >
+          <Box
+            testID="check-box-true"
+            width={widthBoxCheckIcon ? widthBoxCheckIcon : 30}
+            height={40}
+            backgroundColor={backgroundBoxCheckIcon ? backgroundBoxCheckIcon : "transparent"}
+            flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start" }}
+          >
+            <Icons size={24} color={backgroundColorCheck} icon="CHECK_BOX_OUTLINE" />
+          </Box>
+
+          {textLabel && (
+            <Typography
+              text={textLabel ? textLabel : "Label"}
+              color={colorTextLabel ? colorTextLabel : "white"}
+              size={textLabel ? textSizeLabel : 16}
+              lineHeight={18}
+              letterSpacing={"regular"}
+            />
+          )}
+        </Box>
+      ) : (
+        <Box
+          width={"100%"}
+          paddingStyle={{ paddingLeft: 16, paddingRight: 16 }}
+          flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start" }}
+          testID="check-box-falso"
+        >
+          <Box
+            width={widthBoxCheckIcon ? widthBoxCheckIcon : 30}
+            height={40}
+            backgroundColor={backgroundBoxCheckIcon ? backgroundBoxCheckIcon : "transparent"}
+            flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start" }}
+          >
+            <Icons size={19} background={backgroundColorCheck} icon="CHECK_BOX" />
+          </Box>
+
+          {textLabel && (
+            <Typography
+              text={textLabel ? textLabel : "Label"}
+              color={colorTextLabel ? colorTextLabel : "white"}
+              size={textLabel ? textSizeLabel : 16}
+              lineHeight={18}
+              letterSpacing={"regular"}
+            />
+          )}
+        </Box>
+      )}
+    </TouchableOpacity>
+  );
+};
+/**
+ * EXPORTS
+ */
+export { CheckBox };

package/src/components/check-box/interface.d.ts

@@ -1,31 +1,31 @@
-/**
- * IMPORTS
- */
-import { TouchableOpacityProps } from "react-native";
-
-export interface ICheckBoxProps extends TouchableOpacityProps {
-  /**Propriedade do tamanho do box do icon-check-outline */
-  widthBoxCheckIcon?: number;
-
-  /**Propriedade para saber se o checkbox esta marcado */
-  isChecked: boolean;
-
-  /**Propriedade para mudar a cor do icon quando for marcado */
-  backgroundColorCheck?: string;
-
-  /**Propriedade para mudar a cor do icon quando for marcado */
-  backgroundBoxCheckIcon?: string;
-
-  /**Propriedade do textLabel */
-  textLabel?: string;
-
-  /**Propriedade do tamanho do textLabel */
-  textSizeLabel?: number;
-
-  /**Propriedade da cor do textLabel */
-  colorTextLabel?: string;
-}
-/**
- * EXPORTS
- */
-export type { ICheckBoxProps };
+/**
+ * IMPORTS
+ */
+import { TouchableOpacityProps } from "react-native";
+
+export interface ICheckBoxProps extends TouchableOpacityProps {
+  /**Propriedade do tamanho do box do icon-check-outline */
+  widthBoxCheckIcon?: number;
+
+  /**Propriedade para saber se o checkbox esta marcado */
+  isChecked: boolean;
+
+  /**Propriedade para mudar a cor do icon quando for marcado */
+  backgroundColorCheck?: string;
+
+  /**Propriedade para mudar a cor do icon quando for marcado */
+  backgroundBoxCheckIcon?: string;
+
+  /**Propriedade do textLabel */
+  textLabel?: string;
+
+  /**Propriedade do tamanho do textLabel */
+  textSizeLabel?: number;
+
+  /**Propriedade da cor do textLabel */
+  colorTextLabel?: string;
+}
+/**
+ * EXPORTS
+ */
+export type { ICheckBoxProps };