@granto-umbrella/umbrella-components 3.0.56 → 3.0.57

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

@@ -1,41 +1,66 @@
-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];
-}
+import { EventIdKey, TimelineVariant } from './TimeLine.types';
+
+type TimelineEventConfig = {
+  labelPtBr: string;
+  variant: TimelineVariant;
+};
+
+/**
+ * Fonte única de verdade:
+ * - id (eventId) => label PT-BR + variant
+ * - Alterou aqui, reflete em tudo.
+ */
+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',
+    },
+  };
+
+/**
+ * Se você quer um "alias" tipo EventIds.ProposalCreated:
+ * ele também nasce do registry e não vira duplicação.
+ */
+export const EventIds = {
+  ProposalCreated: '15101',
+  ProposalSubscribed: '15102',
+  ProposalUpdated: '15103',
+  ProposalFileDownloaded: '15104',
+  ProposalInsuranceIssued: '15105',
+  CategoryCreated: '15120',
+  HoldingGroupCreated: '20001',
+  HoldingGroupUpdated: '20002',
+  HoldingGroupDeleted: '20003',
+  HoldingGroupUserAdded: '20004',
+  HoldingGroupUserRemoved: '20005',
+  HoldingGroupCompanyAdded: '20006',
+  HoldingGroupCompanyRemoved: '20007',
+} as const satisfies Record<string, EventIdKey>;
+
+export function resolveTimelineConfig(eventIdKey: EventIdKey) {
+  return TIMELINE_EVENT_REGISTRY[eventIdKey];
+}

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

@@ -1,184 +1,184 @@
-import {
-  primitiveColors,
-  semanticColors,
-  typographyTokens,
-} from '../../../styles/tokens';
-import styled, { css } from 'styled-components';
-import { TimelineVariant } from './TimeLine.types';
-
-export const Time = styled.time`
-  color: #6b7280;
-  font-size: 0.78rem;
-`;
-
-export const ItemWrap = styled.li`
-  display: grid;
-  grid-template-columns: 24px 1fr;
-  gap: 12px;
-  position: relative;
-  padding-bottom: 16px;
-  &:last-child {
-    padding-bottom: 0;
-  }
-  &:not(:last-child)::before {
-    content: '';
-    position: absolute;
-    left: 11px;
-    top: 34px;
-    bottom: 0;
-    width: 3px;
-    height: 100%;
-    background-color: ${primitiveColors.gray[200]};
-  }
-`;
-
-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 v = ($variant as TimelineVariant) || 'continued';
-
-    const bgMap: Partial<Record<TimelineVariant, ReturnType<typeof css>>> = {
-      continued: css`
-        background: ${semanticColors.branding.surface.disabled};
-      `,
-      accepted: css`
-        background: ${semanticColors.global.surface.status.online};
-      `,
-      rejected: css`
-        background: ${semanticColors.global.surface.status.notification};
-      `,
-      download: css`
-        background: ${semanticColors.branding.surface.disabled};
-      `,
-      issue: css`
-        background: ${semanticColors.global.surface.status.online};
-      `,
-      order: css`
-        background: ${semanticColors.global.surface.status.online};
-      `,
-      created: css`
-        background: ${semanticColors.global.surface.status.online};
-      `,
-      updated: css`
-        background: ${semanticColors.global.surface.status.online};
-      `,
-      deleted: css`
-        background: ${semanticColors.global.surface.status.notification};
-      `,
-      info: css`
-        background: ${semanticColors.branding.surface.disabled};
-      `,
-    };
-
-    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!;
-  }}
-`;
-
-export const Card = styled.div`
-  background: #fff;
-  padding: 0px 8px;
-  margin-top: -4px;
-`;
-
-export const Title = styled.h4`
-  margin: 0 0 4px 0;
-  font-size: ${typographyTokens.fontSizes.headingL};
-  color: ${semanticColors.global.text.default.enabled};
-  font-weight: ${typographyTokens.fontWeights.semibold};
-`;
-
-export const Sub = styled.div`
-  color: ${semanticColors.global.text.subtitle.enabled};
-  font-size: 14px;
-`;
-
-export const Row = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-`;
-
-export const List = styled.ol`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  gap: 8px;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const Empty = styled.div`
-  display: grid;
-  gap: 12px;
-  justify-items: start;
-  background: #fff;
-  border: 1px dashed ${primitiveColors.gray[300]};
-  border-radius: 12px;
-  padding: 16px;
-  color: ${semanticColors.global.text.subtitle.enabled};
-`;
-
-export const RetryButton = styled.button`
-  appearance: none;
-  border: 1px solid ${semanticColors.branding.surface.enabled};
-  background: ${semanticColors.branding.surface.enabled};
-  color: ${primitiveColors.base.white};
-  border-radius: 10px;
-  padding: 8px 12px;
-  font-size: ${typographyTokens.fontSizes.bodyM};
-  cursor: pointer;
-
-  &:hover {
-    filter: brightness(0.95);
-  }
-  &:active {
-    filter: brightness(0.9);
-  }
-`;
+import {
+  primitiveColors,
+  semanticColors,
+  typographyTokens,
+} from '../../../styles/tokens';
+import styled, { css } from 'styled-components';
+import { TimelineVariant } from './TimeLine.types';
+
+export const Time = styled.time`
+  color: #6b7280;
+  font-size: 0.78rem;
+`;
+
+export const ItemWrap = styled.li`
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  gap: 12px;
+  position: relative;
+  padding-bottom: 16px;
+  &:last-child {
+    padding-bottom: 0;
+  }
+  &:not(:last-child)::before {
+    content: '';
+    position: absolute;
+    left: 11px;
+    top: 34px;
+    bottom: 0;
+    width: 3px;
+    height: 100%;
+    background-color: ${primitiveColors.gray[200]};
+  }
+`;
+
+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 v = ($variant as TimelineVariant) || 'continued';
+
+    const bgMap: Partial<Record<TimelineVariant, ReturnType<typeof css>>> = {
+      continued: css`
+        background: ${semanticColors.branding.surface.disabled};
+      `,
+      accepted: css`
+        background: ${semanticColors.global.surface.status.online};
+      `,
+      rejected: css`
+        background: ${semanticColors.global.surface.status.notification};
+      `,
+      download: css`
+        background: ${semanticColors.branding.surface.disabled};
+      `,
+      issue: css`
+        background: ${semanticColors.global.surface.status.online};
+      `,
+      order: css`
+        background: ${semanticColors.global.surface.status.online};
+      `,
+      created: css`
+        background: ${semanticColors.global.surface.status.online};
+      `,
+      updated: css`
+        background: ${semanticColors.global.surface.status.online};
+      `,
+      deleted: css`
+        background: ${semanticColors.global.surface.status.notification};
+      `,
+      info: css`
+        background: ${semanticColors.branding.surface.disabled};
+      `,
+    };
+
+    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!;
+  }}
+`;
+
+export const Card = styled.div`
+  background: #fff;
+  padding: 0px 8px;
+  margin-top: -4px;
+`;
+
+export const Title = styled.h4`
+  margin: 0 0 4px 0;
+  font-size: ${typographyTokens.fontSizes.headingL};
+  color: ${semanticColors.global.text.default.enabled};
+  font-weight: ${typographyTokens.fontWeights.semibold};
+`;
+
+export const Sub = styled.div`
+  color: ${semanticColors.global.text.subtitle.enabled};
+  font-size: 14px;
+`;
+
+export const Row = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+`;
+
+export const List = styled.ol`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Empty = styled.div`
+  display: grid;
+  gap: 12px;
+  justify-items: start;
+  background: #fff;
+  border: 1px dashed ${primitiveColors.gray[300]};
+  border-radius: 12px;
+  padding: 16px;
+  color: ${semanticColors.global.text.subtitle.enabled};
+`;
+
+export const RetryButton = styled.button`
+  appearance: none;
+  border: 1px solid ${semanticColors.branding.surface.enabled};
+  background: ${semanticColors.branding.surface.enabled};
+  color: ${primitiveColors.base.white};
+  border-radius: 10px;
+  padding: 8px 12px;
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.95);
+  }
+  &:active {
+    filter: brightness(0.9);
+  }
+`;

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

@@ -1,100 +1,100 @@
-import React from 'react';
-import {
-  ItemWrap,
-  Card,
-  Sub,
-  Row,
-  Dot,
-  List,
-  Title,
-  Empty,
-  RetryButton,
-} from './TimeLine.styles';
-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,
-  onRetry,
-  emptyLabel = 'Nenhum evento encontrado.',
-  skeletonItems = 3,
-}) => {
-  if (loading) {
-    return (
-      <List aria-label="Linha do tempo (carregando)">
-        {Array.from({ length: skeletonItems }).map((_, i) => (
-          <ItemWrap key={`sk-${i}`}>
-            <Skeleton
-              variant="circle"
-              width={24}
-              height={24}
-              ariaLabel="Carregando ponto da linha do tempo"
-            />
-
-            <Card>
-              <Title>
-                <Skeleton variant="text" width="60%" height={32} />
-              </Title>
-
-              <Sub>
-                <Skeleton variant="text" width="40%" height={18} />
-              </Sub>
-            </Card>
-          </ItemWrap>
-        ))}
-      </List>
-    );
-  }
-
-  if (!items?.length) {
-    return (
-      <Empty role="status" aria-live="polite">
-        <div>{emptyLabel}</div>
-        {onRetry && (
-          <RetryButton type="button" onClick={onRetry}>
-            Tentar novamente
-          </RetryButton>
-        )}
-      </Empty>
-    );
-  }
-
-  return (
-    <List aria-label="Linha do tempo">
-      {items.map((it) => {
-        const { dateStr, timeStr } = formatDateTimePtBr(it.timestamp);
-
-        return (
-          <ItemWrap key={it.id}>
-            <Dot aria-hidden $variant={it.type} />
-            <Card>
-              <Row style={{ justifyContent: 'space-between' }}>
-                <Title>{it.title}</Title>
-              </Row>
-
-              <Sub>
-                <div>
-                  Por: {it.actor.displayName} no dia{' '}
-                  {dateStr ? `${dateStr} às ${timeStr}` : ''}
-                </div>
-              </Sub>
-            </Card>
-          </ItemWrap>
-        );
-      })}
-    </List>
-  );
-};
+import React from 'react';
+import {
+  ItemWrap,
+  Card,
+  Sub,
+  Row,
+  Dot,
+  List,
+  Title,
+  Empty,
+  RetryButton,
+} from './TimeLine.styles';
+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,
+  onRetry,
+  emptyLabel = 'Nenhum evento encontrado.',
+  skeletonItems = 3,
+}) => {
+  if (loading) {
+    return (
+      <List aria-label="Linha do tempo (carregando)">
+        {Array.from({ length: skeletonItems }).map((_, i) => (
+          <ItemWrap key={`sk-${i}`}>
+            <Skeleton
+              variant="circle"
+              width={24}
+              height={24}
+              ariaLabel="Carregando ponto da linha do tempo"
+            />
+
+            <Card>
+              <Title>
+                <Skeleton variant="text" width="60%" height={32} />
+              </Title>
+
+              <Sub>
+                <Skeleton variant="text" width="40%" height={18} />
+              </Sub>
+            </Card>
+          </ItemWrap>
+        ))}
+      </List>
+    );
+  }
+
+  if (!items?.length) {
+    return (
+      <Empty role="status" aria-live="polite">
+        <div>{emptyLabel}</div>
+        {onRetry && (
+          <RetryButton type="button" onClick={onRetry}>
+            Tentar novamente
+          </RetryButton>
+        )}
+      </Empty>
+    );
+  }
+
+  return (
+    <List aria-label="Linha do tempo">
+      {items.map((it) => {
+        const { dateStr, timeStr } = formatDateTimePtBr(it.timestamp);
+
+        return (
+          <ItemWrap key={it.id}>
+            <Dot aria-hidden $variant={it.type} />
+            <Card>
+              <Row style={{ justifyContent: 'space-between' }}>
+                <Title>{it.title}</Title>
+              </Row>
+
+              <Sub>
+                <div>
+                  Por: {it.actor.displayName} no dia{' '}
+                  {dateStr ? `${dateStr} às ${timeStr}` : ''}
+                </div>
+              </Sub>
+            </Card>
+          </ItemWrap>
+        );
+      })}
+    </List>
+  );
+};