react-native-exp-fig 0.1.44 → 2.0.0

package/src/components/activity-timeline/styles.ts

@@ -1,69 +0,0 @@
-/**
- * IMPORTS
- */
-import { StyleSheet } from "react-native";
-import { theme } from "../../styles/theme/theme";
-
-export const ROW_HEIGHT = 72;
-
-const styles = StyleSheet.create({
-  listContainer: { paddingVertical: 8 },
-  row: {
-    width: "100%",
-    minHeight: ROW_HEIGHT,
-    paddingVertical: 8,
-    paddingHorizontal: 8,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 6,
-  },
-  badge: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    backgroundColor: theme.colors.blue[500],
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  card: {
-    flex: 1,
-    borderRadius: 10,
-  },
-  title: { marginBottom: 6 },
-  pill: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderWidth: 1,
-    borderRadius: 10,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    gap: 4,
-  },
-  pillOk: {
-    backgroundColor: "#F3F3F5",
-    borderColor: "#C4D4E5",
-  },
-  pillInvalid: {
-    backgroundColor: "#FDE7E7",
-    borderColor: theme.colors.red[900],
-  },
-  sep: { marginHorizontal: 8, opacity: 0.5 },
-  actions: { flexDirection: "row", gap: 8 },
-  iconButton: {
-    width: 36,
-    height: 36,
-    borderRadius: 8,
-    backgroundColor: theme.colors.neutral[25],
-    borderWidth: 1,
-    borderColor: theme.colors.neutral[200],
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: 36,
-  },
-});
-
-/**
- * EXPORTS
- */
-export { styles };

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

@@ -1,83 +0,0 @@
-/**
- * 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

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

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

@@ -1,35 +0,0 @@
-/**
- * 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

@@ -1,163 +0,0 @@
-/**
- * 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

@@ -1,36 +0,0 @@
-/**
- * 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

@@ -1,51 +0,0 @@
-/**
- * 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

@@ -1,139 +0,0 @@
-/**
- * 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

@@ -1,33 +0,0 @@
-/**
- * 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 };

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

@@ -1,55 +0,0 @@
-/**
- * IMPORTS
- */
-
-import { StyleSheet } from "react-native";
-
-// typings
-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: 16,
-  }),
-
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    flexWrap: "wrap",
-    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.black[25],
-    fontFamily: theme.fonts.inter_regular_400,
-    fontSize: 12,
-    marginLeft: 4,
-  }
-});
-
-/**
- * EXPORTS
- */
-export { styles}