@aiready/components 0.11.18 → 0.11.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiready/components",
-  "version": "0.11.18",
+  "version": "0.11.22",
   "description": "Unified shared components library (UI, charts, hooks, utilities) for AIReady",
   "type": "module",
   "main": "./dist/index.js",
@@ -65,7 +65,7 @@
     "framer-motion": "^12.35.0",
     "lucide-react": "^0.577.0",
     "tailwind-merge": "^3.0.0",
-    "@aiready/core": "0.21.17"
+    "@aiready/core": "0.21.21"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.5",

package/src/components/icons.tsx

@@ -390,6 +390,154 @@ export function RefreshCwIcon({
   );
 }
 
+export function WalletIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1" />
+      <path d="M16 12h5" />
+      <circle cx="16" cy="12" r="1" />
+    </svg>
+  );
+}
+
+export function ClockIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </svg>
+  );
+}
+
+export function ZapIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+    </svg>
+  );
+}
+
+export function HammerIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M18.42 13.59L7.46 2.63a1 1 0 0 0-1.42 0l-4.7 4.7a1 1 0 0 0 0 1.42L11 18.23l1.07-1.07-1.41-1.41 1.42-1.42 1.41 1.41 1.41-1.41-1.41-1.41 1.42-1.42 1.41 1.41 2-2z" />
+      <path d="M13 18l6 6" />
+    </svg>
+  );
+}
+
+export function ArrowRightIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <line x1="5" y1="12" x2="19" y2="12" />
+      <polyline points="12 5 19 12 12 19" />
+    </svg>
+  );
+}
+
+export function ShieldCheckIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+      <path d="M9 12l2 2 4-4" />
+    </svg>
+  );
+}
+
+export function AlertTriangleIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+  );
+}
+
 export default {
   RocketIcon,
   ChartIcon,
@@ -406,4 +554,11 @@ export default {
   BrainIcon,
   TerminalIcon,
   CommandLineIcon,
+  WalletIcon,
+  ClockIcon,
+  ZapIcon,
+  HammerIcon,
+  ArrowRightIcon,
+  ShieldCheckIcon,
+  AlertTriangleIcon,
 };

package/src/feedback/FeedbackWidget.tsx

@@ -58,7 +58,7 @@ export function FeedbackWidget({
             initial={{ opacity: 0, scale: 0.9, y: 20 }}
             animate={{ opacity: 1, scale: 1, y: 0 }}
             exit={{ opacity: 0, scale: 0.9, y: 20 }}
-            className="absolute bottom-16 right-0 w-80 rounded-2xl p-4 bg-slate-900 border border-cyan-500/30 shadow-2xl backdrop-blur-xl"
+            className="absolute bottom-full mb-4 right-0 w-80 rounded-2xl p-4 bg-slate-900 border border-cyan-500/30 shadow-2xl backdrop-blur-xl top-auto"
           >
             <div className="flex items-center justify-between mb-4">
               <h4 className="font-bold text-white flex items-center gap-2 text-sm">

package/src/utils/__tests__/formatters.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import {
+  formatNumber,
+  formatCompactNumber,
+  formatPercentage,
+  formatFileSize,
+  formatRelativeTime,
+  formatDuration,
+  formatMetric,
+} from '../formatters';
+
+describe('Formatters', () => {
+  it('should format numbers with commas', () => {
+    expect(formatNumber(1234567)).toBe('1,234,567');
+  });
+
+  it('should format compact numbers', () => {
+    expect(formatCompactNumber(1234)).toBe('1.2K');
+    expect(formatCompactNumber(1234567)).toBe('1.2M');
+  });
+
+  it('should format percentages', () => {
+    expect(formatPercentage(0.1234)).toBe('12.3%');
+    expect(formatPercentage(0.1234, 0)).toBe('12%');
+  });
+
+  it('should format file sizes', () => {
+    expect(formatFileSize(1024)).toBe('1.0 KB');
+    expect(formatFileSize(1048576)).toBe('1.0 MB');
+  });
+
+  it('should format relative time', () => {
+    const now = new Date();
+    const oneHourAgo = new Date(now.getTime() - 3600000);
+    expect(formatRelativeTime(oneHourAgo)).toBe('1 hour ago');
+    expect(formatRelativeTime(now)).toBe('just now');
+  });
+
+  it('should format duration', () => {
+    expect(formatDuration(3661000)).toBe('1h 1m 1s');
+    expect(formatDuration(61000)).toBe('1m 1s');
+    expect(formatDuration(1000)).toBe('1s');
+  });
+
+  it('should format metrics based on unit', () => {
+    expect(formatMetric(1024, 'bytes')).toBe('1.0 KB');
+    expect(formatMetric(0.5, 'percentage')).toBe('50.0%');
+    expect(formatMetric(3600000, 'duration')).toBe('1h 0m 0s');
+    expect(formatMetric(1200, 'number')).toBe('1.2K');
+  });
+});

package/src/utils/__tests__/score.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import {
+  scoreColor,
+  scoreBg,
+  scoreLabel,
+  scoreGlow,
+  getScoreRating,
+} from '../score';
+
+describe('Score Utilities', () => {
+  it('should return correct color for scores', () => {
+    expect(scoreColor(80)).toBe('text-emerald-400');
+    expect(scoreColor(60)).toBe('text-amber-400');
+    expect(scoreColor(30)).toBe('text-red-400');
+    expect(scoreColor(null)).toBe('text-slate-400');
+  });
+
+  it('should return correct background for scores', () => {
+    expect(scoreBg(80)).toContain('emerald');
+    expect(scoreBg(60)).toContain('amber');
+    expect(scoreBg(30)).toContain('red');
+    expect(scoreBg(null)).toContain('slate');
+  });
+
+  it('should return correct labels', () => {
+    expect(scoreLabel(80)).toBe('AI-Ready');
+    expect(scoreLabel(60)).toBe('Needs Improvement');
+    expect(scoreLabel(30)).toBe('Critical Issues');
+    expect(scoreLabel(null)).toBe('Not analyzed');
+  });
+
+  it('should return correct rating strings', () => {
+    expect(getScoreRating(95)).toBe('excellent');
+    expect(getScoreRating(80)).toBe('good');
+    expect(getScoreRating(65)).toBe('fair');
+    expect(getScoreRating(45)).toBe('needs-work');
+    expect(getScoreRating(20)).toBe('critical');
+    expect(getScoreRating(null)).toBe('critical');
+  });
+});