@granto-umbrella/umbrella-components 3.0.77 → 3.0.78

package/src/components/organisms/Form/Form.tsx

@@ -1,160 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-// Form.tsx
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from 'react-hook-form';
-import {
-  StyledFormItem,
-  StyledFormLabel,
-  StyledFormDescription,
-  StyledFormMessage,
-} from './Form.styles';
-
-/* Reexporta o FormProvider como Form para facilitar o uso */
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-type FormItemContextValue = { id: string };
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-);
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ ...props }, ref) => {
-  const id = React.useId();
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <StyledFormItem ref={ref} {...props} />
-    </FormItemContext.Provider>
-  );
-});
-FormItem.displayName = 'FormItem';
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>');
-  }
-
-  const { id } = itemContext;
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-const FormLabel = React.forwardRef<
-  HTMLLabelElement,
-  React.ComponentPropsWithoutRef<'label'>
->(({ children, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-  return (
-    <StyledFormLabel ref={ref} htmlFor={formItemId} error={!!error} {...props}>
-      {children}
-    </StyledFormLabel>
-  );
-});
-FormLabel.displayName = 'FormLabel';
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-});
-FormControl.displayName = 'FormControl';
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ children, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-  return (
-    <StyledFormDescription ref={ref} id={formDescriptionId} {...props}>
-      {children}
-    </StyledFormDescription>
-  );
-});
-FormDescription.displayName = 'FormDescription';
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-  if (!body) return null;
-  return (
-    <StyledFormMessage ref={ref} id={formMessageId} {...props}>
-      {body}
-    </StyledFormMessage>
-  );
-});
-FormMessage.displayName = 'FormMessage';
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};

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

@@ -1,115 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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/Navbar/Navbar.styles.tsx

@@ -1,243 +0,0 @@
-import {
-  primitiveColors,
-  primitiveShadows,
-  primitiveSizes,
-  semanticBorders,
-  semanticColors,
-  semanticShadows,
-} from '../../../styles/tokens';
-import styled from 'styled-components';
-import { Search } from 'lucide-react';
-//
-export const NavbarContainer = styled.nav`
-  height: 72px;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  padding: ${primitiveSizes.size.x2} ${primitiveSizes.size.x6};
-  background-color: ${semanticColors.base.background};
-  position: relative;
-`;
-
-export const LogoContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${primitiveSizes.size.x4};
-  justify-content: center;
-`;
-
-const SvgBarra = () => (
-  <svg
-    width="1"
-    height="34"
-    viewBox="0 0 1 34"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M0.5 0.5V33.5"
-      stroke="#E0E3E8"
-      strokeLinecap="round"
-      strokeDasharray="1 1"
-    />
-  </svg>
-);
-
-export const BarraSeparadora = styled(SvgBarra)`
-  width: 1px;
-  height: 34px;
-  margin: 0;
-`;
-
-export const Menu = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${primitiveSizes.size.x6};
-  margin-left: ${primitiveSizes.size.x4};
-  align-items: center;
-
-  a {
-    text-decoration: none;
-    color: ${semanticColors.base.text};
-    font-family: var(--Font-Family-Brand, Mulish);
-    font-size: ${primitiveSizes.size.x4};
-    font-weight: 400;
-    line-height: 125%;
-    font-style: normal;
-
-    &:hover {
-      color: ${semanticColors.branding.text.accent.hover};
-    }
-  }
-`;
-
-export const SearchBar = styled.div`
-  display: flex;
-  align-items: center;
-  border: ${semanticBorders.global.sm} solid ${primitiveColors.gray[200]};
-  border-radius: ${primitiveSizes.size.x2};
-  padding: ${primitiveSizes.size.x2} ${primitiveSizes.size.x4};
-  width: 300px;
-
-  input {
-    border: none;
-    outline: none;
-    width: 100%;
-    margin-left: ${primitiveSizes.size.x2};
-  }
-`;
-
-export const SearchContainer = styled.div`
-  display: flex;
-  height: 40px;
-  padding: ${primitiveSizes.size.x3};
-  align-items: center;
-  gap: ${primitiveSizes.size.x2};
-  align-self: stretch;
-  border-radius: ${primitiveSizes.size.x1};
-  border: ${semanticBorders.global.sm} solid ${primitiveColors.gray[300]};
-  background: ${semanticColors.base.background};
-  position: relative;
-
-  input {
-    width: 100%;
-    border: none;
-    outline: none;
-    color: ${semanticColors.global.text.onSurface.enabled};
-    font-family: var(--Font-Family-Brand, Mulish);
-    font-size: ${primitiveSizes.size.x4};
-    font-style: normal;
-    font-weight: 500;
-    line-height: 115%;
-    background: transparent;
-
-    &::placeholder {
-      color: #606060;
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  @media (max-width: 600px) {
-    width: 100%;
-    margin-left: 1.5rem;
-  }
-`;
-
-export const SearchWrapper = styled.div`
-  // alterado
-  @media (max-width: 600px) {
-    width: 100%;
-    position: fixed;
-    top: 0;
-    background-color: ${semanticColors.base.background};
-    height: 7rem;
-    padding: ${primitiveSizes.size.x6} ${primitiveSizes.size.x12};
-    display: flex;
-    align-items: center;
-    box-shadow: ${semanticShadows.shadow.md};
-    z-index: 100;
-  }
-`;
-
-export const SearchIconStyled = styled(Search)`
-  color: ${semanticColors.global.text.onSurface.enabled};
-  width: ${primitiveSizes.size.x4};
-  height: ${primitiveSizes.size.x4};
-`;
-
-export const UserProfile = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${primitiveSizes.size.x2};
-  position: relative;
-  border-left: 1px solid ${primitiveColors.gray[200]};
-  padding-left: ${primitiveSizes.size.x4};
-  margin-left: ${primitiveSizes.size.x6};
-
-  .avatar {
-    display: flex;
-    width: ${primitiveSizes.size.x10};
-    height: ${primitiveSizes.size.x10};
-    align-items: center;
-    gap: ${primitiveSizes.size.x2};
-    aspect-ratio: 1/1;
-    border-radius: 50%;
-    background-color: ${primitiveColors.gray[300]};
-    overflow: hidden;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 50%;
-      border: ${semanticBorders.global.md} solid ${semanticColors.base.text};
-      box-shadow: ${semanticShadows.shadow.md};
-    }
-  }
-
-  .details {
-    display: flex;
-    flex-direction: column;
-
-    span {
-      color: ${semanticColors.base.text};
-      font-family: var(--Font-Family-Brand, Mulish);
-      font-size: ${primitiveSizes.size.x4};
-      font-style: normal;
-      font-weight: 500;
-      line-height: 115%;
-    }
-
-    small {
-      color: ${semanticColors.global.text.onSurface.enabled};
-      font-family: var(--Font-Family-Brand, Mulish);
-      font-size: ${primitiveSizes.size.x3};
-      font-style: normal;
-      font-weight: 500;
-      line-height: 120%;
-      color: ${semanticColors.global.text.onSurface.enabled};
-    }
-  }
-
-  .initials {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    color: ${primitiveColors.base.white};
-    justify-content: center;
-    align-items: center;
-    font-size: ${primitiveSizes.size.x4};
-  }
-`;
-
-export const Dropdown = styled.div`
-  position: absolute;
-  top: 100%;
-  right: 0;
-  background-color: ${semanticColors.base.background};
-  box-shadow: ${primitiveShadows.shadow.md};
-  border-radius: ${primitiveSizes.size.x2};
-  overflow: hidden;
-  z-index: 1000;
-`;
-
-export const DropdownItem = styled.div<{ $type?: 'default' | 'logout' }>`
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  padding: ${primitiveSizes.size.x3} ${primitiveSizes.size.x4};
-  cursor: pointer;
-  color: ${(props) =>
-    props.$type === 'default'
-      ? semanticColors.global.text.default.enabled
-      : primitiveColors.red[600]};
-
-  &:hover {
-    background-color: ${primitiveColors.gray[200]};
-    color: ${semanticColors.branding.text.accent.hover};
-  }
-`;