jornada-ui 0.4.11 → 0.4.12

package/src/components/toast-message/index.tsx

@@ -1,74 +1,75 @@
-/**
- * IMPORTS
- */
-
-import React, { forwardRef, useMemo } from "react";
-import { View } from "react-native";
-
-// components
-import Typography from "../typography";
-
-// typings
-import type { ToastMessageCustoProps } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-import { styles } from "./styles";
-import { theme } from "../../styles/theme/theme";
-
-/**
- * Componente ToastMessage para a exibição de mensagens de conexão.
- */
-const ToastMessage = forwardRef<any, ToastMessageCustoProps>(
-  ({ text1, text2, options }, ref): React.ReactElement => {
-    const borderColor = useMemo(() => {
-      const map = {
-        success: theme.colors?.green[400] ?? "#69C779",
-        alert: theme.colors?.blue[800] ?? "#87CEFA",
-        error: theme.colors?.red[500] ?? "#ef4444",
-      } as const;
-      return map[options];
-    }, [options, theme]);
-
-    return (
-      <View ref={ref} style={styles.wrapperToash}>
-        <View style={styles.wrapperBorder}>
-          <View
-            testID="border-custom"
-            style={[styles.borderCustom, { backgroundColor: borderColor }]}
-          />
-        </View>
-
-        <View style={styles.wrapperText}>
-          {!!text1 && (
-            <Typography
-              text={String(text1)}
-              fontFamily={theme.fonts.inter_medium_500}
-              color={"blue500"}
-              size={theme.fontSizes.xs}
-              lineHeight={theme.lineHeight["2xl"]}
-              letterSpacing={"regular"}
-            />
-          )}
-
-          {!!text2 && (
-            <Typography
-              text={String(text2)}
-              fontFamily="inter_regular_400"
-              color={"black25"}
-              size={theme.fontSizes.xs}
-              lineHeight={theme.lineHeight["2xl"]}
-              letterSpacing={"regular"}
-            />
-          )}
-        </View>
-      </View>
-    );
-  }
-);
-
-ToastMessage.displayName = "ToastMessage";
-
-/**
- * EXPORT
- */
-export default asBaseComponent(ToastMessage);
+/**
+ * IMPORTS
+ */
+
+import React, { forwardRef, useMemo } from "react";
+import { View } from "react-native";
+
+// components
+import Typography from "../typography";
+
+// typings
+import type { ToastMessageCustoProps } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+import { styles } from "./styles";
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente ToastMessage para a exibição de mensagens de conexão.
+ */
+const ToastMessage = forwardRef<any, ToastMessageCustoProps>(
+  ({ text1, text2, options }, ref): React.ReactElement => {
+    const borderColor = useMemo(() => {
+      const map = {
+        success: theme.colors?.green[400] ?? "#69C779",
+        alert: theme.colors?.blue[800] ?? "#87CEFA",
+        error: theme.colors?.red[500] ?? "#ef4444",
+      } as const;
+      return map[options];
+    }, [options, theme]);
+
+    return (
+      <View ref={ref} style={styles.wrapperToash}>
+        <View style={styles.wrapperBorder}>
+          <View
+            testID="border-custom"
+            style={[styles.borderCustom, { backgroundColor: borderColor }]}
+          />
+        </View>
+
+        <View style={styles.wrapperText}>
+          {!!text1 && (
+            <Typography
+              text={String(text1)}
+              fontFamily={theme.fonts.inter_medium_500}
+              color={"blue500"}
+              size={theme.fontSizes.xs}
+              lineHeight={theme.lineHeight["2xl"]}
+              letterSpacing={"regular"}
+            />
+          )}
+
+          {!!text2 && (
+            <Typography
+              text={String(text2)}
+              fontFamily="inter_regular_400"
+              color={"black25"}
+              size={theme.fontSizes.xs}
+              lineHeight={theme.lineHeight["2xl"]}
+              letterSpacing={"regular"}
+              marginBottom={4}
+            />
+          )}
+        </View>
+      </View>
+    );
+  }
+);
+
+ToastMessage.displayName = "ToastMessage";
+
+/**
+ * EXPORT
+ */
+export default asBaseComponent(ToastMessage);

package/src/components/travel-history/index.tsx

@@ -210,7 +210,7 @@ const TravelHistory = forwardRef<any, ITravelHistory>((props, ref): React.ReactE
                     text={`${status ?? "ABERTA"}`}
                     size={theme.fontSizes.xs}
                     color={backgroundColor ?? theme.colors.black[180]}
-                    fontFamily={theme.fonts.inter_regular_400}
+                    fontFamily={theme.fonts.inter_semi_bold_600}
                   />
                 </Box>
 
@@ -223,16 +223,16 @@ const TravelHistory = forwardRef<any, ITravelHistory>((props, ref): React.ReactE
                 >
                   <Typography
                     style={{ flexShrink: 1 }}
-                    text={`Abastecimentos: `}
+                    text={`Próxima viagem: `}
                     size={theme.fontSizes.sm}
                     color={theme.colors.black[10]}
                     fontFamily={theme.fonts.inter_medium_500}
                   />
                   <Typography
-                    text={`${supply ?? "0"}`}
+                    text={`${nextTrip ?? "Não especificado"}`}
                     size={theme.fontSizes.xs}
                     color={backgroundColor ?? theme.colors.black[180]}
-                    fontFamily={theme.fonts.inter_regular_400}
+                    fontFamily={theme.fonts.inter_semi_bold_600}
                   />
                 </Box>
 
@@ -245,16 +245,16 @@ const TravelHistory = forwardRef<any, ITravelHistory>((props, ref): React.ReactE
                 >
                   <Typography
                     style={{ flexShrink: 1 }}
-                    text={`Próxima viagem: `}
+                    text={`Abastecimentos: `}
                     size={theme.fontSizes.sm}
                     color={theme.colors.black[10]}
                     fontFamily={theme.fonts.inter_medium_500}
                   />
                   <Typography
-                    text={`${nextTrip ?? "Não especificado"}`}
+                    text={`${supply ?? "0"}`}
                     size={theme.fontSizes.xs}
                     color={backgroundColor ?? theme.colors.black[180]}
-                    fontFamily={theme.fonts.inter_regular_400}
+                    fontFamily={theme.fonts.inter_semi_bold_600}
                   />
                 </Box>
               </Box>

package/src/components/trip-details-card/index.tsx

@@ -17,11 +17,16 @@ import type { ITripDetailsCard } from "./interface";
 import { asBaseComponent } from "../../@types/as-base-component";
 
 const TripDetailsCard: React.FC<ITripDetailsCard> = ({
+  dataRegistro,
+  numeroCte,
   origem,
   destino,
   proximoCarregamento,
   peso,
   baseCalculo,
+  corBarra,
+  kmCarregado,
+  kmVazio,
 }) => {
   const [expanded, setExpanded] = useState(false);
 
@@ -53,7 +58,7 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
       <View
         style={{
           width: 15,
-          backgroundColor: theme.colors.orange[150],
+          backgroundColor: corBarra ?? theme.colors.orange[150],
           borderTopLeftRadius: theme.borderWidths.thick_medium,
           borderBottomLeftRadius: theme.borderWidths.thick_medium,
         }}
@@ -98,16 +103,16 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
             >
               <Typography
-                text="Origem: "
+                text={"Número CTE: "}
                 color={theme.colors.black[25]}
                 fontFamily={theme.fonts.inter_medium_500}
                 size={theme.fontSizes.sm}
               />
               <Typography
-                text={`${origem}`}
+                text={`${numeroCte || "Não informado"}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
               />
             </Box>
 
@@ -116,17 +121,53 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
             >
               <Typography
-                text="Destino: "
+                text="Data carregamento: "
                 color={theme.colors.black[25]}
                 fontFamily={theme.fonts.inter_medium_500}
                 size={theme.fontSizes.sm}
               />
               <Typography
-                text={`${destino}`}
+                text={`${dataRegistro || "Não informado"}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Origem: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
                 size={theme.fontSizes.sm}
               />
+              <Typography
+                text={`${origem || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Destino: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${destino || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
             </Box>
 
             <Box
@@ -137,13 +178,13 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
                 text="Próximo carregamento: "
                 color={theme.colors.black[25]}
                 fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
               />
               <Typography
                 text={`${proximoCarregamento || "Não informado"}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
               />
             </Box>
 
@@ -155,13 +196,49 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
                 text={"Peso: "}
                 color={theme.colors.black[25]}
                 fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
               />
               <Typography
                 text={`${formatPeso(peso) || "Não informado"}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={"Km carregado: "}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${kmCarregado || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={"Km vazio: "}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${kmVazio || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
               />
             </Box>
 
@@ -173,13 +250,13 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
                 text="Base para cálculo do PRO: "
                 color={theme.colors.black[25]}
                 fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
               />
               <Typography
                 text={`${formatBase(baseCalculo) || "Não informado"}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
               />
             </Box>
           </>

package/src/components/trip-details-card/interface.d.ts

@@ -5,5 +5,8 @@ export interface ITripDetailsCard {
   proximoCarregamento?: string;
   peso?: number;
   baseCalculo?: number;
-  descricao: string;
+  corBarra?: string;
+  numeroCte: number;
+  kmCarregado?: number,
+  kmVazio?: number,
 }

package/src/components/typography/index.tsx

@@ -1,78 +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);
+/**
+ * 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,
+    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/index.tsx

@@ -40,6 +40,13 @@ export { default as BottomMessageConexion } from "./components/bottom-message-co
 export { default as ToastMessage } from "./components/toast-message";
 export { default as ModalTypeActivities } from "./components/modal-type-activities";
 export { default as ResumeRaking } from "./components/resume-raking";
+export { default as ListSupplies } from "./components/list-supplies";
+export { default as ListDevices } from "./components/list-devices";
+export { default as ModalActivityReason } from "./components/modals/modal-activity-reason";
+export { default as ModalJourneyRectification } from "./components/modals/modal-journey-rectification";
+export { default as ModalCreteActivitie } from "./components/modals/modal-create-activitie";
+export { default as ModalToConfirmations } from "./components/modals/modal-to-confimations";
+export { default as ActivityTimeline } from "./components/activity-step";
 
 // adicionar o storybook + teste
 export { default as WeeklyHoursBalance } from "./components/weekly-hours-balance";

package/src/stories/list-devices/list-devices.stories.tsx

@@ -0,0 +1,114 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { View } from "react-native";
+
+// components
+import ListDevices from "../../components/list-devices";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof ListDevices> = {
+  title: "componente/ListDevices",
+  component: ListDevices,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+  ### ListDevices
+
+  Exibe uma lista de dispositivos Bluetooth. **Não há mudança visual** ao clicar/selecionar.
+  A seleção é apenas lógica (armazenada via \`onSelect\` e/ou \`selectedId/defaultSelectedId\`).
+
+  **Props**
+  - \`data: { id: number; nameDevice: string; macDevice?: string }\`[]
+  - \`titleColor?: string\`
+  - \`textColorDescription?: string\`
+  - \`selectedId?: number | null\` (controlado, sem efeito visual)
+  - \`defaultSelectedId?: number | null\` (não-controlado)
+  - \`onSelect?: (device) => void\`
+  - \`disabled?: boolean\`
+        `,
+      },
+    },
+  },
+
+  argTypes: {
+    titleColor: { control: "color", description: "Cor do título (nameDevice)" },
+    textColorDescription: { control: "color", description: "Cor da descrição (MAC)" },
+    selectedId: { control: "number", description: "ID selecionado (controlado)" },
+    defaultSelectedId: { control: "number", description: "ID inicial (não-controlado)" },
+    disabled: { control: "boolean", description: "Desabilita interação" },
+    onSelect: { action: "onSelect", description: "Callback ao selecionar" },
+    data: { control: "object", description: "Itens da lista" },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 16, backgroundColor: theme.colors.neutral[400] }}>
+        <Story />
+      </View>
+    ),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const sampleData = [
+  { id: 1, nameDevice: "Dispositivo X", macDevice: "AA:BB:CC:DD:EE:01" },
+  { id: 2, nameDevice: "Celular Y Exemplo", macDevice: "AA:BB:CC:DD:EE:02" },
+  { id: 3, nameDevice: "Celular A Exemplo", macDevice: "AA:BB:CC:DD:EE:03" },
+  { id: 4, nameDevice: "Celular B Exemplo", macDevice: "AA:BB:CC:DD:EE:04" },
+];
+
+export const NaoControlado = {
+  name: "Não-controlado (memória interna, sem visual)",
+  args: {
+    data: sampleData,
+    defaultSelectedId: 2,
+  },
+};
+
+export const Controlado: Story = {
+  name: "Controlado (selectedId + onSelect, sem visual)",
+  args: { data: sampleData },
+  render: (args: React.ComponentProps<typeof ListDevices> = {}) => {
+    const [selectedId, setSelectedId] = React.useState<number | null>(1);
+
+    return (
+      <ListDevices
+        {...args}
+        selectedId={selectedId}
+        onSelect={(device) => {
+          setSelectedId(device.id);
+          args.onSelect?.(device);
+        }}
+      />
+    );
+  },
+};
+
+
+/** Sem seleção inicial, apenas demonstrativo */
+export const Basico: Story = {
+  name: "Básico (sem seleção inicial)",
+  args: {
+    data: sampleData,
+    titleColor: theme.colors.black[25],
+    textColorDescription: theme.colors.gray[700],
+  },
+};
+
+/** Interação desabilitada */
+export const Desabilitado: Story = {
+  name: "Desabilitado",
+  args: {
+    data: sampleData,
+    disabled: true,
+    titleColor: theme.colors.black[25],
+    textColorDescription: theme.colors.gray[700],
+  },
+};