@granto-umbrella/umbrella-components 3.0.77 → 3.0.78

package/src/components/organisms/Navbar/Navbar.tsx

@@ -1,118 +0,0 @@
-import { CaretDown } from 'phosphor-react';
-import { Link } from 'react-router-dom';
-import {
-  NavbarContainer,
-  LogoContainer,
-  Menu,
-  UserProfile,
-  Dropdown,
-  DropdownItem,
-  SearchContainer,
-  SearchWrapper,
-  SearchIconStyled,
-} from './Navbar.styles';
-
-import { primitiveColors } from '../../../styles/tokens';
-import _logoCorp from '../../../assets/_granto_corp_navbar.svg';
-import _effecti from '../../../assets/_effecti.svg';
-import _barra from '../../../assets/_barra.svg';
-import { NavbarComponentProps } from './Navbar.types';
-
-const NavbarComponent: React.FC<NavbarComponentProps> = ({
-  user,
-  isDropdownOpen,
-  handleDropdownToggle,
-  handleSearchChange,
-  showSearch,
-  menuLinks,
-  dropdownOptions,
-}) => {
-  const isSDK = user?.isPartner;
-  const emailInitials = user?.username
-    ? user.username.slice(0, 2).toUpperCase()
-    : '';
-
-  return (
-    <NavbarContainer>
-      <LogoContainer>
-        <img src={_logoCorp} alt="umbrella logo" />
-
-        {isSDK && (
-          <>
-            <img src={_barra} alt="barra separadora" />
-            <img style={{ marginTop: 10 }} src={_effecti} alt="effecti logo" />
-          </>
-        )}
-
-        <Menu>
-          {menuLinks.map((link) => (
-            <Link
-              key={link.path}
-              to={link.path}
-              id={link.id}
-              data-testid={link.testId}
-            >
-              {link.icon && <span style={{ marginRight: 6 }}>{link.icon}</span>}
-              {link.label}
-            </Link>
-          ))}
-        </Menu>
-      </LogoContainer>
-
-      {showSearch && (
-        <SearchWrapper>
-          <SearchContainer>
-            <SearchIconStyled className="icon_search" />
-            <input
-              className="input_search"
-              type="text"
-              placeholder="Pesquise sua apólice"
-              onInput={handleSearchChange}
-            />
-          </SearchContainer>
-        </SearchWrapper>
-      )}
-
-      <UserProfile onClick={handleDropdownToggle}>
-        <div className="avatar">
-          {user?.img ? (
-            <img src={user.img} alt={`Logo ${user?.username}`} />
-          ) : (
-            <div className="initials">{emailInitials}</div>
-          )}
-        </div>
-        <div className="details">
-          <span>{user?.username}</span>
-          <small>{user?.roles ? user.roles[0] : ''}</small>
-        </div>
-
-        <CaretDown
-          data-testid="btn_home_usuario"
-          id="btn_home_usuario"
-          color={primitiveColors.gray[300]}
-        />
-
-        {isDropdownOpen && (
-          <Dropdown>
-            {dropdownOptions.map((option) => (
-              <DropdownItem
-                key={option.label}
-                onClick={option.onClick}
-                data-testid={option.testId}
-                id={option.id}
-                $type={option?.type || 'default'}
-              >
-                {option.icon && (
-                  <span style={{ marginRight: 8 }}>{option.icon}</span>
-                )}
-                {option.label}
-              </DropdownItem>
-            ))}
-          </Dropdown>
-        )}
-      </UserProfile>
-    </NavbarContainer>
-  );
-};
-
-export default NavbarComponent;

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

@@ -1,34 +0,0 @@
-export interface MenuLink {
-  label: string;
-  path: string;
-  icon?: React.ReactNode;
-  testId?: string;
-  id?: string;
-}
-
-export interface DropdownOption {
-  label: string;
-  onClick: () => void;
-  icon?: React.ReactNode;
-  testId?: string;
-  type?: 'default' | 'logout';
-  id?: string;
-}
-
-export interface NavbarComponentProps {
-  user: {
-    isSupply?: boolean;
-    isPartner?: boolean;
-    username?: string;
-    img?: string;
-    roles?: string[];
-  };
-  isDropdownOpen: boolean;
-  handleDropdownToggle: () => void;
-  handleSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  showSearch: boolean;
-  /** Menu dinâmico */
-  menuLinks: MenuLink[];
-  /** Dropdown dinâmico */
-  dropdownOptions: DropdownOption[];
-}

package/src/components/organisms/PermissionCard/PermissionCard.styles.ts

@@ -1,37 +0,0 @@
-import styled from 'styled-components';
-import {
-  semanticColors,
-  semanticSizes,
-  semanticRadius,
-  semanticBorders,
-  primitiveShadows,
-} from '../../../styles/tokens';
-
-export const CardContainer = styled.div`
-  background-color: ${semanticColors.base.background};
-  border: ${semanticBorders.global.sm} solid ${semanticColors.neutral[200]};
-  border-radius: ${semanticRadius.global.radius.md};
-  padding: ${semanticSizes.global.padding.lg};
-  display: flex;
-  flex-direction: column;
-  gap: ${semanticSizes.global.gap.md};
-  box-shadow: ${primitiveShadows.shadow.default};
-  height: 100%;
-`;
-
-export const Header = styled.div`
-  padding-bottom: ${semanticSizes.global.padding.sm};
-  border-bottom: ${semanticBorders.global.sm} solid
-    ${semanticColors.neutral[100]};
-  margin-bottom: ${semanticSizes.global.gap.xs};
-
-  label {
-    font-weight: bold;
-  }
-`;
-
-export const ListContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${semanticSizes.global.gap.sm};
-`;

package/src/components/organisms/PermissionCard/PermissionCard.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { Checkbox } from '../../atoms/Checkbox/Checkbox';
-import { PermissionCardProps } from './PermissionCard.types';
-import { CardContainer, Header, ListContainer } from './PermissionCard.styles';
-
-export const PermissionCard: React.FC<PermissionCardProps> = ({
-  title,
-  options,
-  selectedIds,
-  onChange,
-  disabled = false,
-}) => {
-  const allSelected =
-    options.length > 0 && selectedIds.length === options.length;
-
-  const isIndeterminate =
-    selectedIds.length > 0 && selectedIds.length < options.length;
-
-  const handleSelectAll = () => {
-    if (allSelected) {
-      onChange([]);
-    } else {
-      onChange(options.map((opt) => opt.id));
-    }
-  };
-
-  const handleToggleOption = (id: string) => {
-    const newSelected = selectedIds.includes(id)
-      ? selectedIds.filter((item) => item !== id)
-      : [...selectedIds, id];
-    onChange(newSelected);
-  };
-
-  return (
-    <CardContainer>
-      <Header>
-        <Checkbox
-          label={title}
-          checked={allSelected}
-          indeterminate={isIndeterminate}
-          onChange={handleSelectAll}
-          disabled={disabled}
-        />
-      </Header>
-      <ListContainer>
-        {options.map((option) => (
-          <Checkbox
-            key={option.id}
-            label={option.label}
-            checked={selectedIds.includes(option.id)}
-            onChange={() => handleToggleOption(option.id)}
-            disabled={disabled}
-          />
-        ))}
-      </ListContainer>
-    </CardContainer>
-  );
-};

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

@@ -1,12 +0,0 @@
-export interface PermissionOption {
-  id: string;
-  label: string;
-}
-
-export interface PermissionCardProps {
-  title: string;
-  options: PermissionOption[];
-  selectedIds: string[];
-  onChange: (selectedIds: string[]) => void;
-  disabled?: boolean;
-}

package/src/components/organisms/TimelineModal/TimelineModal.styles.ts

@@ -1,109 +0,0 @@
-import styled from 'styled-components';
-import * as Dialog from '@radix-ui/react-dialog';
-import {
-  semanticColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens,
-  primitiveColors,
-} from '../../../styles/tokens';
-
-export const Overlay = styled(Dialog.Overlay)`
-  position: fixed;
-  inset: 0;
-  background-color: ${semanticColors.global.surface.overlay};
-  z-index: 50;
-`;
-
-export const Content = styled(Dialog.Content)`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: ${semanticColors.global.surface.default};
-  border-radius: ${semanticRadius.global.radius.md2};
-
-  padding: ${semanticSizes.global.padding['xl']}
-    ${semanticSizes.global.padding.xl};
-
-  width: 100%;
-  max-width: 520px;
-  z-index: 1000;
-  border-top: 6px solid ${semanticColors.branding.surface.enabled};
-
-  max-height: none;
-  overflow: visible;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: ${semanticColors.global.border.medium};
-    border-radius: 10px;
-  }
-`;
-
-export const TraceabilityText = styled.p`
-  font-size: 12px;
-  color: ${semanticColors.global.text.subtitle.enabled};
-  margin-top: 4px;
-  margin-bottom: 16px;
-`;
-
-export const Title = styled.h2`
-  font-family: ${typographyTokens.fontFamily.base};
-  font-size: 28px;
-  font-weight: 600;
-  line-height: 125%;
-  gap: 12px;
-  color: ${semanticColors.global.text.default.enabled};
-
-  margin-bottom: ${semanticSizes.global.gap.lg};
-
-  display: flex;
-  align-items: center;
-  margin-top: -2px;
-`;
-
-export const CloseIcon = styled(Dialog.Close)`
-  position: absolute;
-
-  top: ${semanticSizes.global.padding['3xl']};
-  right: ${semanticSizes.global.padding['3xl']};
-  background: transparent;
-  border: none;
-  cursor: pointer;
-
-  svg {
-    color: ${semanticColors.global.text.subtitle.enabled};
-  }
-
-  &:hover svg {
-    color: ${semanticColors.global.text.default.enabled};
-  }
-`;
-
-export const Footer = styled.div`
-  display: flex;
-  justify-content: center;
-
-  margin-top: ${semanticSizes.global.gap['2xl']};
-  padding-bottom: ${semanticSizes.global.padding.md};
-`;
-
-export const ModalTitle = styled.h2`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: ${typographyTokens.fontFamily.base};
-  font-size: ${typographyTokens.fontSizes.headingL};
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  color: ${primitiveColors.base.black};
-  margin: 0;
-`;
-
-export const TitleIcon = styled.img`
-  width: 20px;
-  height: 20px;
-  object-fit: contain;
-`;

package/src/components/organisms/TimelineModal/TimelineModal.tsx

@@ -1,67 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import * as Dialog from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import linhaTempoIcon from '../../../assets/linhaTempo.png';
-
-import {
-  CloseIcon,
-  Content,
-  Overlay,
-  Title,
-  Footer,
-} from './TimelineModal.styles';
-
-import Button from '../../atoms/Button';
-import { Timeline } from '../../molecules/TimeLine/TimeLine';
-
-export const TimelineModal = ({
-  open,
-  onOpenChange,
-  onClose,
-  data,
-  loading,
-  showLoadMore = false,
-  onLoadMore,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onClose: () => void;
-  onRetry?: () => void;
-  emptyLabel?: string;
-  data: any;
-  loading?: boolean;
-  showLoadMore?: boolean;
-  onLoadMore?: () => void;
-}) => {
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Overlay />
-      <Content>
-        <CloseIcon aria-label="Fechar" onClick={onClose}>
-          <X size={28} />
-        </CloseIcon>
-
-        <Dialog.Title asChild>
-          <Title>
-            <img
-              src={linhaTempoIcon}
-              alt=""
-              style={{ width: '24px', height: '24px' }}
-            />
-            Linha do tempo
-          </Title>
-        </Dialog.Title>
-
-        <Timeline items={data} loading={loading} />
-        {/* Só renderiza o botão se showLoadMore=true */}
-        {showLoadMore && !loading && data?.length > 0 && (
-          <Footer>
-            <Button variant="accent-outline" size="sm" onClick={onLoadMore}>
-              Ver mais alterações
-            </Button>
-          </Footer>
-        )}
-      </Content>
-    </Dialog.Root>
-  );
-};

package/src/components/templates/PermissionMatrix/PermissionMatrix.styles.ts

@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-import { semanticSizes } from '../../../styles/tokens';
-
-export const MatrixGrid = styled.div`
-  display: grid;
-  gap: ${semanticSizes.global.gap.lg};
-
-  @media (min-width: 1024px) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  @media (min-width: 768px) and (max-width: 1023px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media (max-width: 767px) {
-    grid-template-columns: 1fr;
-  }
-`;

package/src/components/templates/PermissionMatrix/PermissionMatrix.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { PermissionCard } from '../../organisms/PermissionCard/PermissionCard';
-import { PermissionMatrixProps } from './PermissionMatrix.types';
-import { MatrixGrid } from './PermissionMatrix.styles';
-
-export const PermissionMatrix: React.FC<PermissionMatrixProps> = ({
-  groups,
-  values,
-  onPermissionChange,
-}) => {
-  return (
-    <MatrixGrid>
-      {groups.map((group) => (
-        <PermissionCard
-          key={group.id}
-          title={group.title}
-          options={group.options}
-          selectedIds={values[group.id] || []}
-          onChange={(newIds) => onPermissionChange(group.id, newIds)}
-        />
-      ))}
-    </MatrixGrid>
-  );
-};

package/src/components/templates/PermissionMatrix/PermissionMatrix.types.ts

@@ -1,13 +0,0 @@
-import { PermissionOption } from '../../organisms/PermissionCard/PermissionCard.types';
-
-export interface PermissionGroupData {
-  id: string;
-  title: string;
-  options: PermissionOption[];
-}
-
-export interface PermissionMatrixProps {
-  groups: PermissionGroupData[];
-  values: Record<string, string[]>;
-  onPermissionChange: (groupId: string, selectedIds: string[]) => void;
-}

package/src/global.d.ts

@@ -1,16 +0,0 @@
-// src/global.d.ts
-// Allow import of any ".css" file
-declare module '*.css';
-
-// Allow import of any ".svg" file
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}
-
-// Allow import of image files
-declare module '*.png';
-declare module '*.jpg';
-declare module '*.jpeg';
-declare module '*.gif';
-declare module '*.webp';