@granto-umbrella/umbrella-components 3.0.76 → 3.0.78

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

@@ -1,41 +0,0 @@
-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

@@ -1,221 +0,0 @@
-import {
-  primitiveColors,
-  semanticColors,
-  semanticSizes,
-  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);
-  }
-`;
-export const EventContainer = styled.div`
-  display: flex;
-  gap: ${semanticSizes.global.gap.xs};
-  position: relative;
-`;
-
-export const IndicatorColumn = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 16px;
-  flex-shrink: 0;
-`;
-
-export const EventTitle = styled.h3`
-  font-family: ${typographyTokens.fontFamily.base};
-  font-size: ${typographyTokens.fontSizes.headingS};
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  line-height: 125%;
-  letter-spacing: 0%;
-  color: ${semanticColors.global.text.default.enabled};
-  margin: 0;
-`;
-
-export const EventSubtitle = styled.p`
-  font-family: ${typographyTokens.fontFamily.base};
-  font-size: ${typographyTokens.fontSizes.captionM};
-  line-height: 120%;
-  letter-spacing: 0%;
-  color: ${semanticColors.global.text.subtitle.enabled};
-  margin: 0;
-`;
-
-export const DetailsContainer = styled.div`
-  margin-top: 8px;
-`;

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

@@ -1,80 +0,0 @@
-import React from 'react';
-import {
-  //ItemWrap,
-  //Card,
-  //Sub,
-  //Row,
-  //Dot,
-  List,
-  //Title,
-  Empty,
-  RetryButton,
-} from './TimeLine.styles';
-import { ComparisonRow, TimelineProps } from './TimeLine.types';
-import { Skeleton } from '../../atoms/Skeleton/Skeleton';
-
-import { TimelineEvent } from '../../molecules/TimeLineEvent';
-
-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) => (
-          <li
-            key={`sk-${i}`}
-            style={{ listStyle: 'none', paddingBottom: '16px' }}
-          >
-            <div style={{ display: 'flex', gap: '8px' }}>
-              <Skeleton variant="circle" width={24} height={24} />
-              <div style={{ flex: 1 }}>
-                <Skeleton variant="text" width="60%" height={32} />
-                <Skeleton variant="text" width="40%" height={18} />
-              </div>
-            </div>
-          </li>
-        ))}
-      </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) => (
-        <li key={it.id} style={{ listStyle: 'none', paddingBottom: '16px' }}>
-          <TimelineEvent
-            data={{
-              id: it.id,
-              title: it.title,
-              timestamp: it.timestamp,
-              hasDetails: !!it.metadata?.hasDetails,
-              startsExpanded: !!it.metadata?.startsExpanded,
-              comparisonData: it.metadata?.comparisonData as
-                | ComparisonRow[]
-                | undefined,
-              metadata: it.metadata,
-            }}
-          />
-        </li>
-      ))}
-    </List>
-  );
-};

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

@@ -1,92 +0,0 @@
-export type TimelineVariant =
-  | 'continued'
-  | 'accepted'
-  | 'rejected'
-  | 'issue'
-  | 'order'
-  | 'created'
-  | 'updated'
-  | 'download'
-  | 'deleted'
-  | 'info';
-
-export type ActorType = 'user' | 'app';
-
-export interface TimelineActor {
-  id: string;
-  displayName: string;
-  type: ActorType | string;
-}
-
-export interface ComparisonRow {
-  field: string;
-  before: string;
-  after: string;
-}
-
-export interface TimelineMetadata {
-  hasDetails?: boolean;
-  comparisonData?: ComparisonRow[];
-  eventIdKey?: string;
-  [key: string]: unknown;
-}
-
-export interface TimelineItem {
-  id: string;
-  timestamp: string;
-  type: TimelineVariant | string;
-  title: string;
-  description?: string;
-  actor: TimelineActor;
-  origin: string;
-  correlationId?: string;
-  metadata?: Record<string, unknown>;
-}
-
-export type EventIdKey = `${number}`;
-
-export interface RemoteUser {
-  id: number;
-  username: string;
-  name: string;
-}
-
-export interface RemoteEvent {
-  id: string;
-  eventType: string;
-  eventId: number | string;
-  isPublic: boolean;
-
-  startDate: string;
-  endDate?: string;
-  duration?: number;
-
-  user?: RemoteUser;
-
-  data?: Record<string, unknown>;
-
-  parentId?: string | null;
-  parentType?: string | null;
-}
-
-export type TimelineProps = {
-  items: TimelineItem[];
-  loading?: boolean;
-  onRetry?: () => void;
-  emptyLabel?: string;
-  skeletonItems?: number;
-};
-
-export interface TimelineEventData {
-  metadata: unknown;
-  id: string;
-  title: string;
-  timestamp: string;
-  comparisonData?: {
-    field: string;
-    before: string;
-    after: string;
-  }[];
-  hasDetails: boolean;
-  startsExpanded?: boolean;
-}

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

@@ -1,94 +0,0 @@
-import styled from 'styled-components';
-import {
-  semanticColors,
-  semanticSizes,
-  semanticRadius,
-  semanticBorders,
-  typographyTokens,
-} from '../../../../styles/tokens';
-
-import { TimelineComparisonTableProps } from '../TimelineComparisonTable/TimelineComparisonTable.types';
-
-const TableContainer = styled.div`
-  width: 100%;
-  background-color: ${semanticColors.global.foreground.default};
-  border: ${semanticBorders.global.sm} solid
-    ${semanticColors.global.border.medium};
-  border-radius: ${semanticRadius.global.radius.md};
-  padding: ${semanticSizes.global.padding.sm};
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-left: -12px;
-`;
-
-const TableRow = styled.div`
-  display: grid;
-  grid-template-columns: 100px 1fr 1fr;
-  gap: ${semanticSizes.global.gap.sm};
-  align-items: center;
-  padding: 4px 0;
-`;
-
-const FieldLabel = styled.div`
-  font-family: ${typographyTokens.fontFamily.base};
-  font-size: ${typographyTokens.fontSizes.captionM};
-  font-weight: ${typographyTokens.fontWeights.regular};
-  line-height: 120%;
-  color: ${semanticColors.global.text.default.enabled};
-`;
-
-const ValueContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-
-const ValueLabel = styled.div<{ $isAfter?: boolean }>`
-  font-family: ${typographyTokens.fontFamily.base};
-  font-size: ${typographyTokens.fontSizes.captionS};
-  font-weight: ${(props) =>
-    props.$isAfter
-      ? typographyTokens.fontWeights.semibold
-      : typographyTokens.fontWeights.medium};
-  line-height: 120%;
-  color: ${(props) =>
-    props.$isAfter
-      ? semanticColors.branding.text.accent.enabled
-      : semanticColors.global.text.subtitle.enabled};
-`;
-
-const ValueText = styled.div<{ $isAfter?: boolean }>`
-  font-family: ${typographyTokens.fontFamily.base};
-  font-size: ${typographyTokens.fontSizes.bodyXS};
-  font-weight: ${(props) =>
-    props.$isAfter
-      ? typographyTokens.fontWeights.semibold
-      : typographyTokens.fontWeights.regular};
-  line-height: 130%;
-  color: ${semanticColors.global.text.default.enabled};
-`;
-
-export const TimeLineComparisonTable = ({
-  rows,
-}: TimelineComparisonTableProps) => {
-  return (
-    <TableContainer>
-      {rows.map((row, index) => (
-        <TableRow key={index}>
-          <FieldLabel>{row.field}</FieldLabel>
-
-          <ValueContainer>
-            <ValueLabel>Antes</ValueLabel>
-            <ValueText>{row.before}</ValueText>
-          </ValueContainer>
-
-          <ValueContainer>
-            <ValueLabel $isAfter>Depois</ValueLabel>
-            <ValueText $isAfter>{row.after}</ValueText>
-          </ValueContainer>
-        </TableRow>
-      ))}
-    </TableContainer>
-  );
-};

package/src/components/molecules/TimeLineEvent/TimelineEvent.styles.ts

@@ -1,62 +0,0 @@
-import styled from 'styled-components';
-import {
-  semanticColors,
-  semanticSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-
-export const EventContainer = styled.div`
-  display: flex;
-  gap: ${semanticSizes.global.gap.lg};
-  position: relative;
-  margin-bottom: 10px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
-
-export const IndicatorColumn = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 16px;
-  flex-shrink: 0;
-  margin-top: 2px;
-`;
-
-export const ContentColumn = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  align-self: stretch;
-  align-items: stretch;
-  padding-right: ${semanticSizes.global.padding.xs};
-`;
-
-export const EventTitle = styled.h3`
-  font-family: ${typographyTokens.fontFamily.base};
-  font-size: ${typographyTokens.fontSizes.headingS};
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  line-height: 125%;
-  letter-spacing: 0%;
-  color: ${semanticColors.global.text.default.enabled};
-  margin: 0;
-  margin-bottom: 6px;
-`;
-export const EventSubtitle = styled.p`
-  font-family: ${typographyTokens.fontFamily.base};
-  font-size: ${typographyTokens.fontSizes.captionM};
-  line-height: 120%;
-  letter-spacing: 0%;
-  color: ${semanticColors.global.text.subtitle.enabled};
-  margin: 0;
-  margin-bottom: 6px;
-`;
-export const DetailsContainer = styled.div`
-  margin-top: 6px;
-  margin-bottom: 0;
-
-  margin-left: calc(-1 * ${semanticSizes.global.gap.lg} - 5px);
-  margin-right: calc(-1 * ${semanticSizes.global.padding.xs});
-`;

package/src/components/molecules/TimeLineEvent/TimelineEvent.tsx

@@ -1,58 +0,0 @@
-import { useState } from 'react';
-import { TimelineEventIndicador } from '../../atoms/TimelineEventIndicator';
-import { TimeLineExpandButton } from '../../atoms/TimelineEventIndicator/TimelineExpandButton';
-import { TimeLineComparisonTable } from '../TimeLine/TimelineComparisonTable/TimelineComparisonTable';
-import type { TimelineEventData } from '../TimeLine/TimeLine.types';
-import { ContentColumn } from './TimelineEvent.styles';
-import {
-  EventContainer,
-  IndicatorColumn,
-  EventTitle,
-  EventSubtitle,
-  DetailsContainer,
-} from './TimelineEvent.styles';
-
-interface TimelineEventProps {
-  data: TimelineEventData;
-}
-
-export const TimelineEvent = ({ data }: TimelineEventProps) => {
-  const [expanded, setExpanded] = useState<boolean>(
-    data.startsExpanded || false
-  );
-
-  const toggleExpanded = () => {
-    setExpanded((prev: boolean) => !prev);
-  };
-
-  return (
-    <EventContainer>
-      <IndicatorColumn>
-        <TimelineEventIndicador />
-      </IndicatorColumn>
-
-      <ContentColumn>
-        <EventTitle>{data.title}</EventTitle>
-
-        {!data.hasDetails && <EventSubtitle>{data.timestamp}</EventSubtitle>}
-
-        {data.hasDetails && (
-          <>
-            <EventSubtitle>{data.timestamp}</EventSubtitle>
-
-            <TimeLineExpandButton
-              expanded={expanded}
-              onClick={toggleExpanded}
-            />
-
-            {expanded && data.comparisonData && (
-              <DetailsContainer>
-                <TimeLineComparisonTable rows={data.comparisonData} />
-              </DetailsContainer>
-            )}
-          </>
-        )}
-      </ContentColumn>
-    </EventContainer>
-  );
-};

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

@@ -1,61 +0,0 @@
-import {
-  semanticColors,
-  semanticRadius,
-  semanticShadows,
-  semanticSizes,
-} from '../../../styles/tokens';
-import styled from 'styled-components';
-
-export const DialogContainer = styled.div`
-  background: ${semanticColors.base.background};
-  padding: ${semanticSizes.global.padding['2xl']};
-  border-radius: ${semanticRadius.global.radius.md};
-  box-shadow: ${semanticShadows.shadow};
-  border-top: 4px solid ${semanticColors.danger.border.enabled};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.lg};
-  max-width: 440px;
-  text-align: left;
-  position: relative;
-`;
-
-export const ButtonContainer = styled.div`
-  display: flex;
-  width: 100%;
-  gap: ${semanticSizes.global.gap.lg};
-  margin-top: ${semanticSizes.global.spacings.lg};
-  justify-content: flex-end;
-`;
-
-export const Overlay = styled.div`
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-`;
-
-export const CloseButton = styled.button`
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: ${semanticColors.base.text};
-  font-size: ${semanticSizes.global.spacings.lg};
-
-  &:hover {
-    color: ${semanticColors.danger.border.enabled};
-  }
-`;
-
-export const TitleContainer = styled.div`
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: ${semanticSizes.global.gap.sm};
-`;