@moontra/moonui-pro 2.4.6 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.4.6",
+  "version": "2.5.1",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",
@@ -83,6 +83,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
@@ -96,7 +97,9 @@
     "date-fns": "^3.6.0",
     "framer-motion": "^11.11.17",
     "lucide-react": "^0.525.0",
+    "react-day-picker": "^9.8.0",
     "react-dropzone": "^14.3.5",
+    "react-grid-layout": "^1.5.2",
     "react-hook-form": "^7.53.2",
     "react-intersection-observer": "^9.13.1",
     "react-virtualized-auto-sizer": "^1.0.24",

package/src/components/advanced-chart/index.tsx

@@ -340,15 +340,20 @@ export function AdvancedChart({
 
   // Calculate trend for the first series
   const trend = React.useMemo(() => {
-    if (!data.length || !series.length) return null
+    if (!data || !Array.isArray(data) || !data.length || !series || !Array.isArray(series) || !series.length) return null
     
     const firstSeries = series[0]
+    if (!firstSeries || !firstSeries.dataKey) return null
+    
     const values = data.map(d => Number(d[firstSeries.dataKey])).filter(v => !isNaN(v))
     
     if (values.length < 2) return null
     
     const first = values[0]
     const last = values[values.length - 1]
+    
+    if (first === 0) return null // Avoid division by zero
+    
     const change = ((last - first) / first) * 100
     
     return {
@@ -411,6 +416,11 @@ export function AdvancedChart({
   )
   
   const renderChart = () => {
+    // Güvenlik kontrolleri
+    if (!data || !Array.isArray(data) || !series || !Array.isArray(series)) {
+      return <div className="flex items-center justify-center h-full text-muted-foreground">No data available</div>
+    }
+
     const commonProps = {
       data,
       width: typeof width === 'string' ? undefined : width,

package/src/components/dashboard/dashboard-grid.tsx

@@ -0,0 +1,462 @@
+"use client"
+
+import React from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { cn } from '../../lib/utils'
+import { Widget } from './types'
+import { MetricCard } from './widgets/metric-card'
+import { ChartWidget } from './widgets/chart-widget'
+import { ActivityFeed } from './widgets/activity-feed'
+import { Responsive, WidthProvider, Layout, Layouts } from 'react-grid-layout'
+const ResponsiveGridLayout = WidthProvider(Responsive)
+import 'react-grid-layout/css/styles.css'
+import 'react-resizable/css/styles.css'
+import { 
+  Grip, 
+  X, 
+  Maximize2, 
+  Minimize2,
+  Lock,
+  Unlock,
+  Settings
+} from 'lucide-react'
+import { Button } from '../ui/button'
+
+interface DashboardGridProps {
+  widgets: Widget[]
+  onLayoutChange?: (layout: Layout[]) => void
+  onWidgetRemove?: (widgetId: string) => void
+  onWidgetAction?: (widgetId: string, action: string, data?: any) => void
+  editMode?: boolean
+  className?: string
+  glassmorphism?: boolean
+  breakpoints?: { lg: number; md: number; sm: number; xs: number; xxs: number }
+  cols?: { lg: number; md: number; sm: number; xs: number; xxs: number }
+  rowHeight?: number
+  margin?: [number, number]
+  containerPadding?: [number, number]
+}
+
+export function DashboardGrid({
+  widgets,
+  onLayoutChange,
+  onWidgetRemove,
+  onWidgetAction,
+  editMode = false,
+  className,
+  glassmorphism = false,
+  breakpoints = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
+  cols = { lg: 12, md: 8, sm: 4, xs: 2, xxs: 1 },
+  rowHeight = 80,
+  margin = [16, 24],
+  containerPadding = [0, 0]
+}: DashboardGridProps) {
+  const [layouts, setLayouts] = React.useState<Layouts>({})
+  const [currentBreakpoint, setCurrentBreakpoint] = React.useState('lg')
+  const [lockedWidgets, setLockedWidgets] = React.useState<Set<string>>(new Set())
+  const [fullscreenWidget, setFullscreenWidget] = React.useState<string | null>(null)
+  const [containerWidth, setContainerWidth] = React.useState(1200)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [compactType, setCompactType] = React.useState<'vertical' | 'horizontal' | null>('vertical')
+
+  // Container genişliğini ölç ve breakpoint'i güncelle
+  React.useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current) {
+        const width = containerRef.current.offsetWidth
+        setContainerWidth(width)
+        
+        // Breakpoint'i manuel olarak belirle
+        if (width < 480) {
+          setCurrentBreakpoint('xxs')
+        } else if (width < 768) {
+          setCurrentBreakpoint('xs')
+        } else if (width < 996) {
+          setCurrentBreakpoint('sm')
+        } else if (width < 1200) {
+          setCurrentBreakpoint('md')
+        } else {
+          setCurrentBreakpoint('lg')
+        }
+      }
+    }
+
+    updateWidth()
+    window.addEventListener('resize', updateWidth)
+    return () => window.removeEventListener('resize', updateWidth)
+  }, [])
+
+  // Responsive layout oluştur
+  const generateResponsiveLayouts = (): Layouts => {
+    const baseLayout = widgets.map((widget, index) => ({
+      i: widget.id,
+      x: widget.position?.x ?? (index * 3) % 12,
+      y: widget.position?.y ?? Math.floor((index * 3) / 12) * 3,
+      w: widget.size?.w ?? 3,
+      h: widget.size?.h ?? 3,
+      minW: widget.size?.minW || 2,
+      maxW: widget.size?.maxW || 12,
+      minH: widget.size?.minH || 2,
+      maxH: widget.size?.maxH || 8,
+      isDraggable: editMode && !lockedWidgets.has(widget.id) && widget.permissions?.canMove !== false,
+      isResizable: editMode && !lockedWidgets.has(widget.id) && widget.permissions?.canResize !== false,
+    }))
+
+    // Farklı breakpoint'ler için layout'ları ayarla
+    const sortedLayout = [...baseLayout].sort((a, b) => {
+      if (a.y === b.y) return a.x - b.x;
+      return a.y - b.y;
+    });
+
+    return {
+      lg: baseLayout,
+      md: sortedLayout.map((item, index) => {
+        const cols = 8;
+        const maxW = Math.min(item.w, 4);
+        const row = Math.floor(index / 2);
+        const col = (index % 2) * 4;
+        return {
+          ...item,
+          w: maxW,
+          x: col,
+          y: row * 3,
+          h: Math.min(item.h, 3)
+        };
+      }),
+      sm: sortedLayout.map((item, index) => {
+        const maxW = Math.min(item.w, 4);
+        return {
+          ...item,
+          w: maxW,
+          x: 0,
+          y: index * 3,
+          h: Math.min(item.h, 3)
+        };
+      }),
+      xs: sortedLayout.map((item, index) => ({
+        ...item,
+        w: 2, // Full width on mobile
+        x: 0,
+        y: index * 2,
+        h: Math.min(item.h, 2)
+      })),
+      xxs: sortedLayout.map((item, index) => ({
+        ...item,
+        w: 1, // Full width on extra small
+        x: 0,
+        y: index * 2,
+        h: Math.min(item.h, 2)
+      }))
+    }
+  }
+
+  // Layout oluştur (geriye uyumluluk için)
+  const generateLayout = (): Layout[] => {
+    const responsiveLayouts = generateResponsiveLayouts()
+    return responsiveLayouts[currentBreakpoint as keyof Layouts] || responsiveLayouts.lg
+  }
+
+  // Widget kilit durumunu değiştir
+  const toggleWidgetLock = (widgetId: string) => {
+    setLockedWidgets(prev => {
+      const newSet = new Set(prev)
+      if (newSet.has(widgetId)) {
+        newSet.delete(widgetId)
+      } else {
+        newSet.add(widgetId)
+      }
+      return newSet
+    })
+  }
+
+  // Widget'ı tam ekran yap
+  const toggleFullscreen = (widgetId: string) => {
+    if (fullscreenWidget === widgetId) {
+      setFullscreenWidget(null)
+    } else {
+      setFullscreenWidget(widgetId)
+    }
+  }
+
+  // Widget render
+  const renderWidget = (widget: Widget) => {
+    const isLocked = lockedWidgets.has(widget.id)
+    const isFullscreen = fullscreenWidget === widget.id
+
+    const widgetContent = () => {
+      switch (widget.type) {
+        case 'metric':
+          return (
+            <MetricCard
+              data={widget.data}
+              onAction={(action) => onWidgetAction?.(widget.id, action)}
+              glassmorphism={glassmorphism}
+            />
+          )
+        
+        case 'chart':
+          return (
+            <ChartWidget
+              id={widget.id}
+              title={widget.title}
+              description={widget.description}
+              data={widget.data}
+              loading={widget.loading}
+              glassmorphism={glassmorphism}
+              onAction={(action, data) => onWidgetAction?.(widget.id, action, data)}
+            />
+          )
+        
+        case 'activity':
+          return (
+            <ActivityFeed
+              items={widget.data?.items || []}
+              title={widget.title}
+              loading={widget.loading}
+              glassmorphism={glassmorphism}
+              realtime={widget.data?.realtime}
+              onAction={(action, data) => onWidgetAction?.(widget.id, action, data)}
+            />
+          )
+
+        case 'table':
+        case 'map':
+        case 'calendar':
+        case 'progress':
+        case 'comparison':
+          // Bu widget tipleri için geçici olarak basit bir görünüm
+          return (
+            <div className={cn(
+              "h-full p-4 rounded-lg border",
+              glassmorphism ? "bg-background/60 backdrop-blur-md border-white/10" : "bg-card"
+            )}>
+              <h3 className="font-semibold mb-2">{widget.title}</h3>
+              {widget.description && (
+                <p className="text-sm text-muted-foreground mb-4">{widget.description}</p>
+              )}
+              <div className="flex items-center justify-center h-32 text-muted-foreground">
+                <span className="text-sm">{widget.type} widget content</span>
+              </div>
+            </div>
+          )
+        
+        default:
+          return (
+            <div className="flex items-center justify-center h-full text-muted-foreground">
+              Widget type not supported: {widget.type}
+            </div>
+          )
+      }
+    }
+
+    return (
+      <motion.div
+        key={widget.id}
+        className={cn(
+          "relative group h-full",
+          isFullscreen && "!fixed !inset-4 !z-50 !h-auto !w-auto"
+        )}
+        layout={!isFullscreen}
+        transition={{ duration: 0.2 }}
+      >
+        {/* Widget içeriği */}
+        <div className="h-full">
+          {widgetContent()}
+        </div>
+
+        {/* Edit mode kontrolleri */}
+        {editMode && !isFullscreen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"
+          >
+            <div className={cn(
+              "flex items-center gap-1 p-1 rounded-lg",
+              glassmorphism ? "bg-background/80 backdrop-blur-sm" : "bg-background/95",
+              "border shadow-sm"
+            )}>
+              {/* Drag handle */}
+              {!isLocked && (
+                <div className="drag-handle cursor-move p-1 hover:bg-muted rounded">
+                  <Grip className="h-4 w-4" />
+                </div>
+              )}
+
+              {/* Lock/Unlock */}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={() => toggleWidgetLock(widget.id)}
+              >
+                {isLocked ? (
+                  <Lock className="h-3 w-3" />
+                ) : (
+                  <Unlock className="h-3 w-3" />
+                )}
+              </Button>
+
+              {/* Fullscreen */}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={() => toggleFullscreen(widget.id)}
+              >
+                <Maximize2 className="h-3 w-3" />
+              </Button>
+
+              {/* Settings */}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={() => onWidgetAction?.(widget.id, 'settings')}
+              >
+                <Settings className="h-3 w-3" />
+              </Button>
+
+              {/* Remove */}
+              {widget.permissions?.canDelete !== false && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                  onClick={() => onWidgetRemove?.(widget.id)}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              )}
+            </div>
+          </motion.div>
+        )}
+
+        {/* Fullscreen kontrolleri */}
+        {isFullscreen && (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="absolute top-4 right-4 z-10"
+          >
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => toggleFullscreen(widget.id)}
+            >
+              <Minimize2 className="h-4 w-4 mr-2" />
+              Exit Fullscreen
+            </Button>
+          </motion.div>
+        )}
+      </motion.div>
+    )
+  }
+
+  // Mobile kontrolü
+  const isMobile = currentBreakpoint === 'xs' || currentBreakpoint === 'xxs' || currentBreakpoint === 'sm';
+
+  return (
+    <div ref={containerRef} className={cn("w-full relative", className)}>
+      <AnimatePresence>
+        {fullscreenWidget ? (
+          // Fullscreen widget
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-40 bg-background"
+          >
+            {widgets
+              .filter(w => w.id === fullscreenWidget)
+              .map(renderWidget)}
+          </motion.div>
+        ) : isMobile ? (
+          // Mobile layout - Grid Layout yerine normal flex kullan
+          <div className="space-y-6">
+            {widgets.map(widget => (
+              <motion.div
+                key={widget.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.3 }}
+                className="w-full"
+              >
+                {renderWidget(widget)}
+              </motion.div>
+            ))}
+          </div>
+        ) : (
+          // Desktop Grid layout
+          <ResponsiveGridLayout
+            className="layout"
+            layouts={layouts.lg ? layouts : generateResponsiveLayouts()}
+            breakpoints={breakpoints}
+            cols={cols}
+            rowHeight={currentBreakpoint === 'xs' || currentBreakpoint === 'xxs' ? 60 : currentBreakpoint === 'sm' ? 70 : rowHeight}
+            margin={currentBreakpoint === 'xs' || currentBreakpoint === 'xxs' ? [12, 20] : margin}
+            containerPadding={currentBreakpoint === 'xs' || currentBreakpoint === 'xxs' ? [8, 8] : containerPadding}
+            onLayoutChange={(layout, allLayouts) => {
+              setLayouts(allLayouts)
+              onLayoutChange?.(layout)
+            }}
+            onBreakpointChange={(breakpoint) => {
+              setCurrentBreakpoint(breakpoint)
+              // Dar alanlarda compact type'ı değiştir
+              if (breakpoint === 'xs' || breakpoint === 'xxs' || breakpoint === 'sm') {
+                setCompactType('vertical')
+              } else {
+                setCompactType('vertical')
+              }
+            }}
+            draggableHandle=".drag-handle"
+            isDraggable={editMode}
+            isResizable={editMode}
+            compactType={compactType}
+            preventCollision={false}
+            useCSSTransforms={true}
+            transformScale={1}
+            isDroppable={true}
+            autoSize={true}
+            verticalCompact={true}
+          >
+            {widgets.map(widget => (
+              <div key={widget.id}>
+                {renderWidget(widget)}
+              </div>
+            ))}
+          </ResponsiveGridLayout>
+        )}
+      </AnimatePresence>
+
+      {/* Grid çizgileri (edit mode) */}
+      {editMode && !fullscreenWidget && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 0.1 }}
+          className="absolute inset-0 pointer-events-none"
+          style={{
+            backgroundImage: `
+              repeating-linear-gradient(
+                0deg,
+                var(--border) 0px,
+                transparent 1px,
+                transparent ${rowHeight + margin[1]}px,
+                var(--border) ${rowHeight + margin[1]}px
+              ),
+              repeating-linear-gradient(
+                90deg,
+                var(--border) 0px,
+                transparent 1px,
+                transparent ${100 / cols[currentBreakpoint as keyof typeof cols]}%,
+                var(--border) ${100 / cols[currentBreakpoint as keyof typeof cols]}%
+              )
+            `
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default DashboardGrid