jornada-ui 0.2.4

package/src/stories/typography/typography.stories.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+// components
+import Typography from "../../components/typography";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof Typography> = {
+  title: "Componente/Typography",
+  component: Typography as React.FC,
+  args: {
+    onPress: () => {},
+  },
+  parameters: {
+    notes: `
+# Typography
+
+Este é um componente de texto.
+Você usa assim:
+\`\`\`tsx
+ <Typography text={'Ola Dev'} marginBottom={8} />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Typography2XS: Story = {
+  name: "typography-2xs",
+  args: {
+    text: "(2XS) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["2xs"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const TypographyXS: Story = {
+  name: "typography-xs",
+  args: {
+    text: "(XS) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["xs"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const TypographySM: Story = {
+  name: "typography-sm",
+  args: {
+    text: "(SM) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["sm"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const TypographyMD: Story = {
+  name: "typography-md",
+  args: {
+    text: "(MD) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["md"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const TypographyLG: Story = {
+  name: "typography-lg",
+  args: {
+    text: "(LG) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["lg"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const TypographyXL: Story = {
+  name: "typography-xl",
+  args: {
+    text: "(XL) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["xl"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const Typography2XL: Story = {
+  name: "typography-2xl",
+  args: {
+    text: "(2XL) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["2xl"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const Typography3XL: Story = {
+  name: "typography-3xl",
+  args: {
+    text: "(3XL) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["3xl"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const Typography4XL: Story = {
+  name: "typography-4xl",
+  args: {
+    text: "(4XL) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["4xl"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const Typography5XL: Story = {
+  name: "typography-5xl",
+  args: {
+    text: "(5XL) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["5xl"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};

package/src/stories/user-profile/user-profile.stories.tsx

@@ -0,0 +1,56 @@
+import type { StoryObj, Meta } from "@storybook/react";
+
+import UserProfile from "../../components/user-profile";
+
+const meta: Meta<typeof UserProfile> = {
+  title: "componente/UserProfile",
+  component: UserProfile,
+  args: {
+    avatar: "",
+  },
+  parameters: {
+    notes: `
+# UserProfile
+
+Este é um componente de Card de horas.
+Você usa assim:
+\`\`\`tsx
+<UserProfile
+
+  />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Profile: Story = {
+  name: "user-profile",
+  args: {
+    avatar:
+      "https://img.freepik.com/fotos-gratis/retrato-de-um-motorista-de-caminhao-sentado-em-seu-caminhao-segurando-o-polegar-para-cima_342744-1340.jpg?semt=ais_hybrid",
+    width: 300,
+    nome: "profile-name",
+    placa_cavalo: "WSJ-0351",
+    bluetoothIsConnected: true,
+    cpf: "000.000.000-00",
+    app_version: "0.1.0",
+  },
+};
+
+export const Anonimo: Story = {
+  name: "user-profile-anonimo",
+  args: {
+    avatar: "",
+    // width: 300,
+    nome: "",
+    cpf: "",
+    app_version: "0.1.0",
+    color: {
+      colorText: "gray",
+    },
+  },
+};

package/src/styles/global/interface.d.ts

@@ -0,0 +1,131 @@
+/*
+ * IMPORTS
+ */
+import React from "react";
+import { type DimensionValue } from "react-native";
+import { theme } from "../styles/theme/theme";
+
+type IGlobalCss = {
+  /**
+   * A propriedade JSX que define um elemento ou componente filho.
+   */
+  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 { IGlobalCss };

package/src/styles/global/styles.ts

@@ -0,0 +1,63 @@
+// typing
+import { type IGlobalCss } from "./interface";
+
+const stylesGlobal = (props: IGlobalCss) => ({
+  width: props.width,
+  height: props.height,
+  backgroundColor: props.backgroundColor,
+
+  // padding
+
+  padding: props.paddingStyle?.padding,
+  paddingTop: props.paddingStyle?.paddingTop,
+  paddingLeft: props.paddingStyle?.paddingLeft,
+  paddingRight: props.paddingStyle?.paddingRight,
+  paddingBottom: props.paddingStyle?.paddingBottom,
+
+  // margin
+  margin: props.marginStyle?.margin,
+  marginTop: props.marginStyle?.marginTop,
+  marginLeft: props.marginStyle?.marginLeft,
+  marginRight: props.marginStyle?.marginRight,
+  marginBottom: props.marginStyle?.marginBottom,
+
+  // border
+  borderStyle: props.borderStyled?.borderStyle,
+
+  borderRadius: props.borderStyled?.borderRadius,
+  borderTopRightRadius: props.borderStyled?.borderTopRightRadius,
+  borderTopLeftRadius: props.borderStyled?.borderTopLeftRadius,
+  borderBottomRightRadius: props.borderStyled?.borderBottomRightRadius,
+  borderBottomLeftRadius: props.borderStyled?.borderBottomLeftRadius,
+
+  borderWidth: props.borderStyled?.borderWidth,
+  borderLeftWidth: props.borderStyled?.borderLeftWidth,
+  borderRightWidth: props.borderStyled?.borderRightWidth,
+  borderTopWidth: props.borderStyled?.borderTopWidth,
+  borderBottomWidth: props.borderStyled?.borderBottomWidth,
+
+  borderColor: props.borderStyled?.borderColor,
+  borderBottomColor: props.borderStyled?.borderBottomColor,
+  borderLeftColor: props.borderStyled?.borderLeftColor,
+  borderRightColor: props.borderStyled?.borderLeftColor,
+  borderTopColor: props.borderStyled?.borderTopColor,
+
+  // flex
+  flex: props.flexStyle?.flex,
+  flexDirection: props.flexStyle?.flexDirection,
+  alignItems: props.flexStyle?.alignItems,
+  justifyContent: props.flexStyle?.justifyContent,
+  textAlign: props.flexStyle?.textAlign,
+
+  // fonts
+  fontFamily: props.fontStyle?.fontFamily,
+  fontSize: props.fontStyle?.fontSize,
+  fontWeight: props.fontStyle?.fontWeight,
+  lineHeight: props.fontStyle?.lineHeight,
+  letterSpacing: props.fontStyle?.letterSpacing,
+});
+
+/**
+ * EXPORTS
+ */
+export { stylesGlobal };

package/src/styles/global/theme-provider.tsx

@@ -0,0 +1,15 @@
+/**
+ * IMPORTS
+ */
+import React, { createContext, useContext } from "react";
+
+// styles
+import { theme } from "../theme/theme";
+
+const ThemeContext = createContext(theme);
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = () => useContext(ThemeContext);

package/src/styles/theme/theme.ts

@@ -0,0 +1,167 @@
+/**
+ * IMPORTS
+ */
+
+const borderWidths = {
+  thin: 1,
+  thin_medium: 2,
+  thin_bold: 6,
+  thick: 4,
+  thick_medium: 8,
+  thick_bold: 12,
+  thick_large: 16,
+  hairline: 999,
+};
+
+const colors = {
+  neutral: {
+    25: "#FFFFFF",
+    50: "#E7EEFF",
+    75: "#E5E1F9",
+    200: "#C6C6C6",
+    300: "#F3F3F3",
+    400: "#F4F5F6",
+  },
+  black: {
+    10: "#000000",
+    25: "#1E1E1E",
+    100: "#393939",
+    180: "#35302B",
+  },
+  blue: {
+    25: "#1E1E1E",
+    50: "#1EA7fD",
+    100: "#051C3B",
+    150: "#2E41F2",
+    350: "#357FD6",
+    375: "#056CF2",
+    525: "#2D3748",
+    500: "#050022",
+    400: "#051C3B",
+  },
+  red: {
+    400: "#D23A1A",
+    500: "#C54239",
+    800: "#E72626",
+    900: "#9F0000",
+  },
+  gray: {
+    300: "#D9D9D9",
+    350: "#CDCDCD",
+    400: "#C6C6C6",
+    500: "#1c1c1e",
+    600: "#5E5E5E",
+    700: "#727272",
+    800: "#837676",
+    850: "#868686",
+    875: "#949494",
+    900: "#9B9B9B",
+    925: "#957c5f",
+    950: "#94a3b8",
+  },
+  green: {
+    200: "#25BA76",
+    250: "#20AD48",
+    400: "#49C63E",
+    500: "#50C58F",
+  },
+  orange: {
+    500: "#FC5701",
+    450: "#FC6C2D",
+    150: "#FFA41C",
+  },
+  yellow: {
+    100: "#DFAE00",
+    50: "#F0CA4B",
+    75: "#F59E0B",
+  },
+};
+
+const fonts = {
+  inter_thin_100: "Inter-Thin",
+  inter_extra_light_200: "Inter-ExtraLight",
+  inter_light_300: "Inter-Light",
+  inter_regular_400: "Inter-Regular",
+  inter_medium_500: "Inter-Medium",
+  inter_semi_bold_600: "Inter-SemiBold",
+  inter_bold_700: "Inter-Bold",
+  inter_extra_bold_800: "Inter-ExtraBold",
+  inter_bold: "Inter-Bold",
+};
+
+const fontSizes = {
+  "2xs": 10,
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 32,
+  "4xl": 38,
+  "5xl": 50,
+  "6xl": 60,
+  "7xl": 72,
+  "8xl": 96,
+  "9xl": 128,
+};
+
+const margins = {
+  "2xs": 10,
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 30,
+  "4xl": 36,
+  "5xl": 48,
+  "6xl": 60,
+  "7xl": 72,
+  "8xl": 96,
+  "9xl": 128,
+};
+
+const paddings = {
+  "2xs": 10,
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 30,
+  "4xl": 36,
+  "5xl": 48,
+  "6xl": 60,
+  "7xl": 72,
+  "8xl": 96,
+  "9xl": 128,
+};
+
+const shadows = {
+  z1: "0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 1px rgba(0, 0, 0, 0.15)",
+  z2: "0px 1px 2px rgba(0, 0, 0, 0.3)",
+};
+
+const letterSpacing = {
+  o_16: 0.16,
+  regular: 0.5,
+  medium: 0.75,
+  strong: 1,
+};
+
+/**
+ * EXPORTSS
+ */
+export const theme = {
+  borderWidths,
+  colors,
+  fonts,
+  fontSizes,
+  margins,
+  shadows,
+  paddings,
+  letterSpacing,
+};

package/src/utils/format-date/index.ts

@@ -0,0 +1,40 @@
+/**
+ * Formata uma data do tipo Date para o formato DD/MM/YYYY
+ * @param date Objeto Date a ser formatado
+ * @returns String no formato DD/MM/YYYY
+ */
+const formatDate = (date: Date): string => {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0"); // Mês começa em 0
+  const year = date.getFullYear();
+
+  return `${day}/${month}/${year}`;
+};
+
+export { formatDate };
+
+/**
+ * Retorna as sete últimas datas do dias
+ * @returns Array<{ date: number, dayName: string, fullDate: Date }>
+ */
+
+const getLastSevenDays = () => {
+  const today = new Date();
+  const days = [];
+  const dayNames = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
+
+  for (let i = 7; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(today.getDate() - i);
+
+    days.push({
+      date: date.getDate(),
+      dayName: dayNames[date.getDay()],
+      fullDate: date,
+    });
+  }
+
+  return days;
+};
+
+export { getLastSevenDays };