jornada-ui 0.2.4

package/src/components/user-profile/index.tsx

@@ -0,0 +1,217 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { Image, TouchableOpacity } from "react-native";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// commons / constants
+import { IMAGES } from "../../common/constants";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import { type IUserProfile } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const UserProfile = forwardRef<any, IUserProfile>((props, ref): React.ReactElement => {
+  const {
+    nome,
+    avatar,
+    cpf,
+    placa_cavalo,
+    bluetoothIsConnected,
+    app_version,
+    color,
+    width,
+    height,
+    handleProfileView,
+    testID,
+  } = props;
+  return (
+    <Box
+      ref={ref}
+      testID={testID}
+      width={width ?? "100%"}
+      height={height ?? 260}
+      backgroundColor={theme.colors.blue[500]}
+      marginStyle={{ marginBottom: 16 }}
+      paddingStyle={{ paddingLeft: 16, paddingRight: 16 }}
+    >
+      <Box
+        width={"100%"}
+        flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "center" }}
+        paddingStyle={{ paddingTop: 28 }}
+      >
+        <TouchableOpacity
+          activeOpacity={0.7}
+          style={{
+            width: 100,
+            height: 80,
+            borderRadius: 50,
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+          onPress={handleProfileView}
+        >
+          <Image
+            testID="user-profile-avatar"
+            source={{
+              uri: avatar || IMAGES.IMAGE_ANONIMA,
+            }}
+            style={{
+              width: 120,
+              height: 120,
+              borderRadius: 60,
+              borderWidth: 2,
+              borderColor: theme.colors.green[400],
+            }}
+          />
+        </TouchableOpacity>
+      </Box>
+
+      <Box
+        width={"100%"}
+        height={70}
+        flexStyle={{ flexDirection: "column", alignItems: "center", justifyContent: "center" }}
+        marginStyle={{ marginTop: 36 }}
+      >
+        <Box
+          width={"100%"}
+          height={30}
+          flexStyle={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            textAlign: "center",
+          }}
+        >
+          <Typography
+            text={"Olá, "}
+            color={color?.colorText ?? theme.colors.neutral[25]}
+            size={theme.fontSizes.md}
+            fontFamily={theme.fonts.inter_regular_400}
+            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            letterSpacing={"regular"}
+          />
+
+          <Typography
+            text={nome}
+            color={color?.colorText ?? theme.colors.neutral[25]}
+            size={theme.fontSizes.sm}
+            fontFamily="inter_medium_500"
+            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            letterSpacing={"regular"}
+          />
+        </Box>
+        <Box
+          width={"100%"}
+          height={30}
+          flexStyle={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            textAlign: "center",
+          }}
+        >
+          <Typography
+            text={"CPF: "}
+            color={color?.colorText ?? theme.colors.neutral[25]}
+            size={theme.fontSizes.md}
+            fontFamily={theme.fonts.inter_regular_400}
+            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            letterSpacing={"regular"}
+          />
+
+          <Typography
+            text={cpf}
+            color={color?.colorText ?? theme.colors.neutral[25]}
+            size={theme.fontSizes.sm}
+            fontFamily={theme.fonts.inter_medium_500}
+            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            letterSpacing={"regular"}
+          />
+        </Box>
+        <Box
+          width={"100%"}
+          height={30}
+          flexStyle={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            textAlign: "center",
+          }}
+        >
+          <Typography
+            text={"CONECTADO: "}
+            color={color?.colorText ?? theme.colors.neutral[25]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_medium_500}
+            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            letterSpacing={"regular"}
+          />
+
+          <Typography
+            text={bluetoothIsConnected ? placa_cavalo : ""}
+            color={theme.colors.green[400]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_bold_700}
+            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            letterSpacing={"regular"}
+          />
+        </Box>
+      </Box>
+
+      <Box
+        width={"100%"}
+        height={30}
+        flexStyle={{
+          flexDirection: "row",
+          alignItems: "flex-end",
+          justifyContent: "flex-end",
+        }}
+        marginStyle={{ marginTop: 16 }}
+      >
+        <Box
+          width={"100%"}
+          height={30}
+          flexStyle={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            textAlign: "center",
+          }}
+        >
+          <Typography
+            text={"Versão: "}
+            color={color?.colorText ?? theme.colors.neutral[25]}
+            size={theme.fontSizes.md}
+            fontFamily={theme.fonts.inter_regular_400}
+            lineHeight={15}
+            letterSpacing={"regular"}
+          />
+
+          <Typography
+            text={app_version}
+            color={color?.colorText ?? theme.colors.neutral[25]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_light_300}
+            lineHeight={theme.fontSizes["2xl"] ?? 24}
+            letterSpacing={"regular"}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+});
+
+UserProfile.displayName = "UserProfile";
+
+/**
+ * Componente UserProfile para a interação da  ui.
+ */
+export default asBaseComponent(UserProfile);

package/src/components/user-profile/interface.d.ts

@@ -0,0 +1,126 @@
+/**
+ * IMPORTS
+ */
+import { ViewProps, type DimensionValue } from "react-native";
+
+// typing
+
+import type React from "react";
+
+type IUserProfile = ViewProps & {
+  nome: string;
+  avatar: string;
+  cpf: string;
+  placa_cavalo: string;
+  bluetoothIsConnected: boolean;
+  app_version: string;
+  handleProfileView: () => void;
+
+  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;
+  };
+};
+
+/**
+ * EXPORTS
+ */
+export { IUserProfile };

package/src/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * EXPORTS
+ */
+
+// Components
+export { default as Box } from "./components/box";
+export { default as Button } from "./components/button";
+export { default as CapturePhoto } from "./components/capture-photo";
+export { default as CardHours } from "./components/card-hours";
+export { default as CardScheduledJourney } from "./components/card-scheduled-journey";
+export { default as CardWorkSession } from "./components/card-work-session";
+export { default as StepIndicator } from "./components/step-indicator";
+export { default as SelectOption } from "./components/selects/select-option";
+export { default as Typography } from "./components/typography";
+export { default as UserProfile } from "./components/user-profile";
+export { default as HeaderNavigation } from "./components/header-profile";
+
+export { formatDate } from "./utils/format-date";
+
+// Styles
+export { theme } from "./styles/theme/theme";

package/src/stories/box/box.stories.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+// components
+import Box from "../../components/box";
+import Typography from "../../components/typography";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof Box> = {
+  title: "Componente/Box",
+  component: Box as React.FC,
+  args: {
+    width: "100%",
+    height: "05%",
+  },
+  parameters: {
+    notes: `
+# Box
+
+Este é um componente de box.
+Você usa assim:
+\`\`\`tsx
+  <Box
+    width={100}
+    height={80}
+    borderStyled={{
+    borderWidth: 1,
+    borderRadius: 8,
+    borderStyle: 'solid',
+    borderColor: '#050022',
+    }}
+  />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const BoxSolid: Story = {
+  name: "box-solid",
+  args: {
+    width: "100%",
+    height: 100,
+    backgroundColor: "transparent",
+    borderStyled: {
+      borderWidth: 1,
+      borderRadius: 8,
+      borderStyle: "solid",
+      borderColor: theme.colors.gray[300],
+    },
+    flexStyle: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    children: <Typography text="Olá Dev" color={theme.colors.neutral[25]} />,
+  },
+};
+
+export const BoxDashed: Story = {
+  name: "box-dashed",
+  args: {
+    width: "100%",
+    height: 100,
+    backgroundColor: "transparent",
+    borderStyled: {
+      borderWidth: 1,
+      borderRadius: 8,
+      borderStyle: "dashed",
+      borderColor: theme.colors.gray[300],
+    },
+    flexStyle: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    children: <Typography text="Olá Dev" color={theme.colors.neutral[25]} />,
+  },
+};
+
+export const BoxDotted: Story = {
+  name: "box-dotted",
+  args: {
+    width: "100%",
+    height: 100,
+    backgroundColor: "transparent",
+    borderStyled: {
+      borderWidth: 1,
+      borderRadius: 8,
+      borderStyle: "dotted",
+      borderColor: theme.colors.gray[300],
+    },
+    flexStyle: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    children: <Typography text="Olá Dev" color={theme.colors.neutral[25]} />,
+  },
+};

package/src/stories/button/button.stories.tsx

@@ -0,0 +1,208 @@
+/* eslint-disable no-undef */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+// components
+import Button from "../../components/button";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof Button> = {
+  title: "Componente/Button",
+  component: Button as React.FC,
+  args: {
+    onPress: () => {},
+    isLoading: false,
+  },
+  parameters: {
+    notes: `
+# Button
+
+Este é um componente de button.
+Você usa assim:
+\`\`\`tsx
+<Button text="Eu sou um button!"
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  name: "button-basic",
+  args: {
+    title: "Button",
+    backgroundColor: theme.colors.blue[500],
+    onPress: () => {},
+    isLoading: false,
+    width: "100%",
+    height: 45,
+    flexStyle: {
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+    },
+    borderStyled: {
+      borderWidth: 1,
+      borderColor: theme.colors.blue[500],
+      borderRadius: theme.borderWidths.thick_medium,
+    },
+
+    buttonTextStyle: {
+      fontFamily: theme.fonts.inter_regular_400,
+      fontSize: theme.fontSizes.lg,
+      color: theme.colors.neutral[25],
+      fontWeight: "500",
+    },
+  },
+};
+
+export const ButtonConfirm: Story = {
+  name: "button-confirm",
+  args: {
+    testID: "button-confirmar-test-id",
+    title: "CONFIRMAR RELATÓRIO",
+    backgroundColor: theme.colors.blue[500],
+    onPress: () => {},
+    isLoading: false,
+    width: "100%",
+    height: 45,
+    flexStyle: {
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+    },
+    borderStyled: {
+      borderWidth: 1,
+      borderColor: theme.colors.blue[500],
+      borderRadius: theme.borderWidths.thick_medium,
+    },
+    buttonTextStyle: {
+      fontFamily: theme.fonts.inter_medium_500,
+      fontSize: theme.fontSizes.lg,
+      color: theme.colors.neutral[25],
+      fontWeight: "500",
+    },
+  },
+};
+
+export const ButtonCancel: Story = {
+  name: "button-cancel",
+  args: {
+    testID: "button-confirmar-test-id",
+    title: "CANCELAR EDIÇÃO",
+    backgroundColor: theme.colors.red[900],
+    onPress: () => {},
+    isLoading: false,
+    width: "100%",
+    height: 45,
+    flexStyle: {
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+    },
+    borderStyled: {
+      borderWidth: 1,
+      borderColor: theme.colors.red[900],
+      borderRadius: theme.borderWidths.thick_medium,
+    },
+    buttonTextStyle: {
+      fontFamily: theme.fonts.inter_bold_700,
+      fontSize: theme.fontSizes.lg,
+      color: theme.colors.neutral[25],
+      fontWeight: "500",
+    },
+  },
+};
+
+export const ButtonRectifyJourney: Story = {
+  name: "button-rectify-journey",
+  args: {
+    testID: "button-rectify-test-id",
+    title: "RETIFICAR JORNADA",
+    backgroundColor: theme.colors.orange[450],
+    onPress: () => {},
+    isLoading: false,
+    width: "100%",
+    height: 45,
+
+    flexStyle: {
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+    },
+    borderStyled: {
+      borderWidth: 1,
+      borderColor: theme.colors.orange[450],
+      borderRadius: theme.borderWidths.thick_medium,
+    },
+    buttonTextStyle: {
+      fontFamily: theme.fonts.inter_medium_500,
+      fontSize: theme.fontSizes.lg,
+      color: theme.colors.neutral[25],
+      fontWeight: "700",
+    },
+  },
+};
+
+export const ButtonIsLoading: Story = {
+  name: "button-isLoading",
+  render: () => {
+    const [isLoading, setIsLoading] = React.useState<boolean>(false);
+
+    return (
+      <Button
+        title="Carregamento"
+        isLoading={isLoading}
+        disabled={isLoading}
+        width={"100%"}
+        height={45}
+        backgroundColor={theme.colors.blue[500]}
+        onPress={() => {
+          setIsLoading(true);
+          setTimeout(() => setIsLoading(false), 1000);
+        }}
+        buttonTextStyle={{
+          fontFamily: theme.fonts.inter_regular_400,
+          fontSize: theme.fontSizes.lg,
+          color: theme.colors.neutral[25],
+          fontWeight: "500",
+        }}
+        borderStyled={{
+          borderWidth: 1,
+          borderColor: theme.colors.blue[500],
+          borderRadius: theme.borderWidths.thick_medium,
+        }}
+        flexStyle={{ alignItems: "center", justifyContent: "center", textAlign: "center" }}
+      />
+    );
+  },
+  args: {
+    title: "Button-siLoading",
+    backgroundColor: theme.colors.blue[500],
+    isLoading: false,
+    width: "100%",
+    height: 45,
+    flexStyle: {
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+    },
+    borderStyled: {
+      borderWidth: 1,
+      borderColor: theme.colors.blue[500],
+      borderRadius: theme.borderWidths.thick_medium,
+    },
+    buttonTextStyle: {
+      fontFamily: theme.fonts.inter_regular_400,
+      fontSize: theme.fontSizes.lg,
+      color: theme.colors.neutral[25],
+      fontWeight: "500",
+    },
+  },
+};