@granto-umbrella/umbrella-components 2.3.22 → 3.0.0

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

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

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

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

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

@@ -0,0 +1,15 @@
+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/RefuseModal/index.tsx

@@ -0,0 +1,2 @@
+export { RefuseModal } from "./RefuseModal"
+export type { RefuseModalProps } from "./RefuseModal.types"

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

@@ -0,0 +1,22 @@
+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: 14px;
+  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

@@ -0,0 +1,19 @@
+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/ResultsChart/ResultsChart.types.ts

@@ -0,0 +1,3 @@
+export interface ResultsChartProps {
+  value: number
+}

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

@@ -0,0 +1,2 @@
+export { default } from "./ResultsChart"
+export type { ResultsChartProps } from "./ResultsChart.types"

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

@@ -0,0 +1,118 @@
+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: 32px;
+    bottom: 0;
+    width: 2px;
+    height: 100%;
+    background-color: ${primitiveColors.gray[100]};
+  }
+`;
+
+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 = 'StatusChanged' }) => {
+    const map: Record<TimelineVariant, ReturnType<typeof css>> = {
+      StatusChanged: css`
+        background: ${semanticColors.branding.surface.disabled};
+      `,
+      accepted: css`
+        background: #3dcb2c;
+      `,
+      continued: css`
+        background: #f59e0b;
+      `,
+      rejected: css`
+        background: #cb2c2d;
+      `,
+      download: css`
+        background: #9ca3af;
+      `,
+    };
+    return map[$variant as TimelineVariant] ?? map['StatusChanged'];
+  }}
+
+  ${({ $variant = 'StatusChanged' }) => {
+    const map: Record<TimelineVariant, ReturnType<typeof css>> = {
+      StatusChanged: css`
+        border-color: ${semanticColors.branding.surface.enabled};
+      `,
+      accepted: css`
+        border-color: #21731c;
+      `,
+      continued: css`
+        border-color: #f59e0b;
+      `,
+      rejected: css`
+        border-color: #731c1c;
+      `,
+      download: css`
+        border-color: #9ca3af;
+      `,
+    };
+    return map[$variant as TimelineVariant] ?? map['StatusChanged'];
+  }}
+`;
+
+export const Card = styled.div`
+  background: #fff;
+  padding: 0px 14px;
+`;
+
+export const Title = styled.h4`
+  margin: 0 0 4px 0;
+  font-size: ${typographyTokens.fontSizes.displayM};
+  color: ${semanticColors.global.text.default.enabled};
+  font-weight: ${typographyTokens.fontWeights.semibold};
+`;
+
+export const Sub = styled.div`
+  color: ${semanticColors.global.text.subtitle.enabled};
+  font-size: ${typographyTokens.fontSizes.headingM};
+`;
+
+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: 32px;
+  display: flex;
+  flex-direction: column;
+`;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ItemWrap, Card, Sub, Row, Dot, List, Title } from './TimeLine.styles';
+import { TimelineProps } from './TimeLine.types';
+
+export const Timeline: React.FC<TimelineProps> = ({ items }) => {
+  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';
+
+        return (
+          <ItemWrap key={it.id}>
+            {it?.type && <Dot aria-hidden $variant={it.type || 'created'} />}
+            <Card>
+              <Row style={{ justifyContent: 'space-between' }}>
+                <Title>{it.title}</Title>
+              </Row>
+
+              <Sub>
+                <div>
+                  Por: {actorName}{' '}
+                  {dateStr ? `dia ${dateStr} às ${timeStr}` : ''}
+                </div>
+              </Sub>
+            </Card>
+          </ItemWrap>
+        );
+      })}
+    </List>
+  );
+};

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

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type TimelineVariant =
+  | 'StatusChanged'
+  | 'accepted'
+  | 'continued'
+  | 'rejected'
+  | 'download';
+
+export interface TimelineItem {
+  id: string;
+  timestamp: string;
+  type: string;
+  title: string;
+  description?: string;
+  actor?: TimelineActor;
+  origin?: string;
+  correlationId?: string;
+  metadata?: TimelineMetadata;
+}
+
+export type TimelineProps = {
+  items: TimelineItem[];
+};
+
+export interface TimelineActor {
+  id: string;
+  displayName: string;
+  type: string;
+}
+
+export interface TimelineMetadata {
+  from?: string;
+  to?: string;
+  [key: string]: any;
+}

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

@@ -0,0 +1,113 @@
+import styled from "styled-components"
+import {
+  primitiveColors,
+  semanticBorders,
+  semanticColors,
+  semanticRadius,
+  semanticSizes,
+  typographyTokens,
+} from "../../../styles/tokens"
+
+export const Card = styled.div`
+  background-color: ${semanticColors.base.background};
+  border: ${semanticBorders.global.sm} solid ${semanticColors.neutral[400]};
+  border-radius: 8px;
+  padding: ${semanticSizes.global.padding.lg};
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`
+
+export const CardHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  text-align: center;
+  gap: ${semanticSizes.global.gap.sm};
+  align-items: center;
+  margin-bottom: 24px;
+`
+
+export const CardTitle = styled.h2`
+  font-size: ${typographyTokens.fontSizes.headingS};
+  font-weight: ${typographyTokens.fontWeights.semibold};
+  margin: 0;
+  color: ${semanticColors.base.text};
+  text-align: center;
+`
+
+export const CardLink = styled.a`
+  display: flex;
+  flex-direction: row;
+  font-size: ${typographyTokens.fontSizes.labelS};
+  margin: 0;
+  color: ${semanticColors.branding.text.accent.enabled};
+  text-align: center;
+  gap: ${semanticSizes.global.gap.sm};
+  align-items: center;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    color: ${semanticColors.branding.text.accent.hover};
+  }
+`
+
+export const CardContent = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.xl};
+  margin-bottom: 18px;
+`
+
+export const CardChartDescription = styled.div`
+  justify-content: flex-start;
+  align-items: center;
+  text-align: left;
+
+  .subtitle {
+    font-size: ${typographyTokens.fontSizes.labelS};
+    color: ${semanticColors.global.text.subtitle.enabled};
+  }
+  .description {
+    font-size: ${typographyTokens.fontSizes.headingM};
+    color: ${semanticColors.base.text};
+    margin-bottom: ${semanticSizes.global.spacings.sm};
+  }
+`
+
+export const CardFooter = styled.div`
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: ${semanticSizes.global.gap.xs};
+
+  .subtitle {
+    font-size: ${typographyTokens.fontSizes.labelS};
+    color: ${semanticColors.global.text.subtitle.enabled};
+  }
+  .description {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    gap: ${semanticSizes.global.gap.lg};
+    font-size: ${typographyTokens.fontSizes.captionM};
+    color: ${semanticColors.base.text};
+  }
+
+  .items {
+    display: flex;
+    align-items: center;
+    gap: ${semanticSizes.global.gap.sm};
+    margin-bottom: ${semanticSizes.global.spacings.sm};
+  }
+`
+
+export const Circle = styled.div<{ color?: string }>`
+  width: ${semanticSizes.global.gap.md};
+  height: ${semanticSizes.global.gap.md};
+  border-radius: ${semanticRadius.global.radius.full};
+  background-color: ${({ color }) => color || primitiveColors.orange[400]};
+`

package/src/components/organisms/DonutEmissionsChart/DonutEmissionsChart.tsx

@@ -0,0 +1,71 @@
+import type React from "react"
+import { ArrowUpRight } from 'lucide-react'
+import type { DonutEmissionsChartProps } from "./DonutEmissionsChart.types"
+import type { PieChartComponentProps } from "../../molecules/PieChartComponent/PieChartComponent.types"
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardFooter,
+  CardLink,
+  CardChartDescription,
+  Circle,
+} from "./DonutEmissionsChart.styles"
+import { PieChartComponent } from "../../molecules/PieChartComponent"
+import { primitiveColors } from "../../../styles/tokens"
+import ResultsChart from "../../molecules/ResultsChart"
+
+const DonutEmissionsChart: React.FC<DonutEmissionsChartProps> = ({ totalEmissions, companiesWithEmissions }) => {
+  const colors = [
+    primitiveColors.blue[400],
+    primitiveColors.orange[400],
+    primitiveColors.green[400],
+    primitiveColors.gray[400],
+  ]
+
+  const chartData: PieChartComponentProps = {
+    data: companiesWithEmissions.map((company, index) => ({
+      name: company.companyName,
+      value: company.totalEmissions,
+      fill: colors[index % colors.length],
+    })),
+  }
+
+  const currentMonth = new Date().toLocaleDateString("pt-BR", {
+    month: "long",
+  })
+  const currentMonthCapitalized = currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Emissões realizadas</CardTitle>
+        <CardLink href="#">
+          Acessar dashboard <ArrowUpRight size={16} />
+        </CardLink>
+      </CardHeader>
+      <CardContent>
+        <PieChartComponent data={chartData.data} />
+        <CardChartDescription>
+          <div className="subtitle">Emissões realizadas em</div>
+          <div className="description">{currentMonthCapitalized}</div>
+          <ResultsChart value={totalEmissions} />
+        </CardChartDescription>
+      </CardContent>
+      <CardFooter>
+        <div className="subtitle">Empresas que realizaram emissões</div>
+        <div className="description">
+          {chartData.data?.map((item, index) => (
+            <div key={index} className="items">
+              <Circle color={item.fill} />
+              {item.name}
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
+
+export default DonutEmissionsChart

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

@@ -0,0 +1,9 @@
+export interface CompanyEmission {
+  companyName: string
+  totalEmissions: number
+}
+
+export interface DonutEmissionsChartProps {
+  totalEmissions: number
+  companiesWithEmissions: CompanyEmission[]
+}

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

@@ -0,0 +1,2 @@
+export { default } from "./DonutEmissionsChart"
+export type { DonutEmissionsChartProps, CompanyEmission } from "./DonutEmissionsChart.types"