@granto-umbrella/umbrella-components 2.3.23 → 3.0.1

package/src/components/organisms/ListagemUltimasEmissoes/ListagemUltimasEmissoes.styles.tsx

@@ -0,0 +1,114 @@
+import styled from "styled-components";
+import {
+  semanticColors,
+  semanticSizes,
+  typographyTokens,
+  semanticRadius,
+} from "../../../styles/tokens";
+
+export const TableWrapper = styled.div`
+  width: 100%;
+  overflow-x: auto;
+  background-color: ${semanticColors.base.background};
+  border: 1px solid ${semanticColors.global.border.default};
+  padding: ${semanticSizes.global.padding.xl};
+  border-radius: ${semanticRadius.global.radius.md2};
+`;
+
+export const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+`;
+
+export const TableHead = styled.thead`
+  background-color: ${semanticColors.base.background};
+`;
+
+export const TableRow = styled.tr`
+  &:last-child td {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+`;
+
+export const TableHeader = styled.th`
+  padding: ${semanticSizes.global.padding.md} 0;
+  text-align: left;
+  border: 0px;
+  font-weight: ${typographyTokens.fontWeights.semibold};
+  font-size: ${typographyTokens.fontSizes.bodyS};
+  color: ${semanticColors.global.text.onSurface.enabled};
+
+  &.center {
+    text-align: center;
+  }
+`;
+
+export const TableData = styled.td`
+  padding: ${semanticSizes.global.padding.lg} 0 ${semanticSizes.global.padding["2xl"]};
+  border-bottom: 1px solid ${semanticColors.neutral[200]};
+  text-align: left;
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  color: ${semanticColors.global.text.default.enabled};
+
+  &.center {
+    text-align: center;
+
+    img {
+      display: block;
+      margin: 0 auto;
+    }
+  }
+
+  img {
+    cursor: pointer;
+  }
+`;
+
+export const TableWrapperHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.sm};
+  margin-bottom: ${semanticSizes.global.gap.lg};
+`;
+
+export const TableWrapperTitle = styled.h2`
+  font-size: ${typographyTokens.fontSizes.headingM};
+  font-weight: ${typographyTokens.fontWeights.medium};
+  margin: 0;
+  color: ${semanticColors.base.text};
+`;
+
+export const TableWrapperLink = styled.button`
+  display: flex;
+  flex-direction: row;
+  font-size: ${typographyTokens.fontSizes.labelL};
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  color: ${semanticColors.branding.text.accent.enabled};
+  gap: ${semanticSizes.global.gap.sm};
+  align-items: center;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+export const LoadingContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${semanticSizes.global.padding["3xl"]};
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  color: ${semanticColors.global.text.onSurface.subtitle};
+`;
+
+export const ErrorContainer = styled(LoadingContainer)`
+  color: ${semanticColors.danger.text.feedback.strong};
+`;

package/src/components/organisms/ListagemUltimasEmissoes/ListagemUltimasEmissoes.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import {
+  TableWrapper,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableData,
+  TableWrapperHeader,
+  TableWrapperTitle,
+  TableWrapperLink,
+  LoadingContainer,
+  ErrorContainer,
+} from "./ListagemUltimasEmissoes.styles";
+import { ListagemUltimasEmissoesProps } from "./ListagemUltimasEmissoes.types";
+
+const ListagemUltimasEmissoes: React.FC<ListagemUltimasEmissoesProps> = ({
+  items = [],
+  isLoading = false,
+  isError = false,
+  error = null,
+  onViewAll,
+  onActionClick,
+  title = "Suas últimas emissões",
+}) => {
+  if (isLoading) {
+    return <LoadingContainer>Carregando emissões...</LoadingContainer>;
+  }
+
+  if (isError) {
+    return (
+      <ErrorContainer>
+        Erro: {error?.message || "Não foi possível carregar as emissões"}
+      </ErrorContainer>
+    );
+  }
+
+  if (!items || items.length === 0) {
+    return <LoadingContainer>Nenhuma emissão encontrada</LoadingContainer>;
+  }
+
+  return (
+    <TableWrapper>
+      <TableWrapperHeader>
+        <TableWrapperTitle>{title}</TableWrapperTitle>
+        <TableWrapperLink onClick={onViewAll}>
+          Ver todos
+          <span>→</span>
+        </TableWrapperLink>
+      </TableWrapperHeader>
+
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>Reclamante</TableHeader>
+            <TableHeader>Valor Pago</TableHeader>
+            <TableHeader>Produto</TableHeader>
+            <TableHeader>ID</TableHeader>
+            <TableHeader className="center">Ações</TableHeader>
+          </TableRow>
+        </TableHead>
+        <tbody>
+          {items.map((item) => (
+            <TableRow key={item.policyId}>
+              <TableData>{item.insurerName}</TableData>
+              <TableData>
+                {Number(item.paymentTotal).toLocaleString("pt-BR", {
+                  style: "currency",
+                  currency: "BRL",
+                })}
+              </TableData>
+              <TableData>{item.modality}</TableData>
+              <TableData>{item.policyId}</TableData>
+              <TableData
+                className="center"
+                onClick={() => onActionClick?.(item.policyId)}
+                style={{ cursor: "pointer" }}
+              >
+                ⋮
+              </TableData>
+            </TableRow>
+          ))}
+        </tbody>
+      </Table>
+    </TableWrapper>
+  );
+};
+
+export { ListagemUltimasEmissoes };

package/src/components/organisms/ListagemUltimasEmissoes/ListagemUltimasEmissoes.types.ts

@@ -0,0 +1,16 @@
+export interface EmissionItem {
+  policyId: string;
+  insurerName: string;
+  paymentTotal: number;
+  modality: string;
+}
+
+export interface ListagemUltimasEmissoesProps {
+  items?: EmissionItem[];
+  isLoading?: boolean;
+  isError?: boolean;
+  error?: Error | null;
+  onViewAll?: () => void;
+  onActionClick?: (policyId: string) => void;
+  title?: string;
+}

package/src/components/organisms/ListagemUltimasEmissoes/index.tsx

@@ -0,0 +1 @@
+export { ListagemUltimasEmissoes } from "./ListagemUltimasEmissoes";

package/src/components/organisms/TimelineModal/TimelineModal.styles.ts

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import * as Dialog from '@radix-ui/react-dialog';
+import { semanticColors } from '../../../styles/tokens';
+
+export const Overlay = styled(Dialog.Overlay)`
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 50;
+`;
+export const Content = styled(Dialog.Content)`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+  width: 100%;
+  max-width: 520px;
+  z-index: 1000;
+  border-top: 6px solid ${semanticColors.branding.surface.enabled};
+`;
+
+export const Title = styled.h2`
+  font-size: 28px;
+  font-weight: 600;
+  color: ${semanticColors.base.text};
+  margin-bottom: 16px;
+  padding-right: 12px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  margin-top: -24px;
+`;
+
+export const CloseIcon = styled(Dialog.Close)`
+  position: absolute;
+  top: 32px;
+  right: 32px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  svg {
+    color: #888;
+  }
+`;

package/src/components/organisms/TimelineModal/TimelineModal.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as Dialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { CloseIcon, Content, Overlay, Title } from './TimelineModal.styles';
+import { FlowArrow } from 'phosphor-react';
+import { Timeline } from '../../molecules/TimeLine/TimeLine';
+export const TimelineModal = ({
+  open,
+  onOpenChange,
+  onClose,
+  data,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onClose: () => void;
+  data: any;
+}) => {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Overlay />
+      <Content>
+        <CloseIcon aria-label="Fechar" onClick={onClose}>
+          <X size={28} color="#BDBDBD" />
+        </CloseIcon>
+
+        <Dialog.Title>
+          <Title>
+            <FlowArrow />
+            Linha do tempo
+          </Title>
+        </Dialog.Title>
+
+        <Timeline items={data} />
+      </Content>
+    </Dialog.Root>
+  );
+};

package/src/global.d.ts

@@ -1,3 +1,9 @@
 // src/global.d.ts
 // Allow import of any ".css" file
 declare module "*.css";
+
+// Allow import of any ".svg" file
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

package/src/index.ts

@@ -1,3 +1,4 @@
+import { Form } from 'react-hook-form';
 
 // Import all components
 import {
@@ -7,39 +8,56 @@ import {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-} from "@radix-ui/react-dialog";
-import { Form } from "react-hook-form";
-import Badge from "./components/atoms/Badge/Badge";
-import Breadcrumb from "./components/atoms/Breadcrumb/Breadcrumb";
-import Button from "./components/atoms/Button";
-import { Checkbox } from "./components/atoms/Checkbox/Checkbox";
-import CodeInput from "./components/atoms/CodeInput";
-import Icon from "./components/atoms/Icon";
-import Input from "./components/atoms/Input";
-import { Label } from "./components/atoms/Label/Label";
-import RadioButton from "./components/atoms/RadioButton/RadioButton";
-import Pill from "./components/atoms/Pill/Pill";
-import Select from "./components/atoms/Select";
-import Switch from "./components/atoms/Switch/Switch";
-import Text from "./components/atoms/Text";
-import Textarea from "./components/atoms/Textarea/Textarea";
-import ButtonGroup from "./components/molecules/ButtonGroup/ButtonGroup";
-import { Calendar } from "./components/molecules/Calendar/Calendar";
+} from '@radix-ui/react-dialog';
+
+import Badge from './components/atoms/Badge/Badge';
+import Breadcrumb from './components/atoms/Breadcrumb/Breadcrumb';
+import Button from './components/atoms/Button';
+import { Checkbox } from './components/atoms/Checkbox/Checkbox';
+import CodeInput from './components/atoms/CodeInput/CodeInput';
+import { DatePickerInput } from './components/atoms/DatePickerInput/DatePickerInput';
+import { DropdownMenu } from './components/atoms/DropDownMenu/DropdownMenu';
+import ErroMessage from './components/atoms/ErrorMessage/ErrorMessage';
+import Footer from './components/atoms/Footer/Footer';
+import { GenericContainer } from './components/atoms/GenericContainer';
+import Icon from './components/atoms/Icon';
+import Input from './components/atoms/Input';
+import { Label } from './components/atoms/Label/Label';
+import Loading from './components/atoms/Loading';
+import { LogoContainer } from './components/atoms/LogoContainer';
+import { ModalAviso } from './components/atoms/ModalAviso';
+import { MultiSelect } from './components/atoms/MultiSelect';
+import Pill from './components/atoms/Pill/Pill';
+import RadioButton from './components/atoms/RadioButton/RadioButton';
+import { ResendLink } from './components/atoms/ResendLink';
+import Select from './components/atoms/Select';
+import { Subtitle } from './components/atoms/Subtitle';
+import Switch from './components/atoms/Switch/Switch';
+import { Tapbar } from './components/atoms/Tapbar';
+import Text from './components/atoms/Text';
+import Textarea from './components/atoms/Textarea/Textarea';
+import { Title } from './components/atoms/Title';
+import { BannerAjuda } from './components/molecules/BannerAjuda';
+import ButtonGroup from './components/molecules/ButtonGroup/ButtonGroup';
+import { Calendar } from './components/molecules/Calendar/Calendar';
+import { CodeInputContainer } from './components/molecules/CodeInputContainer';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "./components/molecules/Popover/Popover";
-import RadioGroup from "./components/molecules/RadioBoxGroup/RadioBoxGroup";
-import AlertDialog from "./components/organisms/AlertDialog/AlertDialog";
+} from './components/molecules/Popover/Popover';
+import RadioGroup from './components/molecules/RadioBoxGroup/RadioBoxGroup';
+import { TabToggle } from './components/molecules/TabToggle/TabToggle';
+import { Timeline } from './components/molecules/TimeLine/TimeLine';
+import AlertDialog from './components/organisms/AlertDialog/AlertDialog';
 import {
   DialogFooter,
   DialogHeader,
-} from "./components/organisms/Dialog/Dialog";
+} from './components/organisms/Dialog/Dialog';
 import {
   StyledDialogClose,
   StyledDialogOverlay,
-} from "./components/organisms/Dialog/Dialog.styles";
+} from './components/organisms/Dialog/Dialog.styles';
 import {
   FormControl,
   FormDescription,
@@ -48,22 +66,21 @@ import {
   FormLabel,
   FormMessage,
   useFormField,
-} from "./components/organisms/Form/Form";
-
-import { TabToggle } from "./components/molecules/TabToggle/TabToggle";
-
-import { DatePickerInput } from "./components/atoms/DatePickerInput/DatePickerInput";
+} from './components/organisms/Form/Form';
+import { TimelineModal } from './components/organisms/TimelineModal/TimelineModal';
 
 // Export all components
 export {
   AlertDialog,
+  BannerAjuda,
   Badge,
   Breadcrumb,
   Button,
   ButtonGroup,
   Calendar,
-  Checkbox,
   CodeInput,
+  CodeInputContainer,
+  Checkbox,
   DatePickerInput,
   Dialog,
   DialogContent,
@@ -73,6 +90,9 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  DropdownMenu,
+  ErroMessage,
+  Footer,
   Form,
   FormControl,
   FormDescription,
@@ -80,6 +100,11 @@ export {
   FormItem,
   FormLabel,
   FormMessage,
+  GenericContainer,
+  Loading,
+  LogoContainer,
+  ModalAviso,
+  MultiSelect,
   Icon,
   Input,
   Label,
@@ -89,24 +114,30 @@ export {
   PopoverTrigger,
   RadioButton,
   RadioGroup,
+  ResendLink,
   Select,
+  Subtitle,
   StyledDialogClose,
   StyledDialogOverlay,
   Switch,
+  Tapbar,
   TabToggle,
   Text,
   Textarea,
+  Title,
   useFormField,
+  Timeline,
+  TimelineModal,
 };
 
 // Export all tokens from a new file
-export { primitiveBorders, semanticBorders } from "./styles/tokens/borders";
-export { primitiveColors, semanticColors } from "./styles/tokens/colors";
-export { primitiveRadius, semanticRadius } from "./styles/tokens/radius";
-export { primitiveShadows, semanticShadows } from "./styles/tokens/shadows";
-export { primitiveSizes, semanticSizes } from "./styles/tokens/sizes";
-export { typographyTokens } from "./styles/tokens/typography";
+export { primitiveBorders, semanticBorders } from './styles/tokens/borders';
+export { primitiveColors, semanticColors } from './styles/tokens/colors';
+export { primitiveRadius, semanticRadius } from './styles/tokens/radius';
+export { primitiveShadows, semanticShadows } from './styles/tokens/shadows';
+export { primitiveSizes, semanticSizes } from './styles/tokens/sizes';
+export { typographyTokens } from './styles/tokens/typography';
 
 // Export all types
-export type { Radius } from "./types/radius.types";
-export type { Shadows } from "./types/shadows.types";
+export type { Radius } from './types/radius.types';
+export type { Shadows } from './types/shadows.types';

package/src/lib/helpers.ts

@@ -0,0 +1,17 @@
+import { TimelineVariant } from '@/components/molecules/TimeLine/TimeLine.types';
+
+export function labelFromVariant(v?: TimelineVariant) {
+  switch (v) {
+    case 'accepted':
+      return 'Proposta aceita';
+    case 'continued':
+      return 'Continuação';
+    case 'rejected':
+      return 'Recusada';
+    case 'download':
+      return 'Download';
+    case 'StatusChanged':
+    default:
+      return 'Status Alterado';
+  }
+}

package/src/styles/tokens/sizes.ts

@@ -18,6 +18,8 @@ export const primitiveSizes = {
     x14: "3.5rem", // 56px
     x15: "3.75rem", // 60px
     x16: "4rem", // 64px
+    x28: "6.9375rem", //111px
+    x44: "10.9375rem", //175px
   },
 };
 
@@ -31,6 +33,11 @@ export const semanticSizes = {
       xl: primitiveSizes.size.x6, // 24px
       "2xl": primitiveSizes.size.x8, // 32px
       "3xl": primitiveSizes.size.x10, // 40px
+      "4xl": primitiveSizes.size.x12, // 48px
+      "5xl": primitiveSizes.size.x14, // 56px
+      "6xl": primitiveSizes.size.x16, // 64px
+
+      
     },
     padding: {
       "2xs": primitiveSizes.size.half, // 2px
@@ -42,6 +49,10 @@ export const semanticSizes = {
       "2xl": primitiveSizes.size.x6, // 24px
       "3xl": primitiveSizes.size.x8, // 32px
       "4xl": primitiveSizes.size.x16, // 64px
+      "5xl": primitiveSizes.size.x28, // 111px
+      "6xl": primitiveSizes.size.x44, // 175px 
+
+
     },
     spacings: {
       sm: primitiveSizes.size.x6, // 24px
@@ -50,4 +61,4 @@ export const semanticSizes = {
     },
     full: "100%",
   },
-};
+}as const;

package/src/styles/tokens/typography.ts

@@ -29,7 +29,7 @@ export const typographyTokens = {
     bodyL: '26px',
     bodyM: '24px',
     bodyS: '22px',
-    bodyXS: '20px',
+    bodyXS: '18.2px',
     labelL: '24px',
     labelM: '22px',
     labelS: '18px',