react-native-exp-fig 0.1.40 → 0.1.42

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

@@ -0,0 +1,29 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+// typings
+import { ISvgProps } from "../interface";
+
+const SvgIconUserCircle: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    // @ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "33"}
+    height={size ?? "33"}
+    fill="none"
+    viewBox={`0 0 ${size ?? "33"} ${size ?? "33"}`}
+  >
+    <Path
+      fill={color ?? "#393939"}
+      d="M16.25 0A16.25 16.25 0 1 0 32.5 16.25 16.267 16.267 0 0 0 16.25 0m-5 16.25a5 5 0 1 1 10 0 5 5 0 0 1-10 0M25.044 5.688l-4.452 4.453a7.475 7.475 0 0 0-8.684 0L7.456 5.688a13.72 13.72 0 0 1 17.588 0M7.456 26.813l4.452-4.454a7.475 7.475 0 0 0 8.684 0l4.452 4.453a13.724 13.724 0 0 1-17.588 0"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconUserCircle };

package/src/components/active-loadings-summary/index.tsx

@@ -0,0 +1,69 @@
+/**
+* IMPORTS
+*/
+import React from "react";
+
+// components
+import Box from "../box";
+import { Typography } from "../../components/typography";
+import { Button } from "../button";
+
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+// typing
+import { IActiveLoadingsSummary } from "./interface";
+
+/**
+* Componente para ser mosrado na tela Home com a quanttidade de carregamentos iniciados + botão de visualizar todos e acessar a ttela
+*/
+const ActiveLoadingsSummary: React.FC<IActiveLoadingsSummary> = ({ count, onPressView }: IActiveLoadingsSummary) => {
+  return (
+    <Box
+      width={"100%"}
+      backgroundColor={theme.colors.neutral[25]}
+      borderStyled={{
+        borderRadius: theme.borderWidths.thick_medium,
+        borderWidth: theme.borderWidths.thin,
+        borderColor: theme.colors.gray[300],
+      }}
+      paddingStyle={{ padding: theme.paddings.xs }}
+      marginStyle={{ marginBottom: theme.margins.xs }}
+      flexStyle={{ flexDirection: "column", alignItems: "flex-start", justifyContent: "flex-start" }}
+    >
+      <Box width={"100%"} flexStyle={{ alignItems: "center" }}>
+        <Typography
+          text={`${count} carregamentos iniciados`}
+          size={theme.fontSizes.sm}
+          fontFamily={theme.fonts.inter_medium_500}
+          color={theme.colors.gray[500]}
+          align={"center"}
+        />
+      </Box>
+      <Button
+        isLoading={false}
+        title="Visualizar carregamentos"
+        width='100%'
+        height={36}
+        backgroundColor={theme.colors.blue[500]}
+        flexStyle={{ alignItems: "center", justifyContent: "center" }}
+        marginStyle={{ marginTop: theme.margins.xs }}
+        buttonTextStyle={{
+          color: theme.colors.neutral[25],
+          fontFamily: theme.fonts.inter_medium_500,
+          fontSize: theme.fontSizes.xs,
+          textAlign: "center",
+        }}
+        borderStyled={{
+          borderWidth: theme.borderWidths.thin,
+          borderColor: theme.colors.blue[500],
+          borderRadius: theme.borderWidths.thick_medium,
+        }}
+        onPress={onPressView}
+      />
+    </Box>
+  );
+};
+
+export { ActiveLoadingsSummary };

package/src/components/active-loadings-summary/interface.d.ts

@@ -0,0 +1,16 @@
+/**
+ * IMPORTS
+ */
+
+interface IActiveLoadingsSummary {
+  /**propriedade que indica a quantidade de carregamentos iniciados */
+  count: number;
+
+  /**função que é chamada ao clicar no botão de visualizar carregamentos */
+  onPressView: () => void;
+}
+
+/**
+ * EXPORTS
+ */
+export { IActiveLoadingsSummary };

package/src/components/alert-critical-load/index.tsx

@@ -0,0 +1,83 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import {
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+// components
+import Box from "../box";
+import { Typography } from "../typography";
+
+// commons
+import { SvgIconWarningTriangle } from "../../common/icons-svg/eclamation-triangle";
+
+
+// typings
+import { IAlertCriticalLoad } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { styles } from "./styles";
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente AlertCriticalLoad para interação do usuário com ui.
+ */
+const AlertCriticalLoad = forwardRef<View, IAlertCriticalLoad>(
+  (props, ref): React.ReactElement => {
+    const {
+      message,
+      backgroundColor = "#FCEBD3",
+      handleToggle,
+      ...rest
+    } = props;
+
+    return (
+      <Box
+        ref={ref}
+        style={[
+          styles.container,
+          {
+            backgroundColor,
+            borderColor: theme.colors.orange[500],
+          },
+        ]}
+        {...rest}
+      >
+        <TouchableOpacity
+          activeOpacity={0.7}
+          onPress={handleToggle}
+          style={styles.header}
+        >
+          <View style={styles.content}>
+            <SvgIconWarningTriangle
+              icon="WARNING_TRIANGLE"
+              size={24}
+              color={theme.colors.orange[500]}
+            />
+
+            <Typography
+              text={message}
+              size={theme.fontSizes.sm}
+              fontFamily={theme.fonts.inter_bold}
+              color={theme.colors.red[900]}
+              style={styles.text}
+            />
+          </View>
+
+
+        </TouchableOpacity>
+      </Box>
+    );
+  }
+);
+
+AlertCriticalLoad.displayName = "AlertCriticalLoad";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(AlertCriticalLoad);

package/src/components/alert-critical-load/interface.ts

@@ -0,0 +1,13 @@
+ interface IAlertCriticalLoad {
+  message: string;
+  backgroundColor?: string;
+  handleToggle?: () => void
+}
+
+
+/**
+ * EXPORTS
+ */
+export {
+  IAlertCriticalLoad
+}

package/src/components/alert-critical-load/styles.ts

@@ -0,0 +1,35 @@
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+
+ const styles = StyleSheet.create({
+  container: {
+    borderWidth: 2,
+    borderRadius: 12,
+    padding: 16,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    flex: 1,
+  },
+  text: {
+    flex: 1,
+  },
+  arrow: {
+    marginLeft: 8,
+  },
+});
+
+
+/**
+ * EXPORTS
+ */
+export { styles }

package/src/components/card-available-load/index.tsx

@@ -0,0 +1,163 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useState } from "react";
+import {
+  TouchableOpacity,
+  LayoutAnimation,
+  Text,
+  View,
+} from "react-native";
+
+// components
+import Box from "../box";
+import { Typography } from "../typography";
+
+// commons / icons
+import { SvgIconArrowOpen } from "../../common/icons-svg/arrow-down";
+
+// typings
+import { ICardAvailableLoad } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { styles } from "./style";
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente CardAvailableLoad para interação do usuário com ui.
+ */
+const CardAvailableLoad = forwardRef<View, ICardAvailableLoad>(
+  (props, ref): React.ReactElement => {
+    const {
+      backgroundColor,
+      isOpen = true,
+      carregamento,
+      ...rest
+    } = props;
+
+    const [isExpanded, setIsExpanded] = useState<boolean>(isOpen);
+
+    const handleToggle = (): void => {
+      LayoutAnimation.configureNext(
+        LayoutAnimation.Presets.easeInEaseOut
+      );
+      setIsExpanded((prev) => !prev);
+    };
+
+    return (
+      <Box
+        ref={ref}
+        style={styles.container(backgroundColor)}
+        {...rest}
+      >
+        {/* HEADER */}
+        <TouchableOpacity
+          style={styles.header}
+          activeOpacity={0.7}
+          onPress={handleToggle}
+        >
+          <Typography
+            text="Detalhes do carregamento"
+            size={theme.fontSizes.lg}
+            fontFamily={theme.fonts.inter_semi_bold_600}
+            color={theme.colors.neutral[25]}
+          />
+
+          <SvgIconArrowOpen
+            icon="ARROW_DROP_DOWN"
+            style={[
+              styles.arrow,
+              {
+                transform: [
+                  { rotate: isExpanded ? "180deg" : "0deg" },
+                ],
+              },
+            ]}
+          />
+        </TouchableOpacity>
+
+        {/* CONTENT */}
+        {isExpanded && (
+          <>
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Typography
+                text="Carregamento -"
+                size={theme.fontSizes.sm}
+                fontFamily={theme.fonts.inter_bold}
+                color={theme.colors.neutral[300]}
+              />
+              <Text style={styles.textOption}>
+                #{carregamento?.numero_carregamento ?? "N/A"}
+              </Text>
+            </Box>
+
+            <Box
+              flexStyle={{ flexDirection: "row", alignItems: "flex-start" }}
+              width="92%"
+            >
+              <Typography
+                text="Local:"
+                size={theme.fontSizes.sm}
+                fontFamily={theme.fonts.inter_bold}
+                lineHeight={18}
+                color={theme.colors.neutral[300]}
+                style={styles.textSpacing}
+              />
+              <Text style={styles.textOption}>
+                {carregamento?.local ?? "N/A"}
+              </Text>
+            </Box>
+
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Typography
+                text="Data previsão:"
+                size={theme.fontSizes.sm}
+                fontFamily={theme.fonts.inter_bold}
+                color={theme.colors.neutral[300]}
+                style={styles.textSpacing}
+              />
+              <Text style={styles.textOption}>
+                {carregamento?.previsao_carregamento?.replace(
+                  " ",
+                  " ás "
+                ) ?? "N/A"}
+              </Text>
+            </Box>
+
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Typography
+                text="Quantidade bobina:"
+                size={theme.fontSizes.sm}
+                fontFamily={theme.fonts.inter_bold}
+                color={theme.colors.neutral[300]}
+              />
+              <Text style={styles.textOption}>
+                {carregamento?.qtd_bobinas ?? "N/A"} BOBINAS
+              </Text>
+            </Box>
+
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Typography
+                text="Peso total:"
+                size={theme.fontSizes.sm}
+                fontFamily={theme.fonts.inter_bold}
+                color={theme.colors.neutral[300]}
+              />
+              <Text style={styles.textOption}>
+                {carregamento?.peso_total_kg ?? "N/A"} KG
+              </Text>
+            </Box>
+          </>
+        )}
+      </Box>
+    );
+  }
+);
+
+CardAvailableLoad.displayName = "CardAvailableLoad";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(CardAvailableLoad);

package/src/components/card-available-load/interface.ts

@@ -0,0 +1,36 @@
+/**
+ * IMPORTS
+ */
+
+import { TextStyle, ViewStyle } from "react-native";
+
+/**
+ * STYLES
+ */
+interface IStyles {
+  container: (bg?: string) => ViewStyle;
+  header: ViewStyle;
+  arrow: ViewStyle;
+  textSpacing: TextStyle;
+  buttonText: TextStyle;
+}
+
+
+interface ICardAvailableLoad {
+  isOpen?: boolean;
+  onPress: () => void;
+  backgroundColor?: string;
+  carregamento: {
+    numero_carregamento: string;
+    local: string;
+    previsao_carregamento: string;
+    qtd_bobinas: number;
+    peso_total_kg: number;
+  }
+}
+
+
+/**
+ * EXPORT
+ */
+export type { ICardAvailableLoad, IStyles };

package/src/components/card-available-load/style.ts

@@ -0,0 +1,51 @@
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+
+
+// typing
+import { IStyles } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const styles = StyleSheet.create<IStyles | any>({
+  container: (bg?: string) => ({
+    width: "100%",
+    padding: theme.paddings.sm,
+    backgroundColor: bg ?? theme.colors.gray[700],
+    borderRadius: 8,
+  }),
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: theme.margins.md,
+  },
+  arrow: {
+    width: 20,
+    height: 20,
+  },
+  textSpacing: {
+    marginTop: theme.margins["2xs"],
+    marginBottom: theme.margins["2xs"],
+  },
+  buttonText: {
+    color: theme.colors.neutral[25],
+    fontFamily: theme.fonts.inter_medium_500,
+    fontSize: theme.fontSizes.md,
+  },
+  textOption: {
+    color: theme.colors.neutral[300],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontSize: 12,
+    marginLeft: 4,
+  }
+});
+
+/**
+ * EXPORTS
+ */
+export { styles}

package/src/components/card-driver-data/index.tsx

@@ -0,0 +1,139 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useState } from "react";
+import {
+  TouchableOpacity,
+  LayoutAnimation,
+  Text,
+  View,
+} from "react-native";
+
+// components
+import Box from "../box";
+import { Typography } from "../typography";
+
+// commons / icons svg
+import { SvgIconUserCircle } from "../../common/icons-svg/user-circle";
+import { SvgIconArrowOpen } from "../../common/icons-svg/arrow-down";
+
+// typings
+import { IDriverJourneyInfo } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { styles } from "./style";
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente CardDriverData para interação do usuário.
+ */
+const CardDriverData = forwardRef<View, IDriverJourneyInfo>(
+  (props, ref): React.ReactElement => {
+    const {
+      isOpen = true,
+      backgroundColor,
+      veiculo,
+      ...rest
+    } = props;
+
+    const [isExpanded, setIsExpanded] = useState<boolean>(isOpen);
+
+    const handleToggle = (): void => {
+      LayoutAnimation.configureNext(
+        LayoutAnimation.Presets.easeInEaseOut
+      );
+      setIsExpanded((prev) => !prev);
+    };
+
+    return (
+      <Box
+        ref={ref}
+        style={styles.container(backgroundColor)}
+        {...rest}
+      >
+        {/* HEADER */}
+        <TouchableOpacity
+          style={styles.header}
+          activeOpacity={0.7}
+          onPress={handleToggle}
+        >
+          <SvgIconUserCircle
+            icon="USER_CIRCLE"
+            color="#393939"
+            size={32}
+          />
+
+          <View style={{ width: "76%" }}>
+            <Typography
+              text="Dados do veículo a ser carregado"
+              size={theme.fontSizes.lg}
+              fontFamily={theme.fonts.inter_bold}
+              color={theme.colors.black[25]}
+            />
+          </View>
+
+          <SvgIconArrowOpen
+            icon="ARROW_DROP_DOWN"
+            color={theme.colors.black[25]}
+            style={[
+              styles.arrow,
+              {
+                transform: [
+                  { rotate: isExpanded ? "180deg" : "0deg" },
+                ],
+              },
+            ]}
+          />
+        </TouchableOpacity>
+
+        {/* CONTENT */}
+        {isExpanded && (
+          <>
+            {/* Placa do veículo */}
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Typography
+                text="Placa do veículo:"
+                size={theme.fontSizes.sm}
+                fontFamily={theme.fonts.inter_bold}
+                color={theme.colors.black[25]}
+              />
+              <Text style={styles.textOption}>
+                {veiculo?.placa ?? "N/A"}
+              </Text>
+            </Box>
+
+            {/* Tipo do veículo */}
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Typography
+                text="Tipo do veículo:"
+                size={theme.fontSizes.sm}
+                fontFamily={theme.fonts.inter_bold}
+                color={theme.colors.black[25]}
+                style={styles.textSpacing}
+              />
+              <Text
+                style={[
+                  styles.textOption,
+                  {
+                    color: "#0088FF",
+                    fontWeight: "bold",
+                  },
+                ]}
+              >
+                {veiculo?.tipo ?? "N/A"}
+              </Text>
+            </Box>
+          </>
+        )}
+      </Box>
+    );
+  }
+);
+
+CardDriverData.displayName = "CardDriverData";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(CardDriverData);

package/src/components/card-driver-data/interface.ts

@@ -0,0 +1,33 @@
+/**
+ * IMPORTS
+ */
+
+import { TextStyle, ViewStyle } from "react-native";
+
+/**
+ * STYLES
+ */
+interface IStyles {
+  container: (bg?: string) => ViewStyle;
+  header: ViewStyle;
+  arrow: ViewStyle;
+  textSpacing: TextStyle;
+  buttonText: TextStyle;
+}
+
+
+interface IDriverJourneyInfo {
+  isOpen?: boolean;
+  onPress: () => void;
+  backgroundColor?: string;
+ veiculo: {
+   placa: string;
+   tipo:  string;
+ },
+}
+
+
+/**
+ * EXPORT
+ */
+export type { IDriverJourneyInfo, IStyles };