kyd-shared-badge 0.3.59 → 0.3.61

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -10,15 +10,11 @@ import BusinessRuleLink from './components/BusinessRuleLink';
 import IpRiskAnalysisDisplay from './components/IpRiskAnalysisDisplay';
 import GraphInsights from './components/GraphInsights';
 import ConnectedPlatforms from './components/ConnectedPlatforms';
-import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
-import { SiCredly, SiFiverr } from 'react-icons/si';
-import GaugeCard from './components/GaugeCard';
-import RiskCard from './components/RiskCard';
 import AiIcon from './components/icons/ai';
 import CodeIcon from './components/icons/code';
 import RiskIcon from './components/icons/risk';
 
-import { yellow, green } from './colors';
+import { yellow } from './colors';
 import Skills from './components/Skills';
 import CategoryBars from './components/CategoryBars';
 import SkillsAppendixTable from './components/SkillsAppendixTable';
@@ -31,8 +27,7 @@ import SummaryCards from './components/SummaryCards';
 import TopContributingFactors from './components/TopContributingFactors';
 import AiUsageBody from './components/AiUsageBody';
 import SanctionsMatches from './components/SanctionsMatches';
-import AppendixContent from './components/AppendixContent';
-import { ProviderIcon, getProviderDisplayName, getProviderTooltipCopy, getCategoryTooltipCopy, barColor } from './utils/provider';
+import { getCategoryTooltipCopy, barColor } from './utils/provider';
 import { matchLabelToColor } from './colors';
 import { useEffect, useMemo, useState } from 'react';
 type ChatWidgetProps = Partial<{

package/src/components/BusinessRuleLink.tsx

@@ -18,8 +18,9 @@ const BusinessRuleLink = ({ uid, label, className }: { uid?: string; label: stri
       {tooltip && (
         <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-72">
           <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6, fontSize: 12 }}>
-            <div style={{ fontWeight: 600, color: 'var(--text-main)' }}>{meta?.category || ''}</div>
-            <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 4 }}>{meta?.likert_label || ''}</div>
+            <div style={{ fontWeight: 600, color: 'var(--text-secondary)' }}>
+              <span className='font-semibold'>{meta?.category || ''} | </span> <span>{meta?.likert_label || ''}</span>
+            </div>
           </div>
         </div>
       )}

package/src/components/ConnectedPlatforms.tsx

@@ -2,8 +2,7 @@
 
 import React, { useEffect } from 'react';
 import { formatLocalDate } from '../utils/date';
-import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
-import { SiCredly, SiFiverr } from 'react-icons/si';
+import { ProviderIcon } from '../utils/provider';
 
 type ConnectedAccount = {
   name?: string;
@@ -12,19 +11,6 @@ type ConnectedAccount = {
   observedAt?: string | null;
 };
 
-const ProviderIcon = ({ name }: { name?: string }) => {
-  const n = (name || '').toLowerCase();
-  if (n.includes('github')) return <FaGithub />;
-  if (n.includes('gitlab')) return <FaGitlab />;
-  if (n.includes('stack')) return <FaStackOverflow />;
-  if (n.includes('credly')) return <SiCredly />;
-  if (n.includes('fiverr')) return <SiFiverr />;
-  if (n.includes('kaggle')) return <FaKaggle />;
-  if (n.includes('google')) return <FaGoogle />;
-  if (n.includes('linkedin')) return <FaLinkedin />;
-  return <span className="inline-block w-4 h-4 rounded-full" style={{ backgroundColor: 'var(--icon-button-secondary)' }} />;
-};
-
 const formatProviderName = (name?: string) => {
   const n = (name || '').trim();
   if (!n) return '';

package/src/components/GraphInsights.tsx

@@ -6,6 +6,7 @@ import { GraphInsightsPayload, ScoringSummary } from '../types';
 import { green1, green2, green3, green4, green5 } from '../colors';
 import {
   ResponsiveContainer,
+  Tooltip,
   PieChart,
   Pie,
   Cell,
@@ -21,7 +22,6 @@ import {
   // CartesianGrid,
   // Legend,
 } from 'recharts';
-import { ChartTooltip, ChartLegend } from './ui/chart';
 
 // avoid platform based charts.
 // target over arching insights that can 
@@ -272,7 +272,7 @@ const GraphInsights = ({
                     <Radar name="Category Score" dataKey="score" stroke={'var(--text-main)'} fill={'var(--text-main)'} fillOpacity={0.22} isAnimationActive={!disableAnimations} />
                     {/* Subtle average ring (arbitrary benchmark for comparison) */}
                     <Radar name="Avg" dataKey="avg" stroke="rgba(128,128,128,0.6)" fill="rgba(128,128,128,0.08)" strokeDasharray="4 4" fillOpacity={1} isAnimationActive={!disableAnimations} />
-                    <ChartTooltip content={<RadarCategoryTooltip />} />
+                    <Tooltip content={<RadarCategoryTooltip />} />
                   </RadarChart>
                 </ResponsiveContainer>
                 {!headless && labelHover && (
@@ -357,28 +357,35 @@ const GraphInsights = ({
                         </Pie>
                       );
                     })()}
-                    <ChartTooltip content={<CategoryPieTooltip />} />
+                    <Tooltip content={<CategoryPieTooltip />} />
                   </PieChart>
                 </ResponsiveContainer>
                 
                 </div>
                 {/* Legend below the pie chart: includes 0% categories */}
                 <div className="mt-3">
-                  {(() => {
-                    const palette = [green1, green2, green3, green4, green5];
-                    const pieNames = categoryData.map((d) => d.category);
-                    const getColor = (name: string) => {
-                      const idx = pieNames.indexOf(name);
-                      return idx >= 0 ? palette[idx % palette.length] : 'rgba(128,128,128,0.5)';
-                    };
-                    const items = legendData.map((item) => ({
-                      color: getColor(item.name),
-                      label: item.name,
-                      value: `${Math.round(((item?.share ?? 0) * 100))}%`,
-                    }));
-                    return <ChartLegend items={items} />;
-                  })()}
-                </div>
+                {(() => {
+                  const palette = [green1, green2, green3, green4, green5];
+                  const pieNames = categoryData.map((d) => d.category);
+                  const getColor = (name: string) => {
+                    const idx = pieNames.indexOf(name);
+                    return idx >= 0 ? palette[idx % palette.length] : 'rgba(128,128,128,0.5)';
+                  };
+                  return (
+                    <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2" style={{ color: 'var(--text-secondary)', fontSize: 12 }}>
+                      {legendData.map((item, idx) => {
+                        const pct = Math.round(((item?.share ?? 0) * 100));
+                        return (
+                          <div key={`legend-${item.name}-${idx}`} className="flex items-center gap-2">
+                            <span style={{ display: 'inline-block', width: 10, height: 10, background: getColor(item.name), border: '1px solid var(--icon-button-secondary)' }} />
+                            <span>{item.name} {pct}%</span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  );
+                })()}
+              </div>
             </div>
           </div>
         </div>

package/src/components/Skills.tsx

@@ -10,8 +10,8 @@ import {
   XAxis,
   YAxis,
   CartesianGrid,
+  Tooltip,
 } from 'recharts';
-import { ChartTooltip } from './ui/chart';
 
 
 type SkillsRadarPoint = {
@@ -389,7 +389,7 @@ const Skills = ({ skillsCategoryRadar, headless }: { skillsMatrix?: SkillsMatrix
                       <CartesianGrid strokeDasharray="3 3" stroke={'var(--icon-button-secondary)'} />
                       <XAxis dataKey="axis" tick={{ fill: 'var(--text-secondary)', fontSize: 12 }} interval={0} angle={-20} textAnchor="end" height={50} />
                       <YAxis domain={[0, 100]} tick={{ fill: 'var(--text-secondary)' }} />
-                      <ChartTooltip />
+                      <Tooltip contentStyle={{ background: 'var(--content-card-background)', border: `1px solid var(--icon-button-secondary)`, color: 'var(--text-main)' }} />
                       <Bar dataKey="observed" name="Observed" fill={'var(--bar-observed)'} isAnimationActive={!disableAnimations} />
                       <Bar dataKey="self_reported" name="Self-reported" fill={'var(--bar-self-reported)'} isAnimationActive={!disableAnimations} />
                       <Bar dataKey="certified" name="Certified" fill={'var(--bar-certified)'} isAnimationActive={!disableAnimations} />

package/src/utils/provider.tsx

@@ -1,20 +1,22 @@
 'use client';
 
-import React from 'react';
 import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
-import { SiCredly, SiFiverr } from 'react-icons/si';
+import { SiCoursera, SiCredly, SiFiverr, SiToptal, SiUdemy } from 'react-icons/si';
 
-export const ProviderIcon = ({ name }: { name?: string }) => {
+export const ProviderIcon = ({ name, className }: { name?: string; className?: string }) => {
   const n = (name || '').toLowerCase();
-  if (n.includes('github')) return <FaGithub />;
-  if (n.includes('gitlab')) return <FaGitlab />;
-  if (n.includes('stack')) return <FaStackOverflow />;
-  if (n.includes('credly')) return <SiCredly />;
-  if (n.includes('fiverr')) return <SiFiverr />;
-  if (n.includes('kaggle')) return <FaKaggle />;
-  if (n.includes('google')) return <FaGoogle />;
-  if (n.includes('linkedin')) return <FaLinkedin />;
-  return <span className="inline-block w-3 h-3 rounded-full" style={{ backgroundColor: 'var(--icon-button-secondary)' }} />;
+  if (n.includes('github')) return <FaGithub className={className} />;
+  if (n.includes('gitlab')) return <FaGitlab className={className} />;
+  if (n.includes('stack')) return <FaStackOverflow className={className} />;
+  if (n.includes('credly')) return <SiCredly className={className} />;
+  if (n.includes('fiverr')) return <SiFiverr className={className} />;
+  if (n.includes('kaggle')) return <FaKaggle className={className} />;
+  if (n.includes('google')) return <FaGoogle className={className} />;
+  if (n.includes('linkedin')) return <FaLinkedin className={className} />;
+  if (n.includes('toptal')) return <SiToptal className={className} />;
+  if (n.includes('coursera')) return <SiCoursera className={className} />;
+  if (n.includes('udemy')) return <SiUdemy className={className} />;
+  return <span className={className || 'inline-block w-3 h-3 rounded-full'} style={{ backgroundColor: 'var(--icon-button-secondary)' }} />;
 };
 
 export const getProviderDisplayName = (name?: string): string => {
@@ -27,6 +29,9 @@ export const getProviderDisplayName = (name?: string): string => {
   if (n.includes('kaggle')) return 'Kaggle';
   if (n.includes('google')) return 'Google Scholar';
   if (n.includes('linkedin')) return 'LinkedIn';
+  if (n.includes('toptal')) return 'TopTal';
+  if (n.includes('coursera')) return 'Coursera';
+  if (n.includes('udemy')) return 'Udemy';
   return name || 'Provider';
 };
 
@@ -40,23 +45,26 @@ export const getProviderTooltipCopy = (provider?: string): string => {
   if (n.includes('kaggle')) return 'Competition results, notebooks, and dataset contributions that reflect analytical skill.';
   if (n.includes('google')) return 'Publications, citations, and scholarly presence indicating research impact.';
   if (n.includes('linkedin')) return 'Professional history, endorsements, and network signals indicating credibility.';
+  if (n.includes('toptal')) return 'Professional history, endorsements, and network signals indicating credibility.';
+  if (n.includes('coursera')) return 'Professional history, training, and course completion signals indicating credibility.';
+  if (n.includes('udemy')) return 'Professional history, training, and course completion signals indicating credibility.';
   return 'Signals contributed from this provider relevant to capability and trust.';
 };
 
 export const getCategoryTooltipCopy = (category: string): string => {
   const name = (category || '').toLowerCase();
-  if (/network|connection|collab|peer/.test(name)) return 'Signals from the developer’s professional connections, collaborations, and peer recognition.';
-  if (/project|repo|portfolio|work/.test(name)) return 'Signals from a developer’s visible projects, repositories, or published work that indicate breadth and quality of output.';
+  if (/network|connection|collab|peer/.test(name)) return 'Signals from the developer\'s professional connections, collaborations, and peer recognition.';
+  if (/project|repo|portfolio|work/.test(name)) return 'Signals from a developer\'s visible projects, repositories, or published work that indicate breadth and quality of output.';
   if (/skill|cert|assessment|endorse/.test(name)) return 'Signals tied to specific technical abilities, such as verified certifications, assessments, or endorsements.';
   if (/experience|tenure|history/.test(name)) return 'Signals of tenure and diversity of professional or project involvement over time.';
   if (/activity|recency|frequency|engage/.test(name)) return 'Signals of recency and frequency of developer engagement in professional or technical platforms.';
   if (/sanction|legal|criminal|regulatory|ofac|fbi|watchlist/.test(name)) return 'Signals of legal, criminal, or regulatory red flags linked to an identity.';
-  if (/identity|authentic|consisten/.test(name)) return 'Signals that indicate whether a developer’s identity is genuine and consistent across platforms.';
+  if (/identity|authentic|consisten/.test(name)) return 'Signals that indicate whether a developer\'s identity is genuine and consistent across platforms.';
   if (/reputation|review|rating|feedback|perceive|peer/.test(name)) return 'Signals of how peers, clients, and communities perceive the developer.';
-  if (/geo|jurisdiction|country|region|ip|location/.test(name)) return 'Signals tied to a developer’s geographic or jurisdictional context.';
+  if (/geo|jurisdiction|country|region|ip|location/.test(name)) return 'Signals tied to a developer\'s geographic or jurisdictional context.';
   if (/security|cyber/.test(name)) return 'Signals of security posture and potential cyber-risk exposure.';
   if (/risk/.test(name)) return 'KYD Risk surfaces signals of authenticity, reputation, and environmental telemetry that indicate potential risks in engaging with a developer.';
-  if (/tech|technical/.test(name)) return 'KYD Technical surfaces signals from a developer’s portfolio, skills, experience, activity, and network to indicate the likelihood of technical capability.';
+  if (/tech|technical/.test(name)) return "KYD Technical surfaces signals from a developer's portfolio, skills, experience, activity, and network to indicate the likelihood of technical capability.";
   return 'Share of overall contribution by category based on applied weights.';
 };
 

package/src/components/ui/chart.tsx

@@ -1,110 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Tooltip as RechartsTooltip } from 'recharts';
-
-type ChartContainerProps = {
-  className?: string;
-  style?: React.CSSProperties;
-  children: React.ReactNode;
-};
-
-/**
- * Lightweight shadcn-like chart container.
- * Provides a consistent surface, border, and color variables for charts.
- */
-export function ChartContainer({ className, style, children }: ChartContainerProps) {
-  return (
-    <div
-      className={`rounded-lg border ${className || ''}`}
-      style={{
-        backgroundColor: 'var(--content-card-background)',
-        borderColor: 'var(--icon-button-secondary)',
-        ...style,
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-type ChartTooltipProps = {
-  // passthrough props accepted by Recharts Tooltip
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  content?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  cursor?: any;
-};
-
-/**
- * shadcn-style tooltip wrapper for Recharts Tooltip.
- * Ensures consistent content styling (background, border, text, radius).
- */
-export function ChartTooltip({ content, cursor }: ChartTooltipProps) {
-  return (
-    <RechartsTooltip
-      cursor={cursor}
-      content={content}
-      wrapperStyle={{ outline: 'none' }}
-      contentStyle={{
-        background: 'var(--content-card-background)',
-        border: '1px solid var(--icon-button-secondary)',
-        color: 'var(--text-main)',
-        borderRadius: 6,
-        padding: 10,
-      }}
-      itemStyle={{ color: 'var(--text-secondary)' }}
-      labelStyle={{ color: 'var(--text-main)', fontWeight: 600 }}
-    />
-  );
-}
-
-type ChartTooltipContentProps = {
-  title?: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  children?: any;
-  // Optional compact body text for simpler tooltips
-  body?: string;
-};
-
-/**
- * Generic content frame for tooltips used by charts.
- */
-export function ChartTooltipContent({ title, body, children }: ChartTooltipContentProps) {
-  return (
-    <div style={{ maxWidth: 320 }}>
-      {title ? <div style={{ fontWeight: 600, color: 'var(--text-main)' }}>{title}</div> : null}
-      {body ? (
-        <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: title ? 6 : 0 }}>{body}</div>
-      ) : null}
-      {children}
-    </div>
-  );
-}
-
-type LegendItem = { color: string; label: string; value?: string };
-
-export function ChartLegend({ items }: { items: LegendItem[] }) {
-  return (
-    <div className="mt-3 flex flex-wrap items-center justify-center gap-x-4 gap-y-2" style={{ color: 'var(--text-secondary)', fontSize: 12 }}>
-      {items.map((it, idx) => (
-        <div key={idx} className="flex items-center gap-2">
-          <span
-            style={{
-              display: 'inline-block',
-              width: 10,
-              height: 10,
-              background: it.color,
-              border: '1px solid var(--icon-button-secondary)',
-            }}
-          />
-          <span>
-            {it.label} {it.value}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-