@tsiky/components-r19 1.0.0 → 1.1.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(22px, 2.5vw, 26px)',
+          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/SelectFilter/SelectFilter.module.css

@@ -0,0 +1,249 @@
+.container {
+  position: relative;
+  width: 100%;
+}
+
+.selectButton {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  text-align: left;
+  border-radius: 0.5rem;
+  border: 1px solid #d1d5db;
+  background-color: white;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  outline: none;
+}
+
+.selectButton:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5);
+}
+
+.selectButton:hover:not(.disabled) {
+  border-color: #9ca3af;
+}
+
+.disabled {
+  opacity: 0.5;
+  background-color: #f9fafb;
+  cursor: not-allowed;
+}
+
+.error {
+  border-color: #ef4444;
+}
+
+.error:focus {
+  border-color: #ef4444;
+  box-shadow: 0 0 0 2px rgb(239 68 68 / 0.5);
+}
+
+.default {
+  border-color: #d1d5db;
+  background-color: white;
+}
+
+.outline {
+  border-width: 2px;
+  border-color: #9ca3af;
+  background-color: transparent;
+}
+
+.outline:focus {
+  border-color: #2563eb;
+}
+
+.filled {
+  border: none;
+  background-color: #f3f4f6;
+}
+
+.filled:focus {
+  background-color: white;
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5);
+}
+
+.sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+}
+
+.md {
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+}
+
+.lg {
+  padding: 0.75rem 1rem;
+  font-size: 1.125rem;
+}
+
+.buttonContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+
+.placeholder {
+  color: #6b7280;
+}
+
+.iconsContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+}
+
+.loadingSpinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid #3b82f6;
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.arrowIcon {
+  width: 1rem;
+  height: 1rem;
+  color: #6b7280;
+  transition: transform 0.2s ease-in-out;
+  flex-shrink: 0;
+}
+
+.arrowIconOpen {
+  transform: rotate(180deg);
+}
+
+.dropdown {
+  position: absolute;
+  z-index: 50;
+  width: 100%;
+  margin-top: 0.25rem;
+  background-color: white;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  max-height: 15rem;
+  overflow: hidden;
+}
+
+.searchContainer {
+  padding: 0.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.searchInput {
+  width: 90%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  outline: none;
+}
+
+.searchInput:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5);
+}
+
+.optionsList {
+  overflow-y: auto;
+  max-height: 12rem;
+  padding: 0.25rem 0;
+}
+
+.noResults {
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+  text-align: center;
+}
+
+.option {
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease-in-out,
+    color 0.15s ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.option:hover {
+  background-color: #f9fafb;
+}
+
+.optionHighlighted {
+  background-color: #eff6ff;
+  color: #1d4ed8;
+}
+
+.optionSelected {
+  background-color: #dbeafe;
+  color: #1e40af;
+  font-weight: 500;
+}
+
+.optionDisabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.optionLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+
+.checkIcon {
+  width: 1rem;
+  height: 1rem;
+  color: #2563eb;
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+}
+
+.widthFull {
+  width: 100%;
+}
+
+.width64 {
+  width: 16rem;
+}
+
+.width80 {
+  width: 20rem;
+}
+
+.width96 {
+  width: 24rem;
+}