kyd-shared-badge 0.3.119 → 0.3.121

package/package.json

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

package/src/connect/ConnectAccounts.tsx

@@ -5,7 +5,7 @@ import { normalizeLinkedInInput } from './linkedin';
 import type { ConnectAccountsProps } from './types';
 import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink, Settings, Shield, InfoIcon } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter, CardTitle, ProgressCircle } from '../ui';
+import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter, CardTitle } from '../ui';
 import Link from 'next/link';
 import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent } from '../ui/';
 
@@ -222,32 +222,11 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     return setupAction === 'install' || setupAction === 'created';
   }, [githubConnectedAccount]);
   
-  // Progress computation
-  const targetProviderIds = useMemo(() => {
-    const targets = (requiredProviders && requiredProviders.length
-      ? requiredProviders
-      : providers.map(p => p.id))
-      .map(id => id.toLowerCase());
-    return new Set(targets);
-  }, [requiredProviders, providers]);
-  const numConnectedTargets = useMemo(() => {
-    let count = 0;
-    targetProviderIds.forEach(id => { if (connectedIds.has(id)) count += 1; });
-    return count;
-  }, [targetProviderIds, connectedIds]);
-  const progressPercent = useMemo(() => {
-    const total = targetProviderIds.size;
-    if (!total) return 0;
-    return Math.round((numConnectedTargets / total) * 100);
-  }, [numConnectedTargets, targetProviderIds]);
+  // Progress UI is outsourced to ConnectProgress
   
   return (
     <>
-      {providers?.length ? (
-        <div className="fixed sm:bottom-6 sm:right-6 bottom-4 right-4 z-50 pointer-events-none">
-          <ProgressCircle value={progressPercent} size={68} thickness={6} />
-        </div>
-      ) : null}
+
       <AnimatePresence initial={false} mode="wait">
       {showDataHandling ? (
         <motion.div

package/src/ui/connect-progress.tsx

@@ -0,0 +1,104 @@
+'use client'
+import React, { useMemo } from 'react'
+import { Card, CardContent } from './card'
+import { ProgressCircle } from './progress-circle'
+
+export type ConnectProgressProps = {
+  providers: Array<{ id: string; name: string }>
+  connectedIds: Set<string>
+  className?: string
+  layout?: 'fixed-desktop' | 'inline'
+}
+
+export function ConnectProgress(props: ConnectProgressProps) {
+  const { providers, connectedIds, className, layout = 'fixed-desktop' } = props
+
+  const hasGithub = connectedIds.has('github')
+  const hasLinkedIn = connectedIds.has('linkedin')
+  const otherConnectedCount = useMemo(() => {
+    let count = 0
+    connectedIds.forEach(id => { if (id !== 'github' && id !== 'linkedin') count += 1 })
+    return count
+  }, [connectedIds])
+
+  const progressPercent = useMemo(() => {
+    const githubWeight = hasGithub ? 65 : 0
+    const linkedinWeight = hasLinkedIn ? 15 : 0
+    const othersWeight = Math.min(otherConnectedCount, 2) * 10
+    return Math.max(0, Math.min(100, githubWeight + linkedinWeight + othersWeight))
+  }, [hasGithub, hasLinkedIn, otherConnectedCount])
+
+  const progressCopy = useMemo(() => {
+    const score = progressPercent
+    if (score === 0) {
+      return {
+        headline: 'Get started — connect GitHub',
+        body: 'GitHub contributes ~65% of your profile strength. Add LinkedIn (+15%) and 1–2 other platforms (+10% each). 70%+ is strong; 100% is optional.'
+      }
+    }
+    if (hasGithub && score < 70) {
+      return {
+        headline: 'Good base — add more signals',
+        body: 'Add LinkedIn (+15%) and at least one other platform (+10%) to reach 70%+, which is considered strong. 100% is not mandatory.'
+      }
+    }
+    if (!hasGithub && score < 70) {
+      return {
+        headline: 'Add GitHub for a big boost',
+        body: 'Current signals are light. Connecting GitHub adds ~65% weight and significantly improves your profile.'
+      }
+    }
+    if (score >= 70 && score < 90) {
+      return {
+        headline: 'Strong — recommended coverage achieved',
+        body: '70%+ indicates a strong profile. Adding more platforms can further improve verification. 100% is optional but even better.'
+      }
+    }
+    if (score >= 90) {
+      return {
+        headline: 'Excellent — high confidence',
+        body: 'You are near complete coverage. 100% is not required, but additional platforms can further increase confidence.'
+      }
+    }
+    if (score === 100) {
+      return {
+        headline: 'Complete — high confidence',
+        body: 'You\'ve achieved the recommended coverage for a very strong profile! Connecting even more accounts can further strengthen your verification.'
+      }
+    }
+    return {
+      headline: 'Keep going',
+      body: 'Connect more platforms to strengthen your profile. 70%+ is strong; 100% is optional.'
+    }
+  }, [progressPercent, hasGithub])
+
+  const content = (
+    <Card className={`border-[var(--icon-button-secondary)] ${className || ''}`} style={{ backgroundColor: 'var(--content-card-background)'}}>
+      <CardContent className="py-3 px-3">
+        <div className="flex items-center gap-3">
+          <ProgressCircle value={progressPercent} size={64} thickness={6} />
+          <div className="min-w-0 max-w-xs">
+            <div className="text-base font-semibold truncate" style={{ color: 'var(--text-main)'}}>{progressCopy.headline}</div>
+            <div className="text-sm mt-0.5" style={{ color: 'var(--text-secondary)'}}>
+              {progressCopy.body}
+            </div>
+            <div className="text-sm mt-1" style={{ color: 'var(--text-secondary)'}}>
+              Weighted score • {progressPercent}%
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+
+  if (layout === 'inline') return content
+
+  return (
+    <div className="hidden sm:block fixed top-6 right-6 z-50">{content}</div>
+  )
+}
+
+export default ConnectProgress
+
+
+

package/src/ui/index.ts

@@ -4,4 +4,5 @@ export * from './input';
 export * from './textarea';
 export * from './spinner';
 export * from './tooltip';
-export * from './progress-circle';
+export * from './progress-circle';
+export * from './connect-progress';

package/src/ui/progress-circle.tsx

@@ -13,6 +13,9 @@ export type ProgressCircleProps = {
 export function ProgressCircle(props: ProgressCircleProps) {
   const { value, size = 72, thickness = 6, className, showLabel = true, label } = props
 
+  const rawId = React.useId()
+  const gradientId = React.useMemo(() => `kyd-pc-${String(rawId).replace(/:/g, '')}` , [rawId])
+
   const clamped = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0))
   const radius = (size - thickness) / 2
   const circumference = 2 * Math.PI * radius
@@ -22,7 +25,7 @@ export function ProgressCircle(props: ProgressCircleProps) {
     <div className={`relative inline-flex items-center justify-center ${className || ''}`} style={{ width: size, height: size }}>
       <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="block">
         <defs>
-          <linearGradient id="kyd-progress-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
             <stop offset="0%" stopColor="var(--icon-accent)" />
             <stop offset="100%" stopColor="var(--icon-accent-hover)" />
           </linearGradient>
@@ -41,7 +44,7 @@ export function ProgressCircle(props: ProgressCircleProps) {
           cy={size / 2}
           r={radius}
           fill="none"
-          stroke="url(#kyd-progress-gradient)"
+          stroke={`url(#${gradientId})`}
           strokeWidth={thickness}
           strokeLinecap="round"
           strokeDasharray={circumference}
@@ -76,3 +79,4 @@ export function ProgressCircle(props: ProgressCircleProps) {
 export default ProgressCircle
 
 
+