react-native-exp-fig 0.1.21 → 0.1.22

package/src/components/history-activities-card/interface.ts

@@ -0,0 +1,147 @@
+/**
+ * IMPORTS
+ */
+import type React from "react";
+import { type DimensionValue, type ViewProps } from "react-native";
+import type { PropertyType } from "../../utils/get-icon-by-property";
+
+/**
+ * INTERFACE
+ */
+
+type ICardActivitiesWeek = 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
+   */
+  data_start: string;
+  data_end?: string | null;
+  duration: string;
+  status?: string;
+  name_activitie: string;
+  referencia: PropertyType;
+  type_activitie: string;
+  avatar?: string;
+  idAtividade: 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..
+   * 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 { ICardActivitiesWeek };

package/src/components/modal-change-activity/index.tsx

@@ -0,0 +1,202 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+// libs RN
+import { Modal, View } from "react-native";
+
+// componentes internos
+import { Box } from "../box";
+import { Typography } from "../typography";
+import { SelectOption } from "../selects/select-option";
+import { Button } from "../button";
+
+// styles / theme
+import { theme } from "../../styles/theme/theme";
+
+// assets / icons
+import { Icons } from "../../common/icons-svg";
+
+/**
+ * TYPES
+ */
+interface IModalChangeActivityProps {
+  visible: boolean;
+  onClose: () => void;
+  modalConfirm: (newData: { label: string; value: string; key: number }) => void;
+  dataRegistro: string;
+  descricao: string;
+  imagemUrl?: string;
+}
+
+/**
+ * CONSTANTS
+ */
+const options = [
+  { label: "Selecione atividade", value: "none", key: 0 },
+  { label: "Descanso", value: "descanso", key: 5 },
+  { label: "Repouso Noturno", value: "repouso_noturno", key: 6 },
+  { label: "Refeição", value: "refeição", key: 7 },
+  { label: "Repouso Semanal", value: "repouso_semanal", key: 9 },
+];
+
+/**
+ * COMPONENT
+ */
+export const ModalChangeActivity: React.FC<IModalChangeActivityProps> = ({
+  visible,
+  onClose,
+  modalConfirm,
+  descricao,
+}) => {
+  const [isLoading] = React.useState(false);
+
+  const initial = (descricao ?? "").toLowerCase().replace(/\s+/g, "_");
+  const [selectedOption, setSelectedOption] = React.useState(initial || "none");
+
+  const handleConfirm = () => {
+    const selected = options.find((opt) => opt.value === selectedOption);
+    if (selected && selected.value !== "none") {
+      modalConfirm({
+        label: selected.label,
+        value: selected.value,
+        key: selected.key,
+      });
+    }
+    onClose();
+  };
+
+  return (
+    <Modal animationType="fade" transparent visible={visible}>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "rgba(0,0,0,0.6)",
+        }}
+      >
+        <Box
+          width={346}
+          backgroundColor={theme.colors.orange[500]}
+          borderStyled={{
+            borderRadius: theme.borderWidths.thick_medium,
+          }}
+          paddingStyle={{
+            paddingLeft: theme.paddings["2xs"],
+            paddingRight: theme.paddings["2xs"],
+            paddingTop: theme.paddings.sm,
+            paddingBottom: theme.paddings.sm,
+          }}
+        >
+          <Box
+            marginStyle={{ marginBottom: theme.margins["2xs"], marginLeft: theme.margins["1xs"] }}
+            flexStyle={{ flexDirection: "row", alignItems: "center" }}
+          >
+            <Icons
+              icon="EXCLAMATION_TRIANGLE"
+              color={theme.colors.black[10]}
+              background={theme.colors.yellow[50]}
+              size={22}
+            />
+            <Typography
+              text="Alterar Atividade"
+              color="#fff"
+              marginLeft={theme.margins["2xs"]}
+              fontFamily={theme.fonts.inter_bold_700}
+              size={theme.fontSizes.md}
+            />
+          </Box>
+
+          <Box
+            backgroundColor={theme.colors.neutral[300]}
+            paddingStyle={{ padding: theme.paddings.xs }}
+            borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+          >
+            <Box
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              width={"90%"}
+            >
+              <Typography
+                text={`Deseja realmente alterar sua atividade de ${descricao || "atividade atual"}?`}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+                style={{ flexWrap: "wrap", maxWidth: "100%" }}
+              />
+            </Box>
+
+            <SelectOption
+              titleLabel="Selecione atividade"
+              sizeTitleLabel={theme.fontSizes.xs}
+              dataOption={options}
+              handleSelectDown={(opt) => {
+                const option = options.find((o) => o.label === opt || o.value === opt);
+                if (option) setSelectedOption(option.value);
+              }}
+              backgroundColor={theme.colors.neutral[300]}
+            />
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"]}}
+              flexStyle={{ flexDirection: "row", justifyContent: "space-between" }}
+            >
+              <Button
+                title="CANCELAR"
+                onPress={onClose}
+                width={"48%"}
+                height={36}
+                isLoading={isLoading}
+                disabled={isLoading}
+                backgroundColor={theme.colors.neutral[300]}
+                buttonTextStyle={{
+                  color: theme.colors.blue[100],
+                  fontFamily: "Inter-Medium",
+                  fontSize: theme.fontSizes.xs,
+                  fontWeight: "500",
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+                borderStyled={{
+                  borderWidth: theme.borderWidths.thin,
+                  borderColor: theme.colors.blue[100],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              />
+              <Button
+                title="CONFIRMAR"
+                onPress={handleConfirm}
+                width={"48%"}
+                height={36}
+                isLoading={isLoading}
+                disabled={isLoading}
+                backgroundColor={theme.colors.blue[100]}
+                buttonTextStyle={{
+                  color: "#fff",
+                  fontFamily: "Inter-Medium",
+                  fontSize: theme.fontSizes.xs,
+                  fontWeight: "500",
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+                borderStyled={{
+                  borderWidth: theme.borderWidths.thin,
+                  borderColor: theme.colors.blue[100],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </View>
+    </Modal>
+  );
+};

package/src/components/selects/select-option/index.tsx

@@ -1,100 +1,115 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { useState } from "react";
-import { View, Text, TouchableOpacity, Modal, FlatList } from "react-native";
-
-// typings
-import { ISelectDropDownProps } from "./interface";
-
-// styles
-import { styles } from "./styles";
-import { Icons } from "../../../common/icons-svg";
-import { theme } from "../../../styles/theme/theme";
-
-/**
- * Componente SelectOption para a interação da  ui.
- */
-const SelectOption: React.FC<ISelectDropDownProps> = ({
-  dataOption,
-  handleSelectDown,
-  titleLabel,
-  sizeTitleLabel,
-  colortitleLabel,
-}: ISelectDropDownProps) => {
-  const [selectedValue, setSelectedValue] = useState(dataOption[0]?.value || "");
-  const [modalVisible, setModalVisible] = useState(false);
-
-  const handleSelect = (value: string) => {
-    setSelectedValue(value);
-    setModalVisible(false);
-    handleSelectDown(value);
-  };
-
-  const styleProps = {
-    dataOption,
-    handleSelectDown,
-    titleLabel,
-    sizeTitleLabel,
-    colortitleLabel,
-  } as ISelectDropDownProps;
-
-  return (
-    <View style={styles(styleProps).container}>
-      {/* Titulo para exibir o label */}
-      <Text style={styles(styleProps).label}>{`${titleLabel ?? "Selecione uma opção"}`}:</Text>
-
-      {/* Botão para abrir o modal */}
-      <TouchableOpacity
-        testID="select-box"
-        style={styles(styleProps).selectBox}
-        onPress={() => setModalVisible(true)}
-      >
-        <Text style={styles(styleProps).selectedText}>
-          {dataOption.find((item) => item.value === selectedValue)?.label}
-        </Text>
-
-        <Icons
-          size={theme.fontSizes["md"]}
-          color={theme.colors.blue[500]}
-          icon={"ARROW_DROP_DOWN"}
-        />
-      </TouchableOpacity>
-
-      {/* Modal para exibir as opções */}
-      <Modal testID="modal-container" visible={modalVisible} transparent animationType="fade">
-        <View style={styles(styleProps).modalOverlay}>
-          <View style={styles(styleProps).modalContainer}>
-            <View style={{ width: "100%", alignItems: "flex-end" }}>
-              <TouchableOpacity testID="close-icon" onPress={() => setModalVisible(false)}>
-                <Icons
-                  size={theme.fontSizes["md"]}
-                  color={theme.colors.blue[500]}
-                  icon={"CLOSED"}
-                />
-              </TouchableOpacity>
-            </View>
-            <FlatList
-              data={dataOption || []}
-              keyExtractor={(item) => item.value}
-              renderItem={({ item }) => (
-                <TouchableOpacity
-                  style={styles(styleProps).option}
-                  onPress={() => handleSelect(item.value)}
-                >
-                  <Text style={styles(styleProps).optionText}>{item.label}</Text>
-                </TouchableOpacity>
-              )}
-            />
-          </View>
-        </View>
-      </Modal>
-    </View>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { SelectOption };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { useState } from "react";
+import { View, Text, TouchableOpacity, Modal, FlatList } from "react-native";
+
+// typings
+import { ISelectDropDownProps } from "./interface";
+
+// styles
+import { styles } from "./styles";
+import { Icons } from "../../../common/icons-svg";
+import { theme } from "../../../styles/theme/theme";
+
+/**
+ * Componente SelectOption para a interação da  ui.
+ */
+const SelectOption: React.FC<ISelectDropDownProps> = ({
+  dataOption,
+  handleSelectDown,
+  titleLabel,
+  sizeTitleLabel,
+  colortitleLabel,
+  backgroundColor,
+}: ISelectDropDownProps) => {
+  const [selectedValue, setSelectedValue] = useState(dataOption[0]?.value || "");
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const handleSelect = (value: string) => {
+    setSelectedValue(value);
+    setModalVisible(false);
+    handleSelectDown(value);
+  };
+
+  const styleProps = {
+    dataOption,
+    handleSelectDown,
+    titleLabel,
+    sizeTitleLabel,
+    colortitleLabel,
+    backgroundColor,
+  } as ISelectDropDownProps;
+
+  return (
+    <View style={styles(styleProps).container}>
+      {/* Titulo para exibir o label */}
+      <Text style={styles(styleProps).label}>{`${titleLabel ?? "Selecione uma opção"}`}:</Text>
+
+      {/* Botão para abrir o modal */}
+      <TouchableOpacity
+        testID="select-box"
+        style={[styles(styleProps).selectBox, backgroundColor && { backgroundColor },]}
+        onPress={() => setModalVisible(true)}
+      >
+        <Text style={styles(styleProps).selectedText}>
+          {dataOption.find((item) => item.value === selectedValue)?.label}
+        </Text>
+
+        <Icons
+          size={theme.fontSizes["md"]}
+          color={theme.colors.blue[500]}
+          icon={"ARROW_DROP_DOWN"}
+        />
+      </TouchableOpacity>
+
+      {/* Modal para exibir as opções */}
+      <Modal testID="modal-container" visible={modalVisible} transparent animationType="fade">
+        <View style={styles(styleProps).modalOverlay}>
+          <View style={{
+              width: "90%",
+              backgroundColor: "#fff",
+              borderRadius: 8,
+              padding: 16,
+              maxHeight: "80%",
+            }}>
+            <View style={{ width: "100%", alignItems: "flex-end" }}>
+              <TouchableOpacity testID="close-icon" onPress={() => setModalVisible(false)}>
+                <Icons
+                  size={theme.fontSizes["md"]}
+                  color={theme.colors.blue[500]}
+                  icon={"CLOSED"}
+                />
+              </TouchableOpacity>
+            </View>
+            <FlatList
+              data={dataOption || []}
+              keyExtractor={(item) => item.value}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={{
+                    width: "100%",
+                    paddingVertical: 12,
+                    paddingHorizontal: 8,
+                    alignItems: "flex-start",
+                    borderBottomWidth: 1,
+                    borderColor: "#eee",
+                  }}
+                  onPress={() => handleSelect(item.value)}
+                >
+                  <Text style={styles(styleProps).optionText}>{item.label}</Text>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { SelectOption };

package/src/components/selects/select-option/interface.d.ts

@@ -1,18 +1,18 @@
-/**
- * IMPORTS
- */
-type ISelectDropDownProps = {
-  dataOption: any[];
-  titleLabel: string;
-  sizeTitleLabel?: number;
-  colortitleLabel?: string;
-
-  /**retorna o valor selecionado              */
-  // eslint-disable-next-line no-unused-vars
-  handleSelectDown: (value: string) => void;
-};
-
-/**
- * EXPORTS
- */
-export { ISelectDropDownProps };
+/**
+ * IMPORTS
+ */
+type ISelectDropDownProps = {
+  dataOption: any[];
+  titleLabel: string;
+  sizeTitleLabel?: number;
+  colortitleLabel?: string;
+  backgroundColor?: string;
+  /**retorna o valor selecionado              */
+  // eslint-disable-next-line no-unused-vars
+  handleSelectDown: (value: string) => void;
+};
+
+/**
+ * EXPORTS
+ */
+export { ISelectDropDownProps };