@tsiky/components-r19 1.0.0 → 1.2.0

package/src/components/MetricsPanel/renderers/CompactRenderer.tsx

@@ -1,125 +1,148 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* CompactRenderer.tsx */
-import React from 'react';
-import { hexToRgba as utilHexToRgba } from '../tools/colorUtils';
-import type { MetricsItem as ItemType } from '../tools/MetricsPanelTypes';
-
-const hexToRgba = (c: string | undefined | null, a = 1) => {
-  try {
-    return utilHexToRgba(c as any, a);
-  } catch {
-    return `rgba(124, 58, 237, ${a})`;
-  }
-};
-
-const CompactRenderer = (item: ItemType) => (
-  <div
-    style={{
-      display: 'grid',
-      gridTemplateRows: 'auto 1fr',
-      width: '100%',
-      gap: 6,
-      alignItems: 'center',
-      boxSizing: 'border-box',
-      // allow the content to shrink nicely
-      minWidth: 0,
-    }}
-  >
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between-left',
-        alignItems: 'baseline',
-        gap: 8,
-        width: '100%',
-      }}
-    >
-      <div
-        style={{
-          fontWeight: 700,
-          fontSize: 'clamp(12px, 1.05vw, 13px)',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          minWidth: 0,
-        }}
-      >
-        {item.label}
-      </div>
-      {item.subLabel ? (
-        <div
-          style={{
-            fontSize: 'clamp(11px, 0.9vw, 12px)',
-            fontWeight: 600,
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {item.subLabel}
-        </div>
-      ) : null}
-    </div>
-
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        gap: 12,
-        width: '100%',
-      }}
-    >
-      <div
-        style={{
-          fontWeight: 900,
-          fontSize: 'clamp(18px, 2.0vw, 20px)',
-          color: (item as any).valueColor,
-          lineHeight: 1,
-          minWidth: 0,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        {item.value}
-      </div>
-
-      {item.badge ? (
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '4px 6px',
-            borderRadius: 8,
-            backgroundColor: (item as any).badge.bg
-              ? (item as any).badge.bg
-              : hexToRgba('#7c3aed', 0.08),
-            border: `1px solid ${
-              (item as any).badge.bg ? (item as any).badge.bg : hexToRgba('#7c3aed', 0.12)
-            }`,
-            color: (item as any).badge.textColor || '#0f172a',
-            fontWeight: 700,
-            fontSize: 'clamp(10px, 1vw, 11px)',
-            maxWidth: '40%',
-            minWidth: 48,
-            textAlign: 'center',
-            boxSizing: 'border-box',
-            overflow: 'hidden',
-          }}
-        >
-          <div style={{ fontSize: 'clamp(10px, 0.9vw, 11px)', fontWeight: 800, lineHeight: 1 }}>
-            {(item as any).badge.text}
-          </div>
-          {(item as any).badge.subText ? (
-            <div style={{ fontSize: 'clamp(9px, 0.8vw, 10px)', marginTop: 2, fontWeight: 600 }}>
-              {(item as any).badge.subText}
-            </div>
-          ) : null}
-        </div>
-      ) : null}
-    </div>
-  </div>
-);
-
-export default CompactRenderer;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { hexToRgba as utilHexToRgba } from '../tools/colorUtils';
+import type { MetricsItem as ItemType } from '../tools/MetricsPanelTypes';
+
+const hexToRgba = (c: string | undefined | null, a = 1) => {
+  try {
+    return utilHexToRgba(c as any, a);
+  } catch {
+    return `rgba(124, 58, 237, ${a})`;
+  }
+};
+
+const CompactRenderer = (item: ItemType) => (
+  <div
+    style={{
+      display: 'grid',
+      gridTemplateRows: 'auto 1fr',
+      width: '100%',
+      gap: 8,
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      minWidth: 0,
+    }}
+  >
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between-left',
+        alignItems: 'baseline',
+        gap: 10,
+        width: '100%',
+      }}
+    >
+      <div
+        style={{
+          fontWeight: 700,
+          fontSize: 'clamp(14px, 1.2vw, 16px)',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          minWidth: 0,
+        }}
+      >
+        {item.label}
+      </div>
+      {item.subLabel ? (
+        <div
+          style={{
+            fontSize: 'clamp(13px, 1.1vw, 15px)',
+            fontWeight: 600,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {item.subLabel}
+        </div>
+      ) : null}
+    </div>
+
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 15,
+        width: '100%',
+      }}
+    >
+      <div
+        style={{
+          fontWeight: 900,
+          fontSize: 'clamp(16px, 1.6vw, 20px)',
+          color: (item as any).valueColor,
+          lineHeight: 1,
+          minWidth: 0,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {item.value}
+      </div>
+
+      {item.badge ? (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '8px 12px',
+            borderRadius: 10,
+            backgroundColor: (item as any).badge.bg
+              ? (item as any).badge.bg
+              : hexToRgba('#7c3aed', 0.08),
+            border: `1px solid ${
+              (item as any).badge.bg ? (item as any).badge.bg : hexToRgba('#7c3aed', 0.12)
+            }`,
+            color: (item as any).badge.textColor || '#0f172a',
+            fontWeight: 700,
+            fontSize: 'clamp(12px, 1.2vw, 14px)',
+            width: '120px',
+            height: '52px',
+            textAlign: 'center',
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+            lineHeight: 1.2,
+            flexShrink: 0,
+          }}
+        >
+          <div
+            style={{
+              fontSize: 14,
+              fontWeight: 800,
+              lineHeight: 1.2,
+              letterSpacing: '0.02em',
+              width: '100%',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {(item as any).badge.text}
+          </div>
+          {(item as any).badge.subText ? (
+            <div
+              style={{
+                fontSize: 13,
+                marginTop: 4,
+                fontWeight: 700,
+                letterSpacing: '0.01em',
+                width: '100%',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {(item as any).badge.subText}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  </div>
+);
+
+export default CompactRenderer;

package/src/components/NavBar/NavBar.tsx

@@ -26,7 +26,7 @@ export const NavBar: React.FC<NavBarProps> = ({
     const checkNavSize = () => {
       if (navRef.current && navRef.current.parentElement) {
         const parentWidth = navRef.current.parentNode?.parentElement?.offsetWidth || 0;
-        setIsMobile(parentWidth * 0.6 < navRef.current.offsetWidth);
+        setIsMobile(parentWidth * 0.2 < navRef.current.offsetWidth);
       }
     };
 

package/src/components/NavItem/NavItem.tsx

@@ -1,58 +1,58 @@
-import React from 'react';
-import './NavItem.css';
-import { useNavigation } from '../NavBar';
-
-export type NavItemType = {
-  id: string;
-  label: string;
-  isActive?: boolean;
-  onClick?: (id: string) => void;
-  href?: string;
-  highlightColor?: string;
-  moduleKey?: string;
-};
-
-export const NavItem: React.FC<NavItemType> = ({
-  id,
-  label,
-  isActive = false,
-  onClick,
-  href,
-  highlightColor = '#008CBA',
-  moduleKey = '',
-  ...props
-}) => {
-  // Determine which element to render
-  const { setActiveNav } = useNavigation();
-  const handleClick = () => {
-    setActiveNav(id); // ✅ met à jour la nav active
-    onClick?.(id); // ✅ appelle le callback externe si défini
-  };
-  if (href) {
-    // Render as anchor tag if href is provided and no onClick handler
-    return (
-      <a
-        href={href}
-        className={`nav-item ${isActive ? 'active' : ''}`}
-        style={isActive ? { backgroundColor: highlightColor, color: '#fff' } : {}}
-        onClick={handleClick}
-        {...props}
-      >
-        {label}
-      </a>
-    );
-  } else {
-    return (
-      <div
-        className={`nav-item ${isActive ? 'active' : ''}`}
-        style={isActive ? { backgroundColor: highlightColor, color: '#fff' } : {}}
-        onClick={handleClick}
-        role={onClick ? 'button' : 'presentation'}
-        tabIndex={onClick ? 0 : -1}
-        {...props}
-      >
-        {label}
-      </div>
-    );
-  }
-};
+import React from 'react';
+import './NavItem.css';
+import { useNavigation } from '../NavBar';
+
+export type NavItemType = {
+  id: string;
+  label: string;
+  isActive?: boolean;
+  onClick?: (id: string) => void;
+  href?: string;
+  highlightColor?: string;
+  moduleKey?: string;
+};
+
+export const NavItem: React.FC<NavItemType> = ({
+  id,
+  label,
+  isActive = false,
+  onClick,
+  href,
+  highlightColor = '#008CBA',
+  moduleKey = '',
+  ...props
+}) => {
+  // Determine which element to render
+  const { setActiveNav } = useNavigation();
+  const handleClick = () => {
+    setActiveNav(id); // ✅ met à jour la nav active
+    onClick?.(id); // ✅ appelle le callback externe si défini
+  };
+  if (href) {
+    // Render as anchor tag if href is provided and no onClick handler
+    return (
+      <a
+        href={href}
+        className={`nav-item ${isActive ? 'active' : ''}`}
+        style={isActive ? { backgroundColor: highlightColor, color: '#fff' } : {}}
+        onClick={handleClick}
+        {...props}
+      >
+        {label}
+      </a>
+    );
+  } else {
+    return (
+      <div
+        className={`nav-item ${isActive ? 'active' : ''}`}
+        style={isActive ? { backgroundColor: highlightColor, color: '#fff' } : {}}
+        onClick={handleClick}
+        role={onClick ? 'button' : 'presentation'}
+        tabIndex={onClick ? 0 : -1}
+        {...props}
+      >
+        {label}
+      </div>
+    );
+  }
+};