@aiready/components 0.11.13 → 0.11.15

package/src/feedback/FeedbackWidget.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { MessageSquare, X, Send, Loader2 } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export interface FeedbackWidgetProps {
+  apiEndpoint?: string;
+  onSuccess?: (message: string) => void;
+  onError?: (error: any) => void;
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+export function FeedbackWidget({
+  apiEndpoint = '/api/feedback',
+  onSuccess,
+  onError,
+  title = 'Share Feedback',
+  description = 'What features would you like to see? Found a bug? Let us know!',
+  className,
+}: FeedbackWidgetProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [message, setMessage] = useState('');
+  const [status, setStatus] = useState<'idle' | 'loading'>('idle');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!message.trim()) return;
+
+    setStatus('loading');
+    try {
+      const res = await fetch(apiEndpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message }),
+      });
+
+      if (!res.ok) throw new Error('Failed to send feedback');
+
+      onSuccess?.(message);
+      setMessage('');
+      setIsOpen(false);
+    } catch (err) {
+      onError?.(err);
+    } finally {
+      setStatus('idle');
+    }
+  };
+
+  return (
+    <div className={cn('fixed bottom-6 right-6 z-50', className)}>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            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"
+          >
+            <div className="flex items-center justify-between mb-4">
+              <h4 className="font-bold text-white flex items-center gap-2 text-sm">
+                <MessageSquare className="w-4 h-4 text-cyan-400" />
+                {title}
+              </h4>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="text-slate-500 hover:text-white"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            <p className="text-xs text-slate-400 mb-4">{description}</p>
+
+            <form onSubmit={handleSubmit} className="space-y-3">
+              <textarea
+                autoFocus
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                placeholder="Type your feedback here..."
+                required
+                className="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-3 py-2 text-sm text-white h-24 resize-none focus:outline-none focus:ring-1 focus:ring-cyan-500 transition-all"
+              />
+              <button
+                type="submit"
+                disabled={status === 'loading' || !message.trim()}
+                className="w-full py-2 bg-cyan-600 hover:bg-cyan-500 disabled:opacity-50 text-white font-bold rounded-lg text-sm transition-all flex items-center justify-center gap-2"
+              >
+                {status === 'loading' ? (
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                ) : (
+                  <>
+                    <Send className="w-3 h-3" />
+                    Send Feedback
+                  </>
+                )}
+              </button>
+            </form>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <motion.button
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-12 h-12 bg-gradient-to-br from-cyan-600 to-blue-600 text-white rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/20 group overflow-hidden relative"
+      >
+        <div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity" />
+        {isOpen ? (
+          <X className="w-6 h-6" />
+        ) : (
+          <MessageSquare className="w-6 h-6" />
+        )}
+      </motion.button>
+    </div>
+  );
+}

package/src/feedback/index.ts

@@ -1,12 +1,3 @@
-export {
-  LoadingSpinner,
-  LoadingOverlay,
-  type LoadingSpinnerProps,
-  type LoadingOverlayProps,
-} from './LoadingSpinner';
-export {
-  ErrorDisplay,
-  EmptyState,
-  type ErrorDisplayProps,
-  type EmptyStateProps,
-} from './ErrorDisplay';
+export * from './LoadingSpinner';
+export * from './ErrorDisplay';
+export * from './FeedbackWidget';

package/src/index.ts

@@ -7,10 +7,15 @@ export {
   CardTitle,
   CardDescription,
   CardContent,
+  GlassCard,
+  GlassCardHeader,
+  GlassCardContent,
 } from './components/card';
 export { Input, type InputProps } from './components/input';
 export { Label, type LabelProps } from './components/label';
 export { Badge, badgeVariants, type BadgeProps } from './components/badge';
+export { Modal, type ModalProps } from './components/modal';
+export * from './components/icons';
 
 // Layout Components
 export { Container, type ContainerProps } from './components/container';
@@ -39,16 +44,24 @@ export { CodeBlock, InlineCode, type CodeBlockProps } from './code-block';
 // Navigation
 export {
   Breadcrumb,
+  PlatformShell,
   type BreadcrumbProps,
   type BreadcrumbItem,
+  type PlatformShellProps,
+  type NavItem,
+  type User,
+  type Team,
+  type TeamMember,
 } from './navigation';
 
 // Data Display
 export {
   ScoreBar,
   ScoreCard,
+  ScoreCircle,
   type ScoreBarProps,
   type ScoreCardProps,
+  type ScoreCircleProps,
   type ScoreRating,
 } from './data-display';
 
@@ -57,10 +70,12 @@ export {
   LoadingSpinner,
   LoadingOverlay,
   ErrorDisplay,
+  FeedbackWidget,
   EmptyState,
   type LoadingSpinnerProps,
   type LoadingOverlayProps,
   type ErrorDisplayProps,
+  type FeedbackWidgetProps,
   type EmptyStateProps,
 } from './feedback';
 

package/src/navigation/Breadcrumb.tsx

@@ -1,69 +1,43 @@
 'use client';
 
-import React from 'react';
+import { motion } from 'framer-motion';
 import { cn } from '../utils/cn';
 
 export interface BreadcrumbItem {
   label: string;
-  href?: 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 />;
-
+export function Breadcrumb({ items, className }: BreadcrumbProps) {
   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>
-          );
-        })}
+    <nav aria-label="Breadcrumb" className={cn('mb-8', className)}>
+      <ol className="flex items-center gap-2 text-sm">
+        {items.map((item, index) => (
+          <motion.li
+            key={item.href}
+            initial={{ opacity: 0, x: -10 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: index * 0.1 }}
+            className="flex items-center gap-2"
+          >
+            {index > 0 && <span className="text-slate-600">/</span>}
+            {index === items.length - 1 ? (
+              <span className="text-cyan-400 font-medium">{item.label}</span>
+            ) : (
+              <a
+                href={item.href}
+                className="text-slate-400 hover:text-white transition-colors"
+              >
+                {item.label}
+              </a>
+            )}
+          </motion.li>
+        ))}
       </ol>
     </nav>
   );

package/src/navigation/PlatformShell.tsx

@@ -0,0 +1,408 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '../utils/cn';
+import {
+  RocketIcon,
+  ChartIcon,
+  TrendingUpIcon,
+  RobotIcon,
+  SettingsIcon,
+} from '../components/icons';
+
+// --- Types ---
+
+export interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ElementType;
+}
+
+export interface User {
+  id: string;
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+}
+
+export interface Team {
+  id: string;
+  name: string;
+}
+
+export interface TeamMember {
+  teamId: string;
+  team: Team;
+}
+
+export interface PlatformShellProps {
+  children: React.ReactNode;
+  user: User | null;
+  teams?: TeamMember[];
+  overallScore?: number | null;
+  activePage?: string;
+  pathname?: string;
+  onNavigate?: (href: string) => void;
+  onSignOut?: () => void;
+  onSwitchTeam?: (teamId: string | 'personal') => void;
+  logoUrl?: string;
+  navItems?: NavItem[];
+  LinkComponent?: React.ElementType;
+}
+
+// --- Internal Components ---
+
+function NavItemComponent({
+  href,
+  label,
+  icon: Icon,
+  isActive,
+  onClick,
+  LinkComponent = 'a',
+}: NavItem & {
+  isActive: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+  LinkComponent?: any;
+}) {
+  const Component = LinkComponent;
+  return (
+    <Component href={href} onClick={onClick} className="block group">
+      <div
+        className={cn(
+          'flex items-center gap-3 px-4 py-3 rounded-xl transition-all',
+          isActive
+            ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20'
+            : 'text-slate-400 hover:text-white hover:bg-slate-800/50 border border-transparent'
+        )}
+      >
+        <Icon
+          className={cn(
+            'w-5 h-5',
+            isActive
+              ? 'text-cyan-400'
+              : 'text-slate-500 group-hover:text-slate-300'
+          )}
+        />
+        <span className="text-sm font-semibold tracking-tight">{label}</span>
+        {isActive && (
+          <motion.div
+            layoutId="sidebar-active"
+            className="ml-auto w-1.5 h-1.5 rounded-full bg-cyan-400 shadow-[0_0_8px_rgba(34,211,238,0.8)]"
+          />
+        )}
+      </div>
+    </Component>
+  );
+}
+
+function UserMenu({
+  user,
+  teams = [],
+  currentTeamId,
+  onSwitchTeam,
+  onSignOut,
+}: {
+  user: User;
+  teams: TeamMember[];
+  currentTeamId: string | 'personal';
+  onSwitchTeam?: (teamId: string | 'personal') => void;
+  onSignOut?: () => void;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const currentWorkspaceName =
+    currentTeamId === 'personal'
+      ? 'Personal Workspace'
+      : teams.find((t) => t.teamId === currentTeamId)?.team.name ||
+        'Team Workspace';
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 p-1.5 rounded-xl hover:bg-slate-800/50 transition-all border border-transparent hover:border-slate-700/50"
+      >
+        {user.image ? (
+          <img
+            src={user.image}
+            alt={user.name || 'User'}
+            className="w-8 h-8 rounded-lg border border-cyan-500/30"
+          />
+        ) : (
+          <div className="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center text-xs font-bold text-white">
+            {user.name?.[0] || user.email?.[0]}
+          </div>
+        )}
+        <div className="text-left hidden sm:block">
+          <p className="text-xs font-bold text-white leading-none mb-0.5">
+            {user.name || user.email?.split('@')[0]}
+          </p>
+          <p className="text-[10px] text-slate-400 leading-none truncate max-w-[100px]">
+            {currentWorkspaceName}
+          </p>
+        </div>
+        <svg
+          className={cn(
+            'w-4 h-4 text-slate-500 transition-transform',
+            isOpen && 'rotate-180'
+          )}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: 10, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 10, scale: 0.95 }}
+            className="absolute right-0 mt-2 w-64 bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl z-50 overflow-hidden"
+          >
+            <div className="p-4 border-b border-slate-800">
+              <p className="text-sm font-bold text-white">{user.name}</p>
+              <p className="text-xs text-slate-400 truncate">{user.email}</p>
+            </div>
+
+            <div className="p-2 border-b border-slate-800">
+              <p className="px-3 py-1 text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1">
+                Workspaces
+              </p>
+              <button
+                onClick={() => {
+                  onSwitchTeam?.('personal');
+                  setIsOpen(false);
+                }}
+                className={cn(
+                  'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors',
+                  currentTeamId === 'personal'
+                    ? 'bg-cyan-500/10 text-cyan-400'
+                    : 'text-slate-400 hover:bg-slate-800 hover:text-white'
+                )}
+              >
+                <div className="w-5 h-5 rounded bg-slate-700 flex items-center justify-center text-[10px] font-bold">
+                  P
+                </div>
+                Personal
+              </button>
+              {teams.map((t) => (
+                <button
+                  key={t.teamId}
+                  onClick={() => {
+                    onSwitchTeam?.(t.teamId);
+                    setIsOpen(false);
+                  }}
+                  className={cn(
+                    'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors',
+                    currentTeamId === t.teamId
+                      ? 'bg-purple-500/10 text-purple-400'
+                      : 'text-slate-400 hover:bg-slate-800 hover:text-white'
+                  )}
+                >
+                  <div className="w-5 h-5 rounded bg-purple-600 flex items-center justify-center text-[10px] font-bold">
+                    {t.team.name[0]}
+                  </div>
+                  {t.team.name}
+                </button>
+              ))}
+            </div>
+
+            <div className="p-2">
+              <button
+                onClick={onSignOut}
+                className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-red-400 hover:bg-red-500/10 transition-colors"
+              >
+                <svg
+                  className="w-4 h-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                  />
+                </svg>
+                Sign out
+              </button>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+// --- Main Shell ---
+
+export function PlatformShell({
+  children,
+  user,
+  teams = [],
+  overallScore,
+  activePage,
+  pathname = '',
+  onNavigate,
+  onSignOut,
+  onSwitchTeam,
+  logoUrl = '/logo-text-transparent-dark-theme.png',
+  navItems = [
+    { href: '/dashboard', label: 'Dashboard', icon: RocketIcon },
+    { href: '/strategy', label: 'Scan Strategy', icon: SettingsIcon },
+    { href: '/trends', label: 'Trends Explorer', icon: TrendingUpIcon },
+    { href: '/map', label: 'Codebase Map', icon: RobotIcon },
+    { href: '/metrics', label: 'Methodology', icon: ChartIcon },
+  ],
+  LinkComponent = 'a',
+}: PlatformShellProps) {
+  const [currentTeamId, setCurrentTeamId] = useState<string | 'personal'>(
+    'personal'
+  );
+
+  const handleSwitchTeam = (teamId: string | 'personal') => {
+    setCurrentTeamId(teamId);
+    onSwitchTeam?.(teamId);
+  };
+
+  const Sidebar = () => (
+    <aside className="hidden lg:flex flex-col w-64 bg-slate-950/50 border-r border-slate-800 h-screen sticky top-0 overflow-y-auto">
+      <div className="p-6 flex flex-col h-full">
+        <div className="flex items-center justify-center mb-10">
+          <img src={logoUrl} alt="AIReady" className="h-9 w-auto" />
+        </div>
+
+        <nav className="space-y-1.5 flex-1">
+          <p className="px-4 py-2 text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">
+            Workspace
+          </p>
+          {navItems.map((item) => (
+            <NavItemComponent
+              key={item.href}
+              {...item}
+              LinkComponent={LinkComponent}
+              isActive={
+                pathname === item.href ||
+                (item.href !== '/dashboard' && pathname.startsWith(item.href))
+              }
+              onClick={(e) => {
+                if (onNavigate) {
+                  e.preventDefault();
+                  onNavigate(item.href);
+                }
+              }}
+            />
+          ))}
+        </nav>
+
+        <div className="mt-auto pt-6 space-y-4">
+          <div className="p-4 rounded-2xl bg-gradient-to-br from-indigo-500/10 to-purple-500/10 border border-indigo-500/20">
+            <p className="text-xs font-bold text-white mb-1">AI Insights</p>
+            <p className="text-[10px] text-slate-400 leading-relaxed">
+              {overallScore != null
+                ? `Your codebase is ${overallScore}% ready for AI agents.`
+                : 'Run a scan to see your AI-readiness score.'}
+            </p>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+
+  const Navbar = () => (
+    <header className="sticky top-0 z-20 h-16 border-b border-indigo-500/10 backdrop-blur-md bg-slate-950/20 px-4 sm:px-6 lg:px-8">
+      <div className="h-full flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <p className="text-xs font-semibold text-slate-500 uppercase tracking-widest hidden sm:block">
+            {activePage || 'Dashboard'}
+          </p>
+        </div>
+
+        <div className="flex items-center gap-4">
+          {user && (
+            <UserMenu
+              user={user}
+              teams={teams}
+              currentTeamId={currentTeamId}
+              onSwitchTeam={handleSwitchTeam}
+              onSignOut={onSignOut}
+            />
+          )}
+        </div>
+      </div>
+    </header>
+  );
+
+  return (
+    <div
+      className={cn(
+        'min-h-screen bg-[#0a0a0f]',
+        user && 'flex overflow-hidden'
+      )}
+    >
+      {user && <Sidebar />}
+
+      <div className={cn('flex-1 flex flex-col min-w-0', user && 'h-screen')}>
+        {user && <Navbar />}
+
+        <main
+          className={cn('relative flex-1', user && 'overflow-y-auto', 'z-10')}
+        >
+          {user && (
+            <>
+              <div className="absolute inset-0 pointer-events-none -z-10 overflow-hidden">
+                <div
+                  className="absolute rounded-full blur-[60px] opacity-20 bg-radial-gradient from-blue-600/60 to-transparent w-96 h-96 -top-48 -right-48"
+                  style={{
+                    background:
+                      'radial-gradient(circle, rgba(59, 130, 246, 0.6), transparent)',
+                  }}
+                />
+                <div
+                  className="absolute rounded-full blur-[60px] opacity-20 bg-radial-gradient from-purple-600/60 to-transparent w-80 h-80 bottom-0 -left-40"
+                  style={{
+                    background:
+                      'radial-gradient(circle, rgba(139, 92, 246, 0.6), transparent)',
+                  }}
+                />
+              </div>
+              <div
+                className="absolute inset-0 opacity-10 -z-10"
+                style={{
+                  backgroundImage:
+                    'linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px)',
+                  backgroundSize: '50px 50px',
+                }}
+              />
+            </>
+          )}
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}