react-native-exp-fig 0.1.0

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

@@ -0,0 +1,40 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, G, Defs, ClipPath } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconNotePencil: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 25 25"
+  >
+    <G
+      stroke={color ?? "#050022"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      clipPath="url(#clip0_5169_183)"
+    >
+      <Path d="M12.047 15.928h-3v-3l9-9 3 3-9 9zM15.797 6.178l3 3"></Path>
+      <Path d="M20.297 12.928v7.5a.75.75 0 01-.75.75h-15a.75.75 0 01-.75-.75v-15a.75.75 0 01.75-.75h7.5"></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_5169_183">
+        <Path fill="#fff" d="M0 0H24V24H0z" transform="translate(.047 .928)"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconNotePencil };

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

@@ -0,0 +1,45 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+/**
+ * typings
+ */
+import { ISvgProps } from "../interface";
+
+const IconPackageCheck: React.FC<ISvgProps> = ({ color, size, ...res }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+    {...res}
+  >
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M16 16l2 2 4-4"
+    ></Path>
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M21 10V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l2-1.14M16.5 9.4L7.55 4.24"
+    ></Path>
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M3.29 7L12 12l8.71-5M12 22V12"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { IconPackageCheck };

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

@@ -0,0 +1,39 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+/**
+ * typings
+ */
+import { ISvgProps } from "../interface";
+
+const IconShoppingCart: React.FC<ISvgProps> = ({ color, size, ...res }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+    {...res}
+  >
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M7 23a1 1 0 100-2 1 1 0 000 2zM18 23a1 1 0 100-2 1 1 0 000 2zM1.05 3.05h2l2.66 12.42a2 2 0 002 1.58h9.78a2 2 0 001.95-1.57l1.65-7.43m-16.97 0h10.242"
+    ></Path>
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M21 5l-8.938 10L8 10.454"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { IconShoppingCart };

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

@@ -0,0 +1,49 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconSteeringWheel: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+  >
+    <G clipPath="url(#a)">
+      <Path
+        fill={color ?? "#050022"}
+        d="M12.455 14.254a.938.938 0 1 0 0-1.875.938.938 0 0 0 0 1.875Z"
+      />
+      <Path
+        stroke={color ?? "#050022"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M12.455 21.192a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z"
+      />
+      <Path
+        stroke={color ?? "#050022"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M3.605 13.837a12 12 0 0 1 17.7 0M11.687 21.159l-2.05-5.48a.75.75 0 0 0-.702-.487H3.966M13.22 21.16l2.052-5.482a.75.75 0 0 1 .704-.486h4.968"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill="#fff" d="M.455.192h24v24h-24z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconSteeringWheel };

package/src/common/icons-svg/steering-wheel-fill/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, G, ClipPath, Defs } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconSteeringWheelFill: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <G clipPath="url(#clip0_7394_1995)">
+      <Path
+        fill={color ?? "#050022"}
+        d="M12 2.25A9.75 9.75 0 1 0 21.75 12 9.77 9.77 0 0 0 12 2.25m5.25 10.5H12a.75.75 0 0 1-.75-.75V6.75a.75.75 0 1 1 1.5 0v4.5h4.5a.75.75 0 1 1 0 1.5"
+      ></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_7394_1995">
+        <Path fill="#fff" d="M0 0h24v24H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconSteeringWheelFill };

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

@@ -0,0 +1,39 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconTimer: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <G
+      stroke={color ?? "#050022"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      clipPath="url(#clip0_52_223)"
+    >
+      <Path d="M12 21a8.25 8.25 0 100-16.5A8.25 8.25 0 0012 21zM12 12.75L15.75 9M9.75 1.5h4.5"></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_52_223">
+        <Path fill="#fff" d="M0 0H24V24H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconTimer };

package/src/common/icons-svg/trophy/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 SvgIconTrophy: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <Path
+      fill={color ?? "#050022"}
+      d="M22 8.25h-2.25v-1.5A.75.75 0 0 0 19 6H5.5a.75.75 0 0 0-.75.75v1.5H2.5A1.5 1.5 0 0 0 1 9.75v1.5A3.75 3.75 0 0 0 4.75 15h.342a7.51 7.51 0 0 0 6.408 5.213V22.5H9.25a.75.75 0 1 0 0 1.5h6a.75.75 0 1 0 0-1.5H13v-2.29c2.994-.302 5.479-2.403 6.383-5.21h.367a3.75 3.75 0 0 0 3.75-3.75v-1.5a1.5 1.5 0 0 0-1.5-1.5M4.75 13.5a2.25 2.25 0 0 1-2.25-2.25v-1.5h2.25v3q0 .375.037.75zm13.5-.834c0 3.33-2.719 6.06-6 6.084a6 6 0 0 1-6-6V7.5h12zM22 11.25a2.25 2.25 0 0 1-2.25 2.25h-.047q.046-.416.047-.834V9.75H22z"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconTrophy };

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

@@ -0,0 +1,39 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+/**
+ * typings
+ */
+import { ISvgProps } from "../interface";
+
+const IconTruck: React.FC<ISvgProps> = ({ color, size, ...res }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+    {...res}
+  >
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M10 17h4V5H2v12h3M20 17h2v-3.34a4 4 0 00-1.17-2.83L19 9h-5M14 17h1"
+    ></Path>
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M7.5 20a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM17.5 20a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { IconTruck };

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

@@ -0,0 +1,43 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconWiFiHigh: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "25"}
+    height={size ?? "25"}
+    fill="none"
+    viewBox="0 0 25 25"
+  >
+    <G clipPath="url(#clip0_912_107)">
+      <Path
+        fill={color ?? "#0DEC08"}
+        d="M12.56 20.767a1.125 1.125 0 100-2.25 1.125 1.125 0 000 2.25z"
+      ></Path>
+      <Path
+        stroke={color ?? "#0DEC08"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M22.31 9.253a15.375 15.375 0 00-19.5 0M19.31 12.61a10.875 10.875 0 00-13.5 0M16.31 15.985a6.375 6.375 0 00-7.5 0"
+      ></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_912_107">
+        <Path fill="#fff" d="M0 0H24V24H0z" transform="translate(.56 .517)"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconWiFiHigh };

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

@@ -0,0 +1,50 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconWiFiX: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "25"}
+    height={size ?? "25"}
+    fill="none"
+    viewBox="0 0 25 25"
+  >
+    <G clipPath="url(#clip0_912_99)">
+      <Path
+        stroke={color ?? "#E72626"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M21.56 5.767l-4.5 4.5M21.56 10.267l-4.5-4.5"
+      ></Path>
+      <Path
+        fill={color ?? "#E72626"}
+        d="M12.56 20.767a1.125 1.125 0 100-2.25 1.125 1.125 0 000 2.25z"
+      ></Path>
+      <Path
+        stroke={color ?? "#E72626"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M16.31 15.985a6.375 6.375 0 00-7.5 0M14.06 5.839a15.433 15.433 0 00-1.5-.072 15.31 15.31 0 00-9.75 3.486M14.06 10.369a11.004 11.004 0 00-1.5-.102c-2.45-.005-4.83.82-6.75 2.343"
+      ></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_912_99">
+        <Path fill="#fff" d="M0 0H24V24H0z" transform="translate(.56 .517)"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconWiFiX };

package/src/components/box/index.tsx

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

package/src/components/box/interface.d.ts

@@ -0,0 +1,31 @@
+/**
+ * IMPORTS
+ */
+
+import { type ViewProps } from "react-native";
+/**
+ * INTERFACE
+ */
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface IBoxProps extends ViewProps, IGlobalCss {
+  /**
+   * A propriedade CSS de Shadow Box adiciona efeitos de sombra em torno da estrutura de um elemento. Você pode definir vários efeitos separados por vírgulas. Uma sombra de caixa é descrita por compensações x e y em relação ao elemento, borrão e raio espalhado e cor.
+   */
+  boxShadow?: string;
+
+  /**
+   * 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..
+   */
+  backgroundColor?: string;
+
+  /**
+   * A propriedade CSS opacity define a transparência de um elemento, ou seja, o grau em que o fundo atrás do elemento é sobreposto. A propriedade aceita um valor entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).
+   */
+  opacity?: number;
+}
+
+/**
+ * EXPORT
+ */
+export type { IBoxProps };

package/src/components/box/styles.ts

@@ -0,0 +1,21 @@
+import { StyleSheet, ViewProps } from "react-native";
+import { IBoxProps } from "./interface.d";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+import { stylesGlobal } from "../../styles/global/styles";
+
+interface BoxProps extends IBoxProps, IGlobalCss {}
+const styles = (props: BoxProps) =>
+  StyleSheet.create({
+    boxStyle: {
+      ...stylesGlobal(props),
+      ...props,
+    } as ViewProps,
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/button/index.tsx

@@ -0,0 +1,61 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Text, TouchableOpacity, TextStyle } from "react-native";
+
+// typings
+import { type IButtonProps } from "./interface";
+
+// styles
+import { styles } from "./styles";
+
+/**
+ * Componente Button para a interação da  ui.
+ */
+export const Button: React.FC<IButtonProps> = ({
+  title = "Button",
+  width = "50%",
+  height,
+  backgroundColor,
+  borderStyled,
+  flexStyle,
+  paddingStyle,
+  marginStyle,
+  testID,
+  opacity = 1,
+  children,
+  style,
+  fontStyle,
+  buttonTextStyle,
+  onPress,
+  ...res
+}) => {
+  const styleProps = {
+    width,
+    height,
+    backgroundColor,
+    borderStyled,
+    flexStyle,
+    paddingStyle,
+    marginStyle,
+    testID,
+    opacity,
+    children,
+    fontStyle,
+    buttonTextStyle,
+    style,
+  } as IButtonProps;
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      testID={"button"}
+      style={styles(styleProps).buttonStyle}
+      onPress={onPress}
+      {...res}
+    >
+      <Text style={[styles(styleProps).buttonTextStyle as TextStyle]}>{title}</Text>
+    </TouchableOpacity>
+  );
+};

package/src/components/button/interface.d.ts

@@ -0,0 +1,40 @@
+/**
+ * IMPORTS
+ */
+import { type TouchableOpacityProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface IButtonProps extends TouchableOpacityProps, Omit<IGlobalCss, "color"> {
+  title: string;
+
+  /**
+   * A propriedade CSS de Shadow Box adiciona efeitos de sombra em torno da estrutura de um elemento. Você pode definir vários efeitos separados por vírgulas. Uma sombra de caixa é descrita por compensações x e y em relação ao elemento, borrão e raio espalhado e cor.
+   */
+  boxShadow?: string;
+
+  /**
+   * A propriedade CSS opacity define a transparência de um elemento, ou seja, o grau em que o fundo atrás do elemento é sobreposto. A propriedade aceita um valor entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).
+   */
+  opacity?: number;
+
+  /**
+   * 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.
+   */
+
+  buttonTextStyle: {
+    color: string;
+    font?: string;
+    fontSize?: number;
+    fontWeight?: "100" | "300" | "400" | "500" | "600" | "700" | "bold";
+    fontFamily?: string;
+    letterSpacing?: number;
+    lineHeight?: number;
+  };
+}
+
+/**
+ * EXPORT
+ */
+export type { IButtonProps };

package/src/components/button/styles.ts

@@ -0,0 +1,34 @@
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+
+// typings
+import { type IButtonProps } from "./interface";
+import { IGlobalCss } from "../../styles/global/interface";
+
+import { stylesGlobal } from "../../styles/global/styles";
+
+/**
+ * Interface ButtonProps
+ */
+interface ButtonProps extends Omit<IButtonProps, "color">, Omit<IGlobalCss, "color"> {}
+
+const styles = (props: ButtonProps) =>
+  StyleSheet.create({
+    buttonStyle: { ...stylesGlobal(props), ...props },
+    buttonTextStyle: {
+      color: props.buttonTextStyle?.color ?? "blue",
+      fontSize: props.buttonTextStyle?.fontSize ?? 14,
+      letterSpacing: props.buttonTextStyle?.letterSpacing ?? 0.5,
+      lineHeight: props.buttonTextStyle?.lineHeight ?? 24,
+      fontWeight: props.buttonTextStyle?.fontWeight,
+      fontFamily: props.buttonTextStyle?.fontFamily ?? "Inter-Medium",
+      textAlign: props.flexStyle?.textAlign,
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };