jornada-ui 0.4.11 → 0.4.12

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

@@ -1,72 +1,72 @@
-/**
- * IMPORTS
- */
-import type React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-
-// component
-import SupplyErrorCard from "../../components/supply-error-card";
-
-const meta: Meta<typeof SupplyErrorCard> = {
-  title: "componente/SupplyErrorCard",
-  component: SupplyErrorCard as React.FC,
-  args: {
-    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: {
-    errors: {
-      description: "Lista de mensagens de erro/exceção relacionadas a abastecimentos.",
-      control: "object",
-      table: {
-        type: { summary: "Array<{ id: number; mensagem: string }>" },
-      },
-    },
-  },
-  parameters: {
-    notes: `
-# SupplyErrorCard
-
-Card de alertas de abastecimento. Quando **fechado**, exibe apenas a primeira mensagem.
-Ao **clicar**, expande e mostra a lista completa. O ícone alterna entre *chevron down/up*.
-
-## Uso básico
-\`\`\`tsx
-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 errors={mensagens} />
-\`\`\`
-
-## Dicas
-- Renderize em um container com padding.
-- Trate cliques/expansão no próprio componente; este story demonstra o comportamento padrão.
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  name: "supply-error-card-default",
-  args: {
-    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." },
-    ],
-  },
-};
-
-export const SupplyErrorCardNotMessage: Story = {
-  name: "supply-error-card",
-  args: { errors: [] },
-};
+/**
+ * IMPORTS
+ */
+import type React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+// component
+import SupplyErrorCard from "../../components/supply-error-card";
+
+const meta: Meta<typeof SupplyErrorCard> = {
+  title: "componente/SupplyErrorCard",
+  component: SupplyErrorCard as React.FC,
+  args: {
+    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: {
+    errors: {
+      description: "Lista de mensagens de erro/exceção relacionadas a abastecimentos.",
+      control: "object",
+      table: {
+        type: { summary: "Array<{ id: number; mensagem: string }>" },
+      },
+    },
+  },
+  parameters: {
+    notes: `
+# SupplyErrorCard
+
+Card de alertas de abastecimento. Quando **fechado**, exibe apenas a primeira mensagem.
+Ao **clicar**, expande e mostra a lista completa. O ícone alterna entre *chevron down/up*.
+
+## Uso básico
+\`\`\`tsx
+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 errors={mensagens} />
+\`\`\`
+
+## Dicas
+- Renderize em um container com padding.
+- Trate cliques/expansão no próprio componente; este story demonstra o comportamento padrão.
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "supply-error-card-default",
+  args: {
+    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." },
+    ],
+  },
+};
+
+export const SupplyErrorCardNotMessage: Story = {
+  name: "supply-error-card",
+  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,