jornada-ui 0.4.10 → 0.4.12

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],
+  },
+};

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

@@ -0,0 +1,66 @@
+/**
+ * IMPORTS
+ */
+import type { Meta, StoryObj } from "@storybook/react";
+
+// components
+import ListSupplies from "../../components/list-supplies";
+
+const meta: Meta<typeof ListSupplies> = {
+  title: "componente/ListSupplies",
+  component: ListSupplies,
+  args: {
+    dataRegistro: "11/03/2025 às 14:53:27",
+    namePosto: "POSTO TRES GARCAS LTDA",
+    litragem: 100,
+    valor: 450.75,
+  },
+  parameters: {
+    notes: `
+    # ListSupplies
+    Card visual para exibir uma lavagem de cavalo registrada.
+    ### Como usar:
+    \`\`\`tsx
+            <ListSupplies
+            dataRegistro="11/03/2025 às 14:53:27"
+            namePosto= "POSTO TRES GARCAS LTDA"
+            litragem= {100}
+            valor= {450.75}
+            corBarra="#2ECC71"
+            />
+    \`\`\`
+    `,
+    docs: {
+        description: {
+            component: `
+    ### list-supplies
+    
+    Componente de **list-supplies** para visualizar os abastecimentos realizados.
+
+    - \`corBarra\`: define sa cor da barra lateral, pode ser utilizada para diferenciar utilização em atualizações futuras
+    - \`imagemUrl\`Pode ser passada por parâmetro, caso não seja passada, o componente não exibirá a imagem
+    - \`dataRegistro\`: campo obrigatório, deve ser passado por parâmetro a data e hora do registro
+    - \`namePosto\`: campo obrigatório, deve ser passado por parâmetro o nome do posto
+    - \`litragem\`: campo obrigatório, deve ser passado por parâmetro a litragem abastecida
+    - \`valor\`: campo opcional, pode ser passado por parâmetro o valor total do abastecimento
+    - \`Todos os outros campos\`: podem ser definids e mostrados de maneira dinâmica, passando os valores por parâmetro
+            `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Padrao: Story = {
+  name: "list-supplies",
+  args: {
+    dataRegistro: "11/03/2025 às 14:53:27",
+    namePosto: "POSTO TRES GARCAS LTDA",
+    litragem: 100,
+    valor: 450.75,
+    imagemUrl: "https://placehold.co/300x300",
+  },
+};

package/src/stories/modal-activity-reason/modal-activity-reason.stories.tsx

@@ -0,0 +1,60 @@
+/**
+ * IMPORTS
+ */
+import type { StoryObj, Meta } from "@storybook/react";
+
+// components
+import ModalActivityReason from "../../components/modals/modal-activity-reason";
+
+const meta: Meta<typeof ModalActivityReason> = {
+  title: "Componente/ModalActivityReason",
+  component: ModalActivityReason,
+  args: {
+    visible: false,
+    onClose: () => {},
+    modalConfirm: () => {},
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+      ### ModalActivityReason
+      Este componente exibe um modal para fazer a exclusão de uma atividade.
+      ## Uso
+      \`\`\`tsx
+      <ModalActivityReason
+        visible={boolean}
+        onClose={function}
+        modalConfirm={function}
+        textTitle={string} (opcional)
+      />
+      Componente de **modal-activity-reason** para exibir um modal solicitando o motivo de exclusão ou outra ação crítica.
+
+      - \`visible\`: define a visibilidade do modal, controlando se deve estar aberto ou fechado
+      - \`onClose\`: função obrigatória, chamada ao cancelar ou fechar o modal
+      - \`modalConfirm\`: função obrigatória, chamada ao confirmar a ação (retorna \`true\` por padrão)
+      - \`textTitle\`: campo opcional, permite personalizar o título exibido no cabeçalho do modal
+      - \`MaintenanceDescriptionInput\`: campo de texto exibido no corpo do modal para o usuário inserir a justificativa
+      - \`Botões\`: dois botões de ação — **CANCELAR** e **CONFIRMAR**
+        - **CANCELAR**: fecha o modal sem executar ação
+        - **CONFIRMAR**: chama \`modalConfirm(true)\` e em seguida \`onClose()\`
+
+      > Caso \`textTitle\` não seja passado, o modal exibirá "Motivo da exclusão" como título padrão.
+      `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ModalActivityReason>;
+
+export const Default: Story = {
+  name: "modal-activity-reason",
+  args: {
+    visible: true,
+    onClose: () => {},
+    modalConfirm: () => {},
+  },
+};

package/src/stories/modal-journey-rectification/modal-journey-rectification.stories.tsx

@@ -0,0 +1,60 @@
+/**
+ * IMPORTS
+ */
+import type { StoryObj, Meta } from "@storybook/react";
+
+// components
+import ModalJourneyRectification from "../../components/modals/modal-journey-rectification";
+
+const meta: Meta<typeof ModalJourneyRectification> = {
+  title: "Componente/ModalJourneyRectification",
+  component: ModalJourneyRectification,
+  args: {
+    visible: false,
+    onClose: () => {},
+    modalConfirm: () => {},
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+      ### ModalJourneyRectification
+      Este componente exibe um modal para fazer a exclusão de uma atividade.
+      ## Uso
+      \`\`\`tsx
+      <ModalJourneyRectification
+        visible={boolean}
+        onClose={function}
+        modalConfirm={function}
+        textTitle={string} (opcional)
+      />
+      Componente de **modal-journey-rectification** para exibir um modal solicitando o motivo de exclusão ou outra ação crítica.
+
+      - \`visible\`: define a visibilidade do modal, controlando se deve estar aberto ou fechado
+      - \`onClose\`: função obrigatória, chamada ao cancelar ou fechar o modal
+      - \`modalConfirm\`: função obrigatória, chamada ao confirmar a ação (retorna \`true\` por padrão)
+      - \`textTitle\`: campo opcional, permite personalizar o título exibido no cabeçalho do modal
+      - \`MaintenanceDescriptionInput\`: campo de texto exibido no corpo do modal para o usuário inserir a justificativa
+      - \`Botões\`: dois botões de ação — **CANCELAR** e **CONFIRMAR**
+        - **CANCELAR**: fecha o modal sem executar ação
+        - **CONFIRMAR**: chama \`modalConfirm(true)\` e em seguida \`onClose()\`
+
+      > Caso \`textTitle\` não seja passado, o modal exibirá "Motivo da exclusão" como título padrão.
+      `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ModalJourneyRectification>;
+
+export const Default: Story = {
+  name: "modal-journey-rectification",
+  args: {
+    visible: true,
+    onClose: () => {},
+    modalConfirm: () => {},
+  },
+};

package/src/stories/supply-error-card/supply-error-card.stories.tsx

@@ -11,14 +11,14 @@ const meta: Meta<typeof SupplyErrorCard> = {
   title: "componente/SupplyErrorCard",
   component: SupplyErrorCard as React.FC,
   args: {
-    messages: [
-      { id: 101, mensagem: "Erro ao sincronizar abastecimento #101. Clique para corrigir." },
-      { id: 203, mensagem: "Valor inválido no abastecimento #203." },
-      { id: 310, mensagem: "Imagem do comprovante ausente no abastecimento #310." },
+    errors: [
+      { id: 101, descricacao: "Erro ao sincronizar abastecimento #101. Clique para corrigir." },
+      { id: 203, descricacao: "Valor inválido no abastecimento #203." },
+      { id: 310, descricacao: "Imagem do comprovante ausente no abastecimento #310." },
     ],
   },
   argTypes: {
-    messages: {
+    errors: {
       description: "Lista de mensagens de erro/exceção relacionadas a abastecimentos.",
       control: "object",
       table: {
@@ -35,13 +35,13 @@ Ao **clicar**, expande e mostra a lista completa. O ícone alterna entre *chevro
 
 ## Uso básico
 \`\`\`tsx
-const mensagens = [
-  { id: 101, mensagem: "Erro ao sincronizar abastecimento #101. Clique para corrigir." },
-  { id: 203, mensagem: "Valor inválido no abastecimento #203." },
-  { id: 310, mensagem: "Imagem do comprovante ausente no abastecimento #310." },
+const errors = [
+  { id: 101, descricao: "Erro ao sincronizar abastecimento #101. Clique para corrigir." },
+  { id: 203, descricao: "Valor inválido no abastecimento #203." },
+  { id: 310, descricao: "Imagem do comprovante ausente no abastecimento #310." },
 ];
 
-<SupplyErrorCard messages={mensagens} />
+<SupplyErrorCard errors={mensagens} />
 \`\`\`
 
 ## Dicas
@@ -58,7 +58,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   name: "supply-error-card-default",
   args: {
-    messages: [
+    errors: [
       { id: 101, mensagem: "Erro ao sincronizar abastecimento #101. Clique para corrigir." },
       { id: 203, mensagem: "Valor inválido no abastecimento #203." },
       { id: 310, mensagem: "Imagem do comprovante ausente no abastecimento #310." },
@@ -68,5 +68,5 @@ export const Default: Story = {
 
 export const SupplyErrorCardNotMessage: Story = {
   name: "supply-error-card",
-  args: { messages: [] },
+  args: { errors: [] },
 };

package/src/stories/trip-details-card/trip-details-card.stories.tsx

@@ -10,7 +10,6 @@ const meta: Meta<typeof TripDetailsCard> = {
   title: "componente/TripDetailsCard",
   component: TripDetailsCard,
   args: {
-    dataRegistro: "11/03/2025 às 14:53:27",
     origem: "TIMÓTEO - MG",
     destino: "CAMPINAS - SP",
     proximoCarregamento: "CONTAGEM - MG",
@@ -22,13 +21,41 @@ Card visual para exibir uma lavagem de cavalo registrada.
 ### Como usar:
 \`\`\`tsx
 <TripDetailsCard
+  dataRegistro: "11/03/2025 às 14:53:27",
+  origem= "TIMÓTEO - MG",
+  destino= "CAMPINAS - SP",
   numero={1}
-  dataRegistro="11/03/2025 às 14:53:27"
   cavalo="RGA6B87"
+  peso= 25000,
+  baseCalculo= 3500,
   corBarra="#2ECC71"
+  numeroCte= {12034}
+  kmCarregado= {100}
+  kmVazio= {200}
 />
 \`\`\`
 `,
+    docs: {
+      description: {
+        component: `
+### TripDetailsCard
+
+Componente de **trip-details-card** para visualizar os detalhes de uma viagem.
+
+- \`corBarra\`: define a cor da barra lateral, útil para diferenciar ou categorizar viagens
+- \`dataRegistro\`: campo obrigatório, deve ser passado por parâmetro a data e hora do carregamento
+- \`numeroCte\`: campo obrigatório, representa o número do CTE associado à viagem
+- \`origem\`: campo obrigatório, local de origem do carregamento
+- \`destino\`: campo obrigatório, local de destino do carregamento
+- \`proximoCarregamento\`: campo opcional, indica o próximo ponto de carregamento
+- \`peso\`: campo opcional, peso da carga em quilogramas
+- \`kmCarregado\`: campo opcional, quilometragem percorrida carregado
+- \`kmVazio\`: campo opcional, quilometragem percorrida vazio
+- \`baseCalculo\`: campo opcional, valor base usado para cálculo do PRO
+- \`Interação\`: o componente possui um botão de expansão, que mostra ou oculta os detalhes da viagem ao ser clicado
+    `,
+      },
+    },
   },
 };
 
@@ -37,12 +64,18 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Padrao: Story = {
-  name: "card-manutencao",
+  name: "trip-details-card",
   args: {
-    numero: 1,
     dataRegistro: "11/03/2025 às 14:53:27",
+    origem: "TIMÓTEO - MG",
+    destino: "CAMPINAS - SP",
+    numero: 1,
     cavalo: "RGA6B87",
+    peso: 25000,
+    baseCalculo: 3500,
     corBarra: "#2ECC71",
-    imagemUrl: "https://placehold.co/300x300",
+    numeroCte: 12034,
+    kmCarregado: 100,
+    kmVazio: 200,
   },
 };

package/src/styles/theme/theme.ts

@@ -99,6 +99,7 @@ const fontSizes = {
 };
 
 const margins = {
+  fn: 2,
   "1xs": 6,
   "2xs": 10,
   xs: 12,