@granto-umbrella/umbrella-components 3.0.76 → 3.0.78

package/src/components/molecules/RadioBoxGroup/RadioBoxGroup.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { Container } from './RadioBoxGroup.styles';
-import RadioButton from '../../../components/atoms/RadioButton/RadioButton';
-
-export interface Option {
-  label: string;
-  value: string | number;
-  disabled?: boolean;
-}
-
-export interface RadioBoxGroupProps {
-  name: string;
-  options: Option[];
-  value: string;
-  onChange: (value: string) => void;
-  orientation?: 'horizontal' | 'vertical';
-}
-
-const RadioBoxGroup: React.FC<RadioBoxGroupProps> = ({
-  name,
-  options,
-  value,
-  onChange,
-  orientation = 'horizontal',
-}) => {
-  return (
-    <Container orientation={orientation}>
-      {options.map((opt) => (
-        <RadioButton
-          key={opt.value}
-          name={name}
-          value={`${opt.value}`}
-          label={opt.label}
-          checked={opt.value === value}
-          disabled={opt.disabled}
-          onChange={(e) => onChange(e.currentTarget.value)}
-        />
-      ))}
-    </Container>
-  );
-};
-
-export default RadioBoxGroup;

package/src/components/molecules/RadioGroupField/RadioGroupField.styles.tsx

@@ -1,65 +0,0 @@
-import styled from 'styled-components';
-import {
-  semanticColors,
-  semanticRadius,
-  semanticSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-
-export const RadioGroupContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${semanticSizes.global.gap.md};
-  width: 100%;
-`;
-
-export const RadioButton = styled.div<{ isSelected: boolean }>`
-  min-width: 274px;
-  padding: ${semanticSizes.global.padding.md}
-    ${semanticSizes.global.padding['2xl']};
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  border-radius: ${semanticRadius.global.radius.md2};
-  transition: all 0.2s;
-  font-size: ${typographyTokens.fontSizes.bodyS};
-  font-weight: ${typographyTokens.fontWeights.regular};
-
-  ${({ isSelected }) =>
-    isSelected
-      ? `
-    background-color: ${semanticColors.branding.surface.enabled};
-    color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
-    border: none;
-  `
-      : `
-    background-color: ${semanticColors.base.background};
-    color: ${semanticColors.neutral[700]};
-    border: 1px solid ${semanticColors.global.border.default};
-    
-    &:hover {
-      border-color: ${semanticColors.global.border.medium};
-    }
-  `}
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`;
-
-export const RadioLabel = styled.label`
-  display: inline-flex;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.lg};
-  cursor: pointer;
-  margin: 0;
-`;
-
-export const HiddenRadioInput = styled.input`
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-`;

package/src/components/molecules/RadioGroupField/RadioGroupField.tsx

@@ -1,69 +0,0 @@
-import React, { useState } from 'react';
-import {
-  RadioGroupContainer,
-  RadioButton,
-  RadioLabel,
-  HiddenRadioInput,
-} from './RadioGroupField.styles';
-import { RadioGroupFieldProps } from './RadioGroupField.types';
-
-const RadioGroupField: React.FC<RadioGroupFieldProps> = ({
-  options,
-  value: controlledValue,
-  defaultValue,
-  onChange,
-  name = 'radio-group',
-  disabled = false,
-}) => {
-  const [internalValue, setInternalValue] = useState(defaultValue || '');
-
-  // Componente controlado ou não-controlado
-  const isControlled = controlledValue !== undefined;
-  const currentValue = isControlled ? controlledValue : internalValue;
-
-  const handleChange = (optionValue: string) => {
-    if (disabled) return;
-
-    if (!isControlled) {
-      setInternalValue(optionValue);
-    }
-
-    onChange?.(optionValue);
-  };
-
-  return (
-    <RadioGroupContainer>
-      {options.map((option) => {
-        const isSelected = currentValue === option.value;
-
-        return (
-          <RadioButton
-            key={option.value}
-            isSelected={isSelected}
-            onClick={() => handleChange(option.value)}
-            role="radio"
-            aria-checked={isSelected}
-            aria-disabled={disabled}
-          >
-            <RadioLabel>
-              <HiddenRadioInput
-                type="radio"
-                name={name}
-                value={option.value}
-                checked={isSelected}
-                onChange={() => handleChange(option.value)}
-                disabled={disabled}
-              />
-
-              {isSelected ? option.iconActive : option.iconInactive}
-
-              <span>{option.label}</span>
-            </RadioLabel>
-          </RadioButton>
-        );
-      })}
-    </RadioGroupContainer>
-  );
-};
-
-export { RadioGroupField };

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

@@ -1,17 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface RadioOption {
-  value: string;
-  label: string;
-  iconActive?: ReactNode;
-  iconInactive?: ReactNode;
-}
-
-export interface RadioGroupFieldProps {
-  options: RadioOption[];
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  name?: string;
-  disabled?: boolean;
-}

package/src/components/molecules/RefuseModal/RefuseModal.styles.tsx

@@ -1,139 +0,0 @@
-import styled from 'styled-components';
-import * as Dialog from '@radix-ui/react-dialog';
-
-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%);
-  font-family: 'Mulish', sans-serif;
-  background: white;
-  border-radius: 12px;
-  padding: 32px;
-  width: 100%;
-  max-width: 520px;
-  z-index: 1000;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  border-top: 6px solid #c53030;
-`;
-
-export const Title = styled.h2`
-  font-size: 28px;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 8px;
-  font-family: 'Mulish', sans-serif;
-  padding-right: 12px;
-`;
-
-export const Description = styled.p`
-  font-size: 1rem;
-  line-height: 1.5;
-  color: #888;
-  margin-bottom: 16px;
-  font-family: 'Mulish', sans-serif;
-
-  span {
-    cursor: pointer;
-    color: #1a1a1a;
-  }
-
-  strong {
-    font-weight: 600;
-    color: #1a1a1a;
-  }
-`;
-
-export const Label = styled.label`
-  font-size: 1rem;
-  margin-top: 16px;
-  margin-bottom: 4px;
-  display: block;
-  color: #888;
-  font-family: 'Mulish', sans-serif;
-`;
-
-export const Select = styled.select`
-  width: 100%;
-  color: #777;
-  padding: 12px;
-  font-size: 1rem;
-  border: 1px solid #d9d9d9;
-  border-radius: 8px;
-  background-color: white;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' stroke='gray' strokeWidth='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  background-size: 16px;
-  cursor: pointer;
-`;
-
-export const TextArea = styled.textarea`
-  width: 100%;
-  min-height: 80px;
-  padding: 12px;
-  font-size: 14px;
-  border: 1px solid #d9d9d9;
-  border-radius: 8px;
-  resize: none;
-  margin-top: 8px;
-`;
-
-export const HelpText = styled.p`
-  font-size: 0.9rem;
-  color: #888;
-  margin-top: 4px;
-`;
-
-export const CancelButton = styled(Dialog.Close)`
-  background: #fff;
-  border: 2px solid #7f7f7f;
-  border-radius: 8px;
-  padding: 10px 16px;
-  font-weight: 600;
-  color: #7f7f7f;
-  cursor: pointer;
-`;
-
-export const ConfirmButton = styled.button`
-  background: #c53030;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  padding: 10px 16px;
-  font-weight: 600;
-  cursor: pointer;
-
-  &:disabled {
-    background: #e2e2e2;
-    cursor: not-allowed;
-  }
-`;
-
-export const CloseIcon = styled(Dialog.Close)`
-  position: absolute;
-  top: 32px;
-  right: 32px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-
-  svg {
-    color: #888;
-  }
-`;
-
-export const Footer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 24px;
-`;

package/src/components/molecules/RefuseModal/RefuseModal.tsx

@@ -1,92 +0,0 @@
-'use client';
-
-import * as Dialog from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import { useState } from 'react';
-import {
-  CancelButton,
-  CloseIcon,
-  ConfirmButton,
-  Content,
-  Description,
-  Footer,
-  HelpText,
-  Label,
-  Overlay,
-  Select,
-  TextArea,
-  Title,
-} from './RefuseModal.styles';
-import { type RefuseModalProps, motivos } from './RefuseModal.types';
-
-export const RefuseModal = ({
-  open,
-  onOpenChange,
-  onConfirm,
-  onClose,
-  orderId,
-}: RefuseModalProps) => {
-  const [motivo, setMotivo] = useState('');
-  const [detalhes, setDetalhes] = useState('');
-
-  const handleConfirm = () => {
-    console.log('Proposta recusada:', { orderId, motivo, detalhes });
-    onConfirm();
-    onClose();
-    setMotivo('');
-    setDetalhes('');
-  };
-
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Overlay />
-        <Content>
-          <CloseIcon aria-label="Fechar" onClick={onClose}>
-            <X size={28} color="#BDBDBD" />
-          </CloseIcon>
-
-          <Title>Tem certeza de que deseja recusar esta proposta?</Title>
-
-          <Description>
-            Após recusar, você pode voltar e continuar de onde parou acessando{' '}
-            <span onClick={() => onClose()}>Minhas apólices</span>.<br />
-            <strong>Nota:</strong> pode ser que as condições oferecidas sejam
-            diferentes das atuais.
-          </Description>
-
-          <Label>Nos ajude a entender o motivo da recusa:</Label>
-          <Select value={motivo} onChange={(e) => setMotivo(e.target.value)}>
-            <option value="">Selecione o motivo</option>
-            {motivos.map((item) => (
-              <option key={item} value={item}>
-                {item}
-              </option>
-            ))}
-          </Select>
-          <HelpText>
-            Sua resposta ajuda a melhorar nosso processo para você e outros
-            usuários.
-          </HelpText>
-
-          <Label>Se quiser, conte mais detalhes</Label>
-          <TextArea
-            placeholder="Escreva aqui..."
-            value={detalhes}
-            onChange={(e) => setDetalhes(e.target.value)}
-          />
-          <HelpText>
-            Essas informações nos ajudam a melhorar sua experiência.
-          </HelpText>
-
-          <Footer>
-            <CancelButton onClick={onClose}>Cancelar</CancelButton>
-            <ConfirmButton onClick={handleConfirm} disabled={!motivo}>
-              Sim, recusar
-            </ConfirmButton>
-          </Footer>
-        </Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};

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

@@ -1,15 +0,0 @@
-export interface RefuseModalProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onClose: () => void;
-  onConfirm: () => void;
-  orderId: string;
-}
-
-export const motivos = [
-  'Preço muito alto',
-  'Encontrei uma opção melhor',
-  'Não preciso mais do serviço',
-  'Condições não atendem minhas necessidades',
-  'Outro motivo',
-];

package/src/components/molecules/ResultsChart/ResultsChart.styles.tsx

@@ -1,26 +0,0 @@
-import styled from 'styled-components';
-import { semanticColors, primitiveColors } from '../../../styles/tokens/colors';
-
-export const Results = styled.div<{ $isPositive: boolean }>`
-  display: flex;
-  flex-direction: row;
-  font-size: 12px;
-  align-items: center;
-  gap: 8px;
-  background-color: ${({ $isPositive }) =>
-    $isPositive
-      ? semanticColors.success.surface.feedback
-      : primitiveColors.red[100]};
-  border: ${({ $isPositive }) =>
-    $isPositive
-      ? `1px solid ${semanticColors.success.text.feedback.accent}`
-      : `1px solid ${semanticColors.danger.border.enabled}`};
-  border-radius: 9999px;
-  padding: 8px 16px;
-  color: ${({ $isPositive }) =>
-    $isPositive
-      ? semanticColors.success.text.feedback.accent
-      : semanticColors.danger.text.feedback.accent};
-  font-weight: 500;
-  width: fit-content;
-`;

package/src/components/molecules/ResultsChart/ResultsChart.tsx

@@ -1,23 +0,0 @@
-import { TrendingDown, TrendingUp } from 'lucide-react';
-import { Results } from './ResultsChart.styles';
-import type { ResultsChartProps } from './ResultsChart.types';
-
-const ResultsChart = ({ value }: ResultsChartProps) => {
-  const isPositive = value >= 0;
-  const trendIcon = isPositive ? (
-    <TrendingUp size={16} />
-  ) : (
-    <TrendingDown size={16} />
-  );
-  const trendText = isPositive
-    ? `${value}% a mais do que o mês anterior`
-    : `${Math.abs(value)}% a menos do que o mês anterior`;
-
-  return (
-    <Results $isPositive={isPositive}>
-      {trendIcon} {trendText}
-    </Results>
-  );
-};
-
-export default ResultsChart;

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

@@ -1,54 +0,0 @@
-import {
-  semanticColors,
-  semanticRadius,
-  semanticSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-import styled from 'styled-components';
-
-export const ToggleContainer = styled.div`
-  position: relative;
-  display: inline-flex;
-  background: transparent;
-  border-radius: ${semanticRadius.global.radius.md2};
-  padding: ${semanticSizes.global.padding.xs};
-  white-space: nowrap;
-`;
-
-export const Slider = styled.div<{
-  activeIndex: number;
-  count: number;
-}>`
-  position: absolute;
-  top: ${semanticSizes.global.padding.xs};
-  left: ${({ activeIndex, count }) => (activeIndex * 100) / count}%;
-  width: ${({ count }) => 100 / count}%;
-  height: calc(100% - ${semanticSizes.global.padding.xs} * 2);
-  background: ${semanticColors.base.background};
-  border-radius: ${semanticRadius.global.radius.md2};
-  transition: left 200ms ease-in-out;
-  z-index: 0;
-`;
-
-export const TabButton = styled.button<{ active: boolean }>`
-  position: relative;
-  z-index: 1;
-  display: flex;
-  width: 230px;
-  justify-content: center;
-  align-items: center;
-  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.gap['3xl']};
-  font-size: ${typographyTokens.fontSizes.bodyS};
-  color: ${({ active }) =>
-    active ? semanticColors.base.text : semanticColors.neutral[400]};
-  background: none;
-  border: none;
-  cursor: pointer;
-  transition: color 200ms;
-
-  white-space: nowrap;
-
-  &:focus {
-    outline: none;
-  }
-`;

package/src/components/molecules/TabToggle/TabToggle.tsx

@@ -1,35 +0,0 @@
-import React, { useState } from 'react';
-import { ToggleContainer, Slider, TabButton } from './TabToggle.styles';
-
-export type TabItem = {
-  title: string;
-  quantity: number;
-};
-
-export type TabToggleProps = {
-  items: TabItem[];
-};
-
-export const TabToggle: React.FC<TabToggleProps> = ({ items }) => {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const count = items.length;
-
-  return (
-    <ToggleContainer>
-      {/* Slider agora sabe quantas abas existem */}
-      <Slider activeIndex={activeIndex} count={count} />
-
-      {items.map(({ title, quantity }, i) => (
-        <TabButton
-          key={title}
-          active={i === activeIndex}
-          onClick={() => setActiveIndex(i)}
-        >
-          {title} ({quantity})
-        </TabButton>
-      ))}
-    </ToggleContainer>
-  );
-};
-
-export default TabToggle;

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

@@ -1,112 +0,0 @@
-// TimeLine.mapper.ts
-import {
-  TimelineItem,
-  RemoteEvent,
-  EventIdKey,
-  TimelineVariant,
-} from './TimeLine.types';
-import { resolveTimelineConfig } from './TimeLine.registry';
-
-const formatFullTimestamp = (startAt: string, actorName: string): string => {
-  const date = new Date(startAt);
-  const day = String(date.getDate()).padStart(2, '0');
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const year = date.getFullYear();
-  const hours = String(date.getHours()).padStart(2, '0');
-  const minutes = String(date.getMinutes()).padStart(2, '0');
-  const seconds = String(date.getSeconds()).padStart(2, '0');
-
-  return `Por: ${actorName} no dia ${day}/${month}/${year} às ${hours}:${minutes}:${seconds}`;
-};
-
-function toEventIdKey(eventId: number | string): EventIdKey {
-  const raw = String(eventId).trim();
-  return raw as EventIdKey;
-}
-
-function toVariant(eventIdKey: EventIdKey): TimelineVariant {
-  return resolveTimelineConfig(eventIdKey)?.variant || 'continued';
-}
-
-function buildTitle(ev: RemoteEvent): string {
-  const titles: Record<string, string> = {
-    'subscription:partner_quote': 'Empresa criada no sistema',
-    'subscription:partner_subscribe': 'Empresa editada no sistema',
-    'issue:partner_issue': 'Fornecedor cadastrado',
-    'order:partner_order': 'Fornecedor editado',
-    ProposalCreated: 'Proposta criada',
-  };
-
-  return (
-    titles[ev.eventType] ||
-    resolveTimelineConfig(toEventIdKey(ev.eventId))?.labelPtBr ||
-    `Evento ${ev.eventId}`
-  );
-}
-
-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 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.id || String(idx);
-    const eventIdKey = toEventIdKey(ev.eventId);
-    const data = safeData(ev);
-    const actor = actorFrom(ev);
-
-    const hasDetails = [
-      'subscription:partner_quote',
-      'subscription:partner_subscribe',
-      'issue:partner_issue',
-      'order:partner_order',
-      'ProposalCreated',
-    ].includes(ev.eventType);
-
-    const startsExpanded = ev.eventType === 'subscription:partner_quote';
-    return {
-      id,
-      timestamp: formatFullTimestamp(ev.startDate, actor.displayName),
-      type: toVariant(eventIdKey),
-      title: buildTitle(ev),
-      actor,
-      origin: ev.parentType || ev.eventType || 'unknown',
-      correlationId: ev.id,
-
-      metadata: {
-        ...data,
-        eventIdKey,
-        eventType: ev.eventType,
-        startDate: ev.startDate,
-        hasDetails,
-        startsExpanded,
-        comparisonData:
-          ev.eventType === 'subscription:partner_quote'
-            ? [
-                {
-                  field: 'Razão Social',
-                  before: 'Algar Holding',
-                  after: 'Algar Holding S.A.',
-                },
-                {
-                  field: 'CNPJ',
-                  before: '00.000.000/0000-00',
-                  after: '00.000.000/0000-01',
-                },
-              ]
-            : undefined,
-      },
-    };
-  });
-}