@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/draggable-list/index.tsx

@@ -1,100 +0,0 @@
-"use client"
-
-import React, { ReactNode } from "react"
-import { DragDropContext, Droppable, Draggable, DropResult } from "@hello-pangea/dnd"
-import { cn } from '../../lib/utils'
-
-export interface DraggableListProps<T> {
-  items: T[]
-  onReorder: (items: T[]) => void
-  renderItem: (item: T, index: number) => ReactNode
-  keyExtractor: (item: T) => string
-  direction?: "vertical" | "horizontal"
-  className?: string
-  droppableId?: string
-  disabled?: boolean
-}
-
-export function DraggableList<T>({
-  items,
-  onReorder,
-  renderItem,
-  keyExtractor,
-  direction = "vertical",
-  className,
-  droppableId = "draggable-list",
-  disabled = false,
-}: DraggableListProps<T>) {
-  const handleDragEnd = (result: DropResult) => {
-    if (!result.destination || disabled) {
-      return
-    }
-
-    const sourceIndex = result.source.index
-    const destinationIndex = result.destination.index
-
-    if (sourceIndex === destinationIndex) {
-      return
-    }
-
-    const newItems = Array.from(items)
-    const [reorderedItem] = newItems.splice(sourceIndex, 1)
-    newItems.splice(destinationIndex, 0, reorderedItem)
-
-    onReorder(newItems)
-  }
-
-  return (
-    <DragDropContext onDragEnd={handleDragEnd}>
-      <Droppable 
-        droppableId={droppableId} 
-        direction={direction}
-        isDropDisabled={disabled}
-      >
-        {(provided, snapshot) => (
-          <div
-            {...provided.droppableProps}
-            ref={provided.innerRef}
-            className={cn(
-              "space-y-2",
-              direction === "horizontal" && "flex space-y-0 space-x-2",
-              snapshot.isDraggingOver && "bg-muted/50 rounded-lg",
-              className
-            )}
-          >
-            {items.map((item, index) => (
-              <Draggable
-                key={keyExtractor(item)}
-                draggableId={keyExtractor(item)}
-                index={index}
-                isDragDisabled={disabled}
-              >
-                {(provided, snapshot) => (
-                  <div
-                    ref={provided.innerRef}
-                    {...provided.draggableProps}
-                    {...provided.dragHandleProps}
-                    className={cn(
-                      "transition-all duration-200",
-                      snapshot.isDragging && "rotate-2 scale-105 shadow-lg z-50",
-                      disabled && "cursor-not-allowed opacity-50"
-                    )}
-                    style={{
-                      ...provided.draggableProps.style,
-                      transform: snapshot.isDragging
-                        ? provided.draggableProps.style?.transform
-                        : "none",
-                    }}
-                  >
-                    {renderItem(item, index)}
-                  </div>
-                )}
-              </Draggable>
-            ))}
-            {provided.placeholder}
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
-  )
-}

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

@@ -1,232 +0,0 @@
-"use client"
-
-import React, { Component, ErrorInfo, ReactNode, ComponentType, useEffect, useRef } 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"
-
-// Types for error fallback component props
-export interface ErrorFallbackProps {
-  error: Error
-  resetErrorBoundary: () => void
-  errorInfo?: ErrorInfo
-}
-
-interface ErrorBoundaryProps {
-  children: ReactNode
-  fallback?: ComponentType<ErrorFallbackProps> | ReactNode
-  className?: string
-  onError?: (error: Error, errorInfo: ErrorInfo) => void
-  onReset?: () => void
-  isolate?: boolean
-  resetKeys?: unknown[]
-  resetOnPropsChange?: boolean
-  showErrorDetails?: boolean
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean
-  error?: Error
-  errorInfo?: ErrorInfo
-}
-
-class ErrorBoundaryInternal extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  resetTimeoutId: NodeJS.Timeout | null = null
-  previousResetKeys: unknown[] = []
-
-  constructor(props: ErrorBoundaryProps) {
-    super(props)
-    this.state = { hasError: false }
-    this.previousResetKeys = props.resetKeys || []
-  }
-
-  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
-    return { hasError: true, error }
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    const { onError, isolate } = this.props
-    
-    // Store error info in state for fallback component
-    this.setState({ errorInfo })
-    
-    // Call error handler if provided
-    onError?.(error, errorInfo)
-    
-    // Log error (with isolation context if applicable)
-    if (isolate) {
-      console.error('[Isolated ErrorBoundary] caught an error:', error, errorInfo)
-    } else {
-      console.error('ErrorBoundary caught an error:', error, errorInfo)
-    }
-  }
-
-  componentDidUpdate(prevProps: ErrorBoundaryProps) {
-    const { resetKeys, resetOnPropsChange } = this.props
-    const { hasError } = this.state
-    
-    // Check if we should reset based on resetKeys change
-    if (hasError && resetKeys) {
-      const hasResetKeyChanged = resetKeys.some(
-        (key, index) => key !== this.previousResetKeys[index]
-      )
-      
-      if (hasResetKeyChanged) {
-        this.previousResetKeys = resetKeys
-        this.resetErrorBoundary()
-      }
-    }
-    
-    // Reset on any props change if enabled
-    if (hasError && resetOnPropsChange && prevProps !== this.props) {
-      // Avoid resetting due to children changes
-      const propsWithoutChildren = { ...this.props, children: null }
-      const prevPropsWithoutChildren = { ...prevProps, children: null }
-      
-      if (JSON.stringify(propsWithoutChildren) !== JSON.stringify(prevPropsWithoutChildren)) {
-        this.resetErrorBoundary()
-      }
-    }
-  }
-
-  resetErrorBoundary = () => {
-    const { onReset } = this.props
-    onReset?.()
-    this.setState({ hasError: false, error: undefined, errorInfo: undefined })
-  }
-
-  renderFallback() {
-    const { fallback, className, showErrorDetails } = this.props
-    const { error, errorInfo } = this.state
-
-    if (!error) return null
-
-    // If custom fallback is provided
-    if (fallback) {
-      // If fallback is a component
-      if (typeof fallback === 'function') {
-        const FallbackComponent = fallback as ComponentType<ErrorFallbackProps>
-        return (
-          <FallbackComponent
-            error={error}
-            resetErrorBoundary={this.resetErrorBoundary}
-            errorInfo={errorInfo}
-          />
-        )
-      }
-      // If fallback is a ReactNode
-      return fallback
-    }
-
-    // Default fallback UI
-    return (
-      <div className={cn("flex items-center justify-center min-h-[200px] p-4", 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 dark:bg-red-900/20">
-              <AlertTriangle className="h-6 w-6 text-red-600 dark:text-red-400" />
-            </div>
-            <CardTitle>Something went wrong</CardTitle>
-            <CardDescription>
-              {showErrorDetails && process.env.NODE_ENV === 'development' 
-                ? error.message 
-                : "An error occurred while rendering this component"}
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="text-center">
-            {showErrorDetails && process.env.NODE_ENV === 'development' && (
-              <div className="mb-4 p-3 bg-muted rounded-md text-left">
-                <pre className="text-xs overflow-auto">
-                  <code>{error.stack}</code>
-                </pre>
-              </div>
-            )}
-            <Button 
-              onClick={this.resetErrorBoundary}
-              className="mt-4"
-            >
-              <RefreshCw className="mr-2 h-4 w-4" />
-              Try again
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
-    )
-  }
-
-  render() {
-    const { hasError } = this.state
-    const { children, isolate } = this.props
-
-    if (hasError) {
-      // If isolate is true, prevent error propagation
-      if (isolate) {
-        try {
-          return this.renderFallback()
-        } catch (fallbackError) {
-          // If fallback also fails, show minimal error UI
-          console.error('Error boundary fallback failed:', fallbackError)
-          return (
-            <div className="p-4 text-center text-red-600">
-              Critical error: Unable to recover
-            </div>
-          )
-        }
-      }
-      return this.renderFallback()
-    }
-
-    return children
-  }
-
-  componentWillUnmount() {
-    if (this.resetTimeoutId) {
-      clearTimeout(this.resetTimeoutId)
-    }
-  }
-}
-
-// Functional wrapper to handle Pro subscription check
-function ErrorBoundaryWrapper(props: ErrorBoundaryProps) {
-  const { hasProAccess, isLoading } = useSubscription()
-  const prevResetKeysRef = useRef(props.resetKeys)
-
-  // Track resetKeys changes for functional component
-  useEffect(() => {
-    prevResetKeysRef.current = props.resetKeys
-  }, [props.resetKeys])
-  
-  // If not in docs mode and no pro access, show upgrade prompt
-  if (!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
-export type { ErrorBoundaryProps }