@aiready/components 0.1.21 → 0.1.24

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';

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';
+}