react-native-exp-fig 0.1.1 → 0.1.3

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

@@ -0,0 +1,36 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { G, Path, Defs, ClipPath } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgTruckTrailer: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "32"}
+    height={size ?? "32"}
+    fill="none"
+    viewBox={`0 0 ${size ?? "32"} ${size ?? "32"}`}
+  >
+    <G clipPath="url(#clip0_472_2058)">
+      <Path
+        fill={color ?? "#fff"}
+        d="M28 12.1V12a7.01 7.01 0 0 0-7-7h-1a2 2 0 0 0-2 2v15h-2V9a1 1 0 0 0-1-1H2a2 2 0 0 0-2 2v13a4 4 0 0 0 7 2.641A4 4 0 0 0 13.875 24h10.25A4 4 0 0 0 32 23v-6a5.01 5.01 0 0 0-4-4.9M4 25a2 2 0 1 1 0-4 2 2 0 0 1 0 4m6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4m18 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4"
+      ></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_472_2058">
+        <Path fill={color ?? "#fff"} d="M0 0h32v32H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgTruckTrailer };

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

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

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

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

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

@@ -1,21 +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 };
+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

@@ -1,61 +1,65 @@
-/**
- * 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>
-  );
-};
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Text, Pressable, 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 (
+    <Pressable
+      activeOpacity={0.7}
+      testID={"button"}
+      style={({ pressed }) => [
+        styles(styleProps).buttonStyle,
+        { opacity: pressed ? 0.75 : 1.0 },
+        style,
+      ]}
+      onPress={onPress}
+      {...res}
+    >
+      <Text style={[styles(styleProps).buttonTextStyle as TextStyle]}>{title}</Text>
+    </Pressable>
+  );
+};

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

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