@aiready/components 0.1.21 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiready/components",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Unified shared components library (UI, charts, hooks, utilities) for AIReady",
   "type": "module",
   "main": "./dist/index.js",

package/src/code-block/CodeBlock.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import React, { useState, useCallback, useMemo } from 'react';
+
+export interface CodeBlockProps {
+  children: React.ReactNode;
+  language?: string;
+  showCopy?: boolean;
+  showHeader?: boolean;
+  className?: string;
+}
+
+// Dedent helper - removes common leading indentation
+function dedentCode(code: string): string {
+  // Normalize tabs to two spaces
+  let normalized = code.replace(/\t/g, '  ').replace(/[ \t]+$/gm, '');
+  
+  const lines = normalized.split('\n');
+  if (lines.length <= 1) return normalized.trim();
+
+  // Remove leading/trailing empty lines
+  let start = 0;
+  while (start < lines.length && lines[start].trim() === '') start++;
+  let end = lines.length - 1;
+  while (end >= 0 && lines[end].trim() === '') end--;
+  
+  if (start > end) return '';
+  const relevantLines = lines.slice(start, end + 1);
+
+  // Find minimum indent across non-empty lines
+  const nonEmpty = relevantLines.filter((l) => l.trim() !== '');
+  const minIndent = nonEmpty.reduce((min, line) => {
+    const m = line.match(/^\s*/)?.[0].length ?? 0;
+    return Math.min(min, m);
+  }, Infinity);
+
+  // Remove common indentation
+  const dedented = minIndent === Infinity || minIndent === 0
+    ? relevantLines.join('\n')
+    : relevantLines.map((l) => (l.startsWith(' '.repeat(minIndent)) ? l.slice(minIndent) : l)).join('\n');
+  
+  return dedented;
+}
+
+// Simple Copy Button
+function CopyButton({ code }: { code: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback for older browsers
+      const textarea = document.createElement('textarea');
+      textarea.value = code;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }, [code]);
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="rounded-md p-1.5 text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 transition-colors"
+      title={copied ? 'Copied!' : 'Copy code'}
+    >
+      {copied ? (
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+        </svg>
+      ) : (
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+export function CodeBlock({
+  children,
+  language = 'typescript',
+  showCopy = true,
+  showHeader = true,
+  className = '',
+}: CodeBlockProps) {
+  // Get code string from children
+  const codeString = useMemo(() => {
+    if (typeof children === 'string') {
+      return dedentCode(children);
+    }
+    // Handle template literal children
+    try {
+      const raw = React.Children.toArray(children)
+        .map((c) => (typeof c === 'string' ? c : typeof c === 'number' ? String(c) : ''))
+        .join('');
+      return dedentCode(raw);
+    } catch {
+      return '';
+    }
+  }, [children]);
+
+  return (
+    <div className={`group relative my-4 overflow-hidden rounded-xl border border-slate-700 bg-slate-900 shadow-lg ${className}`}>
+      {/* Header bar */}
+      {showHeader && (
+        <div className="flex items-center justify-between border-b border-slate-700 bg-slate-800/50 px-4 py-2">
+          <div className="flex items-center gap-2">
+            <div className="flex gap-1.5">
+              <div className="h-3 w-3 rounded-full bg-red-500/50" />
+              <div className="h-3 w-3 rounded-full bg-amber-500/50" />
+              <div className="h-3 w-3 rounded-full bg-emerald-500/50" />
+            </div>
+            <span className="ml-2 text-xs font-semibold uppercase tracking-wider text-slate-500 font-mono">
+              {language}
+            </span>
+          </div>
+          {showCopy && <CopyButton code={codeString} />}
+        </div>
+      )}
+
+      {/* Code body */}
+      <pre className="overflow-x-auto p-4 text-sm leading-relaxed">
+        <code className="font-mono block whitespace-pre text-slate-300">
+          {codeString}
+        </code>
+      </pre>
+    </div>
+  );
+}
+
+// Inline code component
+export function InlineCode({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return (
+    <code className={`rounded-md bg-slate-100 px-1.5 py-0.5 text-sm font-mono text-slate-800 ${className}`}>
+      {children}
+    </code>
+  );
+}

package/src/code-block/index.ts

@@ -0,0 +1 @@
+export { CodeBlock, InlineCode, type CodeBlockProps } from './CodeBlock';

package/src/data-display/ScoreBar.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { cn } from '../utils/cn';
+
+export type ScoreRating = 'excellent' | 'good' | 'fair' | 'needs-work' | 'critical';
+
+export interface ScoreBarProps {
+  score: number;
+  maxScore?: number;
+  label: string;
+  showScore?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const ratingConfig: Record<ScoreRating, { color: string; bgColor: string; label: string }> = {
+  excellent: { color: 'bg-green-500', bgColor: 'bg-green-100', label: 'Excellent' },
+  good: { color: 'bg-emerald-500', bgColor: 'bg-emerald-100', label: 'Good' },
+  fair: { color: 'bg-amber-500', bgColor: 'bg-amber-100', label: 'Fair' },
+  'needs-work': { color: 'bg-orange-500', bgColor: 'bg-orange-100', label: 'Needs Work' },
+  critical: { color: 'bg-red-500', bgColor: 'bg-red-100', label: 'Critical' },
+};
+
+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 sizeConfig = {
+  sm: { height: 'h-1.5', text: 'text-xs', score: 'text-sm' },
+  md: { height: 'h-2', text: 'text-sm', score: 'text-base' },
+  lg: { height: 'h-3', text: 'text-base', score: 'text-lg' },
+};
+
+export function ScoreBar({
+  score,
+  maxScore = 100,
+  label,
+  showScore = true,
+  size = 'md',
+  className,
+}: ScoreBarProps) {
+  const percentage = Math.min(100, Math.max(0, (score / maxScore) * 100));
+  const rating = getRating(percentage);
+  const config = ratingConfig[rating];
+  const sizes = sizeConfig[size];
+
+  return (
+    <div className={cn('space-y-1', className)}>
+      <div className="flex items-center justify-between">
+        <span className={cn('text-slate-700', sizes.text)}>{label}</span>
+        {showScore && (
+          <span className={cn('font-bold text-slate-900', sizes.score)}>
+            {score}/{maxScore}
+          </span>
+        )}
+      </div>
+      <div className={cn('w-full rounded-full bg-slate-200', sizes.height)}>
+        <div
+          className={cn('rounded-full transition-all duration-500', config.color, sizes.height)}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export interface ScoreCardProps {
+  score: number;
+  title?: string;
+  breakdown?: Array<{
+    label: string;
+    score: number;
+    weight?: number;
+  }>;
+  className?: string;
+}
+
+export function ScoreCard({ score, title, breakdown, className }: ScoreCardProps) {
+  const rating = getRating(score);
+  const config = ratingConfig[rating];
+
+  return (
+    <div className={cn('rounded-xl border-2 border-slate-200 bg-white p-6 shadow-lg', className)}>
+      <div className="mb-4">
+        <div className="text-4xl font-black text-slate-900">{score}/100</div>
+        <div className={cn('text-lg font-bold', `text-${rating === 'excellent' ? 'green' : rating === 'good' ? 'emerald' : rating === 'fair' ? 'amber' : rating === 'needs-work' ? 'orange' : 'red'}-600`)}>
+          {config.label} Rating
+        </div>
+        {title && <p className="text-sm text-slate-600 mt-1">{title}</p>}
+      </div>
+
+      {breakdown && breakdown.length > 0 && (
+        <div className="space-y-3">
+          {breakdown.map((item, index) => (
+            <ScoreBar
+              key={index}
+              score={item.score}
+              label={item.label}
+              size="sm"
+            />
+          ))}
+        </div>
+      )}
+
+      {breakdown && breakdown.length > 0 && (
+        <div className="mt-4 text-xs text-slate-600 bg-slate-50 p-3 rounded-lg">
+          <strong>Formula:</strong> {breakdown.map(item => 
+            `${item.score}×${item.weight || 1}`
+          ).join(' + ')} / 100 = {score}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/data-display/index.ts

@@ -0,0 +1 @@
+export { ScoreBar, ScoreCard, type ScoreBarProps, type ScoreCardProps, type ScoreRating } from './ScoreBar';

package/src/feedback/ErrorDisplay.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import React from 'react';
+
+export interface ErrorDisplayProps {
+  title?: string;
+  message: string;
+  retry?: () => void;
+  retryLabel?: string;
+}
+
+export function ErrorDisplay({
+  title = 'Something went wrong',
+  message,
+  retry,
+  retryLabel = 'Try again',
+}: ErrorDisplayProps) {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[200px] gap-4 p-8">
+      <div className="rounded-full bg-red-100 p-3">
+        <svg
+          className="h-6 w-6 text-red-600"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+          />
+        </svg>
+      </div>
+      <div className="text-center">
+        <h3 className="text-lg font-semibold text-slate-900">{title}</h3>
+        <p className="mt-2 text-sm text-slate-500">{message}</p>
+      </div>
+      {retry && (
+        <button
+          onClick={retry}
+          className="mt-2 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
+        >
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+            />
+          </svg>
+          {retryLabel}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export interface EmptyStateProps {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+export function EmptyState({ title, description, icon, action }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[200px] gap-4 p-8">
+      {icon && <div className="rounded-full bg-slate-100 p-3">{icon}</div>}
+      <div className="text-center">
+        <h3 className="text-lg font-semibold text-slate-900">{title}</h3>
+        {description && <p className="mt-2 text-sm text-slate-500">{description}</p>}
+      </div>
+      {action && (
+        <button
+          onClick={action.onClick}
+          className="mt-2 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
+        >
+          {action.label}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/feedback/LoadingSpinner.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+export interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-8 w-8',
+  lg: 'h-12 w-12',
+};
+
+export function LoadingSpinner({ size = 'md', className = '' }: LoadingSpinnerProps) {
+  return (
+    <div className={`flex items-center justify-center ${className}`}>
+      <div
+        className={`${sizeClasses[size]} animate-spin rounded-full border-2 border-slate-300 border-t-blue-600`}
+      />
+    </div>
+  );
+}
+
+export interface LoadingOverlayProps {
+  message?: string;
+}
+
+export function LoadingOverlay({ message = 'Loading...' }: LoadingOverlayProps) {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[200px] gap-4">
+      <LoadingSpinner size="lg" />
+      <p className="text-sm text-slate-500 animate-pulse">{message}</p>
+    </div>
+  );
+}

package/src/feedback/index.ts

@@ -0,0 +1,2 @@
+export { LoadingSpinner, LoadingOverlay, type LoadingSpinnerProps, type LoadingOverlayProps } from './LoadingSpinner';
+export { ErrorDisplay, EmptyState, type ErrorDisplayProps, type EmptyStateProps } from './ErrorDisplay';

package/src/index.ts

@@ -25,6 +25,30 @@ export { Switch, type SwitchProps } from './components/switch';
 export { Textarea, type TextareaProps } from './components/textarea';
 export { Select, type SelectProps, type SelectOption } from './components/select';
 
+// Code Block
+export { CodeBlock, InlineCode, type CodeBlockProps } from './code-block';
+
+// Navigation
+export { Breadcrumb, type BreadcrumbProps, type BreadcrumbItem } from './navigation';
+
+// Data Display
+export { ScoreBar, ScoreCard, type ScoreBarProps, type ScoreCardProps, type ScoreRating } from './data-display';
+
+// Feedback
+export {
+  LoadingSpinner,
+  LoadingOverlay,
+  ErrorDisplay,
+  EmptyState,
+  type LoadingSpinnerProps,
+  type LoadingOverlayProps,
+  type ErrorDisplayProps,
+  type EmptyStateProps,
+} from './feedback';
+
+// Theme
+export { ThemeProvider, useTheme, type Theme, type EffectiveTheme } from './theme';
+
 // Utils
 export { cn } from './utils/cn';
 export * from './utils/colors';

package/src/navigation/Breadcrumb.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React from 'react';
+import { cn } from '../utils/cn';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  separator?: React.ReactNode;
+  className?: string;
+}
+
+const DefaultSeparator = () => (
+  <svg
+    className="h-4 w-4 text-slate-400"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+  </svg>
+);
+
+export function Breadcrumb({ items, separator, className }: BreadcrumbProps) {
+  const Separator = separator || <DefaultSeparator />;
+
+  return (
+    <nav className={cn('flex items-center gap-1 text-sm', className)} aria-label="Breadcrumb">
+      <ol className="flex items-center gap-1">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          
+          return (
+            <li key={index} className="flex items-center gap-1">
+              {index > 0 && (
+                <span className="flex-shrink-0">{Separator}</span>
+              )}
+              {item.href && !isLast ? (
+                <a
+                  href={item.href}
+                  className="text-slate-600 hover:text-slate-900 transition-colors"
+                >
+                  {item.label}
+                </a>
+              ) : (
+                <span className={isLast ? 'font-medium text-slate-900' : 'text-slate-600'}>
+                  {item.label}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/navigation/index.ts

@@ -0,0 +1 @@
+export { Breadcrumb, type BreadcrumbProps, type BreadcrumbItem } from './Breadcrumb';

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+export type Theme = 'dark' | 'light' | 'system';
+export type EffectiveTheme = 'dark' | 'light';
+
+interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  effectiveTheme: EffectiveTheme;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+const STORAGE_KEY = 'aiready-theme';
+
+function getSystemTheme(): EffectiveTheme {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function getStoredTheme(): Theme {
+  if (typeof window === 'undefined') return 'system';
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === 'dark' || stored === 'light' || stored === 'system') {
+      return stored;
+    }
+  } catch {
+    // localStorage not available
+  }
+  return 'system';
+}
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = STORAGE_KEY,
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(defaultTheme);
+  const [effectiveTheme, setEffectiveTheme] = useState<EffectiveTheme>('light');
+  const [mounted, setMounted] = useState(false);
+
+  // Initialize theme from storage on mount
+  useEffect(() => {
+    const storedTheme = getStoredTheme();
+    setThemeState(storedTheme);
+    setMounted(true);
+  }, []);
+
+  // Update effective theme when theme or system preference changes
+  useEffect(() => {
+    if (!mounted) return;
+
+    const updateEffectiveTheme = () => {
+      if (theme === 'system') {
+        setEffectiveTheme(getSystemTheme());
+      } else {
+        setEffectiveTheme(theme);
+      }
+    };
+
+    updateEffectiveTheme();
+
+    // Listen for system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = () => {
+      if (theme === 'system') {
+        setEffectiveTheme(getSystemTheme());
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme, mounted]);
+
+  // Apply theme class to document
+  useEffect(() => {
+    if (!mounted) return;
+
+    const root = document.documentElement;
+    root.classList.remove('light', 'dark');
+    root.classList.add(effectiveTheme);
+  }, [effectiveTheme, mounted]);
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+    try {
+      localStorage.setItem(storageKey, newTheme);
+    } catch {
+      // localStorage not available
+    }
+  };
+
+  // Prevent hydration mismatch
+  if (!mounted) {
+    return (
+      <ThemeContext.Provider value={{ theme: defaultTheme, setTheme: () => {}, effectiveTheme: 'light' }}>
+        {children}
+      </ThemeContext.Provider>
+    );
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, effectiveTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}

package/src/theme/index.ts

@@ -0,0 +1 @@
+export { ThemeProvider, useTheme, type Theme, type EffectiveTheme } from './ThemeProvider';