jornada-ui 0.2.4

package/src/components/selects/select-option/interface.d.ts

@@ -0,0 +1,25 @@
+import type { TextProps } from "react-native";
+
+type IOptions = {
+  id?: number | string;
+  label: string;
+  value: string;
+};
+/**
+ * IMPORTS
+ */
+type ISelectDropDownProps = TextProps & {
+  dataOption: IOptions[];
+  titleLabel: string;
+  sizeTitleLabel?: number;
+  colortitleLabel?: string;
+
+  /**retorna o valor selecionado              */
+  // eslint-disable-next-line no-unused-vars
+  handleSelectDown: (value: string) => void;
+};
+
+/**
+ * EXPORTS
+ */
+export type { ISelectDropDownProps };

package/src/components/selects/select-option/styles.ts

@@ -0,0 +1,75 @@
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+
+// typings
+import { type ISelectDropDownProps } from "./interface";
+
+// theme
+import { theme } from "../../../styles/theme/theme";
+
+const styles = (props: ISelectDropDownProps) =>
+  StyleSheet.create({
+    container: {
+      width: "100%",
+      marginBottom: 16,
+    },
+    label: {
+      fontSize: props.sizeTitleLabel ?? 16,
+      fontWeight: "bold",
+      color: props.colortitleLabel ?? theme.colors.black[100],
+      marginBottom: 5,
+    },
+    selectBox: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+      height: 45,
+      borderWidth: 1,
+      borderColor: theme.colors.gray[700],
+      borderRadius: 10,
+      backgroundColor: theme.colors.neutral[25],
+      paddingHorizontal: 10,
+    },
+    selectedText: {
+      fontSize: 14,
+      color: "#666",
+    },
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: "rgba(0,0,0,0.5)",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: 24,
+    },
+    modalContainer: {
+      width: "100%",
+      backgroundColor: theme.colors.neutral[25],
+      borderRadius: 10,
+      padding: 15,
+      alignItems: "center",
+    },
+    option: {
+      width: "100%",
+      padding: 10,
+      alignItems: "flex-start",
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.gray[300],
+    },
+    optionText: {
+      fontSize: 14,
+      color: theme.colors.black[100],
+      fontWeight: "500",
+    },
+    closeButtonText: {
+      color: theme.colors.neutral[25],
+      fontWeight: "bold",
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/step-indicator/helpers/get-icon-by-status.tsx

@@ -0,0 +1,20 @@
+/**
+ * IMPORTS
+ */
+import { SVG_NAME } from "../../../common/icons-svg/constants";
+
+/**
+ * Função que mapeará os ícones correspondentes em SVG 🛠️.
+ * @param propertyType
+ * @returns SVG
+ */
+const getIconKeyByValue = (propertyType: string): keyof typeof SVG_NAME | undefined => {
+  return (Object.keys(SVG_NAME) as Array<keyof typeof SVG_NAME>).find(
+    (key) => SVG_NAME[key] === propertyType
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { getIconKeyByValue };

package/src/components/step-indicator/index.tsx

@@ -0,0 +1,170 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { View, Text } from "react-native";
+
+import { getIconKeyByValue } from "./helpers/get-icon-by-status";
+
+// commons / svg
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import { type IStepIndicator } from "./interface";
+
+// styles
+import { styles } from "./styles";
+
+const StepIndicator = forwardRef<any, IStepIndicator>((props, ref): React.ReactElement => {
+  const {
+    data = [],
+    type,
+    backgroundColorBall,
+    textColorDescription,
+    titleColor,
+    titleNumberColor,
+  } = props;
+
+  const StepDefault = () => {
+    return (
+      <>
+        {data!.length > 0 &&
+          data!.map((history, index) => (
+            <View
+              ref={ref}
+              testID="step-indicator"
+              style={styles({}).containerIndicator}
+              key={history.id}
+            >
+              <View style={styles({ backgroundColorBall }).containerBall}>
+                {data!?.length > 1 && index < data!?.length - 1 && (
+                  <View
+                    style={{
+                      width: 2,
+                      height: 84,
+                      marginTop: 116,
+                      position: "relative",
+                      backgroundColor: "#050022",
+                    }}
+                  />
+                )}
+                <Text style={styles({ titleNumberColor }).titleNumber}>
+                  {data!?.length - index}
+                </Text>
+              </View>
+
+              <View style={styles({}).containerMain}>
+                <Text style={styles({ titleColor }).title}>{history?.titleLabel}</Text>
+
+                {history?.data_inicio && (
+                  <Text style={styles({ textColorDescription }).titleDescription}>
+                    {`Inicio: ${history.data_inicio} ás ${history.data_fim}`}
+                  </Text>
+                )}
+
+                {history.description && (
+                  <Text style={styles({ textColorDescription }).titleDescription}>
+                    Duração: {history?.description}
+                  </Text>
+                )}
+              </View>
+            </View>
+          ))}
+      </>
+    );
+  };
+
+  const StepCustom = () => {
+    return (
+      <View
+        style={{
+          width: "100%",
+          height: 84,
+          paddingHorizontal: 24,
+          display: "flex",
+          flexDirection: "row",
+        }}
+      >
+        {data.map((step, indexCustom) => {
+          const titleLabel = getIconKeyByValue(step.titleLabel);
+
+          return (
+            <>
+              <View
+                key={String(Math.random() * 10)}
+                style={{
+                  width: 45,
+                  height: 45,
+                  backgroundColor: indexCustom <= 3 ? "orange" : "transparent",
+                  borderRadius: 50,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderWidth: 1,
+                  borderColor: "#fff",
+                }}
+              >
+                <View
+                  style={{
+                    width: 45,
+                    height: 45,
+                    backgroundColor: "transparent",
+                    borderRadius: 50,
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  {titleLabel && <Icons icon={titleLabel} />}
+                </View>
+                <Text
+                  style={{
+                    position: "absolute",
+                    top: 56,
+                    fontWeight: "600",
+                    fontSize: 10,
+                    lineHeight: 14,
+                    textAlign: "center",
+                    color: "#fff",
+                  }}
+                >
+                  {step.titleLabel}
+                </Text>
+              </View>
+
+              {data!?.length > 1 && indexCustom < data!?.length - 1 && (
+                <View
+                  key={indexCustom}
+                  style={{
+                    width: 90,
+                    height: 2,
+                    marginTop: 24,
+                    position: "relative",
+                    backgroundColor: "orange",
+                  }}
+                />
+              )}
+            </>
+          );
+        })}
+      </View>
+    );
+  };
+
+  const handleRenderComponent = (stepType: "default" | "custom") => {
+    switch (stepType) {
+      case "default":
+        return <StepDefault />;
+      case "custom":
+        return <StepCustom />;
+      default:
+        return <View />;
+    }
+  };
+
+  return <>{handleRenderComponent(type!)}</>;
+});
+
+/**
+ * Componente StepIndicator para a interação da  ui.
+ */
+export default asBaseComponent(StepIndicator);

package/src/components/step-indicator/interface.d.ts

@@ -0,0 +1,36 @@
+/**
+ * IMPORTS
+ */
+
+import type { ViewProps } from "react-native";
+
+type IData = {
+  id: number;
+  titleLabel: string;
+  data_inicio: string;
+  data_fim: string;
+  description: string;
+};
+type IStepIndicator = ViewProps & {
+  /**dados que vão ser renderizados */
+  data?: IData[];
+
+  /**tupo de renderização padrão ou customizada */
+  type?: "default" | "custom";
+
+  /**tamanho do step indicator */
+  backgroundColorBall?: string;
+
+  /**cor do texto */
+  titleColor?: string;
+
+  /**cor do numero do step indicator */
+  titleNumberColor?: string;
+
+  /**cor do texto da descrição */
+  textColorDescription?: string;
+};
+/**
+ * EXPORTS
+ */
+export type { IStepIndicator };

package/src/components/step-indicator/styles.ts

@@ -0,0 +1,66 @@
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+
+// typings
+import { type IStepIndicator } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const styles = (props: IStepIndicator) =>
+  StyleSheet.create({
+    containerIndicator: {
+      width: "100%",
+      height: 86,
+      flexDirection: "row",
+      justifyContent: "flex-start",
+    },
+    containerBall: {
+      width: 32,
+      height: 32,
+      backgroundColor: props.backgroundColorBall ?? theme.colors.blue[500],
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: 16,
+    },
+    title: {
+      color: props.titleColor ?? "black",
+      textAlign: "center",
+      lineHeight: 24,
+      fontSize: theme.fontSizes["sm"],
+      fontWeight: "500",
+      marginLeft: 8,
+    },
+    titleNumber: {
+      color: props.titleNumberColor ?? theme.colors.neutral[25],
+      textAlign: "center",
+      lineHeight: 18,
+      fontFamily: theme.fonts.inter_regular_400,
+      fontSize: theme.fontSizes["xs"],
+      position: "absolute",
+    },
+    titleDescription: {
+      color: props.textColorDescription ?? theme.colors.gray[700],
+      textAlign: "center",
+      lineHeight: 16,
+      fontSize: 12,
+      fontFamily: theme.fonts.inter_light_300,
+      marginLeft: 8,
+    },
+    containerMain: {
+      width: "100%",
+      height: 56,
+      flexDirection: "column",
+      alignItems: "flex-start",
+      marginLeft: 2,
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/typography/index.tsx

@@ -0,0 +1,78 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { Text } from "react-native";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+
+//styles
+import { styles } from "./styles";
+
+import type { ITextInterface } from "./interface";
+
+const Typography = forwardRef<any, ITextInterface>((props, ref): React.ReactElement => {
+  // desestruturando as propiedades do componente
+  const {
+    text = "Hello Dev",
+    color = "#1E1E1E",
+    size = 23,
+    lineHeight = 24,
+    align = "left",
+    textDecoration,
+    fontWeight = "300",
+    fontFamily,
+    margin,
+    marginLeft,
+    marginRight,
+    marginTop,
+    marginBottom,
+    padding,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    numberOfLines,
+    ellipsizeMode,
+  } = props;
+
+  // montando os dados que estão vindo via props para o componente
+  const data = {
+    color,
+    size,
+    lineHeight,
+    align,
+    textDecoration,
+    fontWeight,
+    fontFamily,
+    margin,
+    marginLeft,
+    marginRight,
+    marginTop,
+    marginBottom,
+    padding,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+  } as ITextInterface;
+
+  return (
+    <Text
+      ref={ref}
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      style={styles(data).text}
+    >
+      {text}
+    </Text>
+  );
+});
+
+Typography.displayName = "Text";
+
+/**
+ * Componente Typography para a interação da  ui.
+ */
+export default asBaseComponent(Typography);

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

@@ -0,0 +1,102 @@
+/**
+ * IMPORTS
+ */
+import { type TextProps as RNTextProps } from "react-native";
+
+import { theme } from "../../styles/theme/theme";
+
+type ITextInterface = RNTextProps & {
+  /**
+   * Propiedade texto que serar 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?: string;
+
+  /**
+   * Propiedade size define o tamanho e a orientação da caixa que é usada para representar uma página. Na maioria das vezes, esse tamanho corresponde ao tamanho alvo da página impressa, se aplicável.
+   */
+  size?: number;
+
+  align?: "center" | "left" | "right";
+  lineHeight?: number;
+  letterSpacing?: keyof typeof theme.letterSpacing;
+
+  /**
+   * A propriedade text-decoration do CSS é usada para definir a formatação de underline, overline, line-through ou blink. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.
+   */
+  textDecoration?: "line-through" | "underline" | "none";
+
+  /**
+   * A propriedade CSS font-weight define o peso (ou negrito) da fonte. Os pesos disponíveis dependem da família de fontes definida atualmente.
+   */
+  fontWeight?: "100" | "300" | "400" | "500" | "600" | "700";
+
+  // fontFamily?: keyof typeof theme.fonts;
+  fontFamily?: string;
+
+  /**
+   * 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).
+   */
+  margin?: number;
+
+  /**
+   * A propriedade CSS define a área de margem no lado esquerdo de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-left
+   */
+  marginLeft?: number;
+
+  /**
+   * A propriedade CSS define a área de margem no lado direito de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-right
+   */
+  marginRight?: number;
+
+  /**
+   * A propriedade CSS margin-top de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.
+   */
+  marginTop?: number;
+
+  /**
+   * A propriedade CSS margin-bottom define a margin area na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.
+   */
+  marginBottom?: number;
+
+  /**
+   * 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).
+   */
+  padding?: number;
+
+  /**
+   * A propriedade CSS padding-left é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. padding area é o espaço entre o conteúdo do elemento e a borda. Um valor negativo não é permitido.
+   */
+  paddingLeft?: number;
+
+  /**
+   * A propriedade CSS define a largura da área de preenchimento à direita de um elemento.padding-right
+   */
+  paddingRight?: number;
+
+  /**
+   * A propriedade CSS define a altura da área de preenchimento na parte superior de um elemento.padding-top
+   */
+  paddingTop?: number;
+
+  /**
+   * A propriedade CSS define a altura da área de preenchimento na parte inferior de um elemento.padding-bottom
+   */
+  paddingBottom?: number;
+
+  /**
+   * Define o número máximo de linhas que o texto pode ocupar. Se o texto for maior que esse limite, ele será truncado.  numberOfLines
+   *
+   * Define onde a elipse (...) será adicionada quando o texto for cortado devido ao numberOfLines.
+   */
+  numberOfLines?: number;
+  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
+};
+/**
+ * EXPORTS
+ */
+export { ITextInterface };

package/src/components/typography/styles.ts

@@ -0,0 +1,34 @@
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+import { type ITextInterface } from "./interface";
+
+const styles = (props: ITextInterface) =>
+  StyleSheet.create({
+    text: {
+      textAlign: props?.align,
+      fontSize: props?.size ?? 20,
+      fontWeight: props?.fontWeight,
+      fontFamily: props.fontFamily ?? "Inter-Medium",
+      color: props?.color,
+      lineHeight: props?.lineHeight,
+      letterSpacing: 0.5,
+      margin: props?.margin,
+      marginLeft: props?.marginLeft ?? 0,
+      marginRight: props?.marginRight ?? 0,
+      marginTop: props?.marginTop ?? 0,
+      marginBottom: props?.marginBottom ?? 0,
+      padding: props?.padding ?? 0,
+      paddingLeft: props?.paddingLeft ?? 0,
+      paddingRight: props?.paddingRight ?? 0,
+      paddingTop: props?.paddingTop ?? 0,
+      paddingBottom: props?.paddingBottom ?? 0,
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };