@moontra/moonui-pro 2.20.1 → 2.20.2

package/src/components/enhanced/dialog.tsx

@@ -1,246 +0,0 @@
-"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 DialogProOverlayProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {
-  blur?: "none" | "sm" | "md" | "lg" | "xl"
-  variant?: "default" | "dark" | "light" | "gradient"
-}
-
-const DialogProOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  DialogProOverlayProps
->(({ 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}
-    />
-  )
-})
-DialogProOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-interface DialogProContentProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-  animation?: "fade" | "scale" | "slide" | "rotate" | "bounce"
-  animationDuration?: number
-  overlay?: boolean
-  overlayProps?: DialogProOverlayProps
-}
-
-const DialogProContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  DialogProContentProps
->(({ 
-  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 }}
-          >
-            <DialogProOverlay {...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>
-  )
-})
-DialogProContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogProHeader = ({
-  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 }}
-  />
-)
-DialogProHeader.displayName = "DialogProHeader"
-
-const DialogProFooter = ({
-  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 }}
-  />
-)
-DialogProFooter.displayName = "DialogProFooter"
-
-const DialogProTitle = 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}
-  />
-))
-DialogProTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogProDescription = 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}
-  />
-))
-DialogProDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog as DialogPro,
-  DialogTrigger as DialogProTrigger,
-  DialogProContent,
-  DialogProHeader,
-  DialogProFooter,
-  DialogProTitle,
-  DialogProDescription,
-  DialogClose as DialogProClose,
-}

package/src/components/enhanced/index.ts

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

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

@@ -1,243 +0,0 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import React from 'react'
-import MoonUIFileUploadPro 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('MoonUIFileUploadPro', () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  it('renders without crashing', () => {
-    render(<MoonUIFileUploadPro />)
-    
-    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(
-      <MoonUIFileUploadPro
-        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(<MoonUIFileUploadPro 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(<MoonUIFileUploadPro 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(
-      <MoonUIFileUploadPro
-        onUpload={mockOnUpload}
-        allowedMimeTypes={['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(<MoonUIFileUploadPro 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(<MoonUIFileUploadPro 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(<MoonUIFileUploadPro 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(<MoonUIFileUploadPro 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(<MoonUIFileUploadPro 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(<MoonUIFileUploadPro 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(<MoonUIFileUploadPro 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(<MoonUIFileUploadPro 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(<MoonUIFileUploadPro className="custom-upload" />)
-    
-    const container = screen.getByText('File Upload').closest('div')
-    expect(container).toHaveClass('custom-upload')
-  })
-
-  it('formats file sizes correctly', () => {
-    render(<MoonUIFileUploadPro />)
-    
-    // This would be tested through the file display after upload
-    // The formatFileSize function should be tested separately
-  })
-
-  it('displays correct file icons', () => {
-    render(<MoonUIFileUploadPro />)
-    
-    // This would be tested through the file display after upload
-    // The getFileIcon function should be tested separately
-  })
-})