@granto-umbrella/umbrella-components 3.0.34 → 3.0.37

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

@@ -1,114 +1,115 @@
-import styled from "styled-components";
-import {
-  semanticColors,
-  semanticSizes,
-  typographyTokens,
-  semanticRadius,
-} from "../../../styles/tokens";
-
-export const TableWrapper = styled.div`
-  width: 100%;
-  overflow-x: auto;
-  background-color: ${semanticColors.base.background};
-  border: 1px solid ${semanticColors.global.border.default};
-  padding: ${semanticSizes.global.padding.xl};
-  border-radius: ${semanticRadius.global.radius.md2};
-`;
-
-export const Table = styled.table`
-  width: 100%;
-  border-collapse: collapse;
-`;
-
-export const TableHead = styled.thead`
-  background-color: ${semanticColors.base.background};
-`;
-
-export const TableRow = styled.tr`
-  &:last-child td {
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-`;
-
-export const TableHeader = styled.th`
-  padding: ${semanticSizes.global.padding.md} 0;
-  text-align: left;
-  border: 0px;
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  font-size: ${typographyTokens.fontSizes.bodyS};
-  color: ${semanticColors.global.text.onSurface.enabled};
-
-  &.center {
-    text-align: center;
-  }
-`;
-
-export const TableData = styled.td`
-  padding: ${semanticSizes.global.padding.lg} 0 ${semanticSizes.global.padding["2xl"]};
-  border-bottom: 1px solid ${semanticColors.neutral[200]};
-  text-align: left;
-  font-size: ${typographyTokens.fontSizes.bodyM};
-  color: ${semanticColors.global.text.default.enabled};
-
-  &.center {
-    text-align: center;
-
-    img {
-      display: block;
-      margin: 0 auto;
-    }
-  }
-
-  img {
-    cursor: pointer;
-  }
-`;
-
-export const TableWrapperHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.sm};
-  margin-bottom: ${semanticSizes.global.gap.lg};
-`;
-
-export const TableWrapperTitle = styled.h2`
-  font-size: ${typographyTokens.fontSizes.headingM};
-  font-weight: ${typographyTokens.fontWeights.medium};
-  margin: 0;
-  color: ${semanticColors.base.text};
-`;
-
-export const TableWrapperLink = styled.button`
-  display: flex;
-  flex-direction: row;
-  font-size: ${typographyTokens.fontSizes.labelL};
-  margin: 0;
-  padding: 0;
-  background: none;
-  border: none;
-  color: ${semanticColors.branding.text.accent.enabled};
-  gap: ${semanticSizes.global.gap.sm};
-  align-items: center;
-  cursor: pointer;
-  transition: opacity 0.2s;
-
-  &:hover {
-    opacity: 0.8;
-  }
-`;
-
-export const LoadingContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: ${semanticSizes.global.padding["3xl"]};
-  font-size: ${typographyTokens.fontSizes.bodyM};
-  color: ${semanticColors.global.text.onSurface.subtitle};
-`;
-
-export const ErrorContainer = styled(LoadingContainer)`
-  color: ${semanticColors.danger.text.feedback.strong};
-`;
+import styled from 'styled-components';
+import {
+  semanticColors,
+  semanticSizes,
+  typographyTokens,
+  semanticRadius,
+} from '../../../styles/tokens';
+
+export const TableWrapper = styled.div`
+  width: 100%;
+  overflow-x: auto;
+  background-color: ${semanticColors.base.background};
+  border: 1px solid ${semanticColors.global.border.default};
+  padding: ${semanticSizes.global.padding.xl};
+  border-radius: ${semanticRadius.global.radius.md2};
+`;
+
+export const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+`;
+
+export const TableHead = styled.thead`
+  background-color: ${semanticColors.base.background};
+`;
+
+export const TableRow = styled.tr`
+  &:last-child td {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+`;
+
+export const TableHeader = styled.th`
+  padding: ${semanticSizes.global.padding.md} 0;
+  text-align: left;
+  border: 0px;
+  font-weight: ${typographyTokens.fontWeights.semibold};
+  font-size: ${typographyTokens.fontSizes.bodyS};
+  color: ${semanticColors.global.text.onSurface.enabled};
+
+  &.center {
+    text-align: center;
+  }
+`;
+
+export const TableData = styled.td`
+  padding: ${semanticSizes.global.padding.lg} 0
+    ${semanticSizes.global.padding['2xl']};
+  border-bottom: 1px solid ${semanticColors.neutral[200]};
+  text-align: left;
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  color: ${semanticColors.global.text.default.enabled};
+
+  &.center {
+    text-align: center;
+
+    img {
+      display: block;
+      margin: 0 auto;
+    }
+  }
+
+  img {
+    cursor: pointer;
+  }
+`;
+
+export const TableWrapperHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.sm};
+  margin-bottom: ${semanticSizes.global.gap.lg};
+`;
+
+export const TableWrapperTitle = styled.h2`
+  font-size: ${typographyTokens.fontSizes.headingM};
+  font-weight: ${typographyTokens.fontWeights.medium};
+  margin: 0;
+  color: ${semanticColors.base.text};
+`;
+
+export const TableWrapperLink = styled.button`
+  display: flex;
+  flex-direction: row;
+  font-size: ${typographyTokens.fontSizes.labelL};
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  color: ${semanticColors.branding.text.accent.enabled};
+  gap: ${semanticSizes.global.gap.sm};
+  align-items: center;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+export const LoadingContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${semanticSizes.global.padding['3xl']};
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  color: ${semanticColors.global.text.onSurface.subtitle};
+`;
+
+export const ErrorContainer = styled(LoadingContainer)`
+  color: ${semanticColors.danger.text.feedback.strong};
+`;

package/src/components/organisms/ListagemUltimasEmissoes/ListagemUltimasEmissoes.tsx

@@ -1,89 +1,89 @@
-import React from "react";
-import {
-  TableWrapper,
-  Table,
-  TableHead,
-  TableRow,
-  TableHeader,
-  TableData,
-  TableWrapperHeader,
-  TableWrapperTitle,
-  TableWrapperLink,
-  LoadingContainer,
-  ErrorContainer,
-} from "./ListagemUltimasEmissoes.styles";
-import { ListagemUltimasEmissoesProps } from "./ListagemUltimasEmissoes.types";
-
-const ListagemUltimasEmissoes: React.FC<ListagemUltimasEmissoesProps> = ({
-  items = [],
-  isLoading = false,
-  isError = false,
-  error = null,
-  onViewAll,
-  onActionClick,
-  title = "Suas últimas emissões",
-}) => {
-  if (isLoading) {
-    return <LoadingContainer>Carregando emissões...</LoadingContainer>;
-  }
-
-  if (isError) {
-    return (
-      <ErrorContainer>
-        Erro: {error?.message || "Não foi possível carregar as emissões"}
-      </ErrorContainer>
-    );
-  }
-
-  if (!items || items.length === 0) {
-    return <LoadingContainer>Nenhuma emissão encontrada</LoadingContainer>;
-  }
-
-  return (
-    <TableWrapper>
-      <TableWrapperHeader>
-        <TableWrapperTitle>{title}</TableWrapperTitle>
-        <TableWrapperLink onClick={onViewAll}>
-          Ver todos
-          <span>→</span>
-        </TableWrapperLink>
-      </TableWrapperHeader>
-
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableHeader>Reclamante</TableHeader>
-            <TableHeader>Valor Pago</TableHeader>
-            <TableHeader>Produto</TableHeader>
-            <TableHeader>ID</TableHeader>
-            <TableHeader className="center">Ações</TableHeader>
-          </TableRow>
-        </TableHead>
-        <tbody>
-          {items.map((item) => (
-            <TableRow key={item.policyId}>
-              <TableData>{item.insurerName}</TableData>
-              <TableData>
-                {Number(item.paymentTotal).toLocaleString("pt-BR", {
-                  style: "currency",
-                  currency: "BRL",
-                })}
-              </TableData>
-              <TableData>{item.modality}</TableData>
-              <TableData>{item.policyId}</TableData>
-              <TableData
-                className="center"
-                onClick={() => onActionClick?.(item.policyId)}
-                style={{ cursor: "pointer" }}
-              >
-                ⋮
-              </TableData>
-            </TableRow>
-          ))}
-        </tbody>
-      </Table>
-    </TableWrapper>
-  );
-};
-
-export { ListagemUltimasEmissoes };
+import React from 'react';
+import {
+  TableWrapper,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableData,
+  TableWrapperHeader,
+  TableWrapperTitle,
+  TableWrapperLink,
+  LoadingContainer,
+  ErrorContainer,
+} from './ListagemUltimasEmissoes.styles';
+import { ListagemUltimasEmissoesProps } from './ListagemUltimasEmissoes.types';
+
+const ListagemUltimasEmissoes: React.FC<ListagemUltimasEmissoesProps> = ({
+  items = [],
+  isLoading = false,
+  isError = false,
+  error = null,
+  onViewAll,
+  onActionClick,
+  title = 'Suas últimas emissões',
+}) => {
+  if (isLoading) {
+    return <LoadingContainer>Carregando emissões...</LoadingContainer>;
+  }
+
+  if (isError) {
+    return (
+      <ErrorContainer>
+        Erro: {error?.message || 'Não foi possível carregar as emissões'}
+      </ErrorContainer>
+    );
+  }
+
+  if (!items || items.length === 0) {
+    return <LoadingContainer>Nenhuma emissão encontrada</LoadingContainer>;
+  }
+
+  return (
+    <TableWrapper>
+      <TableWrapperHeader>
+        <TableWrapperTitle>{title}</TableWrapperTitle>
+        <TableWrapperLink onClick={onViewAll}>
+          Ver todos
+          <span>→</span>
+        </TableWrapperLink>
+      </TableWrapperHeader>
+
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>Reclamante</TableHeader>
+            <TableHeader>Valor Pago</TableHeader>
+            <TableHeader>Produto</TableHeader>
+            <TableHeader>ID</TableHeader>
+            <TableHeader className="center">Ações</TableHeader>
+          </TableRow>
+        </TableHead>
+        <tbody>
+          {items.map((item) => (
+            <TableRow key={item.policyId}>
+              <TableData>{item.insurerName}</TableData>
+              <TableData>
+                {Number(item.paymentTotal).toLocaleString('pt-BR', {
+                  style: 'currency',
+                  currency: 'BRL',
+                })}
+              </TableData>
+              <TableData>{item.modality}</TableData>
+              <TableData>{item.policyId}</TableData>
+              <TableData
+                className="center"
+                onClick={() => onActionClick?.(item.policyId)}
+                style={{ cursor: 'pointer' }}
+              >
+                ⋮
+              </TableData>
+            </TableRow>
+          ))}
+        </tbody>
+      </Table>
+    </TableWrapper>
+  );
+};
+
+export { ListagemUltimasEmissoes };

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

@@ -1,16 +1,16 @@
-export interface EmissionItem {
-  policyId: string;
-  insurerName: string;
-  paymentTotal: number;
-  modality: string;
-}
-
-export interface ListagemUltimasEmissoesProps {
-  items?: EmissionItem[];
-  isLoading?: boolean;
-  isError?: boolean;
-  error?: Error | null;
-  onViewAll?: () => void;
-  onActionClick?: (policyId: string) => void;
-  title?: string;
-}
+export interface EmissionItem {
+  policyId: string;
+  insurerName: string;
+  paymentTotal: number;
+  modality: string;
+}
+
+export interface ListagemUltimasEmissoesProps {
+  items?: EmissionItem[];
+  isLoading?: boolean;
+  isError?: boolean;
+  error?: Error | null;
+  onViewAll?: () => void;
+  onActionClick?: (policyId: string) => void;
+  title?: string;
+}

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

@@ -1 +1 @@
-export { ListagemUltimasEmissoes } from "./ListagemUltimasEmissoes";
+export { ListagemUltimasEmissoes } from './ListagemUltimasEmissoes';