@aiready/components 0.1.22 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiready/components",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "description": "Unified shared components library (UI, charts, hooks, utilities) for AIReady",
   "type": "module",
   "main": "./dist/index.js",
@@ -62,8 +62,8 @@
     "clsx": "^2.1.1",
     "d3": "^7.9.0",
     "d3-force": "^3.0.0",
-    "tailwind-merge": "^2.6.1",
-    "@aiready/core": "0.9.22"
+    "tailwind-merge": "^3.0.0",
+    "@aiready/core": "0.9.25"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.5",
@@ -74,7 +74,7 @@
     "tailwindcss": "^4.1.14",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
-    "vitest": "^2.1.8"
+    "vitest": "^4.0.0"
   },
   "scripts": {
     "dev": "tsup --watch",

package/src/charts/ForceDirectedGraph.tsx

@@ -128,8 +128,8 @@ export const ForceDirectedGraph = forwardRef<ForceDirectedGraphHandle, ForceDire
   const nodes = React.useMemo(() => {
     if (!initialNodes || !initialNodes.length) return initialNodes;
     
-    const cx = width / 2;
-    const cy = height / 2;
+    const centerX = width / 2;
+    const centerY = height / 2;
     
     // For force layout, use random positions but don't animate
     if (layout === 'force') {
@@ -145,8 +145,8 @@ export const ForceDirectedGraph = forwardRef<ForceDirectedGraphHandle, ForceDire
       const radius = Math.min(width, height) * 0.35;
       return initialNodes.map((n: any, i: number) => ({
         ...n,
-        x: cx + Math.cos((2 * Math.PI * i) / initialNodes.length) * radius,
-        y: cy + Math.sin((2 * Math.PI * i) / initialNodes.length) * radius,
+        x: centerX + Math.cos((2 * Math.PI * i) / initialNodes.length) * radius,
+        y: centerY + Math.sin((2 * Math.PI * i) / initialNodes.length) * radius,
       }));
     }
     
@@ -188,16 +188,16 @@ export const ForceDirectedGraph = forwardRef<ForceDirectedGraphHandle, ForceDire
     if (!nodes || nodes.length === 0) return;
     
     const applyLayout = () => {
-      const cx = width / 2;
-      const cy = height / 2;
+      const centerX = width / 2;
+      const centerY = height / 2;
       
       if (layout === 'circular') {
         // Place all nodes in a circle
         const radius = Math.min(width, height) * 0.35;
         nodes.forEach((node, i) => {
           const angle = (2 * Math.PI * i) / nodes.length;
-          node.fx = cx + Math.cos(angle) * radius;
-          node.fy = cy + Math.sin(angle) * radius;
+          node.fx = centerX + Math.cos(angle) * radius;
+          node.fy = centerY + Math.sin(angle) * radius;
         });
       } else if (layout === 'hierarchical') {
         // Place packages in rows, files within packages in columns

package/src/data-display/ScoreBar.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { getRating as getCoreRating } from '@aiready/core/client';
 import { cn } from '../utils/cn';
 
 export type ScoreRating = 'excellent' | 'good' | 'fair' | 'needs-work' | 'critical';
@@ -21,12 +22,17 @@ const ratingConfig: Record<ScoreRating, { color: string; bgColor: string; label:
   critical: { color: 'bg-red-500', bgColor: 'bg-red-100', label: 'Critical' },
 };
 
+// Convert Title Case rating from core to lowercase for component use
 function getRating(score: number): ScoreRating {
-  if (score >= 90) return 'excellent';
-  if (score >= 75) return 'good';
-  if (score >= 60) return 'fair';
-  if (score >= 40) return 'needs-work';
-  return 'critical';
+  const coreRating = getCoreRating(score);
+  const ratingMap: Record<string, ScoreRating> = {
+    'Excellent': 'excellent',
+    'Good': 'good',
+    'Fair': 'fair',
+    'Needs Work': 'needs-work',
+    'Critical': 'critical',
+  };
+  return ratingMap[coreRating] || 'critical';
 }
 
 const sizeConfig = {
@@ -115,4 +121,4 @@ export function ScoreCard({ score, title, breakdown, className }: ScoreCardProps
       )}
     </div>
   );
-}
+}

package/src/index.ts

@@ -53,6 +53,7 @@ export { ThemeProvider, useTheme, type Theme, type EffectiveTheme } from './them
 export { cn } from './utils/cn';
 export * from './utils/colors';
 export * from './utils/formatters';
+export * from './utils/score';
 
 // Hooks
 export { useDebounce } from './hooks/useDebounce';

package/src/utils/score.ts

@@ -0,0 +1,56 @@
+/**
+ * Score utility functions for AI readiness scoring
+ * Provides color, background, glow, and label helpers for score display
+ */
+
+/**
+ * Get the Tailwind color class for a score
+ */
+export function scoreColor(score: number | null | undefined): string {
+  if (score == null) return 'text-slate-400';
+  if (score >= 75) return 'text-emerald-400';
+  if (score >= 50) return 'text-amber-400';
+  return 'text-red-400';
+}
+
+/**
+ * Get the Tailwind background/border class for a score
+ */
+export function scoreBg(score: number | null | undefined): string {
+  if (score == null) return 'bg-slate-800/50 border-slate-700';
+  if (score >= 75) return 'bg-emerald-900/30 border-emerald-500/30';
+  if (score >= 50) return 'bg-amber-900/30 border-amber-500/30';
+  return 'bg-red-900/30 border-red-500/30';
+}
+
+/**
+ * Get the display label for a score
+ */
+export function scoreLabel(score: number | null | undefined): string {
+  if (score == null) return 'Not analyzed';
+  if (score >= 75) return 'AI-Ready';
+  if (score >= 50) return 'Needs Improvement';
+  return 'Critical Issues';
+}
+
+/**
+ * Get the Tailwind shadow glow class for a score
+ */
+export function scoreGlow(score: number | null | undefined): string {
+  if (score == null) return '';
+  if (score >= 75) return 'shadow-emerald-500/20';
+  if (score >= 50) return 'shadow-amber-500/20';
+  return 'shadow-red-500/20';
+}
+
+/**
+ * Get rating from score (for use with ScoreBar component)
+ */
+export function getScoreRating(score: number | null | undefined): 'excellent' | 'good' | 'fair' | 'needs-work' | 'critical' {
+  if (score == null) return 'critical';
+  if (score >= 90) return 'excellent';
+  if (score >= 75) return 'good';
+  if (score >= 60) return 'fair';
+  if (score >= 40) return 'needs-work';
+  return 'critical';
+}