jornada-ui 0.4.11 → 0.4.12

package/src/components/selects/select-option/styles.ts

@@ -1,75 +1,74 @@
-/**
- * IMPORTS
- */
-import { StyleSheet } from "react-native";
-
-// typings
-import { type ISelectDropDownProps } from "./interface";
-
-// theme
-import { theme } from "../../../styles/theme/theme";
-
-const styles = (props: ISelectDropDownProps) =>
-  StyleSheet.create({
-    container: {
-      width: "100%",
-      marginBottom: 16,
-    },
-    label: {
-      fontSize: props.sizeTitleLabel ?? 16,
-      fontWeight: "bold",
-      color: props.colortitleLabel ?? theme.colors.black[100],
-      marginBottom: 5,
-    },
-    selectBox: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      width: "100%",
-      height: 45,
-      borderWidth: 1,
-      borderColor: theme.colors.gray[700],
-      borderRadius: 10,
-      backgroundColor: theme.colors.neutral[25],
-      paddingHorizontal: 10,
-    },
-    selectedText: {
-      fontSize: 14,
-      color: "#666",
-    },
-    modalOverlay: {
-      flex: 1,
-      backgroundColor: "rgba(0,0,0,0.5)",
-      justifyContent: "center",
-      alignItems: "center",
-      padding: 24,
-    },
-    modalContainer: {
-      width: "100%",
-      backgroundColor: theme.colors.neutral[25],
-      borderRadius: 10,
-      padding: 15,
-      alignItems: "center",
-    },
-    option: {
-      width: "100%",
-      padding: 10,
-      alignItems: "flex-start",
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.gray[300],
-    },
-    optionText: {
-      fontSize: 14,
-      color: theme.colors.black[100],
-      fontWeight: "500",
-    },
-    closeButtonText: {
-      color: theme.colors.neutral[25],
-      fontWeight: "bold",
-    },
-  });
-
-/**
- * EXPORTS
- */
-export { styles };
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+
+// typings
+import { type ISelectDropDownProps } from "./interface";
+
+// theme
+import { theme } from "../../../styles/theme/theme";
+
+const styles = (props: ISelectDropDownProps) =>
+  StyleSheet.create({
+    container: {
+      width: "100%",
+      marginBottom: 16,
+    },
+    label: {
+      fontSize: props.sizeTitleLabel ?? 16,
+      fontWeight: "bold",
+      color: props.colortitleLabel ?? theme.colors.black[100],
+      marginBottom: 5,
+    },
+    selectBox: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+      height: 45,
+      borderWidth: 1,
+      borderColor: theme.colors.gray[700],
+      borderRadius: 10,
+      backgroundColor: props.backgroundColor ?? theme.colors.neutral[25],
+      paddingHorizontal: 10,
+    },
+    selectedText: {
+      fontSize: 14,
+      color: "#666",
+    },
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: "rgba(0,0,0,0.5)",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: 24,
+    },
+    modalContainer: {
+      width: "100%",
+      backgroundColor: theme.colors.neutral[25],
+      borderRadius: 10,
+      padding: 15,
+    },
+    option: {
+      width: "100%",
+      padding: 10,
+      alignItems: "flex-start",
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.gray[300],
+    },
+    optionText: {
+      fontSize: 14,
+      color: theme.colors.black[100],
+      fontWeight: "500",
+    },
+    closeButtonText: {
+      color: theme.colors.neutral[25],
+      fontWeight: "bold",
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/supply-error-card/index.tsx

@@ -1,109 +1,109 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef, useState } from "react";
-import { TouchableOpacity } from "react-native";
-
-// componentes
-import Box from "../box";
-import Typography from "../typography";
-
-// commons / icons
-import { Icons } from "../../common/icons-svg";
-
-// typings
-import type { SupplyErrorCardProps } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-// styles / theme
-import { theme } from "../../styles/theme/theme";
-
-/**
- * Componente SupplyErrorCard para a interação da  ui.
- */
-const SupplyErrorCard = forwardRef<any, SupplyErrorCardProps>((props, ref): React.ReactElement => {
-  const { backgroundColor, errors, handleOnPress } = props;
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  /**Função para alternar a expansão do card */
-  const handleToggleExpand = () => setIsExpanded((prev) => !prev);
-
-  const firstMessage = errors?.[0];
-
-  return (
-    <TouchableOpacity onPress={handleToggleExpand} activeOpacity={0.9}>
-      <Box
-        ref={ref}
-        width={"100%"}
-        borderStyled={{
-          borderRadius: theme.borderWidths.thick_medium,
-          borderWidth: theme.borderWidths.thin_medium,
-          borderColor: theme.colors.orange[150],
-        }}
-      >
-        <Box
-          width={"100%"}
-          backgroundColor={backgroundColor ?? theme.colors.yellow[120]}
-          borderStyled={{ borderRadius: theme.borderWidths.thin_bold }}
-          flexStyle={{ flexDirection: "row", justifyContent: "space-between" }}
-          paddingStyle={{ padding: theme.paddings.xs }}
-        >
-          <Box width={"10%"}>
-            <Icons icon={"EXCLAMATION_TRIANGLE"} size={32} />
-          </Box>
-
-          <Box width={"70%"} flexStyle={{ justifyContent: "center" }}>
-            {isExpanded ? (
-              errors?.map((error, index) => (
-                <TouchableOpacity
-                  key={error?.id}
-                  activeOpacity={0.7}
-                  onPress={() => handleOnPress(error)}
-                >
-                  <Typography
-                    text={`${index + 1}. ${error.descricao ?? "Sem mensagens de erro"}`}
-                    color={theme.colors.red[900]}
-                    size={theme.fontSizes.sm}
-                    fontFamily={theme.fonts.inter_medium_500}
-                    lineHeight={theme.fontSizes.lg}
-                    marginBottom={theme.margins.xs}
-                  />
-                </TouchableOpacity>
-              ))
-            ) : (
-              <Typography
-                text={firstMessage ? `1. ${firstMessage.descricao}` : "Nenhum erro disponível"}
-                color={theme.colors.red[900]}
-                size={theme.fontSizes.sm}
-                fontFamily={theme.fonts.inter_medium_500}
-                lineHeight={theme.fontSizes.lg}
-              />
-            )}
-          </Box>
-
-          <Box
-            width={"10%"}
-            flexStyle={{
-              alignItems: "flex-end",
-              justifyContent: "flex-start",
-              textAlign: "center",
-            }}
-          >
-            <Icons
-              icon={isExpanded ? "ARROW_CHEVRON_UP" : "ARROW_CHEVRON_DOWN"}
-              size={32}
-              color={theme.colors.gray[800]}
-            />
-          </Box>
-        </Box>
-      </Box>
-    </TouchableOpacity>
-  );
-});
-
-SupplyErrorCard.displayName = "SupplyErrorCard";
-
-/**
- * EXPORTS
- */
-export default asBaseComponent(SupplyErrorCard);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useState } from "react";
+import { TouchableOpacity } from "react-native";
+
+// componentes
+import Box from "../box";
+import Typography from "../typography";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import type { SupplyErrorCardProps } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles / theme
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente SupplyErrorCard para a interação da  ui.
+ */
+const SupplyErrorCard = forwardRef<any, SupplyErrorCardProps>((props, ref): React.ReactElement => {
+  const { backgroundColor, errors, handleOnPress } = props;
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  /**Função para alternar a expansão do card */
+  const handleToggleExpand = () => setIsExpanded((prev) => !prev);
+
+  const firstMessage = errors?.[0];
+
+  return (
+    <TouchableOpacity onPress={handleToggleExpand} activeOpacity={0.9}>
+      <Box
+        ref={ref}
+        width={"100%"}
+        borderStyled={{
+          borderRadius: theme.borderWidths.thick_medium,
+          borderWidth: theme.borderWidths.thin_medium,
+          borderColor: theme.colors.orange[150],
+        }}
+      >
+        <Box
+          width={"100%"}
+          backgroundColor={backgroundColor ?? theme.colors.yellow[120]}
+          borderStyled={{ borderRadius: theme.borderWidths.thin_bold }}
+          flexStyle={{ flexDirection: "row", justifyContent: "space-between" }}
+          paddingStyle={{ padding: theme.paddings.xs }}
+        >
+          <Box width={"10%"}>
+            <Icons icon={"EXCLAMATION_TRIANGLE"} size={32} />
+          </Box>
+
+          <Box width={"70%"} flexStyle={{ justifyContent: "center" }}>
+            {isExpanded ? (
+              errors?.map((error, index) => (
+                <TouchableOpacity
+                  key={error?.id}
+                  activeOpacity={0.7}
+                  onPress={() => handleOnPress(error)}
+                >
+                  <Typography
+                    text={`${index + 1}. ${error.descricao ?? "Sem mensagens de erro"}`}
+                    color={theme.colors.red[900]}
+                    size={theme.fontSizes.sm}
+                    fontFamily={theme.fonts.inter_medium_500}
+                    lineHeight={theme.fontSizes.lg}
+                    marginBottom={theme.margins.xs}
+                  />
+                </TouchableOpacity>
+              ))
+            ) : (
+              <Typography
+                text={firstMessage ? `1. ${firstMessage.descricao}` : "Nenhum erro disponível"}
+                color={theme.colors.red[900]}
+                size={theme.fontSizes.sm}
+                fontFamily={theme.fonts.inter_medium_500}
+                lineHeight={theme.fontSizes.lg}
+              />
+            )}
+          </Box>
+
+          <Box
+            width={"10%"}
+            flexStyle={{
+              alignItems: "flex-end",
+              justifyContent: "flex-start",
+              textAlign: "center",
+            }}
+          >
+            <Icons
+              icon={isExpanded ? "ARROW_CHEVRON_UP" : "ARROW_CHEVRON_DOWN"}
+              size={32}
+              color={theme.colors.gray[800]}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </TouchableOpacity>
+  );
+});
+
+SupplyErrorCard.displayName = "SupplyErrorCard";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(SupplyErrorCard);

package/src/components/supply-error-card/interface.d.ts

@@ -1,133 +1,133 @@
-/* eslint-disable no-unused-vars */
-/**
- * IMPORTS
- */
-import { type DimensionValue, type ViewProps } from "react-native";
-
-/**
- * INTERFACE
- */
-type SupplyErrorCardProps = ViewProps & {
-  /**Propiedade responsavel por armazenar os error */
-  errors?: any[];
-
-  handleOnPress: (data: any) => 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;
-  };
-
-  /**
-   * Propriedade que define o valor a ser pago
-   */
-  valor?: number;
-
-  /**
-   * Lista de mensagens de erro (renderizadas uma abaixo da outra)
-   */
-  messages?: string[];
-  erroIds?: number[];
-};
-
-/**
- * EXPORT
- */
-export type { SupplyErrorCardProps };
+/* eslint-disable no-unused-vars */
+/**
+ * IMPORTS
+ */
+import { type DimensionValue, type ViewProps } from "react-native";
+
+/**
+ * INTERFACE
+ */
+type SupplyErrorCardProps = ViewProps & {
+  /**Propiedade responsavel por armazenar os error */
+  errors?: any[];
+
+  handleOnPress: (data: any) => 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;
+  };
+
+  /**
+   * Propriedade que define o valor a ser pago
+   */
+  valor?: number;
+
+  /**
+   * Lista de mensagens de erro (renderizadas uma abaixo da outra)
+   */
+  messages?: string[];
+  erroIds?: number[];
+};
+
+/**
+ * EXPORT
+ */
+export type { SupplyErrorCardProps };