jornada-ui 0.4.10 → 0.4.12

package/src/components/card-scheduled-journey/interface.d.ts

@@ -1,140 +1,145 @@
-/*
- * IMPORTS
- */
-import type React from "react";
-import { DimensionValue, ViewProps } from "react-native";
-
-import { SVG_NAME } from "../../common/icons-svg/constants";
-
-/**
- * INTERFACE
- */
-type ICardScheduledJourney = ViewProps & {
-  /**
-   *  props que mostra o titulo correspondentes para a ultima atualização
-   */
-  title: string;
-
-  /**
-   *  props que mostra a duração correspondentes para a ultima atualização
-   */
-  duracao: string;
-
-  /**
-   * 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.
-   */
-  widthChildren?: number | DimensionValue;
-
-  /**
-   * A propriedade que define o tipo que icones serao usados
-   */
-  icon?: keyof typeof SVG_NAME;
-
-  /**
-   * A propriedade CSS borderRight define a cor de fundo de um elemento do lado direito.
-   */
-  borderRight?: 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..
-   */
-  backgroundColor?: 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 { ICardScheduledJourney };
+/*
+ * IMPORTS
+ */
+import type React from "react";
+import { DimensionValue, ViewProps } from "react-native";
+
+import { SVG_NAME } from "../../common/icons-svg/constants";
+
+/**
+ * INTERFACE
+ */
+type ICardScheduledJourney = ViewProps & {
+  /**
+   *  props que mostra o titulo correspondentes para a ultima atualização
+   */
+  title: string;
+
+  /**
+   *  props que mostra o subtitulo correspondentes para a ultima atualização
+   */
+  subTitle?: string;
+
+  /**
+   *  props que mostra a duração correspondentes para a ultima atualização
+   */
+  duracao: string;
+
+  /**
+   * 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.
+   */
+  widthChildren?: number | DimensionValue;
+
+  /**
+   * A propriedade que define o tipo que icones serao usados
+   */
+  icon?: keyof typeof SVG_NAME;
+
+  /**
+   * A propriedade CSS borderRight define a cor de fundo de um elemento do lado direito.
+   */
+  borderRight?: 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..
+   */
+  backgroundColor?: 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 { ICardScheduledJourney };

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

@@ -0,0 +1,133 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useMemo, useState } from "react";
+import { View, Text, TouchableOpacity, Modal } from "react-native";
+import DateTimePicker from "@react-native-community/datetimepicker";
+
+// commons / svg
+import { Icons } from "../../../common/icons-svg";
+
+// typings
+import { asBaseComponent } from "../../../@types/as-base-component";
+import type { IInputDateTimeProps } from "./interface";
+
+// styles
+import { styles } from "./styles";
+import { theme } from "../../../styles/theme/theme";
+
+/** formatadores no mesmo estilo simples dos seus componentes */
+function fmtDate(d: Date) {
+  const dd = String(d.getDate()).padStart(2, "0");
+  const mm = String(d.getMonth() + 1).padStart(2, "0");
+  const yyyy = d.getFullYear();
+  return `${dd}/${mm}/${yyyy}`;
+}
+function fmtTime(d: Date) {
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mi = String(d.getMinutes()).padStart(2, "0");
+  return `${hh}:${mi}`;
+}
+
+const InputDateTime = forwardRef<any, IInputDateTimeProps>((props, ref): React.ReactElement => {
+  const {
+    mode,
+    titleLabel,
+    sizeTitleLabel,
+    colortitleLabel,
+    backgroundColor,
+    value,
+    onChange,
+    placeholder = mode === "date" ? "Selecione uma data" : "Selecione um horário",
+    minimumDate,
+    maximumDate,
+    disabled,
+    formatDate,
+    formatTime,
+    testID,
+  } = props;
+
+  // estado interno quando o componente não é controlado
+  const [inner, setInner] = useState<Date>(value ?? new Date());
+  const [visible, setVisible] = useState(false);
+
+  const current = value ?? inner;
+
+  const human = useMemo(() => {
+    if (!current) return "";
+    return mode === "date" ? (formatDate ?? fmtDate)(current) : (formatTime ?? fmtTime)(current);
+  }, [current, mode, formatDate, formatTime]);
+
+  const styleProps: IInputDateTimeProps = {
+    ...props,
+    titleLabel,
+    sizeTitleLabel,
+    colortitleLabel,
+    backgroundColor,
+  };
+
+  function commit(next: Date) {
+    if (!value) setInner(next);
+    onChange?.(next);
+    setVisible(false);
+  }
+
+  return (
+    <View ref={ref} style={styles(styleProps).container}>
+      {titleLabel ? <Text style={styles(styleProps).label}>{titleLabel}</Text> : null}
+
+      <TouchableOpacity
+        testID={testID ?? "input-date-time"}
+        style={styles(styleProps).selectBox}
+        onPress={() => !disabled && setVisible(true)}
+        disabled={disabled}
+      >
+        <Icons
+          size={theme.fontSizes["md"]}
+          color={theme.colors.blue[500]}
+          icon={mode === "date" ? "CALENDAR" : "CALENDAR"}
+          style={styles(styleProps).iconStandard}
+        />
+        <Text style={human ? styles(styleProps).selectedText : styles(styleProps).placeholderText}>
+          {human || placeholder}
+        </Text>
+      </TouchableOpacity>
+
+      <Modal
+        testID="modal-container"
+        visible={visible}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setVisible(false)}
+      >
+        <View style={styles(styleProps).modalOverlay}>
+          <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"}
+                />
+              </TouchableOpacity>
+            </View>
+
+            <DateTimePicker
+              value={current ?? new Date()}
+              mode={mode}
+              display="default"
+              onChange={(_e: any, selected?: Date) => {
+                if (selected) commit(selected);
+                else setVisible(false);
+              }}
+              minimumDate={minimumDate}
+              maximumDate={maximumDate}
+            />
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+});
+
+export default asBaseComponent(InputDateTime);

package/src/components/inputs/input-date-time/interface.d.ts

@@ -0,0 +1,25 @@
+/* eslint-disable no-unused-vars */
+export type InputDateTimeMode = "date" | "time";
+
+export interface IInputDateTimeProps {
+  mode: InputDateTimeMode;
+
+  titleLabel?: string;
+  sizeTitleLabel?: number;
+  colortitleLabel?: string;
+  backgroundColor?: string;
+
+  value?: Date;
+  onChange?: (next: Date) => void;
+
+  placeholder?: string;
+  minimumDate?: Date;
+  maximumDate?: Date;
+
+  disabled?: boolean;
+
+  formatDate?: (d: Date) => string;
+  formatTime?: (d: Date) => string;
+
+  testID?: string;
+}

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

@@ -0,0 +1,63 @@
+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 };

package/src/components/list-devices/helpers/get-icon-by-status.tsx

@@ -0,0 +1,20 @@
+/**
+ * IMPORTS
+ */
+import { SVG_NAME } from "../../../common/icons-svg/constants";
+
+/**
+ * Função que mapeará os ícones correspondentes em SVG 🛠️.
+ * @param propertyType
+ * @returns SVG
+ */
+const getIconKeyByValue = (propertyType: string): keyof typeof SVG_NAME | undefined => {
+  return (Object.keys(SVG_NAME) as Array<keyof typeof SVG_NAME>).find(
+    (key) => SVG_NAME[key] === propertyType
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { getIconKeyByValue };

package/src/components/list-devices/index.tsx

@@ -0,0 +1,102 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+
+// components
+import Box from "../box";
+
+// icons
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import type { IListDevices, IData } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { styles as makeStyles } from "./styles";
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente ListDevices para a interação da ui.
+ */
+const ListDevices = forwardRef<any, IListDevices>(
+  (
+    { data, textColorDescription, titleColor, selectedId, onSelect, defaultSelectedId, disabled },
+    ref
+  ): React.ReactElement => {
+    const isControlled = selectedId !== undefined;
+    const [internalSelected, setInternalSelected] = React.useState<number | null>(
+      defaultSelectedId!
+    );
+
+    const currentSelected = isControlled ? (selectedId ?? null) : internalSelected;
+
+    const handlePress = (device: IData) => {
+      if (disabled) return;
+      if (!isControlled) setInternalSelected(device.id);
+      onSelect?.(device);
+    };
+
+    if (!data?.length) return <Box />;
+
+    return (
+      <>
+        {data.map((history, index) => {
+          const isLast = index === data.length - 1;
+          const isSelected = currentSelected === history.id;
+
+          const s = makeStyles({
+            titleColor,
+            textColorDescription,
+            disabled,
+            isSelected,
+          });
+
+          return (
+            <TouchableOpacity
+              ref={ref}
+              activeOpacity={0.7}
+              testID="list-devices"
+              key={history.id}
+              onPress={() => handlePress(history)}
+              disabled={disabled}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isSelected, disabled }}
+              accessibilityLabel={`Dispositivo ${history.nameDevice}`}
+              style={[
+                s.containerIndicator,
+                !isLast && s.separator,
+                isSelected && s.containerIndicatorSelected,
+              ]}
+            >
+              <Icons
+                icon={"BLUETOOTH"}
+                size={26}
+                background={theme.colors.gray[600]}
+                color={theme.colors.gray[300]}
+              />
+
+              <View style={s.containerMain}>
+                <Text style={[s.title, isSelected && s.titleSelected]}>{history.nameDevice}</Text>
+                {!!history.macDevice && (
+                  <Text style={[s.titleDescription, isSelected && s.descSelected]}>
+                    {history.macDevice}
+                  </Text>
+                )}
+              </View>
+            </TouchableOpacity>
+          );
+        })}
+      </>
+    );
+  }
+);
+
+ListDevices.displayName = "ListDevices";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(ListDevices);

package/src/components/list-devices/interface.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable no-unused-vars */
+/**
+ * IMPORTS
+ */
+
+export type IData = {
+  id: number;
+  macDevice: string;
+  nameDevice: string;
+};
+
+export interface IListDevices {
+  /** dados que vão ser renderizados */
+  data?: IData[];
+
+  /** cor do texto */
+  titleColor?: string;
+
+  /** cor do titulo (não está sendo usada no componente atual, mantida por compat) */
+  titleNumberColor?: string;
+
+  /** cor do texto da descrição */
+  textColorDescription?: string;
+
+  /** (opcional) id selecionado - modo controlado */
+  selectedId?: number | null;
+
+  /** (opcional) seleção inicial - modo não-controlado */
+  defaultSelectedId?: number | null;
+
+  /** callback ao selecionar um item */
+  onSelect?: (device: IData) => void;
+
+  /** desabilita interação */
+  disabled?: boolean;
+}