react-native-exp-fig 0.1.0 → 0.1.2

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,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>
-  );
-};
+/**
+ * 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.7 : 1.0 }]}
+      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 };

package/src/components/button/styles.ts

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