react-native-exp-fig 0.1.3 → 0.1.4

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

@@ -2,7 +2,7 @@
  * IMPORTS
  */
 import React from "react";
-import { Pressable, Image } from "react-native";
+import { Image, TouchableOpacity } from "react-native";
 
 // components
 import { Box } from "../box";
@@ -16,7 +16,7 @@ import { ICardLoading } from "./interface";
 
 // styles
 import { theme } from "../../styles/theme/theme";
-import { getStatusColor, StatusType } from "./helpers/return-colors";
+import { getStatusColor, StatusType } from "../../utils/status-color/return-color";
 
 /**
  *
@@ -32,18 +32,16 @@ const CardLoading: React.FC<ICardLoading> = ({
   qtdCoils = 10,
   status = "Pendente",
   handleNavigation,
+  testID,
 }: ICardLoading) => {
   return (
-    <Pressable
-      onPress={handleNavigation}
-      style={({ pressed }) => [{ opacity: pressed ? 0.75 : 1.0 }]}
-    >
+    <TouchableOpacity onPress={handleNavigation} activeOpacity={0.7}>
       <Box
-        testID={"card-loading"}
+        testID={testID}
         width={width ?? "100%"}
         backgroundColor={theme.colors.blue[400]}
-        marginStyle={{ marginBottom: 16 }}
-        paddingStyle={{ padding: 10 }}
+        marginStyle={{ marginBottom: theme.margins.md }}
+        paddingStyle={{ padding: theme.paddings["2xs"] }}
         borderStyled={{
           borderWidth: theme.borderWidths.thin,
           borderColor: theme.colors.blue[400],
@@ -64,7 +62,7 @@ const CardLoading: React.FC<ICardLoading> = ({
           />
         </Box>
 
-        <Box width={"75%"} marginStyle={{ marginLeft: 5 }}>
+        <Box width={"74%"} marginStyle={{ marginLeft: 5 }} height={120}>
           <Typography
             text={title}
             ellipsizeMode="tail"
@@ -81,7 +79,7 @@ const CardLoading: React.FC<ICardLoading> = ({
             color={theme.colors.neutral[25]}
             size={theme.fontSizes.xs}
             fontFamily={theme.fonts.inter_regular_400}
-            lineHeight={theme.fontSizes.xs ?? 18}
+            lineHeight={theme.fontSizes.md ?? 16}
             letterSpacing={"regular"}
           />
 
@@ -108,7 +106,7 @@ const CardLoading: React.FC<ICardLoading> = ({
                 color={theme.colors.neutral[25]}
                 size={theme.fontSizes.xs}
                 fontFamily={theme.fonts.inter_bold_700}
-                lineHeight={theme.fontSizes.lg ?? 18}
+                lineHeight={theme.fontSizes.md ?? 16}
                 letterSpacing={"regular"}
                 marginLeft={2}
               />
@@ -130,7 +128,7 @@ const CardLoading: React.FC<ICardLoading> = ({
                 color={theme.colors.neutral[25]}
                 size={theme.fontSizes.xs}
                 fontFamily={theme.fonts.inter_bold_700}
-                lineHeight={theme.fontSizes.lg ?? 18}
+                lineHeight={theme.fontSizes.md ?? 16}
                 letterSpacing={"regular"}
                 marginLeft={2}
               />
@@ -149,7 +147,7 @@ const CardLoading: React.FC<ICardLoading> = ({
                 color={theme.colors.neutral[25]}
                 size={theme.fontSizes.xs}
                 fontFamily={theme.fonts.inter_bold_700}
-                lineHeight={theme.fontSizes.lg ?? 18}
+                lineHeight={theme.fontSizes.md ?? 16}
                 letterSpacing={"regular"}
                 marginLeft={2}
               />
@@ -169,7 +167,7 @@ const CardLoading: React.FC<ICardLoading> = ({
               color={theme.colors.neutral[25]}
               size={theme.fontSizes.xs}
               fontFamily={theme.fonts.inter_regular_400}
-              lineHeight={theme.fontSizes.lg ?? 18}
+              lineHeight={theme.fontSizes.md ?? 16}
               letterSpacing={"regular"}
             />
             <Typography
@@ -177,7 +175,7 @@ const CardLoading: React.FC<ICardLoading> = ({
               color={theme.colors.neutral[25]}
               size={theme.fontSizes.xs}
               fontFamily={theme.fonts.inter_bold_700}
-              lineHeight={theme.fontSizes.lg ?? 18}
+              lineHeight={theme.fontSizes.md ?? 16}
               letterSpacing={"regular"}
               marginLeft={4}
             />
@@ -204,7 +202,7 @@ const CardLoading: React.FC<ICardLoading> = ({
                 color={theme.colors.neutral[25]}
                 size={theme.fontSizes.xs}
                 fontFamily={theme.fonts.inter_regular_400}
-                lineHeight={theme.fontSizes.lg ?? 18}
+                lineHeight={theme.fontSizes.md ?? 16}
                 letterSpacing={"regular"}
               />
               <Typography
@@ -212,7 +210,7 @@ const CardLoading: React.FC<ICardLoading> = ({
                 color={theme.colors.neutral[25]}
                 size={theme.fontSizes.xs}
                 fontFamily={theme.fonts.inter_bold_700}
-                lineHeight={theme.fontSizes.lg ?? 18}
+                lineHeight={theme.fontSizes.md ?? 16}
                 letterSpacing={"regular"}
                 marginLeft={4}
               />
@@ -239,7 +237,7 @@ const CardLoading: React.FC<ICardLoading> = ({
                 color={theme.colors.neutral[25]}
                 size={theme.fontSizes.xs}
                 fontFamily={theme.fonts.inter_regular_400}
-                lineHeight={theme.fontSizes.lg ?? 18}
+                lineHeight={theme.fontSizes.md ?? 16}
                 letterSpacing={"regular"}
               />
               <Typography
@@ -247,7 +245,7 @@ const CardLoading: React.FC<ICardLoading> = ({
                 color={getStatusColor(status as StatusType)}
                 size={theme.fontSizes.xs}
                 fontFamily={theme.fonts.inter_bold_700}
-                lineHeight={theme.fontSizes.lg ?? 18}
+                lineHeight={theme.fontSizes.md ?? 16}
                 letterSpacing={"regular"}
                 marginLeft={4}
               />
@@ -255,7 +253,7 @@ const CardLoading: React.FC<ICardLoading> = ({
           </Box>
         </Box>
       </Box>
-    </Pressable>
+    </TouchableOpacity>
   );
 };
 

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

@@ -1,24 +1,31 @@
 /**
  * IMPORTS
  */
-import { PressableProps } from "react-native";
+import { TouchableOpacityProps } from "react-native";
 
 // typing
 import { IGlobalCss } from "../../styles/global/interface";
 
-interface ICardLoading extends PressableProps, IGlobalCss {
+interface ICardLoading extends TouchableOpacityProps, IGlobalCss {
+  /**propriedade que indica o título do carregamento */
   title?: string;
-  /**propiedade que indica o local do carregamento */
+
+  /**propriedade que indica o local do carregamento */
   local?: string;
-  /**propiedade que indica o veiculo */
+
+  /**propriedade que indica o veiculo */
   vehicle?: string;
-  /**propiedade que indica a previsão do carregamento */
+
+  /**propriedade que indica a previsão do carregamento */
   prevision?: string;
-  /**propiedade que indica o peso do carregamento */
+
+  /**propriedade que indica o peso do carregamento */
   kg: number;
-  /**propiedade que indica a quantidade de bobinas do carregamento */
+
+  /**propriedade que indica a quantidade de bobinas do carregamento */
   qtdCoils: number;
-  /**propiedade que indica o status do carregamento */
+
+  /**propriedade que indica o status do carregamento */
   status?: string;
 
   handleNavigation: () => void;

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

@@ -25,14 +25,18 @@ const CardWorkSession: React.FC<ICardWorkSession> = ({
   initialTime = "11:40",
   duration = "05:20",
   avatar = "",
+  backgroundColor,
   width,
 }) => {
   return (
     <Box
       width={width}
-      paddingStyle={{ padding: 15 }}
-      borderStyled={{ borderBottomWidth: 1, borderBottomColor: "#c6c6c6" }}
-      backgroundColor={theme.colors.neutral[25]}
+      paddingStyle={{ padding: theme.paddings.md }}
+      borderStyled={{
+        borderBottomWidth: theme.borderWidths.thin,
+        borderColor: theme.colors.neutral[200],
+      }}
+      backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
       style={{
         position: "relative",
       }}
@@ -46,7 +50,7 @@ const CardWorkSession: React.FC<ICardWorkSession> = ({
             width: 50,
             height: 50,
             borderRadius: 25,
-            borderWidth: 2,
+            borderWidth: theme.borderWidths.thin_medium,
             borderColor: theme.colors.blue[500],
           }}
           source={{ uri: avatar || IMAGES.IMAGE_ANONIMA }}
@@ -73,6 +77,7 @@ const CardWorkSession: React.FC<ICardWorkSession> = ({
               size={11}
               color={theme.colors.black[100]}
               fontFamily={theme.fonts.inter_bold_700}
+              letterSpacing={"regular"}
             />
 
             <Typography
@@ -80,6 +85,7 @@ const CardWorkSession: React.FC<ICardWorkSession> = ({
               size={11}
               fontFamily={theme.fonts.inter_regular_400}
               color={theme.colors.gray[800]}
+              letterSpacing={"regular"}
             />
           </Box>
         </Box>

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

@@ -0,0 +1,125 @@
+/**
+ * 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,
+  heightWrapperTextLabel,
+  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: "center" }}
+        >
+          <Box
+            testID="check-box-true"
+            width={widthBoxCheckIcon ? widthBoxCheckIcon : 30}
+            height={40}
+            backgroundColor={backgroundBoxCheckIcon ? backgroundBoxCheckIcon : "transparent"}
+            flexStyle={{
+              flexDirection: "column",
+              alignItems: "flex-start",
+              justifyContent: "flex-start",
+            }}
+          >
+            <Icons size={24} color={backgroundColorCheck} icon="CHECK_BOX_OUTLINE" />
+          </Box>
+
+          <Box
+            width={"100%"}
+            height={heightWrapperTextLabel ? heightWrapperTextLabel : 40}
+            backgroundColor="transparent"
+            flexStyle={{
+              flexDirection: "column",
+              alignItems: "flex-start",
+              justifyContent: "flex-start",
+            }}
+          >
+            {textLabel && (
+              <Typography
+                text={textLabel ? textLabel : "Label"}
+                color={colorTextLabel ? colorTextLabel : "white"}
+                size={textLabel ? textSizeLabel : 16}
+                lineHeight={18}
+                letterSpacing={"regular"}
+              />
+            )}
+          </Box>
+        </Box>
+      ) : (
+        <Box
+          width={"100%"}
+          paddingStyle={{ paddingLeft: 16, paddingRight: 16 }}
+          flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "center" }}
+          testID="check-box-falso"
+        >
+          <Box
+            width={widthBoxCheckIcon ? widthBoxCheckIcon : 30}
+            height={40}
+            backgroundColor={backgroundBoxCheckIcon ? backgroundBoxCheckIcon : "transparent"}
+            flexStyle={{
+              flexDirection: "column",
+              alignItems: "flex-start",
+              justifyContent: "flex-start",
+            }}
+          >
+            <Icons size={24} color={backgroundColorCheck} icon="CHECK_BOX_FILL" />
+          </Box>
+
+          <Box
+            width={"100%"}
+            height={heightWrapperTextLabel ? heightWrapperTextLabel : 40}
+            backgroundColor="transparent"
+            flexStyle={{
+              flexDirection: "column",
+              alignItems: "flex-start",
+              justifyContent: "flex-start",
+            }}
+          >
+            {textLabel && (
+              <Typography
+                text={textLabel ? textLabel : "Label"}
+                color={colorTextLabel ? colorTextLabel : "white"}
+                size={textLabel ? textSizeLabel : 16}
+                lineHeight={18}
+                letterSpacing={"regular"}
+              />
+            )}
+          </Box>
+        </Box>
+      )}
+    </TouchableOpacity>
+  );
+};
+/**
+ * EXPORTS
+ */
+export { CheckBox };

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

@@ -0,0 +1,27 @@
+/**
+ * IMPORTS
+ */
+import { TouchableOpacityProps } from "react-native";
+
+export interface ICheckBoxProps extends TouchableOpacityProps {
+  /**Propriedade do tamanho do box do icon-check-outline */
+  widthBoxCheckIcon?: number;
+  /**Propriedade da altura do wrapper do textLabel */
+  heightWrapperTextLabel?: 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 };

package/src/components/coil/index.tsx

@@ -0,0 +1,82 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// icons
+import { Icons } from "../../common/icons-svg";
+
+// theme
+import { theme } from "../../styles/theme/theme";
+
+import { ICoil } from "./interface";
+
+const Coil: React.FC<ICoil> = ({ description, handleNavigation, title, testID, status }) => {
+  return (
+    <TouchableOpacity activeOpacity={0.7} testID={testID} onPress={handleNavigation}>
+      <Box
+        width={"100%"}
+        flexStyle={{ flexDirection: "row", alignItems: "center" }}
+        height={70}
+        backgroundColor={theme.colors.blue[400]}
+        borderStyled={{
+          borderWidth: 1,
+          borderRadius: theme.borderWidths.thick_medium,
+          borderColor: theme.colors.blue[400],
+        }}
+        paddingStyle={{ padding: theme.paddings["2xs"] }}
+        marginStyle={{ marginBottom: theme.margins.md }}
+        style={{ elevation: 5 }}
+      >
+        <Box
+          width={"80%"}
+          height={70}
+          flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start" }}
+        >
+          <Icons icon={"LIFEBUOY"} size={32} />
+
+          <Box
+            flexStyle={{ flexDirection: "column", flexWrap: "wrap" }}
+            marginStyle={{ marginLeft: 18 }}
+          >
+            <Typography
+              text={title}
+              size={theme.fontSizes["2xl"]}
+              fontFamily={theme.fonts.inter_bold_700}
+              color={theme.colors.neutral[25]}
+              letterSpacing={"regular"}
+              paddingTop={theme.paddings.md}
+            />
+            <Typography
+              text={description}
+              size={theme.fontSizes["2xs"]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+              color={theme.colors.neutral[25]}
+              letterSpacing={"regular"}
+            />
+          </Box>
+        </Box>
+
+        <Box
+          width={"20%"}
+          flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-end" }}
+          height={70}
+        >
+          {status == "recused" && <Icons icon={"RECUSED"} size={32} />}
+          {status == "approved" && <Icons icon={"CHECK_CIRCLE"} size={32} />}
+          {status == "pending" && <Icons icon={"EXCLAMATION_CIRCLE"} size={32} />}
+        </Box>
+      </Box>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { Coil };

package/src/components/coil/interface.d.ts

@@ -0,0 +1,26 @@
+/**
+ * IMPORTS
+ */
+import { ViewProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface ICoil extends ViewProps, IGlobalCss {
+  /**propriedade que indica o título da bobina */
+  title: string;
+
+  /**propriedade que indica a descrição da bobina */
+  description: string;
+
+  /**propriedade que indica que levar para tela da bobina */
+  handleNavigation: () => void;
+
+  /**propriedade que indica status da bobina */
+  status: "recused" | "pending" | "approved";
+}
+
+/**
+ * EXPORTS
+ */
+export { ICoil };

package/src/components/filter-date-selector/index.tsx

@@ -0,0 +1,89 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { TouchableOpacity, ActivityIndicator, FlatList } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+//typing
+import { IFilterDateSelector, ISelectedDay } from "./interface";
+
+/**
+ *
+ * Componente FilterDateSelector para a interação do usuário com ui.
+ */
+const FilterDateSelector: React.FC<IFilterDateSelector> = ({
+  selectedDay,
+  handleSelectedDay,
+  days,
+  isLoading,
+  testID,
+}) => {
+  const renderDayBlock = ({ item: day, index }: { item: ISelectedDay; index: number }) => {
+    const isSelected = selectedDay && selectedDay.date === day.date;
+    return (
+      <TouchableOpacity
+        disabled={isSelected}
+        key={index}
+        activeOpacity={0.7}
+        onPress={() => handleSelectedDay(day)}
+      >
+        <Box
+          testID={testID}
+          width={60}
+          height={75}
+          flexStyle={{ alignItems: "center", justifyContent: "center" }}
+          backgroundColor={isSelected ? theme.colors.blue[400] : theme.colors.gray[350]}
+          borderStyled={{
+            borderRadius: theme.borderWidths.thick_large,
+            borderColor: isSelected ? theme.colors.blue[400] : theme.colors.gray[350],
+            borderWidth: theme.borderWidths.thin,
+          }}
+          marginStyle={{ marginRight: theme.margins["2xs"] }}
+        >
+          {isSelected && isLoading ? (
+            <ActivityIndicator size="small" color="white" />
+          ) : (
+            <>
+              <Typography
+                text={day.date.toString().padStart(2, "0")}
+                size={theme.fontSizes.lg}
+                color={theme.colors.neutral[25]}
+                fontFamily={theme.fonts.inter_bold_700}
+              />
+              <Typography
+                text={day.dayName.slice(0, 3)}
+                size={theme.fontSizes.lg}
+                color={theme.colors.neutral[25]}
+                fontFamily={theme.fonts.inter_bold_700}
+                letterSpacing="o_16"
+              />
+            </>
+          )}
+        </Box>
+      </TouchableOpacity>
+    );
+  };
+  const daySorted = days.sort(
+    (a, b) => new Date(b.fullDate).getTime() - new Date(a.fullDate).getTime()
+  );
+  return (
+    <FlatList
+      horizontal
+      data={daySorted}
+      showsHorizontalScrollIndicator={false}
+      renderItem={renderDayBlock}
+    />
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { FilterDateSelector };

package/src/components/filter-date-selector/interface.d.ts

@@ -0,0 +1,43 @@
+/*
+ * IMPORTS
+ */
+import { TouchableOpacityProps } from "react-native";
+
+/**
+ * INTERFACE
+ */
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface ISelectedDay {
+  date: string | number;
+  dayName: string;
+  fullDate: Date;
+}
+
+interface IFilterDateSelector extends TouchableOpacityProps, IGlobalCss {
+  /**
+   *  prop que mostra o dia selecionado
+   */
+  selectedDay: ISelectedDay;
+
+  /**
+   *  função que seleciona a data
+   */
+  // eslint-disable-next-line no-unused-vars
+  handleSelectedDay: (date: ISelectedDay) => {};
+
+  /**
+   *  * Retorna as sete últimas datas dos dias
+   */
+  days: ISelectedDay[];
+
+  /**
+   *  Retorna o loading do componente
+   */
+  isLoading: boolean;
+}
+
+/**
+ * EXPORTS
+ */
+export type { IFilterDateSelector, ISelectedDay };

package/src/components/filter-journey/index.tsx

@@ -0,0 +1,60 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { FlatList } from "react-native";
+
+// components
+import { Button } from "../button";
+
+// typing
+import { IFilterJourneyProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const FilterJourney: React.FC<IFilterJourneyProps> = ({
+  filters,
+  handleFilterSelect,
+  selectedFilter,
+  isLoading,
+}) => {
+  return (
+    <FlatList
+      horizontal
+      data={filters}
+      showsHorizontalScrollIndicator={false}
+      renderItem={({ item }) => (
+        <Button
+          isLoading={isLoading || false}
+          disabled={isLoading}
+          paddingStyle={{ paddingLeft: theme.paddings.sm, paddingRight: theme.paddings.sm }}
+          onPress={() => handleFilterSelect(item.descricao)}
+          title={item.descricao}
+          flexStyle={{ textAlign: "center", alignItems: "center", justifyContent: "center" }}
+          marginStyle={{ marginRight: theme.margins["2xs"] }}
+          borderStyled={{
+            borderWidth: theme.borderWidths.thin,
+            borderColor:
+              selectedFilter === item.descricao ? theme.colors.blue[400] : theme.colors.gray[800],
+            borderRadius: theme.borderWidths.thick_bold,
+          }}
+          backgroundColor={
+            selectedFilter === item.descricao ? theme.colors.blue[400] : theme.colors.neutral[25]
+          }
+          buttonTextStyle={{
+            color:
+              selectedFilter === item.descricao ? theme.colors.neutral[25] : theme.colors.gray[800],
+            fontFamily: theme.fonts.inter_semi_bold_600,
+            fontSize: theme.fontSizes.sm,
+          }}
+        />
+      )}
+    />
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { FilterJourney };