jornada-ui 0.2.4

package/src/components/box/styles.ts

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

package/src/components/button/index.tsx

@@ -0,0 +1,75 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { Text, TouchableOpacity, type TextStyle, ActivityIndicator } from "react-native";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import { type IButtonProps } from "./interface";
+
+// styles
+import { styles } from "./styles";
+
+const Button = forwardRef<any, IButtonProps>((props, ref): React.ReactElement => {
+  const {
+    title = "Button",
+    width,
+    height,
+    backgroundColor,
+    borderStyled,
+    flexStyle,
+    paddingStyle,
+    marginStyle,
+    testID,
+    opacity = 1,
+    children,
+    style,
+    fontStyle,
+    buttonTextStyle,
+    onPress,
+    isLoading,
+    ...res
+  } = props;
+
+  const styleProps = {
+    testID,
+    width,
+    height,
+    opacity,
+    backgroundColor,
+    children,
+    borderStyled,
+    flexStyle,
+    paddingStyle,
+    marginStyle,
+    fontStyle,
+    buttonTextStyle,
+    isLoading,
+    style,
+  } as IButtonProps;
+
+  Button.displayName = "Button";
+
+  return (
+    <TouchableOpacity
+      ref={ref}
+      activeOpacity={0.7}
+      testID={testID}
+      style={[styles(styleProps).buttonStyle, style]}
+      onPress={onPress}
+      {...res}
+    >
+      {isLoading ? (
+        <ActivityIndicator testID="button-loading" size="small" color="white" />
+      ) : (
+        <Text style={[styles(styleProps).buttonTextStyle as TextStyle]}>{title}</Text>
+      )}
+    </TouchableOpacity>
+  );
+});
+
+/**
+ * Componente Button para a interação da  ui.
+ */
+export default asBaseComponent(Button);

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

@@ -0,0 +1,153 @@
+/**
+ * IMPORTS
+ */
+import type React from "react";
+import { type DimensionValue, type TouchableOpacityProps } from "react-native";
+import type { theme } from "../../styles/theme/theme";
+
+type IButtonProps = TouchableOpacityProps & {
+  /**
+   * Define se o botão está carregando
+   */
+  isLoading: boolean;
+
+  /**
+   * Texto do botão
+   */
+  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;
+    textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
+  };
+
+  children?: React.ReactNode;
+
+  /**
+   * TestID para testes automático e identificação
+   */
+  testID?: string;
+
+  /**
+   * A propriedade CSS abreviada border define a borda de um elemento. Ele define os valores de largura da borda, estilo da borda e cor da borda.
+   */
+  borderStyled?: {
+    borderStyle?: "solid" | "dotted" | "dashed";
+
+    borderRadius?: number | DimensionValue;
+    borderTopRightRadius?: number | DimensionValue;
+    borderTopLeftRadius?: number | DimensionValue;
+    borderBottomRightRadius?: number | DimensionValue;
+    borderBottomLeftRadius?: number | DimensionValue;
+
+    borderWidth?: number | DimensionValue;
+    borderLeftWidth?: number | DimensionValue;
+    borderRightWidth?: number | DimensionValue;
+    borderTopWidth?: number | DimensionValue;
+    borderBottomWidth?: number | DimensionValue;
+
+    borderColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderRightColor?: string;
+    borderTopColor?: string;
+  };
+
+  /**
+   * Propriedades que define a orientação do button que é usada para representar uma página. Na maioria das vezes, esse valores corresponde ao posicionamento alvo da página impressa, se aplicável.
+   */
+  flexStyle?: {
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    flex?: string | number;
+    flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    textAlign?: "auto" | "center" | "left" | "right" | "justify";
+    justifyContent?:
+      | "flex-start"
+      | "flex-end"
+      | "center"
+      | "space-between"
+      | "space-around"
+      | "space-evenly";
+  };
+
+  /**
+   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
+   */
+  marginStyle?: {
+    margin?: number | DimensionValue;
+    marginLeft?: number | DimensionValue;
+    marginRight?: number | DimensionValue;
+    marginTop?: number | DimensionValue;
+    marginBottom?: number | DimensionValue;
+  };
+
+  /**
+   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
+   */
+  paddingStyle?: {
+    padding?: number | DimensionValue;
+    paddingLeft?: number | DimensionValue;
+    paddingRight?: number | DimensionValue;
+    paddingTop?: number | DimensionValue;
+    paddingBottom?: number | DimensionValue;
+  };
+
+  /**
+   * A propriedade CSS height define a altura de um elemento. A altura de um elemento é a distância do topo da borda superior do elemento ao fundo da borda inferior.
+   */
+  height?: number | DimensionValue;
+
+  /**
+   * A propriedade CSS width define a largura de um elemento. A largura de um elemento é a distância do topo da borda esquerda do elemento ao fundo da borda direita.
+   */
+  width?: number | DimensionValue;
+
+  /**
+   * 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;
+
+  /**
+   * Propriedade texto que sera renderizado pro usuário final
+   */
+  text?: string;
+
+  /**
+   * A propriedade abreviada CSS da fonte define todas as propriedades diferentes da fonte de um elemento. Alternativamente, ele define a fonte de um elemento como uma fonte do sistema.
+   */
+  fontStyle?: {
+    font?: string;
+    fontSize?: number;
+    fontWeight?: "100" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "bold";
+    fontFamily?: string;
+    letterSpacing?: keyof typeof theme.letterSpacing;
+    lineHeight?: number;
+  };
+};
+
+/**
+ * EXPORT
+ */
+export type { IButtonProps };

package/src/components/button/styles.ts

@@ -0,0 +1,35 @@
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+
+// typings
+import { type IButtonProps } from "./interface";
+import { type IGlobalCss } from "../../styles/global/interface";
+
+// styles
+import { stylesGlobal } from "../../styles/global/styles";
+
+/**
+ * Interface ButtonProps
+ */
+interface ButtonProps extends Omit<IButtonProps, "color"> {}
+
+const styles = (props: ButtonProps) =>
+  StyleSheet.create({
+    buttonStyle: { ...stylesGlobal(props), ...props } as IGlobalCss,
+    buttonTextStyle: {
+      color: props.buttonTextStyle?.color ?? "black",
+      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.buttonTextStyle?.textAlign,
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/capture-photo/index.tsx

@@ -0,0 +1,133 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { Image, TouchableOpacity } from "react-native";
+
+// components
+import Typography from "../typography";
+
+// icons / svg
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import { type ICapturePhotoProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { styles } from "./styles";
+
+const CapturePhoto = forwardRef<any, ICapturePhotoProps>((props, ref): React.ReactElement => {
+  const {
+    imageComprovante,
+    takePhotoWithImagePicker,
+    testID,
+    width,
+    height,
+    marginStyle,
+    flexStyle,
+    title,
+    borderStyled,
+    color,
+    fontStyle,
+    opacity,
+    style,
+    smallText,
+    paddingStyle,
+  } = props;
+
+  const styleProps = {
+    imageComprovante,
+    takePhotoWithImagePicker,
+    testID,
+    width,
+    height,
+    marginStyle,
+    flexStyle,
+    title,
+    borderStyled,
+    color,
+    fontStyle,
+    opacity,
+    smallText,
+    paddingStyle,
+    style,
+  } as ICapturePhotoProps;
+
+  return (
+    <>
+      {imageComprovante ? (
+        <TouchableOpacity
+          ref={ref}
+          activeOpacity={0.7}
+          onPress={takePhotoWithImagePicker}
+          testID={testID}
+        >
+          <Image
+            style={[
+              {
+                width,
+                height,
+                borderWidth: Number(borderStyled?.borderWidth),
+                borderColor: borderStyled?.borderColor,
+                borderRadius: Number(borderStyled?.borderRadius),
+              },
+              styles(styleProps).capturePhoto,
+            ]}
+            source={{ uri: imageComprovante }}
+          />
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity
+          ref={ref}
+          activeOpacity={0.7}
+          style={[styles(styleProps).capturePhoto, style]}
+          onPress={takePhotoWithImagePicker}
+          testID={testID}
+        >
+          <Icons icon={"CAMERA_PLUS"} size={theme.fontSizes["2xl"] || 24} color={color?.colorSvg} />
+          <Typography
+            text={title.text || "Sem foto capturada."}
+            align={
+              flexStyle?.textAlign === "left" || flexStyle?.textAlign === "right"
+                ? flexStyle.textAlign
+                : "center"
+            }
+            color={color?.colorText ? color.colorText : theme.colors.gray[875]}
+            size={fontStyle?.fontSize ? fontStyle?.fontSize : theme.fontSizes.md}
+            fontFamily={
+              fontStyle?.fontFamily ? fontStyle?.fontFamily : theme.fonts.inter_regular_400
+            }
+            lineHeight={fontStyle?.lineHeight ? fontStyle?.lineHeight : theme.fontSizes["2xl"]}
+            letterSpacing={fontStyle?.letterSpacing ? fontStyle?.letterSpacing : ("regular" as any)}
+          />
+          {smallText && (
+            <Typography
+              text={title.textSmallPhoto || "aqui vai o texto de baixo da foto"}
+              align={
+                flexStyle?.textAlign === "left" || flexStyle?.textAlign === "right"
+                  ? flexStyle.textAlign
+                  : "center"
+              }
+              color={color?.colorText ? color.colorText : theme.colors.gray[875]}
+              size={fontStyle?.fontSize ? fontStyle?.fontSize : theme.fontSizes.sm}
+              fontFamily={
+                fontStyle?.fontFamily ? fontStyle?.fontFamily : theme.fonts.inter_regular_400
+              }
+              lineHeight={fontStyle?.lineHeight ? fontStyle?.lineHeight : theme.fontSizes.md}
+              letterSpacing={
+                fontStyle?.letterSpacing ? fontStyle?.letterSpacing : ("regular" as any)
+              }
+            />
+          )}
+        </TouchableOpacity>
+      )}
+    </>
+  );
+});
+
+/**
+ * Componente CapturePhoto para a interação da  ui.
+ */
+export default asBaseComponent(CapturePhoto);

package/src/components/capture-photo/interface.d.ts

@@ -0,0 +1,160 @@
+/**
+ * IMPORTS
+ */
+import type React from "react";
+import { TouchableOpacityProps, type DimensionValue, type StyleProp } from "react-native";
+import type { theme } from "../../styles/theme/theme";
+
+// typing
+
+type ICapturePhotoProps = TouchableOpacityProps & {
+  /**
+   * Estilo customizado
+   */
+  style?: StyleProp;
+
+  /**
+   * Função que tira uma foto.
+   */
+  takePhotoWithImagePicker: () => void;
+
+  /**
+   * Valor com a foto do capturada
+   */
+  imageComprovante: string | null;
+
+  /**
+   * 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 smallPhoto define quando vai ser foto pequena exemplo para manutenção : foto1 em baixo o texto informando o lado :direito , esquerdo ou frente.
+   */
+  smallText: boolean;
+
+  title: {
+    text: string;
+    textSmallPhoto?: string;
+  };
+
+  children?: React.ReactNode;
+
+  /**
+   * TestID para testes automático e identificação
+   */
+  testID?: string;
+
+  /**
+   * A propriedade CSS abreviada border define a borda de um elemento. Ele define os valores de largura da borda, estilo da borda e cor da borda.
+   */
+  borderStyled?: {
+    borderStyle?: "solid" | "dotted" | "dashed";
+
+    borderRadius?: number | DimensionValue;
+    borderTopRightRadius?: number | DimensionValue;
+    borderTopLeftRadius?: number | DimensionValue;
+    borderBottomRightRadius?: number | DimensionValue;
+    borderBottomLeftRadius?: number | DimensionValue;
+
+    borderWidth?: number | DimensionValue;
+    borderLeftWidth?: number | DimensionValue;
+    borderRightWidth?: number | DimensionValue;
+    borderTopWidth?: number | DimensionValue;
+    borderBottomWidth?: number | DimensionValue;
+
+    borderColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderRightColor?: string;
+    borderTopColor?: string;
+  };
+
+  /**
+   * Propriedades que define a orientação do button que é usada para representar uma página. Na maioria das vezes, esse valores corresponde ao posicionamento alvo da página impressa, se aplicável.
+   */
+  flexStyle?: {
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    flex?: string | number;
+    flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    textAlign?: "auto" | "center" | "left" | "right" | "justify";
+    justifyContent?:
+      | "flex-start"
+      | "flex-end"
+      | "center"
+      | "space-between"
+      | "space-around"
+      | "space-evenly";
+  };
+
+  /**
+   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
+   */
+  marginStyle?: {
+    margin?: number | DimensionValue;
+    marginLeft?: number | DimensionValue;
+    marginRight?: number | DimensionValue;
+    marginTop?: number | DimensionValue;
+    marginBottom?: number | DimensionValue;
+  };
+
+  /**
+   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
+   */
+  paddingStyle?: {
+    padding?: number | DimensionValue;
+    paddingLeft?: number | DimensionValue;
+    paddingRight?: number | DimensionValue;
+    paddingTop?: number | DimensionValue;
+    paddingBottom?: number | DimensionValue;
+  };
+
+  /**
+   * A propriedade CSS height define a altura de um elemento. A altura de um elemento é a distância do topo da borda superior do elemento ao fundo da borda inferior.
+   */
+  height?: number | DimensionValue;
+
+  /**
+   * A propriedade CSS width define a largura de um elemento. A largura de um elemento é a distância do topo da borda esquerda do elemento ao fundo da borda direita.
+   */
+  width?: number | DimensionValue;
+
+  /**
+   * 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;
+
+  /**
+   * Propriedade texto que sera renderizado pro usuário final
+   */
+  text?: string;
+
+  /**
+   * 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.
+   */
+  color?: {
+    colorSvg?: string;
+    colorText?: string;
+    colorTextBold?: string;
+    colorTextData?: string;
+  };
+
+  /**
+   * A propriedade abreviada CSS da fonte define todas as propriedades diferentes da fonte de um elemento. Alternativamente, ele define a fonte de um elemento como uma fonte do sistema.
+   */
+  fontStyle?: {
+    font?: string;
+    fontSize?: number;
+    fontWeight?: "100" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "bold";
+    fontFamily?: string;
+    letterSpacing?: keyof typeof theme.letterSpacing;
+    lineHeight?: number;
+  };
+};
+
+/**
+ * EXPORTS
+ */
+export type { ICapturePhotoProps };

package/src/components/capture-photo/styles.ts

@@ -0,0 +1,26 @@
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+
+// typing
+import { type ICapturePhotoProps } from "./interface";
+import { type IGlobalCss } from "../../styles/global/interface";
+
+// styles
+import { stylesGlobal } from "../../styles/global/styles";
+
+interface CapturePhotoProps extends ICapturePhotoProps {}
+const styles = (props: CapturePhotoProps) =>
+  StyleSheet.create({
+    capturePhoto: {
+      ...stylesGlobal(props),
+      opacity: props.opacity,
+      ...props,
+    } as IGlobalCss,
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };