jornada-ui 0.4.8 → 0.4.9

package/lib/typescript/module/src/components/card-maintenance/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/card-maintenance/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;;AAgIpD,wBAAgD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/card-maintenance/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAA+B,MAAM,OAAO,CAAC;AAcpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;;AA+HpD,wBAAgD"}

package/lib/typescript/module/src/components/modal-maintenance/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/modal-maintenance/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAK1D,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA0ItD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/modal-maintenance/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAM1D,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiKtD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/typescript/module/src/utils/get-status-color/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * IMPORTS
+ */
+/**
+ * Function that will map property types to corresponding icons in SVG 🛠️.
+ * @param propertyType
+ * @returns SVG
+ */
+declare const getStatusColorHex: (propertyType: string) => string;
+/**
+ * EXPORTS
+ */
+export { getStatusColorHex };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/utils/get-status-color/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/utils/get-status-color/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH;;;;GAIG;AACH,QAAA,MAAM,iBAAiB,iBAAkB,MAAM,WAc9C,CAAC;AAEF;;GAEG;AACH,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jornada-ui",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "Biblioteca para desenvolvimento dos componentes para utilizar nos app",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/components/card-maintenance/index.tsx

@@ -1,146 +1,145 @@
-/**
- * IMPORTS
- */
-import React, { useState } from "react";
-
-import { Image, View, TouchableOpacity } from "react-native";
-
-import ModalMaintenance from "../modal-maintenance";
-
-// components
-import Box from "../../components/box";
-import Typography from "../../components/typography";
-
-// theme
-import { theme } from "../../styles/theme/theme";
-
-// typings
-import type { ICardMaintenance } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-/**
- * COMPONENT
- */
-const CardMaintenance: React.FC<ICardMaintenance> = ({
-  numero,
-  dataRegistro,
-  cavalo,
-  imagemUrl,
-  descricao,
-}) => {
-  const [showModal, setShowModal] = useState(false);
-  return (
-    <>
-      <TouchableOpacity onPress={() => setShowModal(true)} activeOpacity={0.9}>
-        <Box
-          width={"100%"}
-          flexStyle={{ flexDirection: "row" }}
-          backgroundColor={theme.colors.neutral[25]}
-          borderStyled={{
-            borderRadius: theme.borderWidths.thick_medium,
-          }}
-          marginStyle={{ marginBottom: theme.margins.xs }}
-        >
-          <View
-            style={{
-              width: 15,
-              backgroundColor: theme.colors.green[250],
-              borderTopLeftRadius: theme.borderWidths.thick_medium,
-              borderBottomLeftRadius: theme.borderWidths.thick_medium,
-            }}
-          />
-          <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings["2xs"] }}>
-            <Box
-              marginStyle={{ marginTop: 4 }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text={`LAVAGEM #`}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_bold}
-                size={theme.fontSizes.md}
-              />
-              <Typography
-                text={`${numero}`}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_bold}
-                size={theme.fontSizes.md}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: 4 }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text={`Data de registro: `}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.xs}
-              />
-              <Typography
-                text={`${dataRegistro}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.xs}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: 4 }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text={`Cavalo: `}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.xs}
-              />
-              <Typography
-                text={`${cavalo}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.xs}
-              />
-            </Box>
-
-            <Box
-              borderStyled={{
-                borderWidth: 1,
-                borderColor: theme.colors.black[25],
-                borderRadius: theme.borderWidths.thick_medium,
-              }}
-              flexStyle={{
-                justifyContent: "center",
-                alignItems: "center",
-              }}
-            >
-              <Image
-                source={{ uri: imagemUrl ?? "https://placehold.co/300x300" }}
-                style={{
-                  width: "100%",
-                  height: 139,
-                  borderRadius: theme.borderWidths.thick_medium,
-                }}
-                resizeMode="cover"
-              />
-            </Box>
-          </Box>
-        </Box>
-      </TouchableOpacity>
-
-      <ModalMaintenance
-        visible={showModal}
-        onClose={() => setShowModal(false)}
-        imagemUrl={imagemUrl}
-        dataRegistro={dataRegistro}
-        descricao={descricao}
-        numero={7}
-      />
-    </>
-  );
-};
-
-CardMaintenance.displayName = "CardMaintenance";
-
-export default asBaseComponent(CardMaintenance);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useState } from "react";
+
+import { Image, View, TouchableOpacity } from "react-native";
+
+import ModalMaintenance from "../modal-maintenance";
+
+// components
+import Box from "../../components/box";
+import Typography from "../../components/typography";
+
+// theme
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import type { ICardMaintenance } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+import { getStatusColorHex } from "../../utils/get-status-color";
+
+/**
+ * COMPONENT
+ */
+
+const CardMaintenance = forwardRef<any, ICardMaintenance>((props, ref): React.ReactElement => {
+  const { numero, dataRegistro, cavalo, imagemUrl, descricao, status, titutlo } = props;
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      <TouchableOpacity ref={ref} onPress={() => setShowModal(true)} activeOpacity={0.9}>
+        <Box
+          width={"100%"}
+          flexStyle={{ flexDirection: "row" }}
+          backgroundColor={theme.colors.neutral[25]}
+          borderStyled={{
+            borderRadius: theme.borderWidths.thick_medium,
+          }}
+          marginStyle={{ marginBottom: theme.margins.xs }}
+        >
+          <View
+            style={{
+              width: 15,
+              backgroundColor: getStatusColorHex(status) ?? theme.colors.green[250],
+              borderTopLeftRadius: theme.borderWidths.thick_medium,
+              borderBottomLeftRadius: theme.borderWidths.thick_medium,
+            }}
+          />
+          <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings["2xs"] }}>
+            <Box
+              marginStyle={{ marginTop: 4 }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={`${titutlo ?? "LAVAGEM"} #`}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_bold}
+                size={theme.fontSizes.md}
+              />
+              <Typography
+                text={`${numero}`}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_bold}
+                size={theme.fontSizes.md}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: 4 }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={`Data de registro: `}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${dataRegistro}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: 4, marginBottom: 8 }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={`Cavalo: `}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${cavalo}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              borderStyled={{
+                borderWidth: 1,
+                borderColor: theme.colors.black[25],
+                borderRadius: theme.borderWidths.thick_medium,
+              }}
+              flexStyle={{
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <Image
+                source={{ uri: imagemUrl ?? "https://placehold.co/300x300" }}
+                style={{
+                  width: "100%",
+                  height: 139,
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+                resizeMode="cover"
+              />
+            </Box>
+          </Box>
+        </Box>
+      </TouchableOpacity>
+
+      <ModalMaintenance
+        visible={showModal}
+        onClose={() => setShowModal(false)}
+        imagemUrl={imagemUrl}
+        dataRegistro={dataRegistro}
+        descricao={descricao}
+        numero={7}
+        status={status}
+      />
+    </>
+  );
+});
+
+CardMaintenance.displayName = "CardMaintenance";
+
+export default asBaseComponent(CardMaintenance);

package/src/components/card-maintenance/interface.d.ts

@@ -1,8 +1,33 @@
-export interface ICardMaintenance {
-  numero: number;
-  dataRegistro: string;
-  cavalo: string;
-  corBarra?: string;
-  imagemUrl?: string;
-  descricao: string;
-}
+/**
+ * IMPORTS
+ */
+interface ICardMaintenance {
+  /**título do card */
+  titutlo?: string;
+
+  /**número da manutenção */
+  numero: number;
+
+  /**data de registro da manutenção */
+  dataRegistro: string;
+
+  /**identificação do cavalo que realizou a manutenção */
+  cavalo: string;
+
+  /**cor da barra lateral do card */
+  corBarra?: string;
+
+  /**image capturada para informar a manutenção */
+  imagemUrl?: string;
+
+  /**descrição da solicitação de manutençao */
+  descricao: string;
+
+  /**status da manutenção */
+  status: string;
+}
+
+/**
+ * EXPORTS
+ */
+export { ICardMaintenance };