react-native-exp-fig 0.1.14 → 0.1.16

package/src/styles/global/interface.d.ts

@@ -1,141 +1,146 @@
-/*
- * IMPORTS
- */
-import React from "react";
-import { DimensionValue } from "react-native";
-import { theme } from "../theme/theme";
-
-export interface IGlobalCss {
-  /**
-   * 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 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?: keyof typeof theme.fonts;
-    letterSpacing?: keyof typeof theme.letterSpacing;
-    lineHeight?: number;
-  };
-
-  /**
-   * A propriedade CSS opacity define o nível de opacidade de um elemento. O valor da opacidade varia de 0 (totalmente transparente) a 1 (totalmente opaco).
-   */
-  disabled?: boolean;
-
-  /**
-   * A propriedade  background do icon da cor.
-   */
-  backgroundColorIcon?: string;
-}
-
-// /**
-//  * EXPORTS
-//  */
-// export { IGlobalCss };
+/*
+ * IMPORTS
+ */
+import React from "react";
+import { DimensionValue } from "react-native";
+import { theme } from "../theme/theme";
+
+export interface IGlobalCss {
+  /**
+   * 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 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?: keyof typeof theme.fonts;
+    letterSpacing?: keyof typeof theme.letterSpacing;
+    lineHeight?: number;
+  };
+
+  /**
+   * A propriedade CSS opacity define o nível de opacidade de um elemento. O valor da opacidade varia de 0 (totalmente transparente) a 1 (totalmente opaco).
+   */
+  disabled?: boolean;
+
+  /**
+   * A propriedade  background do icon da cor.
+   */
+  backgroundColorIcon?: string;
+
+  /**
+   * props que indica o loading do button
+   */
+  isLoading?: boolean;
+}
+
+// /**
+//  * EXPORTS
+//  */
+// export { IGlobalCss };

package/src/styles/theme/theme.ts

@@ -76,6 +76,7 @@ const colors = {
     100: "#DFAE00",
     50: "#F0CA4B",
     75: "#F59E0B",
+    90: "#957C5F",
   },
 };
 

package/src/utils/format-data/index.ts

@@ -1,66 +1,66 @@
-/**
- * Formata uma data do tipo Date para o formato DD/MM/YYYY
- * @param date Objeto Date a ser formatado
- * @returns String no formato DD/MM/YYYY
- */
-const formatDate = (date: Date): string => {
-  const day = String(date.getDate()).padStart(2, "0");
-  const month = String(date.getMonth() + 1).padStart(2, "0"); // Mês começa em 0
-  const year = date.getFullYear();
-
-  return `${day}/${month}/${year}`;
-};
-
-export { formatDate };
-
-/**
- * Formata uma data do tipo Date para o formato DD/MM/YYYY
- * @param date Objeto Date a ser formatado
- * @returns String no formato DD/MM/YYYY
- */
-const formHoursMinute = (segundos: string): string => {
-  const totalSegundos = parseInt(segundos, 10);
-  const horas = Math.floor(totalSegundos / 3600);
-  const minutos = Math.floor((totalSegundos % 3600) / 60);
-
-  const horasFormatadas = String(horas).padStart(2, "0");
-  const minutosFormatados = String(minutos).padStart(2, "0");
-
-  return `${horasFormatadas}:${minutosFormatados}`;
-};
-
-export { formHoursMinute };
-
-/**
- * Retorna as sete últimas datas do dias
- * @returns Array<{ date: number, dayName: string, fullDate: Date }>
- */
-
-const getLastSevenDays = () => {
-  const today = new Date();
-  const days = [];
-
-  // adiciona a opção "Todos" no início
-  days.push({
-    date: "all",
-    dayName: "Todos",
-    fullDate: new Date(),
-  });
-
-  const dayNames = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
-
-  for (let i = 6; i >= 0; i--) {
-    const date = new Date(today);
-    date.setDate(today.getDate() - i);
-
-    days.push({
-      date: date.getDate(),
-      dayName: dayNames[date.getDay()],
-      fullDate: date,
-    });
-  }
-
-  return days;
-};
-
-export { getLastSevenDays };
+/**
+ * Formata uma data do tipo Date para o formato DD/MM/YYYY
+ * @param date Objeto Date a ser formatado
+ * @returns String no formato DD/MM/YYYY
+ */
+const formatDate = (date: Date): string => {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0"); // Mês começa em 0
+  const year = date.getFullYear();
+
+  return `${day}/${month}/${year}`;
+};
+
+export { formatDate };
+
+/**
+ * Formata uma data do tipo Date para o formato DD/MM/YYYY
+ * @param date Objeto Date a ser formatado
+ * @returns String no formato DD/MM/YYYY
+ */
+const formHoursMinute = (segundos: string): string => {
+  const totalSegundos = parseInt(segundos, 10);
+  const horas = Math.floor(totalSegundos / 3600);
+  const minutos = Math.floor((totalSegundos % 3600) / 60);
+
+  const horasFormatadas = String(horas).padStart(2, "0");
+  const minutosFormatados = String(minutos).padStart(2, "0");
+
+  return `${horasFormatadas}:${minutosFormatados}`;
+};
+
+export { formHoursMinute };
+
+/**
+ * Retorna as sete últimas datas do dias
+ * @returns Array<{ date: number, dayName: string, fullDate: Date }>
+ */
+
+const getLastSevenDays = () => {
+  const today = new Date();
+  const days = [];
+
+  // adiciona a opção "Todos" no início
+  days.push({
+    date: "all",
+    dayName: "Todos",
+    fullDate: new Date(),
+  });
+
+  const dayNames = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
+
+  for (let i = 6; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(today.getDate() - i);
+
+    days.push({
+      date: date.getDate(),
+      dayName: dayNames[date.getDay()],
+      fullDate: date,
+    });
+  }
+
+  return days;
+};
+
+export { getLastSevenDays };

package/src/utils/status-color/return-color.ts

@@ -11,13 +11,24 @@ function getBorderColor(status: string) {
 }
 function getStatusColor(status: StatusType): string {
   const statusColors: Record<StatusType, string> = {
-    Concluido: theme.colors.green[400],
+    Concluido: theme.colors.green[250],
     Cancelado: theme.colors.red[900],
-    Pendente: theme.colors.yellow[50],
+    Pendente: theme.colors.yellow[75],
     Andamento: theme.colors.yellow[50],
   };
 
   return statusColors[status];
 }
 
-export { getStatusColor, getBorderColor };
+function getStatusTextColor(status: StatusType): string {
+  const statusColors: Record<StatusType, string> = {
+    Concluido: theme.colors.neutral[25],
+    Cancelado: theme.colors.neutral[25],
+    Pendente: theme.colors.neutral[50],
+    Andamento: theme.colors.neutral[50],
+  };
+
+  return statusColors[status];
+}
+
+export { getStatusColor, getBorderColor, getStatusTextColor };