documentation-hub 5.7.2

package/src/components/common/BugReportDialog.tsx

@@ -0,0 +1,193 @@
+import { useUserSettings } from '@/contexts/UserSettingsContext';
+import logger from '@/utils/logger';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Bug, Send, X } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from './Button';
+
+interface BugReportDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function BugReportDialog({ isOpen, onClose }: BugReportDialogProps) {
+  const { settings } = useUserSettings();
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!title.trim() || !description.trim()) return;
+
+    setIsSubmitting(true);
+
+    const bugReport = {
+      Type: 'Bug Report',
+      Email: settings.profile.email,
+      Title: title,
+      Description: description,
+    };
+
+    const apiUrl = settings.apiConnections.bugReportUrl;
+
+    // Check if using default URL - if so, fallback to mailto
+    if (apiUrl === 'https://www.example.com' || !apiUrl) {
+      const subject = encodeURIComponent(`Bug Report: ${title}`);
+      const body = encodeURIComponent(`
+Bug Report
+----------
+Email: ${settings.profile.email}
+Title: ${title}
+
+Description of Issue:
+${description}
+
+Submitted: ${new Date().toLocaleString()}
+      `);
+
+      window.location.href = `mailto:support@example.com?subject=${subject}&body=${body}`;
+
+      // Clear fields and close dialog
+      setTitle('');
+      setDescription('');
+      setIsSubmitting(false);
+      onClose();
+
+      // Show success notification
+      alert('Your bug report has been sent to the Documentation Hub Admin');
+      return;
+    }
+
+    // Use API if configured
+    try {
+      const response = await fetch(apiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(bugReport),
+      });
+
+      if (response.ok) {
+        // Clear fields and close dialog on success
+        setTitle('');
+        setDescription('');
+        onClose();
+
+        // Show success notification
+        alert('Your bug report has been sent to the Documentation Hub Admin');
+      } else {
+        alert('Failed to submit bug report. Please try again.');
+      }
+    } catch (error) {
+      logger.error('Error submitting bug report:', error);
+      alert('Failed to submit bug report. Please check your API configuration.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setTitle('');
+    setDescription('');
+    onClose();
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
+            onClick={handleCancel}
+          />
+
+          {/* Dialog */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 20 }}
+            transition={{ type: 'spring', damping: 20, stiffness: 300 }}
+            className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg z-50"
+          >
+            <div className="bg-background border border-border rounded-lg shadow-xl overflow-hidden">
+              {/* Header */}
+              <div className="flex items-center justify-between p-4 border-b border-border bg-muted/30">
+                <div className="flex items-center gap-2">
+                  <div className="w-8 h-8 rounded-lg bg-linear-to-br from-red-500 to-orange-600 flex items-center justify-center">
+                    <Bug className="w-4 h-4 text-white" />
+                  </div>
+                  <h2 className="text-lg font-semibold">Report a Bug</h2>
+                </div>
+                <button
+                  onClick={handleCancel}
+                  className="p-1 rounded-md hover:bg-muted transition-colors"
+                  aria-label="Close dialog"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+
+              {/* Content */}
+              <div className="p-6 space-y-4">
+                <div>
+                  <label htmlFor="bug-title" className="block text-sm font-medium mb-2">
+                    Title
+                  </label>
+                  <input
+                    id="bug-title"
+                    type="text"
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                    placeholder="Brief description of the issue"
+                    className="w-full px-3 py-2 rounded-md border border-input bg-background focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                    autoFocus
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="bug-description" className="block text-sm font-medium mb-2">
+                    Description of Issue
+                  </label>
+                  <textarea
+                    id="bug-description"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder="Please provide details about the bug, steps to reproduce, and any error messages..."
+                    rows={6}
+                    className="w-full px-3 py-2 rounded-md border border-input bg-background resize-none focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                  />
+                </div>
+
+                <div className="text-xs text-muted-foreground bg-muted/30 p-3 rounded-md">
+                  <p>
+                    <strong>Note:</strong> Your email ({settings.profile.email}) will be included
+                    with this report so we can follow up if needed.
+                  </p>
+                </div>
+              </div>
+
+              {/* Footer */}
+              <div className="flex items-center justify-end gap-2 p-4 border-t border-border bg-muted/30">
+                <Button variant="outline" onClick={handleCancel}>
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleSubmit}
+                  disabled={!title.trim() || !description.trim() || isSubmitting}
+                  icon={<Send className="w-4 h-4" />}
+                >
+                  {isSubmitting ? 'Sending...' : 'Send Report'}
+                </Button>
+              </div>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/components/common/Button.tsx

@@ -0,0 +1,153 @@
+import { cn } from '@/utils/cn';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { motion } from 'framer-motion';
+import { forwardRef, useEffect, useState } from 'react';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        gradient:
+          'bg-linear-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+        xs: 'h-7 px-2 text-xs rounded',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+  icon?: React.ReactNode;
+  showSuccess?: boolean;
+  onSuccess?: () => void;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      loading,
+      icon,
+      children,
+      disabled,
+      showSuccess,
+      onSuccess,
+      ...props
+    },
+    ref
+  ) => {
+    const { asChild, ...buttonProps } = props as any;
+    const [isSuccess, setIsSuccess] = useState(false);
+
+    useEffect(() => {
+      if (showSuccess) {
+        setIsSuccess(true);
+        const timer = setTimeout(() => {
+          setIsSuccess(false);
+          onSuccess?.();
+        }, 2000);
+        return () => clearTimeout(timer);
+      } else {
+        setIsSuccess(false);
+      }
+    }, [showSuccess, onSuccess]);
+
+    return (
+      <motion.button
+        className={cn(
+          buttonVariants({ variant, size, className }),
+          isSuccess && 'bg-green-500 hover:bg-green-500 text-green-50'
+        )}
+        ref={ref}
+        disabled={disabled || loading || isSuccess}
+        whileHover={{ scale: disabled || loading || isSuccess ? 1 : 1.02 }}
+        whileTap={{ scale: disabled || loading || isSuccess ? 1 : 0.98 }}
+        animate={isSuccess ? { scale: [1, 1.05, 1] } : {}}
+        transition={{ duration: 0.2 }}
+        {...buttonProps}
+      >
+        {isSuccess ? (
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            className="flex items-center gap-2"
+          >
+            <svg
+              className="w-5 h-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <motion.path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+                initial={{ pathLength: 0 }}
+                animate={{ pathLength: 1 }}
+                transition={{ duration: 0.3 }}
+              />
+            </svg>
+            Saved!
+          </motion.div>
+        ) : loading ? (
+          <>
+            <svg
+              className="mr-2 h-4 w-4 animate-spin"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+            Loading...
+          </>
+        ) : (
+          <>
+            {icon && <span className="mr-2">{icon}</span>}
+            {children}
+          </>
+        )}
+      </motion.button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/components/common/Card.tsx

@@ -0,0 +1,86 @@
+import { forwardRef } from 'react';
+import { cn } from '@/utils/cn';
+import { motion, HTMLMotionProps } from 'framer-motion';
+
+export interface CardProps extends HTMLMotionProps<'div'> {
+  variant?: 'default' | 'bordered' | 'ghost' | 'glass';
+  interactive?: boolean;
+}
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = 'default', interactive = false, children, ...props }, ref) => {
+    const variants = {
+      default: 'bg-card text-card-foreground shadow-xs',
+      bordered: 'border border-border bg-card text-card-foreground',
+      ghost: 'bg-transparent',
+      glass: 'glass border border-white/10 shadow-lg',
+    };
+
+    return (
+      <motion.div
+        ref={ref}
+        className={cn(
+          'rounded-lg',
+          variants[variant],
+          interactive && 'cursor-pointer transition-shadow duration-200 hover:shadow-md',
+          className
+        )}
+        whileHover={interactive ? { scale: 1.02 } : undefined}
+        whileTap={interactive ? { scale: 0.98 } : undefined}
+        transition={{ duration: 0.2 }}
+        {...props}
+      >
+        {children}
+      </motion.div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+const CardHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+
+CardContent.displayName = 'CardContent';
+
+const CardFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+);
+
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/src/components/common/ColorPickerDialog.tsx

@@ -0,0 +1,177 @@
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Check, Palette, Pipette } from 'lucide-react';
+import { Button } from './Button';
+import { cn } from '@/utils/cn';
+
+interface ColorPickerDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  color: string;
+  onColorChange: (color: string) => void;
+  title?: string;
+}
+
+export function ColorPickerDialog({
+  isOpen,
+  onClose,
+  color,
+  onColorChange,
+  title = 'Pick a Color',
+}: ColorPickerDialogProps) {
+  const [tempColor, setTempColor] = useState(color);
+
+  useEffect(() => {
+    if (isOpen) {
+      setTempColor(color);
+    }
+  }, [isOpen, color]);
+
+  const handleConfirm = () => {
+    onColorChange(tempColor);
+    onClose();
+  };
+
+  const handleCancel = () => {
+    setTempColor(color); // Reset to original
+    onClose();
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/50 backdrop-blur-xs z-50"
+            onClick={handleCancel}
+          />
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.2 }}
+            className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 w-80 bg-background border border-border rounded-xl shadow-2xl"
+          >
+            <div className="flex items-center justify-between p-4 border-b border-border">
+              <h3 className="font-semibold">{title}</h3>
+              <button
+                onClick={handleCancel}
+                className="p-1 rounded-md hover:bg-muted transition-colors"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            <div className="p-6 space-y-4">
+              <div className="space-y-3">
+                <div className="w-full h-32 rounded-lg border border-border relative overflow-hidden group cursor-pointer">
+                  <div
+                    className="absolute inset-0 transition-all"
+                    style={{ backgroundColor: tempColor }}
+                  />
+                  <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/20">
+                    <div className="bg-white/90 px-3 py-1.5 rounded-full flex items-center gap-2 text-sm font-medium">
+                      <Pipette className="w-4 h-4" />
+                      Click to pick color
+                    </div>
+                  </div>
+                  <input
+                    type="color"
+                    value={tempColor}
+                    onChange={(e) => setTempColor(e.target.value)}
+                    className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                  />
+                </div>
+
+                <div className="flex gap-2">
+                  <div className="relative flex-1">
+                    <Palette className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                    <input
+                      type="text"
+                      value={tempColor}
+                      onChange={(e) => {
+                        const value = e.target.value;
+                        if (/^#[0-9A-Fa-f]{0,6}$/.test(value)) {
+                          setTempColor(value);
+                        }
+                      }}
+                      className="w-full pl-10 pr-3 py-2 text-sm border border-border rounded-md bg-background font-mono focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all"
+                      placeholder="#000000"
+                      maxLength={7}
+                    />
+                  </div>
+                  <div
+                    className="w-10 h-10 rounded-md border-2 border-border shadow-inner"
+                    style={{ backgroundColor: tempColor }}
+                  />
+                </div>
+
+                <div>
+                  <p className="text-xs text-muted-foreground mb-2">Quick Colors</p>
+                  <div className="grid grid-cols-8 gap-2">
+                    {[
+                      '#ef4444',
+                      '#f97316',
+                      '#f59e0b',
+                      '#eab308',
+                      '#84cc16',
+                      '#22c55e',
+                      '#10b981',
+                      '#14b8a6',
+                      '#06b6d4',
+                      '#0ea5e9',
+                      '#3b82f6',
+                      '#6366f1',
+                      '#8b5cf6',
+                      '#a855f7',
+                      '#d946ef',
+                      '#ec4899',
+                      '#f43f5e',
+                      '#64748b',
+                      '#475569',
+                      '#334155',
+                      '#1e293b',
+                      '#0f172a',
+                      '#ffffff',
+                      '#000000',
+                    ].map((presetColor) => (
+                      <button
+                        key={presetColor}
+                        onClick={() => setTempColor(presetColor)}
+                        className={cn(
+                          'w-8 h-8 rounded border-2 transition-all',
+                          tempColor === presetColor
+                            ? 'border-primary scale-110'
+                            : 'border-border hover:border-muted-foreground hover:scale-105'
+                        )}
+                        style={{ backgroundColor: presetColor }}
+                        aria-label={`Select ${presetColor}`}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex gap-2 p-4 border-t border-border">
+              <Button variant="outline" className="flex-1" onClick={handleCancel}>
+                Cancel
+              </Button>
+              <Button
+                variant="default"
+                className="flex-1"
+                onClick={handleConfirm}
+                icon={<Check className="w-4 h-4" />}
+              >
+                OK
+              </Button>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}