kyd-shared-badge 0.3.17 → 0.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.17",
+  "version": "0.3.18",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/colors.ts

@@ -64,4 +64,37 @@ const red3 = '#F5B7B3'
 const red4 = '#FADBDA'
 const red5 = '#FDF0EF'
 
-export { red1, red2, red3, red4, red5 }
+export { red1, red2, red3, red4, red5 }
+
+
+
+export function clampPercent(value?: number): number {
+    const n = Math.round(Number(value ?? 0))
+    if (Number.isNaN(n)) return 0
+    return Math.max(0, Math.min(100, n))
+  }
+  
+  export function scoreToColorHex(score: number): string {
+    const pct = clampPercent(score)
+    if (pct <= 33) return red
+    if (pct <= 66) return yellow
+    return green
+  }
+  
+  export function scoreToCssVar(score: number): string {
+    const pct = clampPercent(score)
+    if (pct <= 33) return `var(--status-negative, ${red})`
+    if (pct <= 66) return `var(--status-neutral, ${yellow})`
+    return `var(--status-positive, ${green})`
+  }
+  
+  export function hexToRgba(hex: string, alpha: number): string {
+    const clean = hex.replace('#', '')
+    const r = parseInt(clean.substring(0, 2), 16)
+    const g = parseInt(clean.substring(2, 4), 16)
+    const b = parseInt(clean.substring(4, 6), 16)
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  }
+  
+  
+  

package/src/components/GaugeCard.tsx

@@ -3,23 +3,11 @@
 import React from 'react';
 import BusinessRuleLink from './BusinessRuleLink';
 import { FiInfo } from 'react-icons/fi';
-import { green, yellow, red } from '../colors';
+import { hexToRgba, scoreToColorHex, scoreToCssVar, clampPercent } from '../colors';
 
 type TopMover = { label?: string; uid?: string };
 
-const hexToRgba = (hex: string, alpha: number) => {
-  const clean = hex.replace('#', '');
-  const r = parseInt(clean.substring(0, 2), 16);
-  const g = parseInt(clean.substring(2, 4), 16);
-  const b = parseInt(clean.substring(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};
-
-const pickTint = (score: number) => {
-  if (score >= 75) return green;
-  if (score >= 50) return yellow;
-  return red;
-};
+// color helpers moved to ../utils/color
 
 export default function GaugeCard({
   title,
@@ -38,7 +26,7 @@ export default function GaugeCard({
   topMoversTitle?: string;
   tooltipText?: string;
 }) {
-  const pct = Math.max(0, Math.min(100, Math.round(Number(percent ?? 0))));
+  const pct = clampPercent(percent);
   const displayLabel = label || '';
   // Use a fixed internal coordinate system and scale the SVG to container for responsiveness
   const size = 280;
@@ -47,13 +35,8 @@ export default function GaugeCard({
   const circumference = Math.PI * radius;
   const progress = pct / 100;
   const dash = circumference * progress;
-  const progressColor =
-    pct <= 33
-      ? `var(--status-negative, ${red})`
-      : pct <= 66
-      ? `var(--status-neutral, ${yellow})`
-      : `var(--status-positive, ${green})`;
-  const headerTint = hexToRgba(pickTint(pct), 0.06);
+  const progressColor = scoreToCssVar(pct);
+  const headerTint = hexToRgba(scoreToColorHex(pct), 0.06);
 
   return (
     <div

package/src/components/ReportHeader.tsx

@@ -45,6 +45,8 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
   // Use the dynamic image if available, otherwise fall back to the score-based one.
   const finalBadgeImageUrl = badgeImageUrl || getBadgeImageUrl(score || 0);
   const tint = hexToRgba(pickTint(score || 0), 0.06);
+  const matchScore = typeof enterpriseMatch?.score === 'number' ? enterpriseMatch.score : undefined;
+  const matchTint = matchScore !== undefined ? hexToRgba(pickTint(matchScore), 0.06) : undefined;
   
   const formattedDate = updatedAt ? formatLocalDate(updatedAt, {
     year: 'numeric',
@@ -114,7 +116,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
                     </span>
                   </div>
                   {typeof enterpriseMatch?.score === 'number' && (
-                    <span className="px-2 py-1 rounded text-xs font-semibold" style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>
+                    <span className="px-2 py-1 rounded text-xs font-semibold" style={{ backgroundColor: 'var(--content-card-background)', backgroundImage: matchTint ? `linear-gradient(${matchTint}, ${matchTint})` : undefined, border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>
                       {Math.round(enterpriseMatch.score)}%
                     </span>
                   )}

package/src/components/RiskCard.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import BusinessRuleLink from './BusinessRuleLink';
 import { FiInfo } from 'react-icons/fi';
-import { green, yellow, red } from '../colors';
+import { clampPercent, hexToRgba, scoreToColorHex } from '../colors';
 
 type TopMover = { label?: string; uid?: string };
 
@@ -24,32 +24,15 @@ export default function RiskCard({
   topMoversTitle?: string;
   tooltipText?: string;
 }) {
-  const pctGood = Math.max(0, Math.min(100, Math.round(Number(percentGood ?? 0))));
+  const pctGood = clampPercent(percentGood);
   const displayLabel = label || '';
 
-  const hexToRgba = (hex: string, alpha: number) => {
-    const clean = hex.replace('#', '');
-    const r = parseInt(clean.substring(0, 2), 16);
-    const g = parseInt(clean.substring(2, 4), 16);
-    const b = parseInt(clean.substring(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-  };
+  // Background tint uses same thresholds as GaugeCard via scoreToColorHex
 
-  const pickTint = (score: number) => {
-    if (score >= 75) return green;
-    if (score >= 50) return yellow;
-    return red;
-  };
+  // Foreground bar color uses same thresholds as GaugeCard based on overall score
+  const activeColor = scoreToColorHex(pctGood);
 
-  // color bands by bar position (tallest -> lowest)
-  // indices 4 and 3 (highest bars) => red, index 2 => yellow, indices 1 and 0 => green
-  const colorForIndex = (index: number) => {
-    if (index >= 3) return red;
-    if (index === 2) return yellow;
-    return green;
-  };
-
-  const headerTint = hexToRgba(pickTint(pctGood), 0.06);
+  const headerTint = hexToRgba(scoreToColorHex(pctGood), 0.06);
 
   // bar heights ascending representation
   const bars = [40, 60, 85, 110, 140];
@@ -101,7 +84,7 @@ export default function RiskCard({
               style={{
                 width: 36,
                 height: h,
-                backgroundColor: i === activeIndex ? colorForIndex(i) : 'var(--icon-button-secondary)',
+                backgroundColor: i === activeIndex ? activeColor : 'var(--icon-button-secondary)',
                 borderRadius: 4,
               }}
             />

package/src/utils/date.ts

@@ -1,68 +0,0 @@
-export type DateLike = string | number | Date | null | undefined;
-
-const hasTimezoneDesignator = (value: string): boolean => {
-  return /[zZ]$/.test(value) || /[+-]\d{2}:?\d{2}$/.test(value);
-};
-
-const truncateExcessFraction = (value: string): string => {
-  // Keep at most 3 fractional digits for milliseconds
-  return value.replace(/(\.\d{3})\d+/, '$1');
-};
-
-export const parseUtcDate = (input: DateLike): Date => {
-  if (input == null) return new Date(Number.NaN);
-  if (input instanceof Date) return new Date(input.getTime());
-  if (typeof input === 'number') {
-    const millis = input < 1e12 ? input * 1000 : input;
-    return new Date(millis);
-  }
-
-  const raw = String(input).trim();
-  if (!raw) return new Date(Number.NaN);
-
-  // Numeric strings (epoch seconds or millis)
-  if (/^\d{10}$/.test(raw)) return new Date(Number(raw) * 1000);
-  if (/^\d{13}$/.test(raw)) return new Date(Number(raw));
-
-  // Already has timezone; trust the browser parser
-  if (hasTimezoneDesignator(raw)) return new Date(raw);
-
-  // Normalize common forms: "YYYY-MM-DD HH:MM:SS[.fff...]" -> ISO-like
-  let norm = raw.replace(' ', 'T');
-  norm = truncateExcessFraction(norm);
-
-  // Date-only string -> treat as UTC midnight
-  if (/^\d{4}-\d{2}-\d{2}$/.test(norm)) {
-    return new Date(`${norm}T00:00:00Z`);
-  }
-
-  // If ISO-like without timezone, explicitly mark as UTC
-  if (/^\d{4}-\d{2}-\d{2}T/.test(norm) && !hasTimezoneDesignator(norm)) {
-    return new Date(`${norm}Z`);
-  }
-
-  // Fallback to native parsing
-  return new Date(norm);
-};
-
-export const formatLocalDate = (value: DateLike, options?: Intl.DateTimeFormatOptions): string => {
-  const d = value instanceof Date ? value : parseUtcDate(value);
-  if (Number.isNaN(d.getTime())) return 'N/A';
-  return d.toLocaleDateString(undefined, options);
-};
-
-export const formatLocalDateTime = (value: DateLike, options?: Intl.DateTimeFormatOptions): string => {
-  const d = value instanceof Date ? value : parseUtcDate(value);
-  if (Number.isNaN(d.getTime())) return 'N/A';
-  const base: Intl.DateTimeFormatOptions = {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-    timeZoneName: 'short',
-  };
-  return d.toLocaleString(undefined, { ...base, ...(options || {}) });
-};
-
-