@granto-umbrella/umbrella-components 3.0.55 → 3.0.56

package/src/components/atoms/Tooltip/Tootip.styles.ts

@@ -1,153 +1,153 @@
-import styled, { css } from 'styled-components';
-import {
-  semanticColors,
-  primitiveColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens,
-} from '../../../styles/tokens';
-import { TooltipPosition } from './tooltip.types';
-
-const arrowSize = '8px';
-
-const positionStyles = {
-  top: css`
-    bottom: calc(100% + 12px);
-    left: 50%;
-    transform: translateX(-50%);
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      border-left: ${arrowSize} solid transparent;
-      border-right: ${arrowSize} solid transparent;
-      border-top: ${arrowSize} solid ${primitiveColors.base.white};
-    }
-  `,
-  bottom: css`
-    top: calc(100% + 12px);
-    left: 50%;
-    transform: translateX(-50%);
-
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      border-left: ${arrowSize} solid transparent;
-      border-right: ${arrowSize} solid transparent;
-      border-bottom: ${arrowSize} solid ${primitiveColors.base.white};
-    }
-  `,
-  left: css`
-    right: calc(100% + 12px);
-    top: 50%;
-    transform: translateY(-50%);
-
-    &::after {
-      content: '';
-      position: absolute;
-      left: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      border-top: ${arrowSize} solid transparent;
-      border-bottom: ${arrowSize} solid transparent;
-      border-left: ${arrowSize} solid ${primitiveColors.base.white};
-    }
-  `,
-  right: css`
-    left: calc(100% + 12px);
-    top: 50%;
-    transform: translateY(-50%);
-
-    &::after {
-      content: '';
-      position: absolute;
-      right: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      border-top: ${arrowSize} solid transparent;
-      border-bottom: ${arrowSize} solid transparent;
-      border-right: ${arrowSize} solid ${primitiveColors.base.white};
-    }
-  `,
-};
-
-export const TooltipContainer = styled.div`
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.xs};
-`;
-
-export const TooltipTrigger = styled.div`
-  display: inline-flex;
-  cursor: pointer;
-
-  img {
-    width: 16px;
-    height: 16px;
-    color: ${semanticColors.global.text.subtitle.enabled};
-    opacity: 0.7;
-    transition: opacity 0.2s ease;
-  }
-
-  &:hover img {
-    opacity: 1;
-  }
-`;
-
-export const TooltipContent = styled.div<{
-  $position: TooltipPosition;
-  $visible: boolean;
-}>`
-  position: absolute;
-  background: ${primitiveColors.base.white};
-  color: ${primitiveColors.gray[900]};
-  padding: ${semanticSizes.global.padding.md};
-  border-radius: ${semanticRadius.global.radius.md};
-  font-size: ${typographyTokens.fontSizes.captionM};
-  line-height: ${typographyTokens.lineHeights.captionM};
-  max-width: 280px;
-  min-width: 200px;
-  z-index: 1000;
-  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
-  border: 1px solid ${primitiveColors.gray[200]};
-  white-space: normal;
-  word-wrap: break-word;
-
-  opacity: ${({ $visible }) => ($visible ? '1' : '0')};
-  visibility: ${({ $visible }) => ($visible ? 'visible' : 'hidden')};
-  transition:
-    opacity 0.2s ease,
-    visibility 0.2s ease;
-  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};
-
-  ${({ $position }) => positionStyles[$position]}
-`;
-
-export const TooltipText = styled.p`
-  margin: 0 0 ${semanticSizes.global.gap.sm} 0;
-  color: ${primitiveColors.gray[800]};
-  font-size: ${typographyTokens.fontSizes.captionM};
-  line-height: ${typographyTokens.lineHeights.captionM};
-`;
-
-export const TooltipLink = styled.a`
-  color: ${primitiveColors.blue[600]};
-  text-decoration: underline;
-  font-weight: ${typographyTokens.fontWeights.medium};
-  font-size: ${typographyTokens.fontSizes.captionM};
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: ${semanticSizes.global.gap.xs};
-
-  &:hover {
-    color: ${primitiveColors.blue[800]};
-  }
-`;
+import styled, { css } from 'styled-components';
+import {
+  semanticColors,
+  primitiveColors,
+  semanticSizes,
+  semanticRadius,
+  typographyTokens,
+} from '../../../styles/tokens';
+import { TooltipPosition } from './tooltip.types';
+
+const arrowSize = '8px';
+
+const positionStyles = {
+  top: css`
+    bottom: calc(100% + 12px);
+    left: 50%;
+    transform: translateX(-50%);
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-left: ${arrowSize} solid transparent;
+      border-right: ${arrowSize} solid transparent;
+      border-top: ${arrowSize} solid ${primitiveColors.base.white};
+    }
+  `,
+  bottom: css`
+    top: calc(100% + 12px);
+    left: 50%;
+    transform: translateX(-50%);
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-left: ${arrowSize} solid transparent;
+      border-right: ${arrowSize} solid transparent;
+      border-bottom: ${arrowSize} solid ${primitiveColors.base.white};
+    }
+  `,
+  left: css`
+    right: calc(100% + 12px);
+    top: 50%;
+    transform: translateY(-50%);
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border-top: ${arrowSize} solid transparent;
+      border-bottom: ${arrowSize} solid transparent;
+      border-left: ${arrowSize} solid ${primitiveColors.base.white};
+    }
+  `,
+  right: css`
+    left: calc(100% + 12px);
+    top: 50%;
+    transform: translateY(-50%);
+
+    &::after {
+      content: '';
+      position: absolute;
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border-top: ${arrowSize} solid transparent;
+      border-bottom: ${arrowSize} solid transparent;
+      border-right: ${arrowSize} solid ${primitiveColors.base.white};
+    }
+  `,
+};
+
+export const TooltipContainer = styled.div`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.xs};
+`;
+
+export const TooltipTrigger = styled.div`
+  display: inline-flex;
+  cursor: pointer;
+
+  img {
+    width: 16px;
+    height: 16px;
+    color: ${semanticColors.global.text.subtitle.enabled};
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+  }
+
+  &:hover img {
+    opacity: 1;
+  }
+`;
+
+export const TooltipContent = styled.div<{
+  $position: TooltipPosition;
+  $visible: boolean;
+}>`
+  position: absolute;
+  background: ${primitiveColors.base.white};
+  color: ${primitiveColors.gray[900]};
+  padding: ${semanticSizes.global.padding.md};
+  border-radius: ${semanticRadius.global.radius.md};
+  font-size: ${typographyTokens.fontSizes.captionM};
+  line-height: ${typographyTokens.lineHeights.captionM};
+  max-width: 280px;
+  min-width: 200px;
+  z-index: 1000;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
+  border: 1px solid ${primitiveColors.gray[200]};
+  white-space: normal;
+  word-wrap: break-word;
+
+  opacity: ${({ $visible }) => ($visible ? '1' : '0')};
+  visibility: ${({ $visible }) => ($visible ? 'visible' : 'hidden')};
+  transition:
+    opacity 0.2s ease,
+    visibility 0.2s ease;
+  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};
+
+  ${({ $position }) => positionStyles[$position]}
+`;
+
+export const TooltipText = styled.p`
+  margin: 0 0 ${semanticSizes.global.gap.sm} 0;
+  color: ${primitiveColors.gray[800]};
+  font-size: ${typographyTokens.fontSizes.captionM};
+  line-height: ${typographyTokens.lineHeights.captionM};
+`;
+
+export const TooltipLink = styled.a`
+  color: ${primitiveColors.blue[600]};
+  text-decoration: underline;
+  font-weight: ${typographyTokens.fontWeights.medium};
+  font-size: ${typographyTokens.fontSizes.captionM};
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: ${semanticSizes.global.gap.xs};
+
+  &:hover {
+    color: ${primitiveColors.blue[800]};
+  }
+`;

package/src/components/atoms/Tooltip/tooltip.types.ts

@@ -1,8 +1,8 @@
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-
-export interface TooltipProps {
-  children: React.ReactNode;
-  content: string;
-  position?: TooltipPosition;
-  helpLink?: string;
-}
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TooltipProps {
+  children: React.ReactNode;
+  content: string;
+  position?: TooltipPosition;
+  helpLink?: string;
+}

package/src/components/molecules/RadioGroupField/RadioGroupField.types.ts

@@ -5,8 +5,6 @@ export interface RadioOption {
   label: string;
   iconActive?: ReactNode;
   iconInactive?: ReactNode;
-  iconDesactive?: ReactNode;
-  testId?: string;
 }
 
 export interface RadioGroupFieldProps {

package/src/components/molecules/TimeLine/TimeLine.mapper.ts

@@ -1,68 +1,85 @@
 // TimeLine.mapper.ts
 import {
   TimelineItem,
-  TimelineVariant,
   RemoteEvent,
-  EventType,
+  EventIdKey,
+  TimelineVariant,
 } from './TimeLine.types';
+import { resolveTimelineConfig } from './TimeLine.registry';
 
-const eventTypeToVariant: Record<string, TimelineVariant> = {
-  [EventType.PartnerSubscribe]: 'accepted',
-  [EventType.PartnerQuote]: 'continued',
-  [EventType.ProposalRefused]: 'rejected',
-  [EventType.PartnerIssue]: 'issue',
-  [EventType.PartnerOrder]: 'order',
-};
+function toEventIdKey(eventId: number | string): EventIdKey {
+  const raw = String(eventId).trim();
+  return raw as EventIdKey;
+}
 
-const eventTypeToTitle: Record<string, string> = {
-  [EventType.PartnerSubscribe]: 'Subscrição realizada',
-  [EventType.PartnerQuote]: 'Cotação processada',
-  [EventType.ProposalRefused]: 'Proposta recusada',
-  [EventType.PartnerIssue]: 'Emissão realizada',
-  [EventType.PartnerOrder]: 'Ordem realizada',
-};
+function toVariant(eventIdKey: EventIdKey): TimelineVariant {
+  return resolveTimelineConfig(eventIdKey)?.variant || 'continued';
+}
 
-function toVariant(eventType: string): TimelineVariant {
-  return eventTypeToVariant[eventType] || 'continued';
+function buildTitle(eventIdKey: EventIdKey): string {
+  const base =
+    resolveTimelineConfig(eventIdKey)?.labelPtBr || `Evento ${eventIdKey}`;
+
+  return base;
 }
 
-function buildTitle(ev: RemoteEvent): string {
-  const { eventType, data } = ev;
-  return (
-    eventTypeToTitle[eventType] ||
-    (data?.title ? String(data.title) : eventType)
-  );
+function actorFrom(ev: RemoteEvent) {
+  if (!ev.user) {
+    return { id: '', displayName: 'Sistema', type: 'app' as const };
+  }
+
+  return {
+    id: String(ev.user.id),
+    displayName: ev.user.name || 'Usuário',
+    type: 'user' as const,
+  };
+}
+
+function safeOrigin(ev: RemoteEvent): string {
+  const origin = ev.parentType || ev.eventType;
+  return origin ? String(origin) : 'unknown';
+}
+
+function safeData(ev: RemoteEvent): Record<string, unknown> {
+  return ev.data && typeof ev.data === 'object' ? ev.data : {};
 }
 
 export function mapRemoteToTimeline(items: RemoteEvent[]): TimelineItem[] {
   return items.map((ev, idx) => {
-    const id = ev.correlationId || String(idx);
-    const actorName = ev.actor?.name || 'Sistema';
+    const id = ev.id || String(idx);
+    const eventIdKey = toEventIdKey(ev.eventId);
+    const data = safeData(ev) as Record<string, any>;
 
     return {
       id,
-      timestamp: ev.startAt,
-      type: toVariant(ev.eventType),
-      title: buildTitle(ev),
+      timestamp: ev.startDate,
+      type: toVariant(eventIdKey),
+      title: buildTitle(eventIdKey),
       description: undefined,
-      actor: {
-        id: String(ev.actor?.id ?? ''),
-        displayName: actorName,
-        type: ev.actor?.type ?? 'app',
-      },
-      origin: ev.parentEventType || ev.eventType,
-      correlationId: ev.correlationId,
+      actor: actorFrom(ev),
+      origin: safeOrigin(ev),
+      correlationId: ev.id,
       metadata: {
+        eventIdKey,
+        eventIdRaw: ev.eventId,
         eventType: ev.eventType,
-        orderId: ev.data?.orderId,
-        insuranceId: ev.data?.insuranceId,
-        startAt: ev.startAt,
-        endAt: ev.endAt,
+        isPublic: ev.isPublic,
+        startDate: ev.startDate,
+        endDate: ev.endDate,
         duration: ev.duration,
-        parentCorrelationId: ev.parentCorrelationId,
-        offers: ev.data?.offers,
-        subscriptionPeriod: ev.data?.subscription?.period,
-        insuredName: ev.data?.subscription?.insured?.name,
+        parentId: ev.parentId,
+        parentType: ev.parentType,
+
+        proposalId: data?.id,
+        orderId: data?.umOrder,
+        insuranceId: data?.umInsurance,
+        insuredName: data?.insuredName,
+        insuredDocument: data?.insuredDocument,
+        status: data?.status,
+        stage: data?.stage,
+        modality: data?.modality,
+
+        data,
       },
     };
   });

package/src/components/molecules/TimeLine/TimeLine.registry.ts

@@ -0,0 +1,41 @@
+import { EventIdKey, TimelineVariant } from './TimeLine.types';
+
+type TimelineEventConfig = {
+  labelPtBr: string;
+  variant: TimelineVariant;
+};
+
+export const TIMELINE_EVENT_REGISTRY: Record<EventIdKey, TimelineEventConfig> =
+  {
+    '15101': { labelPtBr: 'Proposta criada', variant: 'info' },
+    '15102': { labelPtBr: 'Proposta subscrita', variant: 'info' },
+    '15103': { labelPtBr: 'Proposta atualizada', variant: 'info' },
+    '15104': { labelPtBr: 'Foi feito o download da proposta', variant: 'info' },
+    '15105': { labelPtBr: 'Apólice emitida', variant: 'issue' },
+
+    '15120': { labelPtBr: 'Categoria criada', variant: 'info' },
+
+    '20001': { labelPtBr: 'Unidade de Negócio criada', variant: 'info' },
+    '20002': { labelPtBr: 'Unidade de Negócio atualizada', variant: 'info' },
+    '20003': { labelPtBr: 'Unidade de Negócio removida', variant: 'deleted' },
+    '20004': {
+      labelPtBr: 'Usuário adicionado à Unidade de Negócio',
+      variant: 'info',
+    },
+    '20005': {
+      labelPtBr: 'Usuário removido da Unidade de Negócio',
+      variant: 'info',
+    },
+    '20006': {
+      labelPtBr: 'Empresa adicionada à Unidade de Negócio',
+      variant: 'info',
+    },
+    '20007': {
+      labelPtBr: 'Empresa removida da Unidade de Negócio',
+      variant: 'deleted',
+    },
+  };
+
+export function resolveTimelineConfig(eventIdKey: EventIdKey) {
+  return TIMELINE_EVENT_REGISTRY[eventIdKey];
+}

package/src/components/molecules/TimeLine/TimeLine.styles.ts

@@ -32,17 +32,18 @@ export const ItemWrap = styled.li`
   }
 `;
 
-export const Dot = styled.span<{
-  $variant?: TimelineVariant | string;
-}>`
+export const Dot = styled.span<{ $variant?: TimelineVariant | string }>`
   width: 24px;
   height: 24px;
   border-radius: 50%;
   border: 1px solid;
   display: inline-block;
   margin-top: 0.2rem;
+
   ${({ $variant = 'continued' }) => {
-    const map: Record<TimelineVariant, ReturnType<typeof css>> = {
+    const v = ($variant as TimelineVariant) || 'continued';
+
+    const bgMap: Partial<Record<TimelineVariant, ReturnType<typeof css>>> = {
       continued: css`
         background: ${semanticColors.branding.surface.disabled};
       `,
@@ -61,32 +62,61 @@ export const Dot = styled.span<{
       order: css`
         background: ${semanticColors.global.surface.status.online};
       `,
-    };
-    return map[$variant as TimelineVariant] ?? map['continued'];
-  }}
-
-  ${({ $variant = 'continued' }) => {
-    const map: Record<TimelineVariant, ReturnType<typeof css>> = {
-      continued: css`
-        border-color: ${semanticColors.branding.surface.enabled};
-      `,
-      accepted: css`
-        border-color: ${semanticColors.global.border.feedback.success};
-      `,
-      rejected: css`
-        border-color: ${semanticColors.global.border.feedback.error};
+      created: css`
+        background: ${semanticColors.global.surface.status.online};
       `,
-      download: css`
-        border-color: ${semanticColors.branding.surface.enabled};
+      updated: css`
+        background: ${semanticColors.global.surface.status.online};
       `,
-      issue: css`
-        border-color: ${semanticColors.global.border.feedback.success};
+      deleted: css`
+        background: ${semanticColors.global.surface.status.notification};
       `,
-      order: css`
-        border-color: ${semanticColors.global.border.feedback.success};
+      info: css`
+        background: ${semanticColors.branding.surface.disabled};
       `,
     };
-    return map[$variant as TimelineVariant] ?? map['continued'];
+
+    return bgMap[v] ?? bgMap.continued!;
+  }}
+
+  ${({ $variant = 'continued' }) => {
+    const v = ($variant as TimelineVariant) || 'continued';
+
+    const borderMap: Partial<Record<TimelineVariant, ReturnType<typeof css>>> =
+      {
+        continued: css`
+          border-color: ${semanticColors.branding.surface.enabled};
+        `,
+        accepted: css`
+          border-color: ${semanticColors.global.border.feedback.success};
+        `,
+        rejected: css`
+          border-color: ${semanticColors.global.border.feedback.error};
+        `,
+        download: css`
+          border-color: ${semanticColors.branding.surface.enabled};
+        `,
+        issue: css`
+          border-color: ${semanticColors.global.border.feedback.success};
+        `,
+        order: css`
+          border-color: ${semanticColors.global.border.feedback.success};
+        `,
+        created: css`
+          border-color: ${semanticColors.global.border.feedback.success};
+        `,
+        updated: css`
+          border-color: ${semanticColors.global.border.feedback.success};
+        `,
+        deleted: css`
+          border-color: ${semanticColors.global.border.feedback.error};
+        `,
+        info: css`
+          border-color: ${semanticColors.branding.surface.enabled};
+        `,
+      };
+
+    return borderMap[v] ?? borderMap.continued!;
   }}
 `;
 

package/src/components/molecules/TimeLine/TimeLine.tsx

@@ -1,4 +1,3 @@
-// src/components/molecules/TimeLine/TimeLine.tsx
 import React from 'react';
 import {
   ItemWrap,
@@ -14,6 +13,18 @@ import {
 import { TimelineProps } from './TimeLine.types';
 import { Skeleton } from '../../atoms/Skeleton/Skeleton';
 
+function formatDateTimePtBr(iso: string) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return { dateStr: '', timeStr: '' };
+
+  const dateStr = d.toLocaleDateString('pt-BR');
+  const timeStr = d.toLocaleTimeString('pt-BR', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+  return { dateStr, timeStr };
+}
+
 export const Timeline: React.FC<TimelineProps> = ({
   items,
   loading = false,
@@ -32,6 +43,7 @@ export const Timeline: React.FC<TimelineProps> = ({
               height={24}
               ariaLabel="Carregando ponto da linha do tempo"
             />
+
             <Card>
               <Title>
                 <Skeleton variant="text" width="60%" height={32} />
@@ -47,7 +59,7 @@ export const Timeline: React.FC<TimelineProps> = ({
     );
   }
 
-  if (!items || items.length === 0) {
+  if (!items?.length) {
     return (
       <Empty role="status" aria-live="polite">
         <div>{emptyLabel}</div>
@@ -63,18 +75,11 @@ export const Timeline: React.FC<TimelineProps> = ({
   return (
     <List aria-label="Linha do tempo">
       {items.map((it) => {
-        const d = new Date(it.timestamp);
-        const dateStr = d.toLocaleDateString('pt-BR');
-        const timeStr = d.toLocaleTimeString('pt-BR', {
-          hour: '2-digit',
-          minute: '2-digit',
-        });
-
-        //const actorName = it.actor?.displayName || 'Sistema';
+        const { dateStr, timeStr } = formatDateTimePtBr(it.timestamp);
 
         return (
           <ItemWrap key={it.id}>
-            {it?.type && <Dot aria-hidden $variant={it.type || 'continued'} />}
+            <Dot aria-hidden $variant={it.type} />
             <Card>
               <Row style={{ justifyContent: 'space-between' }}>
                 <Title>{it.title}</Title>
@@ -82,9 +87,8 @@ export const Timeline: React.FC<TimelineProps> = ({
 
               <Sub>
                 <div>
-                  {/*Por: {actorName}{' '}
-                  {dateStr ? `dia ${dateStr} às ${timeStr}` : ''}*/}
-                  Em: {dateStr ? `${dateStr} às ${timeStr}` : ''}
+                  Por: {it.actor.displayName} no dia{' '}
+                  {dateStr ? `${dateStr} às ${timeStr}` : ''}
                 </div>
               </Sub>
             </Card>