react-native-exp-fig 0.1.21 → 0.1.22

package/lib/typescript/src/components/history-activities-card/interface.d.ts

@@ -0,0 +1,120 @@
+/**
+ * IMPORTS
+ */
+import type React from "react";
+import { type DimensionValue, type ViewProps } from "react-native";
+import type { PropertyType } from "../../utils/get-icon-by-property";
+/**
+ * INTERFACE
+ */
+declare 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;
+    };
+    iconColor?: string;
+};
+/**
+ * EXPORT
+ */
+export type { ICardActivitiesWeek };

package/lib/typescript/src/components/modal-change-activity/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+/**
+ * TYPES
+ */
+interface IModalChangeActivityProps {
+    visible: boolean;
+    onClose: () => void;
+    modalConfirm: (newData: {
+        label: string;
+        value: string;
+        key: number;
+    }) => void;
+    dataRegistro: string;
+    descricao: string;
+    imagemUrl?: string;
+}
+/**
+ * COMPONENT
+ */
+export declare const ModalChangeActivity: React.FC<IModalChangeActivityProps>;
+export {};

package/lib/typescript/src/helpers/text-utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Função para limitar a quantidade de caracteres de um texto
+ * @param text - O texto a ser limitado
+ * @param maxLength - Número máximo de caracteres (padrão: 20)
+ * @returns Texto limitado com "..." se exceder o limite
+ */
+export declare const truncateText: (text: string, maxLength?: number) => string;

package/lib/typescript/src/index.d.ts

@@ -32,6 +32,8 @@ export { ActivitiesDaily } from "./components/activities-daily";
 export { ActivitiesProgress } from "./components/activities-progress";
 export { ProfileMenuOption } from "./components/profile-menu-option";
 export { ModalActivities } from "./components/modal-activities";
+export { HistoryActivitiesCard } from "./components/history-activities-card";
+export { ModalChangeActivity } from "./components/modal-change-activity";
 export { multiply } from "./utils/mutiply";
 export { formatDate, getLastSevenDays, formHoursMinute } from "./utils/format-data";
 export { theme } from "./styles/theme/theme";

package/lib/typescript/src/stories/history-activities-card/history-activities-card.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryObj, Meta } from "@storybook/react";
+import HistoryActivitiesCard from "../../components/history-activities-card";
+declare const meta: Meta<typeof HistoryActivitiesCard>;
+export default meta;
+declare type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutAvatar: Story;
+export declare const LongActivity: Story;
+export declare const MinimalData: Story;
+export declare const CompleteData: Story;

package/lib/typescript/src/stories/modal-change-activity/modal-change-activity.stories.d.ts

@@ -0,0 +1,9 @@
+/**
+ * IMPORTS
+ */
+import type { Meta, StoryObj } from "@storybook/react";
+import { ModalChangeActivity } from "../../components/modal-change-activity";
+declare const meta: Meta<typeof ModalChangeActivity>;
+export default meta;
+declare type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/typescript/src/utils/get-icon-by-property/index.d.ts

@@ -2,13 +2,14 @@
  * IMPORTS
  */
 import React from "react";
+export declare type PropertyType = "operacao_veiculo" | "manutencao" | "aguardando_carga" | "disposicao_veiculo_parado" | "aguardando_descarga" | "descanso" | "repouso_semanal" | "repouso_noturno" | "refeicao" | "ferias";
 /**
  * Function that will map property types to corresponding icons in SVG 🛠️.
  * @param propertyType
  * @param color
  * @returns SVG
  */
-declare const getIconByProperty: React.FC<any>;
+declare const getIconByProperty: (propertyType: PropertyType, color?: string) => React.ReactNode;
 /**
  * EXPORTS
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-exp-fig",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Biblioteca para desenvolvimento dos componentes para utilizar nos app da Expresso Figueiredo.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -95,7 +95,7 @@
     "@storybook/react-native": "^8.5.3",
     "@storybook/react-webpack5": "^8.3.5",
     "@testing-library/jest-native": "^5.4.3",
-    "@testing-library/react-native": "^12.3.0",
+    "@testing-library/react-native": "^13.2.2",
     "@types/jest": "^29.5.5",
     "@types/react": "^18.2.44",
     "@typescript-eslint/eslint-plugin": "^8.23.0",
@@ -119,11 +119,15 @@
     "react": "18.3.1",
     "react-native": "0.76.6",
     "react-native-builder-bob": "^0.32.0",
+    "react-test-renderer": "^18.3.1",
     "release-it": "^17.10.0",
-    "storybook": "^8.3.5"
+    "storybook": "^8.3.5",
+    "typescript": "4.8.4"
   },
   "resolutions": {
-    "@types/react": "^18.2.44"
+    "@types/react": "^18.2.44",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "workspaces": [
     "example"
@@ -183,15 +187,14 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-matcher-utils": "^29.7.0",
     "react": "*",
-    "react-dom": "^18.3.1",
+    "react-dom": "*",
     "react-native": "*",
-    "react-native-exp-fig": "^0.1.1",
+    "react-native-exp-fig": "^0.1.20",
     "react-native-gesture-handler": "^2.19.0",
     "react-native-reanimated": "^3.16.7",
-    "react-native-safe-area-context": "^4.11.0",
+    "react-native-safe-area-context": "*",
     "react-native-svg": "^15.6.0",
     "react-native-web": "^0.19.12",
-    "react-test-renderer": "^18.2.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "typescript": "4.8.4"

package/src/@types/as-base-component.ts

@@ -0,0 +1,9 @@
+import type React from "react";
+
+export function asBaseComponent<P>(
+  Component: React.ComponentType<P>,
+  // eslint-disable-next-line no-unused-vars
+  _options?: P
+): React.ComponentType<P> {
+  return Component;
+}

package/src/common/icons-svg/constants/index.ts

@@ -57,6 +57,7 @@ const SVG_NAME = {
   HOURGLASS: "hourglass",
   HOUSE: "house",
   ISLAND: "island",
+  EXCLAMATION_TRIANGLE: "exclamation-triangle",
 };
 
 /**

package/src/common/icons-svg/eclamation-triangle/index.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import { type ISvgProps } from "../interface";
+
+const SvgIconWarningTriangle: React.FC<ISvgProps> = ({
+  color,
+  size,
+  background,
+}) => (
+  <Svg
+    width={size ?? 36}
+    height={size ?? 36}
+    viewBox="0 0 36 36"
+    fill="none"
+  >
+    {/* Triângulo com cantos arredondados usando curvas (Q) */}
+    <Path
+      d="M18 4 
+        C19 4 20 5 20.5 6 
+        L33.5 30 
+        C34 31 33 32 32 32 
+        H4 
+        C3 32 2 31 2.5 30 
+        L15.5 6 
+        C16 5 17 4 18 4 
+        Z"
+      fill={background ?? "#F4B31D"}
+    />
+
+    {/* Traço da exclamação */}
+    <Path
+      d="M18 13V20"
+      stroke={color ?? "#fff"}
+      strokeWidth="2.5"
+      strokeLinecap="round"
+    />
+
+    {/* Ponto da exclamação */}
+    <Path
+      d="M18 25a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      fill={color ?? "#fff"}
+    />
+  </Svg>
+);
+
+export { SvgIconWarningTriangle };

package/src/common/icons-svg/index.tsx

@@ -57,6 +57,7 @@ import { SvgIconHourglass } from "./hourglass";
 import { SvgCurrencyCircleDollar } from "./currency-circle-dollar";
 import { SvgPackage } from "./package";
 import { SvgIconHouse } from "./house";
+import { SvgIconWarningTriangle } from "./eclamation-triangle"; 
 
 // typing
 import { ISvgProps } from "./interface";
@@ -197,7 +198,10 @@ const Icons: React.FC<ISvgProps> = ({ icon, color, size, background }) => {
           background={background}
         />
       );
-
+    
+    case "EXCLAMATION_TRIANGLE":
+      return <SvgIconWarningTriangle icon={"EXCLAMATION_TRIANGLE"} color={color} size={size} background={background} />;
+    
     case "PLUS":
       return <SvgIconPlus color={color} size={size} icon={"PLUS"} />;
 

package/src/common/icons-svg/truck/index.tsx

@@ -19,14 +19,14 @@ const IconTruck: React.FC<ISvgProps> = ({ color, size, ...res }) => (
     {...res}
   >
     <Path
-      stroke={color ?? "#050022"}
+      stroke={color ?? "#fff"}
       strokeWidth={2}
       strokeLinecap="round"
       strokeLinejoin="round"
       d="M10 17h4V5H2v12h3M20 17h2v-3.34a4 4 0 00-1.17-2.83L19 9h-5M14 17h1"
     />
     <Path
-      stroke={color ?? "#050022"}
+      stroke={color ?? "#fff"}
       strokeWidth={2}
       strokeLinecap="round"
       strokeLinejoin="round"

package/src/components/box/index.tsx

@@ -1,47 +1,49 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { View } from "react-native";
-
-// typings
-import { IBoxProps } from "./interface";
-
-// styles
-import { styles } from "./styles";
-
-/**
- * Componente Box para envolver outros componentes de forma flexível.
- */
-export const Box: React.FC<IBoxProps> = ({
-  children,
-  width,
-  height,
-  backgroundColor,
-  borderStyled,
-  flexStyle,
-  paddingStyle,
-  marginStyle,
-  opacity = 1,
-  testID = "box",
-  style,
-}) => {
-  // Criando o objeto de estilos dinamicamente
-  const styleProps: Partial<IBoxProps> = {
-    width,
-    height,
-    backgroundColor,
-    borderStyled,
-    flexStyle,
-    paddingStyle,
-    marginStyle,
-    opacity,
-    style,
-  };
-
-  return (
-    <View testID={testID} style={[styles(styleProps).boxStyle, style]}>
-      {children}
-    </View>
-  );
-};
+/**
+ * IMPORTS
+ */
+import { forwardRef } from "react";
+import { View } from "react-native";
+
+// typings
+import { IBoxProps } from "./interface";
+
+// styles
+import { styles } from "./styles";
+
+/**
+ * Componente Box para envolver outros componentes de forma flexível.
+ */
+export const Box = forwardRef<View, IBoxProps>(({
+  children,
+  width,
+  height,
+  backgroundColor,
+  borderStyled,
+  flexStyle,
+  paddingStyle,
+  marginStyle,
+  opacity = 1,
+  testID = "box",
+  style,
+}, ref) => {
+  // Criando o objeto de estilos dinamicamente
+  const styleProps: Partial<IBoxProps> = {
+    width,
+    height,
+    backgroundColor,
+    borderStyled,
+    flexStyle,
+    paddingStyle,
+    marginStyle,
+    opacity,
+    style,
+  };
+
+  return (
+    <View ref={ref} testID={testID} style={[styles(styleProps).boxStyle, style]}>
+      {children}
+    </View>
+  );
+});
+
+Box.displayName = "Box";

package/src/components/history-activities-card/index.tsx

@@ -0,0 +1,217 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { Image } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+//commons/ icons
+import { IMAGES } from "../../common/constants";
+
+// typings
+import type { ICardActivitiesWeek } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { getIconByProperty } from "../../utils/get-icon-by-property";
+
+// helpers
+import { truncateText } from "../../helpers/text-utils";
+
+const HistoryActivitiesCard = forwardRef<any, ICardActivitiesWeek>(
+  (props, ref): React.ReactElement => {
+    const {
+      testID,
+      backgroundColor,
+      idAtividade,
+      name_activitie,
+      referencia,
+      type_activitie,
+      data_start,
+      data_end,
+      duration,
+      avatar,
+    } = props;
+    return (
+      <Box
+        ref={ref}
+        testID={testID}
+        width={"100%"}
+        backgroundColor={theme.colors.neutral[25]}
+        borderStyled={{
+          borderRadius: theme.borderWidths.thick_medium,
+        }}
+        marginStyle={{
+          marginBottom: theme.margins["2xs"],
+        }}
+      >
+        <Box
+          width={"100%"}
+          height={30}
+          backgroundColor={backgroundColor ?? theme.colors.green[400]}
+          borderStyled={{
+            borderTopLeftRadius: theme.borderWidths.thin_bold,
+            borderTopRightRadius: theme.borderWidths.thin_bold,
+            borderColor: theme.colors.blue[400],
+          }}
+          flexStyle={{
+            justifyContent: "center",
+          }}
+        >
+          <Typography
+            text={`ATIVIDADE ${!data_end ? "EM ANDAMENTO" : ""} #${idAtividade}`}
+            color={theme.colors.neutral[25]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_semi_bold_600}
+            fontWeight={"500"}
+            lineHeight={theme.fontSizes.lg}
+            marginLeft={theme.margins["2xs"]}
+          />
+        </Box>
+        <Box
+          width={"100%"}
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+          paddingStyle={{
+            padding: theme.paddings["2xs"],
+          }}
+        >
+          <Box width={"100%"}>
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Image
+                style={{
+                  width: 45,
+                  height: 45,
+                  borderRadius: 10,
+                  marginRight: 10,
+                }}
+                source={{ uri: avatar ?? IMAGES.IMAGE_ANONIMA }}
+              />
+
+              <Box width={"100%"}>
+                <Box
+                  width={"84%"}
+                  flexStyle={{
+                    flexDirection: "row",
+                    flexWrap: "wrap",
+                  }}
+                >
+                  <Typography
+                    style={{ flexShrink: 1 }}
+                    text={`Início: `}
+                    size={theme.fontSizes.xs}
+                    color={theme.colors.black[10]}
+                    fontFamily={theme.fonts.inter_semi_bold_600}
+                  />
+                  <Typography
+                    text={`${data_start} ás ${data_end ?? "00/00/0000 00:00"}`}
+                    size={theme.fontSizes["2xs"]}
+                    color={theme.colors.black[180]}
+                    fontFamily={theme.fonts.inter_regular_400}
+                  />
+                </Box>
+
+                <Box
+                  flexStyle={{
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                  }}
+                  width={"84%"}
+                >
+                  <Box flexStyle={{ flexDirection: "row" }}>
+                    <Typography
+                      text={`Duração: `}
+                      size={theme.fontSizes.xs}
+                      color={theme.colors.black[10]}
+                      fontFamily={theme.fonts.inter_semi_bold_600}
+                    />
+
+                    <Typography
+                      text={`${duration ?? "00:00"}`}
+                      size={theme.fontSizes["2xs"]}
+                      color={theme.colors.black[180]}
+                      fontFamily={theme.fonts.inter_light_300}
+                    />
+                  </Box>
+
+                  {getIconByProperty(referencia, backgroundColor)}
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+
+        <Box
+          width={"100%"}
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+          paddingStyle={{
+            padding: theme.paddings["2xs"],
+          }}
+          borderStyled={{
+            borderTopWidth: theme.borderWidths.thin_medium,
+            borderTopColor: theme.colors.neutral[200],
+          }}
+        >
+          <Box marginStyle={{ marginRight: 2 }}>
+            <Typography
+              text={`Atividade:`}
+              size={theme.fontSizes.xs}
+              color={theme.colors.gray[700]}
+              fontFamily={theme.fonts.inter_regular_400}
+            />
+
+            <Typography
+              text={truncateText(name_activitie ?? "Sem informação")}
+              size={theme.fontSizes.sm}
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+            />
+          </Box>
+
+          <Box
+            flexStyle={{
+              flexDirection: "column",
+              alignItems: "flex-end",
+              justifyContent: "center",
+            }}
+          >
+            <Typography
+              text={`Tipo atividade: `}
+              size={theme.fontSizes.xs}
+              color={theme.colors.gray[700]}
+              fontFamily={theme.fonts.inter_regular_400}
+            />
+
+            <Typography
+              text={`${type_activitie}`}
+              size={theme.fontSizes.sm}
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+              marginLeft={4}
+            />
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+);
+
+HistoryActivitiesCard.displayName = "HistoryActivitiesCard";
+
+const HistoryActivitiesCardComponent = asBaseComponent(HistoryActivitiesCard);
+
+/**
+ * Componente Box para a interação da  ui.
+ */
+export default HistoryActivitiesCardComponent;
+export { HistoryActivitiesCardComponent as HistoryActivitiesCard };