@granto-umbrella/umbrella-components 3.0.34 → 3.0.37

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

@@ -1,237 +1,237 @@
-/* eslint-disable react-refresh/only-export-components */
-import styled from 'styled-components';
-import { semanticColors } from '../../../styles/tokens';
-import { StatusVariant } from './InsuranceCard.types';
-
-export const PageContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 24px;
-`;
-
-export const Title = styled.h2`
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2d3748;
-`;
-
-export const TabBar = styled.div`
-  display: flex;
-  gap: 12px;
-`;
-
-export const Tab = styled.button<{ active?: boolean }>`
-  padding: 8px 16px;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border: none;
-  border-bottom: 2px solid transparent;
-  background: none;
-  cursor: pointer;
-  color: ${(props) =>
-    props.active ? semanticColors.branding.surface.enabled : '#718096'};
-  border-color: ${(props) =>
-    props.active ? semanticColors.branding.border.enabled : 'transparent'};
-`;
-
-export const ListContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-
-export const CardContainer = styled.div<{ $variant: StatusVariant }>`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
-  gap: 8px;
-  padding: 16px;
-  border-top: 4px solid ${(props) => variantColors[props.$variant]};
-  border-radius: 8px;
-  background-color: #fff;
-`;
-
-export const HeaderRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 24px;
-`;
-
-export const BodyRow = styled.div`
-  display: flex;
-  gap: 24px;
-  justify-content: space-between;
-
-  @media (max-width: 768px) {
-    flex-direction: column;
-    gap: 16px;
-  }
-`;
-
-export const variantColors: Record<StatusVariant, string> = {
-  primary: semanticColors.global.border.feedback.info,
-  success: semanticColors.global.border.feedback.success,
-  warning: semanticColors.global.border.feedback.warning,
-  danger: semanticColors.global.border.feedback.error,
-};
-
-export const variantColorsText: Record<StatusVariant, string> = {
-  primary: semanticColors.global.text.onSurface.enabled,
-  success: semanticColors.global.text.feedback.success,
-  warning: semanticColors.global.text.feedback.warning,
-  danger: semanticColors.global.text.feedback.error,
-};
-
-export const Text = styled.span<{ $variant?: StatusVariant }>`
-  font-size: 10px;
-  color: ${(props) =>
-    props.$variant ? variantColors[props.$variant] : variantColorsText.primary};
-`;
-
-export const StatusBadge = styled.span<{ $variant: StatusVariant }>`
-  padding: 4px 8px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  border-radius: 4px;
-  color: #fff;
-  background-color: ${(props) => variantColors[props.$variant]};
-`;
-export const InfoGroup = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 32px;
-  align-items: start;
-  width: 100%;
-  @media (max-width: 1200px) {
-    gap: 24px;
-  }
-
-  @media (max-width: 768px) {
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
-`;
-
-export const InfoRow = styled.div`
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  min-width: 0;
-`;
-
-export const InfoLabel = styled.span`
-  font-size: 12px;
-  color: #4a5568;
-  margin-bottom: 12px;
-`;
-
-export const InfoValue = styled.span`
-  font-size: 14px;
-  font-weight: 900;
-  color: #2d3748;
-`;
-
-export const TruncatedValue = styled(InfoValue)`
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-export const ProdValue = styled(InfoValue)`
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-export const ProcessValue = styled(InfoValue)`
-  display: inline-block;
-  max-width: 100%;
-`;
-
-export const InfoSubValue = styled.span`
-  font-size: 12px;
-  color: #2d3748;
-  line-height: 1.4;
-`;
-
-export const Actions = styled.div`
-  display: flex;
-  justify-content: flex-end;
-`;
-
-export const DropdownWrapper = styled.div`
-  position: relative;
-`;
-
-export const ActionButton = styled.button`
-  display: inline-flex;
-  justify-content: space-between;
-  min-width: 170px;
-  max-width: 100%;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 8px 12px;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border: none;
-  border-radius: 4px;
-  background-color: ${semanticColors.branding.border.enabled};
-  color: #fff;
-  cursor: pointer;
-  transition: opacity 0.2s;
-
-  @media (max-width: 768px) {
-    width: 100%;
-  }
-
-  &:hover {
-    opacity: 0.9;
-  }
-`;
-
-export const DropdownMenu = styled.div`
-  position: absolute;
-  right: 0;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  display: grid;
-  gap: 4px;
-  padding: 8px 0;
-  width: 100%;
-  z-index: 10;
-`;
-
-export interface MenuItemProps {
-  icon: React.ReactNode;
-  danger?: boolean;
-  children: React.ReactNode;
-  onClick?: () => void;
-  id?: string;
-}
-
-export const StyledMenuItem = styled.div<{ $danger?: boolean }>`
-  color: ${(props) =>
-    props.$danger ? semanticColors.danger.text.enabled : '#2d3748'};
-  display: inline-grid;
-  grid-auto-flow: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  padding: 8px 12px;
-  font-size: 0.875rem;
-  cursor: pointer;
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-  }
-`;
+/* eslint-disable react-refresh/only-export-components */
+import styled from 'styled-components';
+import { semanticColors } from '../../../styles/tokens';
+import { StatusVariant } from './InsuranceCard.types';
+
+export const PageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 24px;
+`;
+
+export const Title = styled.h2`
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #2d3748;
+`;
+
+export const TabBar = styled.div`
+  display: flex;
+  gap: 12px;
+`;
+
+export const Tab = styled.button<{ active?: boolean }>`
+  padding: 8px 16px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  cursor: pointer;
+  color: ${(props) =>
+    props.active ? semanticColors.branding.surface.enabled : '#718096'};
+  border-color: ${(props) =>
+    props.active ? semanticColors.branding.border.enabled : 'transparent'};
+`;
+
+export const ListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+export const CardContainer = styled.div<{ $variant: StatusVariant }>`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  gap: 8px;
+  padding: 16px;
+  border-top: 4px solid ${(props) => variantColors[props.$variant]};
+  border-radius: 8px;
+  background-color: #fff;
+`;
+
+export const HeaderRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 24px;
+`;
+
+export const BodyRow = styled.div`
+  display: flex;
+  gap: 24px;
+  justify-content: space-between;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 16px;
+  }
+`;
+
+export const variantColors: Record<StatusVariant, string> = {
+  primary: semanticColors.global.border.feedback.info,
+  success: semanticColors.global.border.feedback.success,
+  warning: semanticColors.global.border.feedback.warning,
+  danger: semanticColors.global.border.feedback.error,
+};
+
+export const variantColorsText: Record<StatusVariant, string> = {
+  primary: semanticColors.global.text.onSurface.enabled,
+  success: semanticColors.global.text.feedback.success,
+  warning: semanticColors.global.text.feedback.warning,
+  danger: semanticColors.global.text.feedback.error,
+};
+
+export const Text = styled.span<{ $variant?: StatusVariant }>`
+  font-size: 10px;
+  color: ${(props) =>
+    props.$variant ? variantColors[props.$variant] : variantColorsText.primary};
+`;
+
+export const StatusBadge = styled.span<{ $variant: StatusVariant }>`
+  padding: 4px 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 4px;
+  color: #fff;
+  background-color: ${(props) => variantColors[props.$variant]};
+`;
+export const InfoGroup = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 32px;
+  align-items: start;
+  width: 100%;
+  @media (max-width: 1200px) {
+    gap: 24px;
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+`;
+
+export const InfoRow = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  min-width: 0;
+`;
+
+export const InfoLabel = styled.span`
+  font-size: 12px;
+  color: #4a5568;
+  margin-bottom: 12px;
+`;
+
+export const InfoValue = styled.span`
+  font-size: 14px;
+  font-weight: 900;
+  color: #2d3748;
+`;
+
+export const TruncatedValue = styled(InfoValue)`
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export const ProdValue = styled(InfoValue)`
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export const ProcessValue = styled(InfoValue)`
+  display: inline-block;
+  max-width: 100%;
+`;
+
+export const InfoSubValue = styled.span`
+  font-size: 12px;
+  color: #2d3748;
+  line-height: 1.4;
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export const DropdownWrapper = styled.div`
+  position: relative;
+`;
+
+export const ActionButton = styled.button`
+  display: inline-flex;
+  justify-content: space-between;
+  min-width: 170px;
+  max-width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 4px;
+  background-color: ${semanticColors.branding.border.enabled};
+  color: #fff;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+export const DropdownMenu = styled.div`
+  position: absolute;
+  right: 0;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: grid;
+  gap: 4px;
+  padding: 8px 0;
+  width: 100%;
+  z-index: 10;
+`;
+
+export interface MenuItemProps {
+  icon: React.ReactNode;
+  danger?: boolean;
+  children: React.ReactNode;
+  onClick?: () => void;
+  id?: string;
+}
+
+export const StyledMenuItem = styled.div<{ $danger?: boolean }>`
+  color: ${(props) =>
+    props.$danger ? semanticColors.danger.text.enabled : '#2d3748'};
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+`;

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

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

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

@@ -1,8 +1,7 @@
-import styled from "styled-components";
-
-export const StyledPieChart = styled.div`
-  .recharts-wrapper {
-    margin: auto;
-  }
-`;
-
+import styled from 'styled-components';
+
+export const StyledPieChart = styled.div`
+  .recharts-wrapper {
+    margin: auto;
+  }
+`;

package/src/components/molecules/PieChartComponent/PieChartComponent.tsx

@@ -1,73 +1,70 @@
-import { useMemo } from "react";
-import { PieChart, Pie, Label, Tooltip } from "recharts";
-import { StyledPieChart } from "./PieChartComponent.styles";
-import { PieChartComponentProps } from "./PieChartComponent.types";
-import {
-  semanticColors,
-  typographyTokens,
-} from "../../../styles/tokens";
-
-const PieChartComponent = ({ data }: PieChartComponentProps) => {
-  const totalEmissoes = useMemo(
-    () => data.reduce((acc, curr) => acc + curr.value, 0),
-    [data]
-  );
-
-  return (
-    <StyledPieChart>
-      <PieChart width={155} height={155}>
-        <Tooltip cursor={false} />
-        <Pie
-          data={data}
-          dataKey="value"
-          nameKey="name"
-          innerRadius={52}
-          outerRadius={62}
-          stroke="none"
-          paddingAngle={2}
-        >
-          <Label
-            content={({ viewBox }) => {
-              if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-                const { cx, cy } = viewBox;
-                return (
-                  <text
-                    x={cx}
-                    y={cy}
-                    textAnchor="middle"
-                    dominantBaseline="middle"
-                  >
-                    <tspan
-                      x={cx}
-                      y={(cy ?? 0) - 8}
-                      style={{
-                        fontSize: typographyTokens.fontSizes.displayL,
-                        fontWeight: typographyTokens.fontWeights.bold,
-                        fill: semanticColors.base.text,
-                      }}
-                    >
-                      {totalEmissoes}
-                    </tspan>
-                    <tspan
-                      x={cx}
-                      y={(cy ?? 0) + 16}
-                      style={{
-                        fontSize: typographyTokens.fontSizes.bodyS,
-                        fill: semanticColors.base.text,
-                      }}
-                    >
-                      emissões
-                    </tspan>
-                  </text>
-                );
-              }
-              return null;
-            }}
-          />
-        </Pie>
-      </PieChart>
-    </StyledPieChart>
-  );
-};
-
-export { PieChartComponent };
+import { useMemo } from 'react';
+import { PieChart, Pie, Label, Tooltip } from 'recharts';
+import { StyledPieChart } from './PieChartComponent.styles';
+import { PieChartComponentProps } from './PieChartComponent.types';
+import { semanticColors, typographyTokens } from '../../../styles/tokens';
+
+const PieChartComponent = ({ data }: PieChartComponentProps) => {
+  const totalEmissoes = useMemo(
+    () => data.reduce((acc, curr) => acc + curr.value, 0),
+    [data]
+  );
+
+  return (
+    <StyledPieChart>
+      <PieChart width={155} height={155}>
+        <Tooltip cursor={false} />
+        <Pie
+          data={data}
+          dataKey="value"
+          nameKey="name"
+          innerRadius={52}
+          outerRadius={62}
+          stroke="none"
+          paddingAngle={2}
+        >
+          <Label
+            content={({ viewBox }) => {
+              if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                const { cx, cy } = viewBox;
+                return (
+                  <text
+                    x={cx}
+                    y={cy}
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                  >
+                    <tspan
+                      x={cx}
+                      y={(cy ?? 0) - 8}
+                      style={{
+                        fontSize: typographyTokens.fontSizes.displayL,
+                        fontWeight: typographyTokens.fontWeights.bold,
+                        fill: semanticColors.base.text,
+                      }}
+                    >
+                      {totalEmissoes}
+                    </tspan>
+                    <tspan
+                      x={cx}
+                      y={(cy ?? 0) + 16}
+                      style={{
+                        fontSize: typographyTokens.fontSizes.bodyS,
+                        fill: semanticColors.base.text,
+                      }}
+                    >
+                      emissões
+                    </tspan>
+                  </text>
+                );
+              }
+              return null;
+            }}
+          />
+        </Pie>
+      </PieChart>
+    </StyledPieChart>
+  );
+};
+
+export { PieChartComponent };

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

@@ -1,11 +1,11 @@
-export interface PieChartData {
-  name: string;
-  value: number;
-  fill: string;
-
- [key: string]: string | number;
-}
-
-export interface PieChartComponentProps {
-  data: PieChartData[];
-}
+export interface PieChartData {
+  name: string;
+  value: number;
+  fill: string;
+
+  [key: string]: string | number;
+}
+
+export interface PieChartComponentProps {
+  data: PieChartData[];
+}

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

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