jornada-ui 0.4.15 → 0.4.17

package/src/components/user-journey-work-card/interface.d.ts

@@ -1,145 +1,149 @@
-/*
- * IMPORTS
- */
-import type React from "react";
-import { ViewProps, type DimensionValue } from "react-native";
-
-/**
- * INTERFACE
- */
-type IUserJourneyWorkCard = ViewProps & {
-  /**
-   * props que mostra o nome do usuário
-   */
-  name: string;
-
-  /**
-   * props que mostra a data
-   */
-  workDate: string;
-
-  /**
-   * props que mostra o horário inicial
-   */
-  initialTime?: string;
-
-  /**
-   * props que mostra a duração
-   */
-  duration?: string;
-
-  /**
-   * props que mostra o avatar do usuário
-   */
-  avatar: string;
-
-  handleNavigation: () => 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 type { IUserJourneyWorkCard };
+/*
+ * IMPORTS
+ */
+import type React from "react";
+import { ViewProps, type DimensionValue } from "react-native";
+
+/**
+ * INTERFACE
+ */
+type IUserJourneyWorkCard = ViewProps & {
+  /**
+   * props que mostra o nome do usuário
+   */
+  name: string;
+
+  /**
+   * props que mostra a data
+   */
+  workDate: string;
+
+  /**
+   * props que mostra o horário inicial
+   */
+  initialTime?: string;
+
+  /**
+   * props que mostra a duração
+   */
+  duration?: string;
+
+  counterBadge?: number;
+
+  /**
+   * props que mostra o avatar do usuário
+   */
+  avatar: string;
+
+  handleNavigation: () => void;
+
+  handleNavigationNotification: () => 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 type { IUserJourneyWorkCard };

package/src/index.tsx

@@ -43,10 +43,12 @@ 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 ModalJourneyRectification } from "./components/modals/modal-edite-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";
+export { default as NotificationCard } from "./components/notification-card";
+export { default as NotificationDetailCard } from "./components/notification-details-card";
 
 // adicionar o storybook + teste
 export { default as WeeklyHoursBalance } from "./components/weekly-hours-balance";

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

@@ -1,4 +1,4 @@
-/* eslint-disable no-undef */
+ 
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 

package/src/stories/capture-photo/capture-photo.stories.tsx

@@ -53,7 +53,7 @@ export default meta;
 
 type story = StoryObj<typeof CapturePhoto>;
 
-/* eslint-disable no-undef */
+ 
 export const CaptureSimple: story = {
   name: "capture-simple",
   args: {

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

@@ -1,60 +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: () => {},
-  },
-};
+/**
+ * IMPORTS
+ */
+import type { StoryObj, Meta } from "@storybook/react";
+
+// components
+import ModalJourneyRectification from "../../components/modals/modal-edite-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/notification-card/notification-card.stories.tsx

@@ -0,0 +1,93 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+// components
+import NotificationCard from "../../components/notification-card";
+
+// typings
+import type { INotificationCardProps } from "../../components/notification-card/interface";
+
+/**
+ * META
+ */
+const meta: Meta<typeof NotificationCard> = {
+  title: "Componente/NotificationCard",
+  component: NotificationCard as React.FC<INotificationCardProps>,
+  args: {
+    variant: "read",
+    title: "Lorem Ipsum",
+    description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry...",
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      description: "Define o estilo do card.",
+      options: ["success", "warning"],
+    },
+    title: {
+      control: { type: "text" },
+      description: "Título da notificação.",
+    },
+    description: {
+      control: { type: "text" },
+      description: "Descrição da notificação.",
+    },
+    actionLabel: {
+      control: { type: "text" },
+      description: "Texto do botão de ação opcional.",
+    },
+    onPressAction: {
+      action: "onPressAction",
+      description: "Função chamada ao clicar no botão de ação.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### NotificationCard
+
+Componente de **notificação** para exibir informações ao usuário.
+
+- \`variant\`: define o tipo de card (\`success\` | \`warning\`)
+- \`title\`: define o título da notificação
+- \`description\`: define a descrição da notificação
+- \`actionLabel\`: texto opcional do botão de ação
+- \`onPressAction\`: callback executado ao clicar na ação
+
+> Use este componente quando precisar exibir uma notificação com ou sem ação para o usuário.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NotificationCard>;
+
+/**
+ * STORIES
+ */
+export const NotificationCardSuccess: Story = {
+  name: "notification-card-success",
+  args: {
+    variant: "read",
+    title: "Lorem Ipsum",
+    description:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been used as a placeholder text since the 1500s...",
+  },
+};
+
+export const NotificationCardWarning: Story = {
+  name: "notification-card-warning",
+  args: {
+    variant: "unread",
+    title: "Lorem Ipsum",
+    description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry...",
+    actionLabel: "Lorem Ipsum",
+  },
+};

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

@@ -0,0 +1,109 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+// components
+import NotificationDetailCard from "../../components/notification-details-card";
+
+// typings
+import type { INotificationDetailCardProps } from "../../components/notification-details-card/interface";
+
+/**
+ * META
+ */
+const meta: Meta<typeof NotificationDetailCard> = {
+  title: "Componente/NotificationDetailCard",
+  component: NotificationDetailCard as React.FC<INotificationDetailCardProps>,
+  args: {
+    title: "Lorem Ipsum",
+    description:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. " +
+      "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...",
+  },
+  argTypes: {
+    title: {
+      control: { type: "text" },
+      description: "Título da notificação.",
+    },
+    description: {
+      control: { type: "text" },
+      description: "Descrição detalhada da notificação.",
+    },
+    fileUrl: {
+      control: { type: "text" },
+      description: "URL de um arquivo anexo (imagem, PDF, CSV, etc.).",
+    },
+    fileType: {
+      control: { type: "select" },
+      options: ["image", "pdf", "csv", "other"],
+      description: "Tipo do arquivo anexo.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### NotificationDetailCard
+
+Componente de **detalhamento de notificações**, podendo conter apenas texto ou também anexos (imagem, PDF, CSV, etc.).
+
+- \`title\`: título da notificação
+- \`description\`: descrição detalhada
+- \`fileUrl\`: URL do arquivo (opcional)
+- \`fileType\`: tipo do arquivo (image, pdf, csv, other)
+
+> Use este componente para exibir o detalhamento completo de uma notificação.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NotificationDetailCard>;
+
+/**
+ * STORIES
+ */
+export const SomenteTexto: Story = {
+  name: "Somente Texto",
+  args: {
+    title: "Lorem Ipsum",
+    description:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. " +
+      "It has survived not only five centuries, but also the leap into electronic typesetting.",
+  },
+};
+
+export const TextoComImagem: Story = {
+  name: "Texto + Imagem",
+  args: {
+    title: "Atenção!",
+    description: "Ponte interditada para caminhões. Apenas veículos leves podem transitar.",
+    fileUrl: "https://placehold.co/300x300", // aqui você troca pelo real
+    fileType: "image",
+  },
+};
+
+export const TextoComPdf: Story = {
+  name: "Texto + PDF",
+  args: {
+    title: "Relatório disponível",
+    description: "Clique abaixo para abrir o relatório completo em PDF.",
+    fileUrl: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
+    fileType: "pdf",
+  },
+};
+
+export const TextoComCsv: Story = {
+  name: "Texto + CSV",
+  args: {
+    title: "Dados Exportados",
+    description: "Clique abaixo para visualizar o arquivo CSV exportado.",
+    fileUrl: "https://people.sc.fsu.edu/~jburkardt/data/csv/airtravel.csv",
+    fileType: "csv",
+  },
+};