jornada-ui 0.2.4

package/src/components/card-hours/index.tsx

@@ -0,0 +1,121 @@
+/**
+ * IMPORTS
+ */ import React, { forwardRef } from "react";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// typing
+import { asBaseComponent } from "../../@types/as-base-component";
+import { type ICardHoursProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const CardHours = forwardRef<any, ICardHoursProps>((props, ref): React.ReactElement => {
+  const {
+    testID,
+    width,
+    height,
+    hoursWorked,
+    flexStyle,
+    marginStyle,
+    paddingStyle,
+    text,
+    color,
+    fontStyle,
+    borderStyled,
+    backgroundColor,
+    sizeHours,
+    sizeDescription,
+    handleFormatDataInDayMonthYearNotHours,
+    style,
+  } = props;
+
+  const styleProps = {
+    testID,
+    width,
+    height,
+    marginStyle,
+    paddingStyle,
+    flexStyle,
+    text,
+    borderStyled,
+    color,
+    fontStyle,
+    backgroundColor,
+    sizeHours,
+    sizeDescription,
+    style,
+  } as ICardHoursProps;
+  return (
+    <Box
+      ref={ref}
+      testID={testID}
+      width={width ?? "100%"}
+      height={height}
+      backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+      borderStyled={{
+        borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
+        borderColor: borderStyled?.borderColor ?? theme.colors.gray[400],
+        borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick_medium,
+      }}
+    >
+      <Typography
+        text={text ?? "Informe texto:"}
+        size={Number(styleProps.fontStyle?.fontSize)}
+        fontFamily={styleProps.fontStyle?.fontFamily}
+        color={color?.colorText ?? theme.colors.gray[700]}
+        lineHeight={fontStyle?.lineHeight ?? theme.fontSizes.xl}
+        letterSpacing={"regular"}
+        paddingTop={theme.paddings["2xs"]}
+        paddingLeft={theme.paddings["2xs"]}
+      />
+
+      <Box
+        flexStyle={{
+          flexDirection: "row",
+          alignItems: "flex-end",
+          justifyContent: "space-between",
+        }}
+        paddingStyle={{
+          paddingLeft: theme.paddings["2xs"],
+          paddingRight: theme.paddings["2xs"],
+        }}
+        backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+        width={"100%"}
+        borderStyled={{
+          borderBottomLeftRadius:
+            borderStyled?.borderBottomLeftRadius ?? theme.borderWidths.thick_medium,
+          borderBottomRightRadius:
+            borderStyled?.borderBottomRightRadius ?? theme.borderWidths.thick_medium,
+        }}
+      >
+        <Typography
+          text={`${hoursWorked ?? "00:00 H"}`}
+          size={sizeHours ?? theme.fontSizes["3xl"]}
+          fontFamily={theme.fonts.inter_bold ?? "inter_bold"}
+          fontWeight="700"
+          color={color?.colorTextBold ?? theme.colors.orange[150]}
+          lineHeight={fontStyle?.lineHeight ?? theme.fontSizes["5xl"]}
+          letterSpacing={"regular"}
+        />
+
+        <Typography
+          text={`Última atualização: ${handleFormatDataInDayMonthYearNotHours(new Date())}`}
+          size={sizeDescription ?? theme.fontSizes.xs}
+          fontFamily={"inter_light_300"}
+          color={color?.colorTextData ?? theme.colors.gray[700]}
+          lineHeight={fontStyle?.lineHeight ?? theme.fontSizes["xl"]}
+          letterSpacing={"regular"}
+        />
+      </Box>
+    </Box>
+  );
+});
+
+/**
+ * Componente CardHours para a interação da  ui.
+ */
+export default asBaseComponent(CardHours);

package/src/components/card-hours/interface.d.ts

@@ -0,0 +1,153 @@
+/*
+ * IMPORTS
+ */
+import type React from "react";
+import { ViewProps, type DimensionValue } from "react-native";
+
+import type { theme } from "../../styles/theme/theme";
+
+/**
+ * INTERFACE
+ */
+type ICardHoursProps = ViewProps & {
+  /**
+   *  props que mostra os valores de horas trabalhadas
+   */
+  hoursWorked: string | null;
+
+  /**
+   *  props que mostra a data do horário correspondentes para a ultima atualização
+   */
+  // eslint-disable-next-line no-unused-vars
+  handleFormatDataInDayMonthYearNotHours: (date: Date) => {};
+
+  /**
+   * props que mostra o tamanho da fonte
+   */
+  sizeDescription?: number;
+
+  /**
+   * props que mostra o tamanho da fonte
+   */
+  sizeHours?: number;
+
+  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 { ICardHoursProps };

package/src/components/card-scheduled-journey/index.tsx

@@ -0,0 +1,138 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { Dimensions } from "react-native";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import { type ICardScheduledJourney } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+// icons / svg
+import { Icons } from "../../common/icons-svg";
+
+const CardScheduledJourney = forwardRef<any, ICardScheduledJourney>(
+  (props, ref): React.ReactElement => {
+    const {
+      title,
+      duracao,
+      color = {},
+      backgroundColor,
+      borderStyled,
+      paddingStyle,
+      marginStyle,
+      flexStyle,
+      style,
+      width,
+      widthChildren,
+      icon,
+      borderRight,
+    } = props;
+
+    const { width: widthScreen } = Dimensions.get("window");
+    const isMobile = widthScreen < 768;
+    return (
+      <Box
+        ref={ref}
+        style={style}
+        width={width}
+        height={80}
+        backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+        borderStyled={{
+          borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
+          borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thin_bold,
+          borderColor: borderStyled?.borderColor ?? theme.colors.gray[700],
+        }}
+      >
+        {/**CHILDREN */}
+        <Box
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+          width={widthChildren}
+          borderStyled={{
+            borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick,
+          }}
+          paddingStyle={{
+            paddingLeft: paddingStyle?.paddingLeft ?? 8,
+          }}
+        >
+          {/**ICONE*/}
+          <Box
+            width={65}
+            height={65}
+            backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+            flexStyle={{
+              justifyContent: flexStyle?.justifyContent ?? "center",
+              alignItems: flexStyle?.alignItems ?? "center",
+            }}
+            borderStyled={{
+              borderWidth: borderStyled?.borderWidth ?? theme.borderWidths.thin,
+              borderRadius: borderStyled?.borderRadius ?? theme.borderWidths.thick,
+              borderColor: borderStyled?.borderColor ?? theme.colors.gray[700],
+            }}
+          >
+            {icon && <Icons icon={icon} size={theme.fontSizes["2xl"]} />}
+          </Box>
+
+          {/**TITLE E DESCRIÇÃO */}
+          <Box
+            width={isMobile ? "73%" : "90%"}
+            flexStyle={{
+              flexDirection: "column",
+              justifyContent: "space-between",
+            }}
+            marginStyle={{ marginTop: marginStyle?.marginTop ?? -20 }}
+          >
+            <Typography
+              text={title}
+              size={theme.fontSizes.sm}
+              fontFamily={theme.fonts.inter_bold_700}
+              fontWeight={"700"}
+              color={color.colorText ?? theme.colors.black[25]}
+              lineHeight={theme.fontSizes.lg}
+              letterSpacing={"regular"}
+            />
+
+            <Typography
+              text={`Duração: ${duracao}`}
+              size={theme.fontSizes.xs}
+              fontWeight={"300"}
+              fontFamily={theme.fonts.inter_light_300}
+              color={color.colorText ?? theme.colors.black[25]}
+              lineHeight={theme.fontSizes.lg}
+              letterSpacing={"regular"}
+            />
+          </Box>
+
+          {/**BORDAR */}
+          <Box
+            width={12}
+            height={78}
+            backgroundColor={borderRight ?? theme.colors.green[400]}
+            borderStyled={{
+              borderWidth: theme.borderWidths.thin,
+              borderTopRightRadius: theme.borderWidths.thick,
+              borderBottomRightRadius: theme.borderWidths.thick,
+              borderColor: borderRight ?? theme.colors.green[400],
+            }}
+          />
+        </Box>
+      </Box>
+    );
+  }
+);
+
+/**
+ * Componente CardScheduledJourney para a interação da  ui.
+ */
+export default asBaseComponent(CardScheduledJourney);

package/src/components/card-scheduled-journey/interface.d.ts

@@ -0,0 +1,140 @@
+/*
+ * IMPORTS
+ */
+import type React from "react";
+import { DimensionValue, ViewProps } from "react-native";
+
+import { SVG_NAME } from "../../common/icons-svg/constants";
+
+/**
+ * INTERFACE
+ */
+type ICardScheduledJourney = ViewProps & {
+  /**
+   *  props que mostra o titulo correspondentes para a ultima atualização
+   */
+  title: string;
+
+  /**
+   *  props que mostra a duração correspondentes para a ultima atualização
+   */
+  duracao: string;
+
+  /**
+   * 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.
+   */
+  widthChildren?: number | DimensionValue;
+
+  /**
+   * A propriedade que define o tipo que icones serao usados
+   */
+  icon?: keyof typeof SVG_NAME;
+
+  /**
+   * A propriedade CSS borderRight define a cor de fundo de um elemento do lado direito.
+   */
+  borderRight?: 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;
+
+  /**
+   * 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;
+  };
+};
+
+/**
+ * EXPORTS
+ */
+export type { ICardScheduledJourney };

package/src/components/card-scheduled-journey/styles.ts

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