react-native-exp-fig 2.0.5 → 2.0.6

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

@@ -1,34 +1,154 @@
-/**
- * IMPORTS
- */
-
-import { View, type ViewProps } from "react-native";
-/**
- * INTERFACE
- */
-import { IGlobalCss } from "../../styles/global/interface";
-import React from "react";
-
-interface IBoxProps extends ViewProps, IGlobalCss {
-  /**
-   * A propriedade CSS de Shadow Box adiciona efeitos de sombra em torno da estrutura de um elemento. Você pode definir vários efeitos separados por vírgulas. Uma sombra de caixa é descrita por compensações x e y em relação ao elemento, borrão e raio espalhado e cor.
-   */
-  boxShadow?: string;
-
-  /**
-   * 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 opacity define a transparência de um elemento, ou seja, o grau em que o fundo atrás do elemento é sobreposto. A propriedade aceita um valor entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).
-   */
-  opacity?: number;
-
-  ref?: React.RefObject<View>;
-}
-
-/**
- * EXPORT
- */
-export type { IBoxProps };
+/**
+ * IMPORTS
+ */
+
+import type React from "react";
+import { type DimensionValue, type ViewProps as RNViewProps } from "react-native";
+
+import type { theme } from "../../styles/theme/theme";
+
+type IBoxProps = RNViewProps & {
+  /**
+   * A propriedade JSX que define um elemento ou componente filho.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * TestID para testes automático e identificação
+   */
+  testID?: string;
+
+  /**
+   * A propriedade ref é uma função que recebe um elemento ou componente filho como argumento e retorna um valor.
+   * O valor retornado é atribuído à propriedade ref do elemento ou componente filho.
+   * A propriedade ref é usada para acessar o elemento ou componente filho diretamente, sem precisar passar por props ou state.
+   */
+  ref?: React.Ref<any>;
+
+  /**
+   * 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;
+  };
+
+  /**
+   * A propriedade abreviada CSS da fonte define todas as propriedades diferentes da fonte de um elemento. Alternativamente, ele define a fonte de um elemento como uma fonte do sistema.
+   */
+  fontStyle?: {
+    font?: string;
+    fontSize?: number;
+    fontWeight?: "100" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "bold";
+    fontFamily?: string;
+    letterSpacing?: keyof typeof theme.letterSpacing;
+    lineHeight?: number;
+  };
+  /**
+   * A propriedade CSS de Shadow Box adiciona efeitos de sombra em torno da estrutura de um elemento. Você pode definir vários efeitos separados por vírgulas. Uma sombra de caixa é descrita por compensações x e y em relação ao elemento, borrão e raio espalhado e cor.
+   */
+  boxShadow?: string;
+
+  /**
+   * 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 opacity define a transparência de um elemento, ou seja, o grau em que o fundo atrás do elemento é sobreposto. A propriedade aceita um valor entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).
+   */
+  opacity?: number;
+};
+
+/**
+ * EXPORT
+ */
+export { IBoxProps };

package/src/components/box/styles.ts

@@ -1,21 +1,18 @@
-import { StyleSheet, ViewProps } from "react-native";
-import { IBoxProps } from "./interface.d";
-
-// typing
-import { IGlobalCss } from "../../styles/global/interface";
-
-import { stylesGlobal } from "../../styles/global/styles";
-
-interface BoxProps extends IBoxProps, IGlobalCss {}
-const styles = (props: BoxProps) =>
-  StyleSheet.create({
-    boxStyle: {
-      ...stylesGlobal(props),
-      ...props,
-    } as ViewProps,
-  });
-
-/**
- * EXPORTS
- */
-export { styles };
+import { StyleSheet, ViewProps } from "react-native";
+import type { IBoxProps } from "./interface";
+
+import { stylesGlobal } from "../../styles/global/styles";
+
+interface BoxProps extends IBoxProps {}
+const styles = (props: BoxProps) =>
+  StyleSheet.create({
+    boxStyle: {
+      ...stylesGlobal(props as any),
+      ...props,
+    } as ViewProps,
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/history-activities-card/index.tsx

@@ -0,0 +1,237 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { Image } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+//commons/ icons
+import { IMAGES } from "../../common/constants";
+import { Icons } from "../../common/icons-svg";
+// typings
+import type { ICardActivitiesWeek } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { getIconByProperty } from "../../utils/get-icon-by-property";
+
+const handleIsBluetoothConnected = (bluetooth_device_id?: string | null): boolean => {
+  return Boolean(
+    bluetooth_device_id &&
+    bluetooth_device_id !== "pending" &&
+    bluetooth_device_id !== "not_found" &&
+    bluetooth_device_id !== "error_bluetooth"
+  );
+};
+
+const HistoryActivitiesCard = forwardRef<any, ICardActivitiesWeek>(
+  (props, ref): React.ReactElement => {
+    const {
+      testID,
+      backgroundColor,
+      idAtividade,
+      name_activitie,
+      referencia,
+      type_activitie,
+      data_start,
+      data_end,
+      duration,
+      avatar,
+      bluetooth_device_id = "pending",
+    } = props;
+    return (
+      <Box
+        ref={ref}
+        testID={testID}
+        width={"100%"}
+        backgroundColor={theme.colors.neutral[25]}
+        borderStyled={{
+          borderRadius: theme.borderWidths.thick_medium,
+        }}
+        marginStyle={{
+          marginBottom: theme.margins["2xs"],
+        }}
+      >
+        <Box
+          width={"100%"}
+          height={30}
+          backgroundColor={backgroundColor ?? theme.colors.green[400]}
+          borderStyled={{
+            borderTopLeftRadius: theme.borderWidths.thin_bold,
+            borderTopRightRadius: theme.borderWidths.thin_bold,
+            borderColor: theme.colors.blue[400],
+          }}
+          flexStyle={{
+            justifyContent: "center",
+          }}
+        >
+          <Typography
+            text={`ATIVIDADE ${!data_end ? "EM ANDAMENTO" : ""} #${idAtividade}`}
+            color={theme.colors.neutral[25]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_semi_bold_600}
+            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"],
+          }}
+        >
+          <Box width={"100%"}>
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Image
+                style={{
+                  width: 45,
+                  height: 45,
+                  borderRadius: 10,
+                  marginRight: 10,
+                }}
+                source={{ uri: avatar ?? IMAGES.IMAGE_ANONIMA }}
+              />
+
+              <Box width={"100%"}>
+                <Box
+                  width={"84%"}
+                  flexStyle={{
+                    flexDirection: "row",
+                    flexWrap: "wrap",
+                  }}
+                >
+                  <Typography
+                    style={{ flexShrink: 1 }}
+                    text={`Início: `}
+                    size={theme.fontSizes.xs}
+                    color={theme.colors.black[10]}
+                    fontFamily={theme.fonts.inter_semi_bold_600}
+                  />
+                  <Typography
+                    text={`${data_start} ás ${data_end ?? "00/00/0000 00:00"}`}
+                    size={11}
+                    color={theme.colors.black[180]}
+                    fontFamily={theme.fonts.inter_regular_400}
+                  />
+                </Box>
+
+                <Box
+                  flexStyle={{
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                  }}
+                  width={"84%"}
+                >
+                  <Box flexStyle={{ flexDirection: "row" }}>
+                    <Typography
+                      text={`Duração: `}
+                      size={theme.fontSizes.xs}
+                      color={theme.colors.black[10]}
+                      fontFamily={theme.fonts.inter_semi_bold_600}
+                    />
+
+                    <Typography
+                      text={`${duration ?? "00:00"}`}
+                      size={theme.fontSizes.xs}
+                      color={theme.colors.black[180]}
+                      fontFamily={theme.fonts.inter_light_300}
+                    />
+                  </Box>
+
+                  {bluetooth_device_id && (
+                    <Box
+                      width={"20%"}
+                      flexStyle={{
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                      }}
+                    >
+                      {handleIsBluetoothConnected(bluetooth_device_id) ? (
+                        <Icons icon="BLUETOOTH_CONNECTED" color={theme.colors.green[400]} />
+                      ) : (
+                        <Icons icon="BLUETOOTH_SLASH" color={theme.colors.red[900]} />
+                      )}
+                      {getIconByProperty(referencia, backgroundColor)}
+                    </Box>
+                  )}
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+
+        <Box
+          width={"100%"}
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+          paddingStyle={{
+            padding: theme.paddings["2xs"],
+          }}
+          borderStyled={{
+            borderTopWidth: theme.borderWidths.thin_medium,
+            borderTopColor: theme.colors.neutral[200],
+          }}
+        >
+          <Box marginStyle={{ marginRight: 2 }}>
+            <Typography
+              text={`Atividade:`}
+              size={theme.fontSizes.xs}
+              color={theme.colors.gray[700]}
+              fontFamily={theme.fonts.inter_regular_400}
+            />
+
+            <Typography
+              text={`${name_activitie ?? "Sem informação"}`}
+              size={theme.fontSizes.sm}
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+            />
+          </Box>
+
+          <Box
+            flexStyle={{
+              flexDirection: "column",
+              alignItems: "flex-end",
+              justifyContent: "center",
+            }}
+          >
+            <Typography
+              text={`Tipo atividade: `}
+              size={theme.fontSizes.xs}
+              color={theme.colors.gray[700]}
+              fontFamily={theme.fonts.inter_regular_400}
+            />
+
+            <Typography
+              text={`${type_activitie}`}
+              size={theme.fontSizes.sm}
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+              marginLeft={4}
+            />
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+);
+
+HistoryActivitiesCard.displayName = "HistoryActivitiesCard";
+
+/**
+ * Componente Box para a interação da  ui.
+ */
+export default asBaseComponent(HistoryActivitiesCard);

package/src/components/history-activities-card/interface.ts

@@ -0,0 +1,148 @@
+/**
+ * IMPORTS
+ */
+import type React from "react";
+import { type DimensionValue, type ViewProps } from "react-native";
+import type { PropertyType } from "../../utils/get-icon-by-property";
+
+/**
+ * INTERFACE
+ */
+
+type ICardActivitiesWeek = ViewProps & {
+  /**
+   * props que mostra o nome do usuário
+   */
+  name?: string;
+
+  /**
+   * props que mostra o ciclo do relatório - DIÁRIA OU SEMANAL
+   */
+  ciclo?: string;
+
+  /**
+   * props que mostra a data
+   */
+  data_start: string;
+  data_end?: string | null;
+  duration: string;
+  status?: string;
+  name_activitie: string;
+  referencia: PropertyType;
+  type_activitie: string;
+  avatar?: string;
+  idAtividade: number;
+  bluetooth_device_id?: string | null;
+
+  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..
+   * A Propriedade Background está sendo utilizada para definir a cor de fundo do cabeçalho do card e do ícone check.
+   */
+  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;
+  };
+
+  // Cor do ícone CHECK
+  iconColor?: string;
+};
+
+/**
+ * EXPORT
+ */
+export type { ICardActivitiesWeek };

package/src/index.ts

@@ -34,6 +34,8 @@ export { ActivitiesDaily } from "./components/activities-daily";
 export { ActivitiesProgress } from "./components/activities-progress";
 export { ProfileMenuOption } from "./components/profile-menu-option";
 export { ModalActivities } from "./components/modal-activities";
+
+export { default as HistoryActivitiesCard } from "./components/history-activities-card";
 export { default as CardReport } from "./components/card-report";
 export { default as Loading } from "./components/loading";
 export { default as NotificationCard } from "./components/notification-card";

package/lib/commonjs/@types/as-base-component.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.asBaseComponent = asBaseComponent;
-/**
- * IMPORTS
- */
-
-/**
- * Function to create a base component
- */
-function asBaseComponent(Component,
-// eslint-disable-next-line no-unused-vars
-_options) {
-  return Component;
-}
-
-/**
- * EXPORTS
- */
-//# sourceMappingURL=as-base-component.js.map

package/lib/commonjs/@types/as-base-component.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["asBaseComponent","Component","_options"],"sourceRoot":"..\\..\\..\\src","sources":["@types/as-base-component.ts"],"mappings":";;;;;;AAAA;AACA;AACA;;AAIA;AACA;AACA;AACA,SAASA,eAAeA,CACtBC,SAAiC;AACjC;AACAC,QAAY,EACY;EACxB,OAAOD,SAAS;AAClB;;AAEA;AACA;AACA","ignoreList":[]}