jornada-ui 0.4.4 → 0.4.6

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

@@ -1,168 +1,175 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef } 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 type { ICardReport } from "./interface";
-// typings
-import { asBaseComponent } from "../../@types/as-base-component";
-
-const CardReport = forwardRef<any, ICardReport>((props, ref): React.ReactElement => {
-  const {
-    name = "Enzo Martins",
-    generatedDate = "15/07/2025",
-    generatedTime = "10:30",
-    status = "OK",
-    backgroundColor,
-    ciclo = "DIÁRIA",
-    testID = "card-report",
-  } = 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={`ASSINATURA ${ciclo}`}
-          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"],
-        }}
-      >
-        <Box>
-          <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
-            <Icons icon={"FILES"} size={40} color={theme.colors.black[100]} />
-
-            {/*Alteração para exibir o nome do usuário */}
-            <Box>
-              <Box marginStyle={{ marginRight: 2 }} flexStyle={{ flexDirection: "row" }}>
-                <Typography
-                  text={`Documento gerado em: `}
-                  size={12}
-                  color={theme.colors.black[180]}
-                  fontFamily={theme.fonts.inter_extra_bold_800}
-                />
-                <Typography
-                  text={`${generatedDate} ${generatedTime}`}
-                  size={12}
-                  color={theme.colors.black[180]}
-                  fontFamily={theme.fonts.inter_light_300}
-                  marginLeft={2}
-                />
-              </Box>
-              <Box flexStyle={{ flexDirection: "row" }}>
-                <Typography
-                  text={`Status documento:`}
-                  size={12}
-                  color={theme.colors.black[100]}
-                  fontFamily={theme.fonts.inter_extra_bold_800}
-                />
-
-                <Typography
-                  text={`${status}`}
-                  size={12}
-                  color={theme.colors.black[100]}
-                  fontFamily={theme.fonts.inter_light_300}
-                  marginLeft={2}
-                />
-              </Box>
-            </Box>
-          </Box>
-        </Box>
-      </Box>
-
-      {/* Segunda separação */}
-      <Box
-        width={"100%"}
-        flexStyle={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-        paddingStyle={{
-          padding: theme.paddings["2xs"],
-        }}
-        borderStyled={{
-          borderTopWidth: 2,
-          borderTopColor: theme.colors.neutral[200],
-        }}
-      >
-        <Box>
-          <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
-            <Box marginStyle={{ marginRight: 2 }}>
-              <Typography
-                text={`Assinado por:`}
-                size={12}
-                color={theme.colors.black[180]}
-                fontFamily={theme.fonts.inter_light_300}
-                marginLeft={0}
-              />
-
-              <Typography
-                text={`${name}`}
-                size={14}
-                color={theme.colors.black[100]}
-                fontFamily={theme.fonts.inter_extra_bold_800}
-                marginLeft={0}
-              />
-            </Box>
-          </Box>
-        </Box>
-
-        <Icons icon={"CHECK_CIRCLE"} size={40} background={backgroundColor} />
-      </Box>
-    </Box>
-  );
-});
-
-CardReport.displayName = "CardReport";
-
-/**
- * Componente Box para a interação da  ui.
- */
-export default asBaseComponent(CardReport);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } 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 type { ICardReport } from "./interface";
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+
+const CardReport = forwardRef<any, ICardReport>((props, ref): React.ReactElement => {
+  const {
+    name = "Enzo Martins",
+    generatedDate = "15/07/2025",
+    generatedTime = null,
+    status = "OK",
+    backgroundColor,
+    ciclo = "DIÁRIA",
+    testID = "card-report",
+    onPress,
+  } = props;
+  return (
+    <TouchableOpacity
+      ref={ref}
+      activeOpacity={0.7}
+      onPress={() => onPress({ name, generatedDate, generatedTime, status, ciclo })}
+    >
+      <Box
+        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={`ASSINATURA ${ciclo}`}
+            color={theme.colors.neutral[25]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_medium_500}
+            fontWeight={"500"}
+            lineHeight={theme.fontSizes.xs}
+            marginLeft={theme.margins["2xs"]}
+          />
+        </Box>
+        <Box
+          width={"100%"}
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+          paddingStyle={{
+            padding: theme.paddings["2xs"],
+          }}
+        >
+          <Box>
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Icons icon={"FILES"} size={28} color={theme.colors.black[100]} />
+
+              {/*Alteração para exibir o nome do usuário */}
+              <Box marginStyle={{ marginLeft: 4 }}>
+                <Box flexStyle={{ flexDirection: "row" }}>
+                  <Typography
+                    text={`Doc gerado em: `}
+                    size={theme.fontSizes.sm}
+                    color={theme.colors.black[180]}
+                    fontFamily={theme.fonts.inter_medium_500}
+                  />
+                  <Typography
+                    text={`${generatedDate} ${generatedTime ?? ""}`}
+                    size={12}
+                    color={theme.colors.black[180]}
+                    fontFamily={theme.fonts.inter_light_300}
+                    marginLeft={2}
+                  />
+                </Box>
+                <Box flexStyle={{ flexDirection: "row" }}>
+                  <Typography
+                    text={`Status documento:`}
+                    size={theme.fontSizes.sm}
+                    color={theme.colors.black[100]}
+                    fontFamily={theme.fonts.inter_medium_500}
+                  />
+
+                  <Typography
+                    text={`${status}`}
+                    size={theme.fontSizes.xs}
+                    color={theme.colors.black[100]}
+                    fontFamily={theme.fonts.inter_light_300}
+                    marginLeft={2}
+                  />
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+
+        {/* Segunda separação */}
+        <Box
+          width={"100%"}
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+          paddingStyle={{
+            padding: theme.paddings["2xs"],
+          }}
+          borderStyled={{
+            borderTopWidth: 2,
+            borderTopColor: theme.colors.neutral[200],
+          }}
+        >
+          <Box>
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Box marginStyle={{ marginRight: 2 }}>
+                <Typography
+                  text={`Assinado por:`}
+                  size={theme.fontSizes.xs}
+                  color={theme.colors.black[180]}
+                  fontFamily={theme.fonts.inter_regular_400}
+                  marginLeft={0}
+                />
+
+                <Typography
+                  text={`${name}`}
+                  size={14}
+                  color={theme.colors.black[100]}
+                  fontFamily={theme.fonts.inter_bold_700}
+                  marginLeft={0}
+                />
+              </Box>
+            </Box>
+          </Box>
+
+          <Icons icon={"CHECK_CIRCLE"} size={36} background={backgroundColor} />
+        </Box>
+      </Box>
+    </TouchableOpacity>
+  );
+});
+
+CardReport.displayName = "CardReport";
+
+/**
+ * Componente Box para a interação da  ui.
+ */
+export default asBaseComponent(CardReport);

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

@@ -1,136 +1,140 @@
-/**
- * IMPORTS
- */
-import type React from "react";
-import { type DimensionValue, type ViewProps } from "react-native";
-
-type ICardReport = 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
-   */
-  generatedDate?: string;
-  generatedTime?: string;
-  status?: string;
-
-  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 { ICardReport };
+/* eslint-disable no-undef */
+/**
+ * IMPORTS
+ */
+import type React from "react";
+import { type DimensionValue, type ViewProps } from "react-native";
+
+type ICardReport = 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
+   */
+  generatedDate?: string;
+  generatedTime?: string;
+  status?: string;
+
+  children?: React.ReactNode;
+
+  // eslint-disable-next-line no-unused-vars
+  onPress: (data: T) => void;
+
+  /**
+   * 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 { ICardReport };