@granto-umbrella/umbrella-components 3.0.77 → 3.0.78

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

@@ -1,143 +0,0 @@
-import styled from 'styled-components';
-import { DayPicker as RDPDayPicker } from 'react-day-picker';
-
-export const StyledDayPicker = styled(RDPDayPicker)`
-  padding: 0.75rem; /* p-3 */
-
-  /* Estilo para o container dos meses */
-  .rdp-months {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem; /* equivalente a space-y-4 */
-  }
-
-  @media (min-width: 640px) {
-    .rdp-months {
-      flex-direction: row;
-      gap: 0 1rem; /* sm:flex-row com space-x-4 e sm:space-y-0 */
-    }
-  }
-
-  /* Cada mês */
-  .rdp-month {
-    margin-bottom: 1rem;
-  }
-
-  /* Legenda (caption) do mês */
-  .rdp-caption {
-    display: flex;
-    justify-content: center;
-    padding-top: 0.25rem; /* pt-1 */
-    position: relative;
-    align-items: center;
-  }
-
-  .rdp-caption_label {
-    font-size: 0.875rem; /* text-sm */
-    font-weight: 500; /* font-medium */
-  }
-
-  /* Navegação */
-  .rdp-nav {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem; /* space-x-1 */
-    position: relative;
-  }
-
-  .rdp-nav_button {
-    height: 1.75rem; /* h-7 */
-    width: 1.75rem; /* w-7 */
-    background: transparent;
-    padding: 0;
-    opacity: 0.5;
-    /* Pode-se definir aqui estilos de border se desejar imitar o buttonVariants({ variant: "outline" }) */
-    border: 1px solid #d1d5db;
-    cursor: pointer;
-    transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  .rdp-nav_button_previous {
-    position: absolute;
-    left: 0.25rem; /* left-1 */
-  }
-
-  .rdp-nav_button_next {
-    position: absolute;
-    right: 0.25rem; /* right-1 */
-  }
-
-  /* Tabela de dias */
-  .rdp-table {
-    width: 100%; /* w-full */
-    border-collapse: collapse;
-    margin-top: 0.25rem; /* espaço vertical */
-  }
-
-  .rdp-head_row {
-    display: flex;
-  }
-
-  .rdp-head_cell {
-    font-size: 0.8rem; /* text-[0.8rem] */
-    color: #6b7280; /* text-muted-foreground */
-    border-radius: 0.375rem; /* rounded-md */
-    width: 2.25rem; /* w-9 */
-    font-weight: 400; /* font-normal */
-  }
-
-  .rdp-row {
-    display: flex;
-    width: 100%;
-    margin-top: 0.5rem; /* mt-2 */
-  }
-
-  .rdp-cell {
-    height: 2.25rem; /* h-9 */
-    width: 2.25rem; /* w-9 */
-    text-align: center;
-    font-size: 0.875rem; /* text-sm */
-    padding: 0;
-    position: relative;
-
-    &:focus-within {
-      z-index: 20;
-    }
-  }
-
-  /* Botão do dia */
-  .rdp-day {
-    height: 2.25rem; /* h-9 */
-    width: 2.25rem; /* w-9 */
-    padding: 0;
-    font-size: 0.875rem;
-    font-weight: 400;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    /* Estilos adicionais podem ser aplicados conforme necessário */
-  }
-
-  .rdp-day_selected {
-    background: #3b82f6; /* bg-primary (substitua conforme seu tema) */
-    color: #ffffff; /* text-primary-foreground */
-  }
-
-  .rdp-day_today {
-    background: #f3f4f6; /* bg-accent */
-    color: #111827; /* text-accent-foreground */
-  }
-
-  .rdp-day_outside {
-    color: #6b7280; /* text-muted-foreground */
-  }
-
-  .rdp-day_disabled {
-    color: #6b7280;
-    opacity: 0.5;
-  }
-`;

package/src/components/molecules/Calendar/Calendar.tsx

@@ -1,31 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { DayPicker as RDPDayPicker } from 'react-day-picker';
-import { StyledDayPicker } from './Calendar.styles';
-
-export type CalendarProps = React.ComponentProps<typeof RDPDayPicker>;
-
-function Calendar({ className, ...props }: CalendarProps) {
-  return (
-    <StyledDayPicker
-      className={className}
-      showOutsideDays={true}
-      components={
-        {
-          IconPrevious: ({ className, ...props }: { className?: string }) => (
-            <ChevronLeft className={className} {...props} />
-          ),
-          IconNext: ({ className, ...props }: { className?: string }) => (
-            <ChevronRight className={className} {...props} />
-          ),
-        } as unknown as any
-      }
-      {...props}
-    />
-  );
-}
-
-Calendar.displayName = 'Calendar';
-
-export { Calendar };

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

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-import { semanticSizes } from '../../../styles/tokens';
-
-export const StyledCodeInputContainer = styled.div`
-  display: flex;
-  margin-bottom: ${semanticSizes.global.padding.xl};
-`;

package/src/components/molecules/CodeInputContainer/CodeInputContainer.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { StyledCodeInputContainer } from './CodeInputContainer.styles';
-import { CodeInputContainerProps } from './CodeInputContainer.types';
-import CodeInput from '../../atoms/CodeInput';
-
-const CodeInputContainer: React.FC<CodeInputContainerProps> = ({
-  code,
-  inputRefs,
-  handleChange,
-  handleKeyDown,
-  handlePaste,
-  testId,
-}) => {
-  return (
-    <StyledCodeInputContainer data-testid={testId} id={testId}>
-      {code.map((value, index) => (
-        <CodeInput
-          key={index}
-          ref={(el) => (inputRefs.current[index] = el)}
-          type="text"
-          maxLength={1}
-          value={value}
-          onChange={(e) => handleChange(e.target.value, index)}
-          onKeyDown={(e) => handleKeyDown(e, index)}
-          onPaste={handlePaste}
-        />
-      ))}
-    </StyledCodeInputContainer>
-  );
-};
-
-export { CodeInputContainer };

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

@@ -1,13 +0,0 @@
-import React from 'react';
-
-export interface CodeInputContainerProps {
-  code: string[];
-  inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>;
-  handleChange: (value: string, index: number) => void;
-  handleKeyDown: (
-    event: React.KeyboardEvent<HTMLInputElement>,
-    index: number
-  ) => void;
-  handlePaste: (event: React.ClipboardEvent<HTMLInputElement>) => void;
-  testId?: string;
-}

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

@@ -1,123 +0,0 @@
-import styled from 'styled-components';
-import * as Dialog from '@radix-ui/react-dialog';
-import {
-  semanticRadius,
-  semanticColors,
-  typographyTokens,
-  semanticSizes,
-  semanticShadows,
-} from '../../../styles/tokens';
-
-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: ${typographyTokens.fontFamily.base};
-  background: ${semanticColors.base.background};
-  border-radius: 12px;
-  padding: ${semanticSizes.global.padding['3xl']};
-  width: 100%;
-  max-width: 520px;
-  z-index: 1000;
-  box-shadow: ${semanticShadows.shadow.lg};
-  border-top: 6px solid #c53030;
-`;
-
-export const Title = styled.h2`
-  font-size: 28px;
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  line-height: ${typographyTokens.lineHeights.displayM};
-  color: ${semanticColors.global.text.default.enabled};
-  margin-bottom: ${semanticSizes.global.gap.sm};
-  padding-right: ${semanticSizes.global.padding.md};
-`;
-
-export const Description = styled.p`
-  font-size: 1.1rem;
-  line-height: 1.5;
-  color: ${semanticColors.global.text.onSurface.subtitle};
-  margin-bottom: ${semanticSizes.global.gap.lg};
-
-  span {
-    cursor: pointer;
-    color: ${semanticColors.global.text.default.enabled};
-  }
-
-  strong {
-    font-weight: ${typographyTokens.fontWeights.semibold};
-    color: ${semanticColors.global.text.default.enabled};
-  }
-`;
-
-export const Footer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  gap: ${semanticSizes.global.gap.md};
-  margin-top: ${semanticSizes.global.gap.xl};
-`;
-
-export const CancelButton = styled(Dialog.Close)`
-  background: ${semanticColors.base.background};
-  border: 2px solid ${semanticColors.global.border.strong};
-  border-radius: ${semanticRadius.global.radius.md2};
-  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  font-size: ${typographyTokens.fontSizes.labelM};
-  color: ${semanticColors.global.border.strong};
-  cursor: pointer;
-  transition: all 0.2s;
-
-  &:hover {
-    background: ${semanticColors.neutral[100]};
-  }
-`;
-
-export const ConfirmButton = styled.button`
-  background: #c53030;
-  color: ${semanticColors.danger.text.onSurface};
-  border: none;
-  border-radius: ${semanticRadius.global.radius.md2};
-  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  font-size: ${typographyTokens.fontSizes.labelM};
-  cursor: pointer;
-  transition: all 0.2s;
-
-  &:hover {
-    background: #b02828;
-  }
-
-  &:active {
-    background: #952020;
-  }
-
-  &:disabled {
-    background: #e2e2e2;
-    cursor: not-allowed;
-  }
-`;
-
-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.onSurface.subtitle};
-  }
-
-  &:hover svg {
-    color: ${semanticColors.global.text.default.enabled};
-  }
-`;

package/src/components/molecules/ExcludeModal/ExcludeModal.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import {
-  Overlay,
-  Content,
-  Title,
-  Description,
-  Footer,
-  CancelButton,
-  ConfirmButton,
-  CloseIcon,
-} from './ExcludeModal.styles';
-import { ExcludeModalProps } from './ExcludeModal.types';
-
-const ExcludeModal: React.FC<ExcludeModalProps> = ({
-  open,
-  onOpenChange,
-  onClose,
-  onConfirm,
-  isLoading = false,
-  title = 'Você tem certeza que deseja excluir essa cotação?',
-  description = 'Essa cotação será excluída mas ainda será mantida no nosso sistema, caso queira restaurar, precisa entrar em contato conosco.',
-  confirmButtonText = 'Sim, excluir',
-  cancelButtonText = 'Cancelar',
-}) => {
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Overlay />
-      <Content>
-        <CloseIcon aria-label="Fechar" onClick={onClose}>
-          <X size={28} />
-        </CloseIcon>
-
-        <Title>{title}</Title>
-
-        <Description>{description}</Description>
-
-        <Footer>
-          <CancelButton onClick={onClose}>{cancelButtonText}</CancelButton>
-          <ConfirmButton onClick={onConfirm} disabled={isLoading}>
-            {isLoading ? 'Excluindo...' : confirmButtonText}
-          </ConfirmButton>
-        </Footer>
-      </Content>
-    </Dialog.Root>
-  );
-};
-
-export { ExcludeModal };

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

@@ -1,12 +0,0 @@
-export interface ExcludeModalProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onClose: () => void;
-  onConfirm: () => void;
-  orderId?: string;
-  isLoading?: boolean;
-  title?: string;
-  description?: string;
-  confirmButtonText?: string;
-  cancelButtonText?: string;
-}

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

@@ -1,63 +0,0 @@
-import {
-  semanticBorders,
-  semanticColors,
-  typographyTokens,
-} from '../../../styles/tokens';
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  gap: 2rem;
-  justify-content: center;
-  padding: 2rem 0;
-  max-height: 450px;
-  overflow-y: auto;
-  align-items: stretch;
-`;
-
-export const Column = styled.div`
-  width: 393px;
-  background: ${semanticColors.global.foreground.default};
-  border-radius: ${semanticBorders.global.md};
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-`;
-
-export const TitleRow = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-`;
-
-export const Title = styled.h3`
-  font-size: ${typographyTokens.fontSizes.headingL};
-  margin: 0;
-`;
-
-export const Action = styled.button`
-  background: none;
-  border: none;
-  color: ${semanticColors.branding.text.accent.enabled};
-  cursor: pointer;
-  font-size: ${typographyTokens.fontSizes.bodyS};
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-
-export const Item = styled.div<{ selected?: boolean }>`
-  background: ${semanticColors.global.surface.default};
-  border-radius: 8px;
-  padding: 0.5rem 0.75rem;
-  margin-bottom: 0.5rem;
-  flex-direction: row;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  transition: all 0.2s;
-`;

package/src/components/molecules/FieldSelector/FieldSelector.tsx

@@ -1,167 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
-import {
-  Action,
-  Column,
-  Container,
-  Item,
-  Title,
-  TitleRow,
-} from './FieldSelector.styles';
-
-interface FieldSelectorProps {
-  availableFields: string[];
-  selectedFields: string[];
-  setAvailableFields: (fields: string[]) => void;
-  setSelectedFields: (fields: string[]) => void;
-  handleSave?: (selectedFields: string[]) => void;
-}
-
-const FieldSelector: React.FC<FieldSelectorProps> = ({
-  availableFields = [],
-  selectedFields = [],
-  setAvailableFields,
-  setSelectedFields,
-  handleSave,
-}) => {
-  const handleSelectAll = () => {
-    setSelectedFields([...selectedFields, ...availableFields]);
-    setAvailableFields([]);
-  };
-
-  const handleRemoveAll = () => {
-    setAvailableFields([...availableFields, ...selectedFields]);
-    setSelectedFields([]);
-  };
-
-  const handleClick = (item: string, from: 'available' | 'selected') => {
-    if (from === 'available') {
-      setAvailableFields(availableFields.filter((f) => f !== item));
-      setSelectedFields([...selectedFields, item]);
-    } else {
-      setSelectedFields(selectedFields.filter((f) => f !== item));
-      setAvailableFields([...availableFields, item]);
-    }
-  };
-
-  const reorder = (list: string[], startIndex: number, endIndex: number) => {
-    const result = Array.from(list);
-    const [removed] = result.splice(startIndex, 1);
-    result.splice(endIndex, 0, removed);
-    return result;
-  };
-
-  const onDragEnd = (result: any) => {
-    const { source, destination } = result;
-    if (!destination) return;
-
-    if (source.droppableId === destination.droppableId) {
-      if (source.droppableId === 'available') {
-        const reordered = reorder(
-          availableFields,
-          source.index,
-          destination.index
-        );
-        setAvailableFields(reordered);
-      } else {
-        const reordered = reorder(
-          selectedFields,
-          source.index,
-          destination.index
-        );
-        setSelectedFields(reordered);
-      }
-      return;
-    }
-
-    const sourceList =
-      source.droppableId === 'available' ? availableFields : selectedFields;
-    const destList =
-      destination.droppableId === 'available'
-        ? availableFields
-        : selectedFields;
-    const setSource =
-      source.droppableId === 'available'
-        ? setAvailableFields
-        : setSelectedFields;
-    const setDest =
-      destination.droppableId === 'available'
-        ? setAvailableFields
-        : setSelectedFields;
-
-    const sourceClone = Array.from(sourceList);
-    const destClone = Array.from(destList);
-    const [moved] = sourceClone.splice(source.index, 1);
-    destClone.splice(destination.index, 0, moved);
-
-    setSource(sourceClone);
-    setDest(destClone);
-
-    if (destination.droppableId === 'selected') {
-      handleSave?.(destClone);
-    }
-  };
-
-  return (
-    <Container>
-      <DragDropContext onDragEnd={onDragEnd}>
-        <Droppable droppableId="available">
-          {(provided) => (
-            <Column ref={provided.innerRef} {...provided.droppableProps}>
-              <TitleRow>
-                <Title>Campos disponíveis ({availableFields.length})</Title>
-                <Action onClick={handleSelectAll}>Selecionar todos</Action>
-              </TitleRow>
-              {availableFields.map((item, index) => (
-                <Draggable key={item} draggableId={item} index={index}>
-                  {(prov) => (
-                    <Item
-                      ref={prov.innerRef}
-                      {...prov.draggableProps}
-                      {...prov.dragHandleProps}
-                      selected={false}
-                      onDoubleClick={() => handleClick(item, 'available')}
-                    >
-                      {item} <div>⋮⋮</div>
-                    </Item>
-                  )}
-                </Draggable>
-              ))}
-              {provided.placeholder}
-            </Column>
-          )}
-        </Droppable>
-
-        <Droppable droppableId="selected">
-          {(provided) => (
-            <Column ref={provided.innerRef} {...provided.droppableProps}>
-              <TitleRow>
-                <Title>Campos selecionados ({selectedFields.length})</Title>
-                <Action onClick={handleRemoveAll}>Remover todos</Action>
-              </TitleRow>
-              {selectedFields.map((item, index) => (
-                <Draggable key={item} draggableId={item} index={index}>
-                  {(prov) => (
-                    <Item
-                      ref={prov.innerRef}
-                      {...prov.draggableProps}
-                      {...prov.dragHandleProps}
-                      selected
-                      onDoubleClick={() => handleClick(item, 'selected')}
-                    >
-                      {item} <div>⋮⋮</div>
-                    </Item>
-                  )}
-                </Draggable>
-              ))}
-              {provided.placeholder}
-            </Column>
-          )}
-        </Droppable>
-      </DragDropContext>
-    </Container>
-  );
-};
-
-export default FieldSelector;