@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

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

@@ -1,48 +1,48 @@
-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.",
-}) => {
-  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}>Cancelar</CancelButton>
-          <ConfirmButton onClick={onConfirm} disabled={isLoading}>
-            {isLoading ? "Excluindo..." : "Sim, excluir"}
-          </ConfirmButton>
-        </Footer>
-      </Content>
-    </Dialog.Root>
-  );
-};
-
-export { ExcludeModal };
+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.',
+}) => {
+  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}>Cancelar</CancelButton>
+          <ConfirmButton onClick={onConfirm} disabled={isLoading}>
+            {isLoading ? 'Excluindo...' : 'Sim, excluir'}
+          </ConfirmButton>
+        </Footer>
+      </Content>
+    </Dialog.Root>
+  );
+};
+
+export { ExcludeModal };

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

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

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

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

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

@@ -0,0 +1,59 @@
+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;
+`;
+
+export const Column = styled.div`
+  width: 373px;
+  background: ${semanticColors.global.foreground.default};
+  border-radius: ${semanticBorders.global.md};
+  padding: 1rem;
+  display: block;
+  min-height: 100px;
+`;
+
+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

@@ -0,0 +1,167 @@
+/* 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;

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

@@ -1,68 +1,67 @@
-import styled from "styled-components";
-import {
-  primitiveColors,
-  semanticColors,
-  semanticSizes,
-  typographyTokens,
-} from "../../../styles/tokens";
-import { HighlightProps } from "./HighlightsCard.types";
-
-export const CardWrapper = styled.div`
-  display: grid;
-  grid-template-columns: repeat(2, 225px);
-  gap: ${semanticSizes.global.gap["lg"]}; 
-  
-  width: 100%;
-`;
-
-
-const backgroundColors: Record<HighlightProps["color"], string> = {
-  red: primitiveColors.red[600],       // #CB2C2D
-  orange: primitiveColors.orange[600], // #CB712C
-  blue: primitiveColors.blue[400],     // #5F73E0
-  gray: primitiveColors.gray[400],     // #CFCFCF
-};
-
-export const Card = styled.div<{ color: HighlightProps["color"] }>`
-  width: 225px;
-  background-color: ${({ color }) => backgroundColors[color]};
-  padding:  ${semanticSizes.global.padding.xl};
-  border-radius: 8px;
-  position: relative;
-  min-height: 120px;
-  box-sizing: border-box;
-`;
-
-export const IconWrapper = styled.div`
-  position: absolute;
-  top: ${semanticSizes.global.padding.xl};
-  right:  ${semanticSizes.global.padding.xl};
-  background-color: ${semanticColors.base.background};
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const CardContent = styled.div`
-  width: 100%;
-  margin-top: 60px;
-  text-align: left;
-
-  p {
-    font-size: ${typographyTokens.fontSizes.bodyXS};
-    font-weight: ${typographyTokens.fontWeights.medium};
-    margin: 0;
-    margin-bottom: ${semanticSizes.global.padding.sm};
-    color: ${semanticColors.base.background};
-  }
-
-  h3 {
-    font-size: ${typographyTokens.fontSizes.displayXL};
-    font-weight:  ${typographyTokens.fontWeights.bold};
-    margin: 0;
-    color: ${semanticColors.base.background};
-  }
-`;
+/* eslint-disable react-refresh/only-export-components */
+import styled from 'styled-components';
+import {
+  primitiveColors,
+  semanticColors,
+  semanticSizes,
+  typographyTokens,
+} from '../../../styles/tokens';
+import { HighlightProps } from './HighlightsCard.types';
+
+export const CardWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 225px);
+  gap: ${semanticSizes.global.gap['lg']};
+  width: 100%;
+`;
+
+export const backgroundColors: Record<HighlightProps['color'], string> = {
+  red: primitiveColors.red[600], // #CB2C2D
+  orange: primitiveColors.orange[600], // #CB712C
+  blue: primitiveColors.blue[400], // #5F73E0
+  gray: primitiveColors.gray[400], // #CFCFCF
+};
+
+export const Card = styled.div<{ color: HighlightProps['color'] }>`
+  width: 225px;
+  background-color: ${({ color }) => backgroundColors[color]};
+  padding: ${semanticSizes.global.padding.xl};
+  border-radius: 8px;
+  position: relative;
+  min-height: 120px;
+  box-sizing: border-box;
+`;
+
+export const IconWrapper = styled.div`
+  position: absolute;
+  top: ${semanticSizes.global.padding.xl};
+  right: ${semanticSizes.global.padding.xl};
+  background-color: ${semanticColors.base.background};
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const CardContent = styled.div`
+  width: 100%;
+  margin-top: 60px;
+  text-align: left;
+
+  p {
+    font-size: ${typographyTokens.fontSizes.bodyXS};
+    font-weight: ${typographyTokens.fontWeights.medium};
+    margin: 0;
+    margin-bottom: ${semanticSizes.global.padding.sm};
+    color: ${semanticColors.base.background};
+  }
+
+  h3 {
+    font-size: ${typographyTokens.fontSizes.displayXL};
+    font-weight: ${typographyTokens.fontWeights.bold};
+    margin: 0;
+    color: ${semanticColors.base.background};
+  }
+`;

package/src/components/molecules/HighlightsCard/HighlightsCard.tsx

@@ -1,26 +1,35 @@
-import React from "react";
-import { Card, CardWrapper, IconWrapper, CardContent } from "./HighlightsCard.styles";
-import { HighlightsCardProps } from "./HighlightsCard.types";
-import Icon from "../../atoms/Icon";
-
-const HighlightsCard: React.FC<HighlightsCardProps> = ({ items }) => {
-  return (
-    <CardWrapper>
-      {items.map((item, index) => (
-        <Card key={index} color={item.color}>
-          {item.icon && (
-            <IconWrapper>
-              <Icon name={item.icon} size="xs" />
-            </IconWrapper>
-          )}
-          <CardContent>
-            <p>{item.label}</p>
-            <h3>{item.value}</h3>
-          </CardContent>
-        </Card>
-      ))}
-    </CardWrapper>
-  );
-};
-
-export { HighlightsCard };
+import React from 'react';
+import {
+  Card,
+  CardWrapper,
+  IconWrapper,
+  CardContent,
+} from './HighlightsCard.styles';
+import { HighlightsCardProps } from './HighlightsCard.types';
+import Icon from '../../atoms/Icon/Icon';
+
+const HighlightsCard: React.FC<HighlightsCardProps> = ({ items }) => {
+  return (
+    <CardWrapper data-testid="highlights-wrapper">
+      {items.map((item, index) => (
+        <Card
+          key={index}
+          color={item.color}
+          data-testid={`highlight-card-${index}`}
+        >
+          {item.icon && (
+            <IconWrapper data-testid={`highlight-card-icon-${index}`}>
+              <Icon name={item.icon} size="xs" />
+            </IconWrapper>
+          )}
+          <CardContent>
+            <p>{item.label}</p>
+            <h3>{item.value}</h3>
+          </CardContent>
+        </Card>
+      ))}
+    </CardWrapper>
+  );
+};
+
+export { HighlightsCard };

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

@@ -1,10 +1,10 @@
-export interface HighlightProps {
-  label: string;
-  value: number;
-  color: string; 
-  icon?: string;
-}
-
-export interface HighlightsCardProps {
-  items: HighlightProps[];
-}
+export interface HighlightProps {
+  label: string;
+  value: number;
+  color: string;
+  icon?: string;
+}
+
+export interface HighlightsCardProps {
+  items: HighlightProps[];
+}

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

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