jornada-ui 0.4.14 → 0.4.16

package/src/components/card-work-session/interface.d.ts

@@ -1,150 +1,151 @@
-/*
- * IMPORTS
- */
-import type React from "react";
-import { ViewProps, type DimensionValue } from "react-native";
-
-/**
- * INTERFACE
- */
-type ICardWorkSession = ViewProps & {
-  /**
-   * props que mostra o nome do usuário
-   */
-  name: string;
-
-  /**
-   * props que mostra a data
-   */
-  workDate: string;
-
-  /**
-   * props que mostra o tempo de jornada
-   */
-  timeWork?: string;
-
-  /**
-   * props que mostra o horário inicial
-   */
-  initialTime?: string;
-
-  /**
-   * props que mostra a duração
-   */
-  duration?: string;
-
-  /**
-   * props que mostra o avatar do usuário
-   */
-  avatar: string;
-
-  handleNavigation: () => void;
-
-  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;
-  };
-};
-
-/**
- * EXPORTS
- */
-export type { ICardWorkSession };
+/*
+ * IMPORTS
+ */
+import type React from "react";
+import { ViewProps, type DimensionValue } from "react-native";
+
+/**
+ * INTERFACE
+ */
+type ICardWorkSession = ViewProps & {
+  /**
+   * props que mostra o nome do usuário
+   */
+  name: string;
+
+  /**
+   * props que mostra a data
+   */
+  workDate: string;
+
+  /**
+   * props que mostra o horário inicial
+   */
+  initialTime?: string;
+
+  /**
+   * props que mostra a duração
+   */
+  duration?: string;
+
+  /**
+   * props que mostra o avatar do usuário
+   */
+  avatar: string;
+
+  handleNavigation: () => void;
+  handleNavigationNotification: () => void;
+
+  /**
+   * props que mostra a quantidade de notificações
+   */
+  counterBadge: number;
+
+  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;
+  };
+};
+
+/**
+ * EXPORTS
+ */
+export type { ICardWorkSession };

package/src/components/inputs/input-date-time/index.tsx

@@ -15,8 +15,9 @@ import type { IInputDateTimeProps } from "./interface";
 // styles
 import { styles } from "./styles";
 import { theme } from "../../../styles/theme/theme";
+import Typography from "../../typography";
 
-/** formatadores no mesmo estilo simples dos seus componentes */
+/** formatadores simples */
 function fmtDate(d: Date) {
   const dd = String(d.getDate()).padStart(2, "0");
   const mm = String(d.getMonth() + 1).padStart(2, "0");
@@ -47,7 +48,6 @@ const InputDateTime = forwardRef<any, IInputDateTimeProps>((props, ref): React.R
     testID,
   } = props;
 
-  // estado interno quando o componente não é controlado
   const [inner, setInner] = useState<Date>(value ?? new Date());
   const [visible, setVisible] = useState(false);
 
@@ -83,14 +83,19 @@ const InputDateTime = forwardRef<any, IInputDateTimeProps>((props, ref): React.R
         disabled={disabled}
       >
         <Icons
-          size={theme.fontSizes["md"]}
+          size={theme.fontSizes.md}
           color={theme.colors.blue[500]}
-          icon={mode === "date" ? "CALENDAR" : "CALENDAR"}
+          icon={mode === "date" ? "CALENDAR" : "TIMER"}
           style={styles(styleProps).iconStandard}
         />
-        <Text style={human ? styles(styleProps).selectedText : styles(styleProps).placeholderText}>
-          {human || placeholder}
-        </Text>
+
+        <Typography
+          text={`${human || placeholder}`}
+          color={theme.colors.blue[500]}
+          fontFamily={theme.fonts.inter_medium_500}
+          size={theme.fontSizes.md}
+          marginLeft={100}
+        />
       </TouchableOpacity>
 
       <Modal
@@ -104,11 +109,7 @@ const InputDateTime = forwardRef<any, IInputDateTimeProps>((props, ref): React.R
           <View style={styles(styleProps).modalContainer}>
             <View style={{ width: "100%", alignItems: "flex-end" }}>
               <TouchableOpacity testID="close-icon" onPress={() => setVisible(false)}>
-                <Icons
-                  size={theme.fontSizes["md"]}
-                  color={theme.colors.blue[500]}
-                  icon={"CLOSED"}
-                />
+                <Icons size={theme.fontSizes.md} color={theme.colors.blue[500]} icon="CLOSED" />
               </TouchableOpacity>
             </View>
 

package/src/components/inputs/input-date-time/styles.ts

@@ -1,63 +1,64 @@
-import { StyleSheet } from "react-native";
-import { theme } from "../../../styles/theme/theme";
-import type { IInputDateTimeProps } from "./interface";
-
-const styles = (props: IInputDateTimeProps) =>
-  StyleSheet.create({
-    container: {
-      width: "100%",
-      marginBottom: 16,
-      opacity: props.disabled ? 0.6 : 1,
-    },
-    label: {
-      fontSize: props.sizeTitleLabel ?? 16,
-      fontWeight: "bold",
-      color: props.colortitleLabel ?? theme.colors.black[100],
-      marginBottom: 5,
-    },
-    selectBox: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      width: "100%",
-      height: 45,
-      borderWidth: 1,
-      borderColor: theme.colors.gray[700],
-      borderRadius: 10,
-      backgroundColor: props.backgroundColor ?? theme.colors.neutral[25],
-      paddingHorizontal: 10,
-      position: "relative",
-    },
-    selectedText: {
-      flex: 1,
-      fontSize: 14,
-      textAlign: "center",
-      color: theme.colors.gray[700],
-    },
-    placeholderText: {
-      flex: 1,
-      textAlign: "center",
-      fontSize: 14,
-      color: theme.colors.gray[700],
-    },
-    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",
-    },
-    iconStandard: {
-      position: "absolute",
-      left: 10,
-    },
-  });
-
-export { styles };
+import { StyleSheet } from "react-native";
+import { theme } from "../../../styles/theme/theme";
+import type { IInputDateTimeProps } from "./interface";
+
+const styles = (props: IInputDateTimeProps) =>
+  StyleSheet.create({
+    container: {
+      width: "100%",
+      marginBottom: 16,
+      opacity: props.disabled ? 0.6 : 1,
+    },
+    label: {
+      fontSize: props.sizeTitleLabel ?? 16,
+      fontWeight: "bold",
+      color: props.colortitleLabel ?? theme.colors.black[100],
+      marginBottom: 5,
+    },
+    selectBox: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "flex-start", // não centraliza o container todo
+      width: "100%",
+      height: 45,
+      borderWidth: 1,
+      borderColor: theme.colors.gray[700],
+      borderRadius: 10,
+      backgroundColor: props.backgroundColor ?? theme.colors.neutral[25],
+      paddingHorizontal: 10,
+      position: "relative",
+    },
+    selectedText: {
+      flex: 1,
+      fontSize: 14,
+      textAlign: "center", // centraliza o texto no espaço disponível
+      color: theme.colors.gray[700],
+      marginLeft: 44,
+    },
+    placeholderText: {
+      flex: 1,
+      textAlign: "center",
+      fontSize: 14,
+      color: theme.colors.gray[700],
+    },
+    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",
+    },
+    iconStandard: {
+      position: "absolute",
+      left: 12, // ícone fixo no canto esquerdo
+    },
+  });
+
+export { styles };