feat: improve icon name formatting (#2693)

- feat: improves icon name formatting by preserving correct icon names.
Correct names such as `ChevronRight` where formatted wrongly
- chore: update lucide-react to include latest icons 





<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Improved the Icon component’s name formatting so icons resolve correctly
from kebab-case, lowercase, PascalCase, uppercase, and mixed-case
inputs. Updated lucide-react to the latest version for new icons.

- **Bug Fixes**
- Updated formatIconName to preserve PascalCase, normalize kebab-case to
PascalCase, and clean up all-uppercase and mixed-case names.
- Added tests for kebab-case, lowercase, PascalCase, uppercase,
mixed-case, invalid names (warn + null), and prop forwarding.

- **Dependencies**
  - Bumped lucide-react from 0.468.0 to 0.555.0.

<sup>Written for commit 0224c5e.
Summary will update automatically on new commits.</sup>

<!-- End of auto-generated description by cubic. -->

---------

Co-authored-by: Josh Hayes <35790761+hayescode@users.noreply.github.com>

Author: eiseleMichael

frontend/package.json

@@ -43,7 +43,7 @@
     "highlight.js": "^11.9.0",
     "i18next": "^23.7.16",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.468.0",
+    "lucide-react": "^0.555.0",
     "plotly.js": "^2.27.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

frontend/pnpm-lock.yaml

@@ -8,12 +8,21 @@ interface Props {
 }
 
 const Icon = ({ name, ...props }: Props) => {
-  // Convert the name to proper case (e.g., "plus" -> "Plus", "chevron-right" -> "ChevronRight")
-  const formatIconName = (str: string): string => {
-    return str
-      .split('-')
-      .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
-      .join('');
+  // Convert the name to proper case
+  const formatIconName = (name: string): string => {
+    //aggressively lowercase the parts to clean up inputs like "ChEvRoN-rIgHt"
+    if (name.includes('-')) {
+      return name
+        .split('-')
+        .map(
+          (part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()
+        )
+        .join('');
+    }
+    if (name === name.toUpperCase()) {
+      return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
+    }
+    return name.charAt(0).toUpperCase() + name.slice(1);
   };
 
   // Try to get the icon component using the formatted name

frontend/src/components/Icon.tsx

@@ -0,0 +1,53 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import Icon from '@/components/Icon';
+
+describe('Icon component', () => {
+  it('renders icon with kebab-case name', () => {
+    const { container } = render(<Icon name="chevron-right" />);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('renders icon with lowercase name', () => {
+    const { container } = render(<Icon name="plus" />);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('renders icon with PascalCase name', () => {
+    const { container } = render(<Icon name="ChevronRight" />);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('renders icon with all uppercase name', () => {
+    const { container } = render(<Icon name="PLUS" />);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('renders icon with mixed case name', () => {
+    const { container } = render(<Icon name="ChEvRoN-rIgHt" />);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('returns null and warns for invalid icon name', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const { container } = render(<Icon name="invalid-icon-name" />);
+
+    expect(container.firstChild).toBeNull();
+    expect(consoleSpy).toHaveBeenCalledWith(
+      'Icon "invalid-icon-name" not found in Lucide icons'
+    );
+
+    consoleSpy.mockRestore();
+  });
+
+  it('passes props to the icon component', () => {
+    const { container } = render(
+      <Icon name="home" size={24} color="red" className="test-class" />
+    );
+    const svg = container.querySelector('svg');
+
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveClass('test-class');
+  });
+});