fix: linting

Author: Lasserich

src/components/BentoGrid/BentoGrid.tsx

@@ -16,19 +16,13 @@ export interface BentoGridProps {
   className?: string;
 }
 
-export const BentoCard: React.FC<BentoCardProps> = ({ 
-  size, 
-  children, 
-  className = '', 
-  gridColumn,
-  gridRow 
-}) => {
+export const BentoCard: React.FC<BentoCardProps> = ({ size, children, className = '', gridColumn, gridRow }) => {
   const cardClass = `${styles.bentoCard} ${styles[`card-${size}`]} ${className}`;
-  
+
   const style: React.CSSProperties = {};
   if (gridColumn) style.gridColumn = gridColumn;
   if (gridRow) style.gridRow = gridRow;
-  
+
   return (
     <div className={cardClass} style={style}>
       {children}
@@ -37,9 +31,5 @@ export const BentoCard: React.FC<BentoCardProps> = ({
 };
 
 export const BentoGrid: React.FC<BentoGridProps> = ({ children, className = '' }) => {
-  return (
-    <div className={`${styles.bentoGrid} ${className}`}>
-      {children}
-    </div>
-  );
+  return <div className={`${styles.bentoGrid} ${className}`}>{children}</div>;
 };

src/components/BentoGrid/ComponentCard/ComponentCard.tsx

@@ -6,13 +6,15 @@ import { MultiPercentageBar } from '../MultiPercentageBar/MultiPercentageBar';
 import styles from './ComponentCard.module.css';
 import { GenericHintProps } from '../../../types/types';
 
-export const ComponentCard: React.FC<GenericHintProps & { 
-  onClick?: () => void; 
-  size?: 'small' | 'medium' | 'large' | 'extra-large';
-  secondarySegments?: Array<{ percentage: number; color: string; label: string }>;
-  secondaryLabel?: string;
-  expanded?: boolean;
-}> = ({
+export const ComponentCard: React.FC<
+  GenericHintProps & {
+    onClick?: () => void;
+    size?: 'small' | 'medium' | 'large' | 'extra-large';
+    secondarySegments?: { percentage: number; color: string; label: string }[];
+    secondaryLabel?: string;
+    expanded?: boolean;
+  }
+> = ({
   enabled = false,
   version,
   allItems = [],
@@ -23,7 +25,7 @@ export const ComponentCard: React.FC<GenericHintProps & {
   size = 'medium',
   secondarySegments,
   secondaryLabel = 'Secondary Metric',
-  expanded = false, 
+  expanded = false,
 }) => {
   const { t } = useTranslation();
   const hintState = config.calculateSegments(allItems, isLoading || false, error, enabled, t);
@@ -60,9 +62,9 @@ export const ComponentCard: React.FC<GenericHintProps & {
         {/* Expand/Collapse button */}
         {onClick && enabled && (
           <Button
-            icon={expanded ? "sap-icon://collapse" : "sap-icon://expand"}
+            icon={expanded ? 'sap-icon://collapse' : 'sap-icon://expand'}
             design="Transparent"
-            tooltip={expanded ? "Collapse to overview" : "Expand details"}
+            tooltip={expanded ? 'Collapse to overview' : 'Expand details'}
             style={{ zIndex: 1 }}
             className={size === 'small' ? styles.expandButtonSmall : styles.expandButton}
             onClick={(e) => {
@@ -72,33 +74,31 @@ export const ComponentCard: React.FC<GenericHintProps & {
           />
         )}
 
-        <div className={
-          (size === 'large' || size === 'extra-large') ? styles.contentContainerMultiple : styles.contentContainer
-        }>
-          <div className={
-            size === 'small' ? styles.progressBarContainerSmall :
-            size === 'medium' ? styles.progressBarContainerMedium :
-            styles.progressBarContainerLarge
-          }>
+        <div
+          className={
+            size === 'large' || size === 'extra-large' ? styles.contentContainerMultiple : styles.contentContainer
+          }
+        >
+          <div
+            className={
+              size === 'small'
+                ? styles.progressBarContainerSmall
+                : size === 'medium'
+                  ? styles.progressBarContainerMedium
+                  : styles.progressBarContainerLarge
+            }
+          >
             <MultiPercentageBar
               segments={hintState.segments}
               className={styles.progressBar}
               showOnlyNonZero={hintState.showOnlyNonZero ?? true}
               isHealthy={hintState.isHealthy}
-              barWidth={
-                size === 'small' ? '80%' :
-                size === 'medium' ? '85%' :
-                '90%'
-              }
+              barWidth={size === 'small' ? '80%' : size === 'medium' ? '85%' : '90%'}
               barHeight={size === 'small' ? '8px' : '12px'}
-              barMaxWidth={
-                size === 'small' ? '400px' :
-                size === 'medium' ? '600px' :
-                'none'
-              }
+              barMaxWidth={size === 'small' ? '400px' : size === 'medium' ? '600px' : 'none'}
               labelConfig={{
                 position: 'above',
-                displayMode: 'primary', 
+                displayMode: 'primary',
                 showPercentage: hintState.showPercentage,
                 showCount: hintState.label?.includes('Roles'),
                 primaryLabelText: hintState.label,
@@ -113,7 +113,7 @@ export const ComponentCard: React.FC<GenericHintProps & {
               showSegmentLabels={hintState.label?.includes('Roles')}
               minSegmentWidthForLabel={12}
             />
-            
+
             {/* Secondary chart for large and extra-large cards */}
             {(size === 'large' || size === 'extra-large') && secondarySegments && (
               <MultiPercentageBar

src/components/BentoGrid/ComponentCard/componentConfigs.ts

@@ -5,7 +5,6 @@ import {
   calculateGitOpsSegments,
   calculateMembersSegments,
   calculateVaultSegments,
-
 } from '../../../utils/componentCardCalculations';
 
 export const useCrossplaneHintConfig = (): GenericHintConfig => {

src/components/BentoGrid/GraphCard/GraphCard.tsx

@@ -9,11 +9,7 @@ export interface GraphCardProps {
   colorBy?: ColorBy;
 }
 
-export const GraphCard: React.FC<GraphCardProps> = ({ 
-  className = '',
-  colorBy = 'source'
-}) => {
-
+export const GraphCard: React.FC<GraphCardProps> = ({ className = '', colorBy = 'source' }) => {
   return (
     <div className={`${styles.container} ${className}`}>
       <div className={styles.simpleWrapper}>

src/components/BentoGrid/MultiPercentageBar/MultiPercentageBar.spec.tsx

@@ -117,11 +117,8 @@ describe('MultiPercentageBar utilities', () => {
 
   describe('color configuration utilities', () => {
     // Helper function to apply color overrides (simulating component logic)
-    const applyColorOverrides = (
-      segments: PercentageSegment[], 
-      overrides: Record<string, string>
-    ) => {
-      return segments.map(segment => ({
+    const applyColorOverrides = (segments: PercentageSegment[], overrides: Record<string, string>) => {
+      return segments.map((segment) => ({
         ...segment,
         color: overrides[segment.label] || segment.color,
       }));
@@ -134,8 +131,8 @@ describe('MultiPercentageBar utilities', () => {
       ];
 
       const overrides = {
-        'Healthy': '#00ff00',
-        'Unhealthy': '#ff0000',
+        Healthy: '#00ff00',
+        Unhealthy: '#ff0000',
       };
 
       const result = applyColorOverrides(segments, overrides);
@@ -151,7 +148,7 @@ describe('MultiPercentageBar utilities', () => {
       ];
 
       const overrides = {
-        'Different': '#00ff00',
+        Different: '#00ff00',
       };
 
       const result = applyColorOverrides(segments, overrides);
@@ -163,19 +160,12 @@ describe('MultiPercentageBar utilities', () => {
 
   describe('label configuration utilities', () => {
     // Helper function to determine if primary label should be hidden
-    const shouldHidePrimaryLabel = (
-      segments: PercentageSegment[], 
-      hideWhenSingleFull: boolean
-    ) => {
-      return hideWhenSingleFull && 
-        segments.length === 1 && 
-        segments[0]?.percentage === 100;
+    const shouldHidePrimaryLabel = (segments: PercentageSegment[], hideWhenSingleFull: boolean) => {
+      return hideWhenSingleFull && segments.length === 1 && segments[0]?.percentage === 100;
     };
 
     it('hides primary label when single segment is 100%', () => {
-      const segments: PercentageSegment[] = [
-        { percentage: 100, color: '#28a745', label: 'Complete' },
-      ];
+      const segments: PercentageSegment[] = [{ percentage: 100, color: '#28a745', label: 'Complete' }];
 
       expect(shouldHidePrimaryLabel(segments, true)).toBe(true);
       expect(shouldHidePrimaryLabel(segments, false)).toBe(false);
@@ -187,9 +177,7 @@ describe('MultiPercentageBar utilities', () => {
         { percentage: 50, color: '#d22020ff', label: 'Unhealthy' },
       ];
 
-      const partialSegment: PercentageSegment[] = [
-        { percentage: 80, color: '#28a745', label: 'Partial' },
-      ];
+      const partialSegment: PercentageSegment[] = [{ percentage: 80, color: '#28a745', label: 'Partial' }];
 
       expect(shouldHidePrimaryLabel(multipleSegments, true)).toBe(false);
       expect(shouldHidePrimaryLabel(partialSegment, true)).toBe(false);