@granto-umbrella/umbrella-components 3.0.77 → 3.0.78

package/src/components/organisms/AlertDialog/AlertDialog.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import Text from '../../atoms/Text/Text';
-import Button from '../../atoms/Button/Button';
-import {
-  ButtonContainer,
-  DialogContainer,
-  Overlay,
-  CloseButton,
-  TitleContainer,
-} from './AlertDialog.styles';
-import { X } from '@phosphor-icons/react';
-import { AlertDialogProps } from './AlertDialog.types';
-import { semanticColors } from '../../../styles/tokens';
-
-const AlertDialog: React.FC<AlertDialogProps> = ({
-  text,
-  isOpen,
-  buttons: { confirm, cancel, onClose, onConfirm },
-  testId,
-}) => {
-  if (!isOpen) return null;
-
-  return (
-    <Overlay>
-      <DialogContainer>
-        <TitleContainer>
-          <Text
-            size="lg"
-            weight="bold"
-            color={`${semanticColors.danger.border.enabled}`}
-          >
-            {text.title}
-          </Text>
-          <CloseButton onClick={onClose} aria-label="Fechar">
-            <X
-              size={20}
-              color={`${semanticColors.neutral[300]}`}
-              weight="bold"
-            />
-          </CloseButton>
-        </TitleContainer>
-        <Text size="md" color={`${semanticColors.neutral[500]}`}>
-          {text.description}
-        </Text>
-        <ButtonContainer>
-          {cancel && (
-            <Button
-              testId={`${testId}_cancelar`}
-              variant="alert"
-              onClick={onClose}
-            >
-              {cancel}
-            </Button>
-          )}
-          {confirm && (
-            <Button
-              testId={`${testId}_confirmar`}
-              variant="danger"
-              onClick={onConfirm}
-            >
-              {confirm}
-            </Button>
-          )}
-        </ButtonContainer>
-      </DialogContainer>
-    </Overlay>
-  );
-};
-
-export default AlertDialog;

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

@@ -1,14 +0,0 @@
-export interface AlertDialogProps {
-  isOpen: boolean;
-  buttons: {
-    cancel?: string;
-    confirm?: string;
-    onClose?: () => void;
-    onConfirm?: () => void;
-  };
-  text: {
-    title: string;
-    description: string;
-  };
-  testId?: string;
-}

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

@@ -1,107 +0,0 @@
-// Dialog.styled.tsx
-import styled from 'styled-components';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-
-/* ========================= */
-/* === Overlay Component === */
-/* ========================= */
-export const StyledDialogOverlay = styled(DialogPrimitive.Overlay)`
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background-color: rgba(0, 0, 0, 0.8);
-  /* Você pode definir animações adicionais aqui, caso deseje */
-`;
-
-/* ========================== */
-/* === Content Component  === */
-/* ========================== */
-export const StyledDialogContent = styled(DialogPrimitive.Content)`
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  z-index: 50;
-  display: grid;
-  width: 100%;
-  max-width: 32rem; /* Equivalente a max-w-lg */
-  transform: translate(-50%, -50%);
-  gap: 1rem; /* gap-4 */
-  border: 1px solid #e5e7eb;
-  background-color: #fff; /* bg-background */
-  padding: 1.5rem; /* p-6 */
-  box-shadow:
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-radius: 0.5rem; /* sm:rounded-lg */
-  transition: all 0.2s ease;
-`;
-
-/* ============================ */
-/* === Close Button Component === */
-/* ============================ */
-export const StyledDialogClose = styled(DialogPrimitive.Close)`
-  position: absolute;
-  top: 1rem; /* top-4 */
-  right: 1rem; /* right-4 */
-  background: none;
-  border: none;
-  border-radius: 0.125rem; /* rounded-sm */
-  opacity: 0.7;
-  cursor: pointer;
-  transition: opacity 0.2s ease;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px #3b82f6; /* focus:ring-2 focus:ring-ring */
-  }
-`;
-
-/* ========================== */
-/* === Header Component  === */
-/* ========================== */
-export const StyledDialogHeader = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem; /* Aproximadamente space-y-1.5 */
-  text-align: center;
-
-  @media (min-width: 640px) {
-    text-align: left;
-  }
-`;
-
-/* ========================== */
-/* === Footer Component  === */
-/* ========================== */
-export const StyledDialogFooter = styled.div`
-  display: flex;
-  flex-direction: column-reverse;
-  justify-content: flex-end;
-  gap: 0.5rem; /* Aproximadamente sm:space-x-2 */
-
-  @media (min-width: 640px) {
-    flex-direction: row;
-  }
-`;
-
-/* =========================== */
-/* === Title Component  === */
-/* =========================== */
-export const StyledDialogTitle = styled(DialogPrimitive.Title)`
-  font-size: 1.125rem; /* text-lg */
-  font-weight: 600; /* font-semibold */
-  line-height: 1; /* leading-none */
-  letter-spacing: -0.025em; /* tracking-tight */
-`;
-
-/* =============================== */
-/* === Description Component  === */
-/* =============================== */
-export const StyledDialogDescription = styled(DialogPrimitive.Description)`
-  font-size: 0.875rem; /* text-sm */
-  color: #6b7280; /* text-muted-foreground */
-`;

package/src/components/organisms/Dialog/Dialog.tsx

@@ -1,69 +0,0 @@
-// Dialog.tsx
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import {
-  StyledDialogOverlay,
-  StyledDialogContent,
-  StyledDialogClose,
-  StyledDialogHeader,
-  StyledDialogFooter,
-  StyledDialogTitle,
-  StyledDialogDescription,
-} from './Dialog.styles';
-
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ children, ...props }, ref) => (
-  <DialogPortal>
-    <StyledDialogOverlay />
-    <StyledDialogContent ref={ref} {...props}>
-      {children}
-      <StyledDialogClose>
-        <X style={{ height: '1rem', width: '1rem' }} />
-        <span className="sr-only">Close</span>
-      </StyledDialogClose>
-    </StyledDialogContent>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = (
-  props
-) => <StyledDialogHeader {...props} />;
-DialogHeader.displayName = 'DialogHeader';
-
-const DialogFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = (
-  props
-) => <StyledDialogFooter {...props} />;
-DialogFooter.displayName = 'DialogFooter';
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->((props, ref) => <StyledDialogTitle ref={ref} {...props} />);
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->((props, ref) => <StyledDialogDescription ref={ref} {...props} />);
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogTrigger,
-  DialogPortal,
-  DialogContent,
-  StyledDialogOverlay as DialogOverlay,
-  StyledDialogClose as DialogClose,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};

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

@@ -1,113 +0,0 @@
-import styled from 'styled-components';
-import {
-  primitiveColors,
-  semanticBorders,
-  semanticColors,
-  semanticRadius,
-  semanticSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-
-export const Card = styled.div`
-  background-color: ${semanticColors.base.background};
-  border: ${semanticBorders.global.sm} solid ${semanticColors.neutral[400]};
-  border-radius: 8px;
-  padding: ${semanticSizes.global.padding.lg};
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const CardHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  text-align: center;
-  gap: ${semanticSizes.global.gap.sm};
-  align-items: center;
-  margin-bottom: 24px;
-`;
-
-export const CardTitle = styled.h2`
-  font-size: ${typographyTokens.fontSizes.headingS};
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  margin: 0;
-  color: ${semanticColors.base.text};
-  text-align: center;
-`;
-
-export const CardLink = styled.a`
-  display: flex;
-  flex-direction: row;
-  font-size: ${typographyTokens.fontSizes.labelS};
-  margin: 0;
-  color: ${semanticColors.branding.text.accent.enabled};
-  text-align: center;
-  gap: ${semanticSizes.global.gap.sm};
-  align-items: center;
-  cursor: pointer;
-  text-decoration: none;
-
-  &:hover {
-    color: ${semanticColors.branding.text.accent.hover};
-  }
-`;
-
-export const CardContent = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.xl};
-  margin-bottom: 18px;
-`;
-
-export const CardChartDescription = styled.div`
-  justify-content: flex-start;
-  align-items: center;
-  text-align: left;
-
-  .subtitle {
-    font-size: ${typographyTokens.fontSizes.labelS};
-    color: ${semanticColors.global.text.subtitle.enabled};
-  }
-  .description {
-    font-size: ${typographyTokens.fontSizes.headingM};
-    color: ${semanticColors.base.text};
-    margin-bottom: ${semanticSizes.global.spacings.sm};
-  }
-`;
-
-export const CardFooter = styled.div`
-  text-align: left;
-  display: flex;
-  flex-direction: column;
-  gap: ${semanticSizes.global.gap.xs};
-
-  .subtitle {
-    font-size: ${typographyTokens.fontSizes.labelS};
-    color: ${semanticColors.global.text.subtitle.enabled};
-  }
-  .description {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: row;
-    gap: ${semanticSizes.global.gap.lg};
-    font-size: ${typographyTokens.fontSizes.captionM};
-    color: ${semanticColors.base.text};
-  }
-
-  .items {
-    display: flex;
-    align-items: center;
-    gap: ${semanticSizes.global.gap.sm};
-    margin-bottom: ${semanticSizes.global.spacings.sm};
-  }
-`;
-
-export const Circle = styled.div<{ color?: string }>`
-  width: ${semanticSizes.global.gap.md};
-  height: ${semanticSizes.global.gap.md};
-  border-radius: ${semanticRadius.global.radius.full};
-  background-color: ${({ color }) => color || primitiveColors.orange[400]};
-`;

package/src/components/organisms/DonutEmissionsChart/DonutEmissionsChart.tsx

@@ -1,75 +0,0 @@
-import type React from 'react';
-import { ArrowUpRight } from 'lucide-react';
-import type { DonutEmissionsChartProps } from './DonutEmissionsChart.types';
-import type { PieChartComponentProps } from '../../molecules/PieChartComponent/PieChartComponent.types';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  CardFooter,
-  CardLink,
-  CardChartDescription,
-  Circle,
-} from './DonutEmissionsChart.styles';
-import { PieChartComponent } from '../../molecules/PieChartComponent';
-import { primitiveColors } from '../../../styles/tokens';
-import ResultsChart from '../../molecules/ResultsChart';
-
-const DonutEmissionsChart: React.FC<DonutEmissionsChartProps> = ({
-  totalEmissions,
-  companiesWithEmissions,
-}) => {
-  const colors = [
-    primitiveColors.blue[400],
-    primitiveColors.orange[400],
-    primitiveColors.green[400],
-    primitiveColors.gray[400],
-  ];
-
-  const chartData: PieChartComponentProps = {
-    data: companiesWithEmissions.map((company, index) => ({
-      name: company.companyName,
-      value: company.totalEmissions,
-      fill: colors[index % colors.length],
-    })),
-  };
-
-  const currentMonth = new Date().toLocaleDateString('pt-BR', {
-    month: 'long',
-  });
-  const currentMonthCapitalized =
-    currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1);
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Emissões realizadas</CardTitle>
-        <CardLink href="#">
-          Acessar dashboard <ArrowUpRight size={16} />
-        </CardLink>
-      </CardHeader>
-      <CardContent>
-        <PieChartComponent data={chartData.data} />
-        <CardChartDescription>
-          <div className="subtitle">Emissões realizadas em</div>
-          <div className="description">{currentMonthCapitalized}</div>
-          <ResultsChart value={totalEmissions} />
-        </CardChartDescription>
-      </CardContent>
-      <CardFooter>
-        <div className="subtitle">Empresas que realizaram emissões</div>
-        <div className="description">
-          {chartData.data?.map((item, index) => (
-            <div key={index} className="items">
-              <Circle color={item.fill} />
-              {item.name}
-            </div>
-          ))}
-        </div>
-      </CardFooter>
-    </Card>
-  );
-};
-
-export default DonutEmissionsChart;

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

@@ -1,9 +0,0 @@
-export interface CompanyEmission {
-  companyName: string;
-  totalEmissions: number;
-}
-
-export interface DonutEmissionsChartProps {
-  totalEmissions: number;
-  companiesWithEmissions: CompanyEmission[];
-}

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

@@ -1,5 +0,0 @@
-export { default } from './DonutEmissionsChart';
-export type {
-  DonutEmissionsChartProps,
-  CompanyEmission,
-} from './DonutEmissionsChart.types';

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

@@ -1,59 +0,0 @@
-import styled from 'styled-components';
-import * as Dialog from '@radix-ui/react-dialog';
-import { semanticColors } 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;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  z-index: 1000;
-  background: transparent;
-`;
-
-export const Panel = styled.div`
-  background: white;
-  border-radius: 12px;
-  padding: 32px;
-  width: min(950px, calc(100% - 32px));
-  border-top: 6px solid ${semanticColors.branding.surface.enabled};
-`;
-
-export const Title = styled.h2`
-  font-size: 28px;
-  font-weight: 600;
-  color: ${semanticColors.base.text};
-  margin-bottom: 16px;
-  padding-right: 12px;
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-  margin-top: -2px;
-`;
-
-export const CloseIcon = styled(Dialog.Close)`
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-
-  svg {
-    color: #888;
-  }
-`;
-
-export const Header = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: 100%;
-  margin-bottom: 24px;
-`;

package/src/components/organisms/ExportExcelModal/ExportExcelModal.tsx

@@ -1,89 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import * as Dialog from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import {
-  CloseIcon,
-  Content,
-  Header,
-  Overlay,
-  Panel,
-  Title,
-} from './ExportExcelModal.styles';
-import FieldSelector from '../../molecules/FieldSelector/FieldSelector';
-import ButtonGroup from '../../molecules/ButtonGroup/ButtonGroup';
-export const ExportExcelModal = ({
-  open,
-  onOpenChange,
-  onClose,
-  data,
-  title,
-  description,
-  onExport,
-  onSave,
-  isLoadingSave,
-  isLoadingExport,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onClose: () => void;
-  onRetry?: () => void;
-  data: any;
-  title: string;
-  description: string;
-  onExport?: (data: any) => void;
-  onSave?: (data: any) => void;
-  isLoadingSave?: boolean;
-  isLoadingExport?: boolean;
-}) => {
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Overlay />
-      <Content>
-        <Panel>
-          <Header>
-            <div>
-              <Dialog.Title>
-                <Title>{title}</Title>
-              </Dialog.Title>
-              <Dialog.Description>{description}</Dialog.Description>
-            </div>
-
-            <CloseIcon aria-label="Fechar" onClick={onClose}>
-              <X size={28} color="#BDBDBD" />
-            </CloseIcon>
-          </Header>
-
-          <FieldSelector
-            availableFields={data.available}
-            selectedFields={data.selected}
-            setAvailableFields={data.setAvailable}
-            setSelectedFields={data.setSelected}
-            handleSave={(data) => console.log('Nova ordem:', data)}
-          />
-
-          <ButtonGroup
-            buttons={[
-              {
-                label: 'Salvar e exportar planilha',
-                variant: 'primary',
-                onClick: () => {
-                  if (onExport) onExport(data.selected);
-                },
-                isLoading: isLoadingExport,
-              },
-              {
-                label: 'Salvar configurações',
-                variant: 'outline',
-                onClick: () => {
-                  if (onSave) onSave(data.selected);
-                },
-                isLoading: isLoadingSave,
-              },
-            ]}
-            orientation="horizontal"
-          />
-        </Panel>
-      </Content>
-    </Dialog.Root>
-  );
-};

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

@@ -1,35 +0,0 @@
-// Form.styled.tsx
-import styled from 'styled-components';
-
-/* Container para cada item do formulário */
-export const StyledFormItem = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem; /* Aproximadamente o "space-y-2" do Tailwind */
-`;
-
-/* Estilo para o label do formulário; a propriedade "error" permite alterar a cor se necessário */
-export const StyledFormLabel = styled.label<{ error?: boolean }>`
-  font-size: 0.875rem; /* text-sm */
-  font-weight: 500; /* font-medium */
-  line-height: 1; /* leading-none */
-  color: ${(props) => (props.error ? '#dc2626' : 'inherit')};
-`;
-
-/* Estilo para o container de controle de formulário (por exemplo, input) */
-export const StyledFormControl = styled.div`
-  /* Adicione aqui quaisquer estilos específicos para o container do input, se necessário */
-`;
-
-/* Estilo para a descrição do formulário */
-export const StyledFormDescription = styled.p`
-  font-size: 0.875rem; /* text-sm */
-  color: #6b7280; /* text-muted-foreground */
-`;
-
-/* Estilo para a mensagem (geralmente de erro) */
-export const StyledFormMessage = styled.p`
-  font-size: 0.875rem; /* text-sm */
-  font-weight: 500; /* font-medium */
-  color: #dc2626; /* text-destructive */
-`;