@granto-umbrella/umbrella-components 3.0.34 → 3.0.37

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

@@ -1,69 +1,69 @@
-// 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,
-};
+// 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 +1,113 @@
-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]};
-`
+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,71 +1,75 @@
-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
+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 +1,9 @@
-export interface CompanyEmission {
-  companyName: string
-  totalEmissions: number
-}
-
-export interface DonutEmissionsChartProps {
-  totalEmissions: number
-  companiesWithEmissions: CompanyEmission[]
-}
+export interface CompanyEmission {
+  companyName: string;
+  totalEmissions: number;
+}
+
+export interface DonutEmissionsChartProps {
+  totalEmissions: number;
+  companiesWithEmissions: CompanyEmission[];
+}

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

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

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

@@ -0,0 +1,59 @@
+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(850px, 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;
+`;