@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/components/enhanced/dialog.tsx

@@ -0,0 +1,248 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { motion, AnimatePresence } from "framer-motion"
+import { X } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+const Dialog = DialogPrimitive.Root
+const DialogTrigger = DialogPrimitive.Trigger
+const DialogPortal = DialogPrimitive.Portal
+const DialogClose = DialogPrimitive.Close
+
+interface EnhancedDialogOverlayProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {
+  blur?: "none" | "sm" | "md" | "lg" | "xl"
+  variant?: "default" | "dark" | "light" | "gradient"
+}
+
+const EnhancedDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  EnhancedDialogOverlayProps
+>(({ className, blur = "md", variant = "default", ...props }, ref) => {
+  const blurClasses = {
+    none: "",
+    sm: "backdrop-blur-sm",
+    md: "backdrop-blur-md",
+    lg: "backdrop-blur-lg",
+    xl: "backdrop-blur-xl",
+  }
+
+  const variantClasses = {
+    default: "bg-black/80",
+    dark: "bg-black/90",
+    light: "bg-white/80",
+    gradient: "bg-gradient-to-br from-black/80 via-gray-900/80 to-black/80",
+  }
+
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-50",
+        blurClasses[blur],
+        variantClasses[variant],
+        className
+      )}
+      {...props}
+    />
+  )
+})
+EnhancedDialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+interface EnhancedDialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  animation?: "fade" | "scale" | "slide" | "rotate" | "bounce"
+  animationDuration?: number
+  overlay?: boolean
+  overlayProps?: EnhancedDialogOverlayProps
+}
+
+const EnhancedDialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  EnhancedDialogContentProps
+>(({ 
+  className, 
+  children, 
+  animation = "scale",
+  animationDuration = 0.3,
+  overlay = true,
+  overlayProps = {},
+  ...props 
+}, ref) => {
+  const animationVariants = {
+    fade: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 }
+    },
+    scale: {
+      initial: { opacity: 0, scale: 0.9, y: 20 },
+      animate: { opacity: 1, scale: 1, y: 0 },
+      exit: { opacity: 0, scale: 0.9, y: 20 }
+    },
+    slide: {
+      initial: { opacity: 0, y: 100 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 100 }
+    },
+    rotate: {
+      initial: { opacity: 0, scale: 0.9, rotate: -10 },
+      animate: { opacity: 1, scale: 1, rotate: 0 },
+      exit: { opacity: 0, scale: 0.9, rotate: 10 }
+    },
+    bounce: {
+      initial: { opacity: 0, scale: 0.3, y: -100 },
+      animate: { 
+        opacity: 1, 
+        scale: 1, 
+        y: 0,
+        transition: {
+          type: "spring",
+          duration: animationDuration,
+          bounce: 0.5
+        }
+      },
+      exit: { opacity: 0, scale: 0.5, y: -50 }
+    }
+  }
+
+  return (
+    <AnimatePresence>
+      <DialogPortal>
+        {overlay && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: animationDuration * 0.8 }}
+          >
+            <EnhancedDialogOverlay {...overlayProps} />
+          </motion.div>
+        )}
+        <motion.div
+          className="fixed inset-0 z-50 flex items-center justify-center p-4"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+        >
+          <DialogPrimitive.Content
+            ref={ref}
+            asChild
+            className={cn(
+              "relative w-full max-w-lg",
+              className
+            )}
+            {...props}
+          >
+            <motion.div
+              variants={animationVariants[animation]}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              transition={{ 
+                duration: animationDuration,
+                ease: "easeInOut"
+              }}
+              className={cn(
+                "relative bg-background rounded-lg shadow-2xl",
+                "border border-border",
+                "w-full max-w-lg",
+                "max-h-[90vh] overflow-auto",
+                className
+              )}
+            >
+              {/* Glass effect overlay */}
+              <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-white/0 pointer-events-none" />
+              
+              {/* Content wrapper with padding */}
+              <div className="relative p-6">
+                {children}
+              </div>
+
+              {/* Close button with enhanced styling */}
+              <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-all hover:opacity-100 hover:rotate-90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>
+            </motion.div>
+          </DialogPrimitive.Content>
+        </motion.div>
+      </DialogPortal>
+    </AnimatePresence>
+  )
+})
+EnhancedDialogContent.displayName = DialogPrimitive.Content.displayName
+
+const EnhancedDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <motion.div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    initial={{ opacity: 0, y: -10 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ delay: 0.1, duration: 0.3 }}
+    {...props}
+  />
+)
+EnhancedDialogHeader.displayName = "EnhancedDialogHeader"
+
+const EnhancedDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <motion.div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    initial={{ opacity: 0, y: 10 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ delay: 0.2, duration: 0.3 }}
+    {...props}
+  />
+)
+EnhancedDialogFooter.displayName = "EnhancedDialogFooter"
+
+const EnhancedDialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+EnhancedDialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const EnhancedDialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+EnhancedDialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog as EnhancedDialog,
+  DialogTrigger as EnhancedDialogTrigger,
+  EnhancedDialogContent,
+  EnhancedDialogHeader,
+  EnhancedDialogFooter,
+  EnhancedDialogTitle,
+  EnhancedDialogDescription,
+  DialogClose as EnhancedDialogClose,
+}

package/src/components/enhanced/index.ts

@@ -0,0 +1,3 @@
+export * from './button'
+export * from './card'
+export * from './dialog'

package/src/components/error-boundary/index.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import React, { Component, ErrorInfo, ReactNode } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
+import { Button } from "../ui/button"
+import { AlertTriangle, RefreshCw, Lock, Sparkles } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { useSubscription } from "../../hooks/use-subscription"
+
+export interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback?: ReactNode
+  className?: string
+  onError?: (error: Error, errorInfo: ErrorInfo) => void
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error?: Error
+}
+
+class ErrorBoundaryInternal extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.props.onError?.(error, errorInfo)
+    console.error('ErrorBoundary caught an error:', error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+
+      return (
+        <div className={cn("flex items-center justify-center min-h-[200px] p-4", this.props.className)}>
+          <Card className="w-full max-w-md">
+            <CardHeader className="text-center">
+              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+                <AlertTriangle className="h-6 w-6 text-red-600" />
+              </div>
+              <CardTitle>Something went wrong</CardTitle>
+              <CardDescription>
+                An error occurred while rendering this component
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="text-center">
+              <Button 
+                onClick={() => this.setState({ hasError: false, error: undefined })}
+                className="mt-4"
+              >
+                <RefreshCw className="mr-2 h-4 w-4" />
+                Try again
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+function ErrorBoundaryWrapper(props: ErrorBoundaryProps) {
+  // Check if we're in docs mode or have pro access
+  const docsProAccess = { hasAccess: true } // Pro access assumed in package
+  const { hasProAccess, isLoading } = useSubscription()
+  
+  // In docs mode, always show the component
+  const canShowComponent = docsProAccess.isDocsMode || hasProAccess
+  
+  // If not in docs mode and no pro access, show upgrade prompt
+  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+    return (
+      <Card className={cn("w-fit", props.className)}>
+        <CardContent className="py-6 text-center">
+          <div className="space-y-4">
+            <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
+              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-sm mb-2">Pro Feature</h3>
+              <p className="text-muted-foreground text-xs mb-4">
+                Error Boundary is available exclusively to MoonUI Pro subscribers.
+              </p>
+              <a href="/pricing">
+                <Button size="sm">
+                  <Sparkles className="mr-2 h-4 w-4" />
+                  Upgrade to Pro
+                </Button>
+              </a>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return <ErrorBoundaryInternal {...props} />
+}
+
+export const ErrorBoundary = ErrorBoundaryWrapper

package/src/components/file-upload/file-upload.test.tsx

@@ -0,0 +1,242 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { FileUpload } from './index'
+
+// Mock FileReader
+const mockFileReader = {
+  readAsDataURL: jest.fn(),
+  result: 'data:image/png;base64,mock-base64-data',
+  onload: null as any,
+  onerror: null as any,
+}
+
+global.FileReader = jest.fn(() => mockFileReader) as any
+
+// Mock file objects
+const createMockFile = (name: string, size: number, type: string) => {
+  const file = new File(['mock content'], name, { type })
+  Object.defineProperty(file, 'size', { value: size })
+  return file
+}
+
+describe('FileUpload', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders without crashing', () => {
+    render(<FileUpload />)
+    
+    expect(screen.getByText('File Upload')).toBeInTheDocument()
+    expect(screen.getByText('Drag and drop files here, or click to select')).toBeInTheDocument()
+  })
+
+  it('renders with custom title and description', () => {
+    render(
+      <FileUpload
+        accept="image/*"
+        maxSize={5}
+        multiple
+      />
+    )
+    
+    expect(screen.getByText('Upload up to 5 files (max 5MB each)')).toBeInTheDocument()
+    expect(screen.getByText('Accepted types: image/*')).toBeInTheDocument()
+  })
+
+  it('handles file selection', async () => {
+    const mockOnUpload = jest.fn()
+    render(<FileUpload onUpload={mockOnUpload} />)
+    
+    const file = createMockFile('test.jpg', 1024, 'image/jpeg')
+    const input = screen.getByRole('button', { hidden: true }) // Hidden file input
+    
+    fireEvent.change(input, { target: { files: [file] } })
+    
+    await waitFor(() => {
+      expect(mockOnUpload).toHaveBeenCalledWith([file])
+    })
+  })
+
+  it('validates file size', () => {
+    const mockOnUpload = jest.fn()
+    render(<FileUpload onUpload={mockOnUpload} maxSize={1} />)
+    
+    const file = createMockFile('large-file.jpg', 2 * 1024 * 1024, 'image/jpeg') // 2MB
+    const input = screen.getByRole('button', { hidden: true })
+    
+    // Mock alert
+    global.alert = jest.fn()
+    
+    fireEvent.change(input, { target: { files: [file] } })
+    
+    expect(global.alert).toHaveBeenCalledWith('large-file.jpg: File size must be less than 1MB')
+    expect(mockOnUpload).not.toHaveBeenCalled()
+  })
+
+  it('validates file type', () => {
+    const mockOnUpload = jest.fn()
+    render(
+      <FileUpload
+        onUpload={mockOnUpload}
+        allowedTypes={['image/jpeg', 'image/png']}
+      />
+    )
+    
+    const file = createMockFile('document.pdf', 1024, 'application/pdf')
+    const input = screen.getByRole('button', { hidden: true })
+    
+    global.alert = jest.fn()
+    
+    fireEvent.change(input, { target: { files: [file] } })
+    
+    expect(global.alert).toHaveBeenCalledWith('document.pdf: File type application/pdf is not allowed')
+    expect(mockOnUpload).not.toHaveBeenCalled()
+  })
+
+  it('handles multiple files', async () => {
+    const mockOnUpload = jest.fn()
+    render(<FileUpload onUpload={mockOnUpload} multiple />)
+    
+    const files = [
+      createMockFile('file1.jpg', 1024, 'image/jpeg'),
+      createMockFile('file2.png', 2048, 'image/png'),
+    ]
+    const input = screen.getByRole('button', { hidden: true })
+    
+    fireEvent.change(input, { target: { files } })
+    
+    await waitFor(() => {
+      expect(mockOnUpload).toHaveBeenCalledWith(files)
+    })
+  })
+
+  it('respects maxFiles limit', () => {
+    const mockOnUpload = jest.fn()
+    render(<FileUpload onUpload={mockOnUpload} maxFiles={2} />)
+    
+    const files = [
+      createMockFile('file1.jpg', 1024, 'image/jpeg'),
+      createMockFile('file2.png', 1024, 'image/png'),
+      createMockFile('file3.gif', 1024, 'image/gif'),
+    ]
+    const input = screen.getByRole('button', { hidden: true })
+    
+    global.alert = jest.fn()
+    
+    fireEvent.change(input, { target: { files } })
+    
+    expect(global.alert).toHaveBeenCalledWith('Maximum 2 files allowed')
+    expect(mockOnUpload).not.toHaveBeenCalled()
+  })
+
+  it('handles drag and drop', () => {
+    const mockOnUpload = jest.fn()
+    render(<FileUpload onUpload={mockOnUpload} />)
+    
+    const dropZone = screen.getByText('Drag and drop files here, or click to select').closest('div')
+    const file = createMockFile('test.jpg', 1024, 'image/jpeg')
+    
+    fireEvent.dragOver(dropZone!, {
+      dataTransfer: { files: [file] },
+    })
+    
+    expect(dropZone).toHaveClass('border-primary')
+    
+    fireEvent.drop(dropZone!, {
+      dataTransfer: { files: [file] },
+    })
+    
+    expect(dropZone).not.toHaveClass('border-primary')
+  })
+
+  it('handles file removal', async () => {
+    const mockOnRemove = jest.fn()
+    render(<FileUpload onRemove={mockOnRemove} />)
+    
+    const file = createMockFile('test.jpg', 1024, 'image/jpeg')
+    const input = screen.getByRole('button', { hidden: true })
+    
+    fireEvent.change(input, { target: { files: [file] } })
+    
+    await waitFor(() => {
+      expect(screen.getByText('test.jpg')).toBeInTheDocument()
+    })
+    
+    const removeButton = screen.getByRole('button', { name: /remove/i })
+    fireEvent.click(removeButton)
+    
+    expect(mockOnRemove).toHaveBeenCalledWith(file)
+  })
+
+  it('shows progress during upload', async () => {
+    const mockOnUpload = jest.fn().mockResolvedValue(undefined)
+    render(<FileUpload onUpload={mockOnUpload} />)
+    
+    const file = createMockFile('test.jpg', 1024, 'image/jpeg')
+    const input = screen.getByRole('button', { hidden: true })
+    
+    fireEvent.change(input, { target: { files: [file] } })
+    
+    await waitFor(() => {
+      expect(screen.getByText('Uploading files...')).toBeInTheDocument()
+    })
+  })
+
+  it('handles upload success', async () => {
+    const mockOnUpload = jest.fn().mockResolvedValue(undefined)
+    render(<FileUpload onUpload={mockOnUpload} />)
+    
+    const file = createMockFile('test.jpg', 1024, 'image/jpeg')
+    const input = screen.getByRole('button', { hidden: true })
+    
+    fireEvent.change(input, { target: { files: [file] } })
+    
+    await waitFor(() => {
+      expect(screen.getByText('success')).toBeInTheDocument()
+    })
+  })
+
+  it('handles upload error', async () => {
+    const mockOnUpload = jest.fn().mockRejectedValue(new Error('Upload failed'))
+    render(<FileUpload onUpload={mockOnUpload} />)
+    
+    const file = createMockFile('test.jpg', 1024, 'image/jpeg')
+    const input = screen.getByRole('button', { hidden: true })
+    
+    fireEvent.change(input, { target: { files: [file] } })
+    
+    await waitFor(() => {
+      expect(screen.getByText('error')).toBeInTheDocument()
+      expect(screen.getByText('Upload failed')).toBeInTheDocument()
+    })
+  })
+
+  it('is disabled when disabled prop is true', () => {
+    render(<FileUpload disabled />)
+    
+    const dropZone = screen.getByText('Drag and drop files here, or click to select').closest('div')
+    expect(dropZone).toHaveClass('cursor-not-allowed')
+  })
+
+  it('applies custom className', () => {
+    render(<FileUpload className="custom-upload" />)
+    
+    const container = screen.getByText('File Upload').closest('div')
+    expect(container).toHaveClass('custom-upload')
+  })
+
+  it('formats file sizes correctly', () => {
+    render(<FileUpload />)
+    
+    // This would be tested through the file display after upload
+    // The formatFileSize function should be tested separately
+  })
+
+  it('displays correct file icons', () => {
+    render(<FileUpload />)
+    
+    // This would be tested through the file display after upload
+    // The getFileIcon function should be tested separately
+  })
+})