@moontra/moonui-pro 2.4.5 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.4.5",
+  "version": "2.5.0",
   "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,327 @@
+"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 GridLayout, { Layout, Layouts } from 'react-grid-layout'
+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: 10, sm: 6, xs: 4, xxs: 2 },
+  rowHeight = 60,
+  margin = [16, 16],
+  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)
+
+  // Layout oluştur
+  const generateLayout = (): Layout[] => {
+    return widgets.map((widget) => ({
+      i: widget.id,
+      x: widget.position.x,
+      y: widget.position.y,
+      w: widget.size.w,
+      h: widget.size.h,
+      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,
+    }))
+  }
+
+  // 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)}
+            />
+          )
+        
+        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>
+    )
+  }
+
+  return (
+    <div className={cn("w-full", 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>
+        ) : (
+          // Grid layout
+          <GridLayout
+            className="layout"
+            layout={generateLayout()}
+            cols={cols[currentBreakpoint as keyof typeof cols] || cols.lg}
+            rowHeight={rowHeight}
+            width={1200}
+            margin={margin}
+            containerPadding={containerPadding}
+            onLayoutChange={(layout) => {
+              onLayoutChange?.(layout)
+            }}
+            onBreakpointChange={(breakpoint) => {
+              setCurrentBreakpoint(breakpoint)
+            }}
+            draggableHandle=".drag-handle"
+            isDraggable={editMode}
+            isResizable={editMode}
+            compactType="vertical"
+            preventCollision={false}
+          >
+            {widgets.map(widget => (
+              <div key={widget.id}>
+                {renderWidget(widget)}
+              </div>
+            ))}
+          </GridLayout>
+        )}
+      </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

package/src/components/dashboard/demo.tsx

@@ -0,0 +1,308 @@
+"use client"
+
+import React from 'react'
+import { Dashboard } from './index'
+import { Widget, MetricData, ChartData, ActivityItem } from './types'
+import { 
+  Users, 
+  DollarSign, 
+  ShoppingCart, 
+  TrendingUp,
+  Package,
+  CreditCard,
+  Activity,
+  AlertCircle
+} from 'lucide-react'
+
+// Örnek metrik verileri
+const sampleMetrics: MetricData[] = [
+  {
+    id: 'revenue',
+    title: 'Total Revenue',
+    value: 54234,
+    unit: '$',
+    change: { value: 12.5, type: 'increase', period: 'last month' },
+    icon: <DollarSign className="h-4 w-4" />,
+    color: 'success',
+    sparkline: [30, 40, 35, 50, 49, 60, 70, 91, 125],
+    target: 60000,
+    forecast: 58500
+  },
+  {
+    id: 'users',
+    title: 'Active Users',
+    value: 2453,
+    change: { value: 8.2, type: 'increase', period: 'last week' },
+    icon: <Users className="h-4 w-4" />,
+    color: 'primary',
+    sparkline: [200, 220, 210, 230, 225, 240, 254, 260, 245]
+  },
+  {
+    id: 'orders',
+    title: 'New Orders',
+    value: 846,
+    change: { value: 3.1, type: 'decrease', period: 'yesterday' },
+    icon: <ShoppingCart className="h-4 w-4" />,
+    color: 'warning',
+    sparkline: [80, 85, 90, 88, 85, 82, 84, 86, 84]
+  },
+  {
+    id: 'conversion',
+    title: 'Conversion Rate',
+    value: '3.24%',
+    change: { value: 0.5, type: 'increase', period: 'last month' },
+    icon: <TrendingUp className="h-4 w-4" />,
+    color: 'info',
+    sparkline: [2.8, 2.9, 3.0, 2.95, 3.1, 3.15, 3.2, 3.22, 3.24]
+  }
+]
+
+// Örnek chart verileri
+const revenueChartData: ChartData = {
+  type: 'area',
+  data: [
+    { name: 'Jan', revenue: 4000, profit: 2400, expenses: 1600 },
+    { name: 'Feb', revenue: 3000, profit: 1398, expenses: 1602 },
+    { name: 'Mar', revenue: 5000, profit: 3200, expenses: 1800 },
+    { name: 'Apr', revenue: 4500, profit: 2900, expenses: 1600 },
+    { name: 'May', revenue: 6000, profit: 3800, expenses: 2200 },
+    { name: 'Jun', revenue: 5500, profit: 3400, expenses: 2100 },
+    { name: 'Jul', revenue: 7000, profit: 4200, expenses: 2800 }
+  ]
+}
+
+const salesByProductData: ChartData = {
+  type: 'pie',
+  data: [
+    { name: 'Product A', value: 35 },
+    { name: 'Product B', value: 25 },
+    { name: 'Product C', value: 20 },
+    { name: 'Product D', value: 15 },
+    { name: 'Product E', value: 5 }
+  ]
+}
+
+const performanceData: ChartData = {
+  type: 'radar',
+  data: [
+    { subject: 'Sales', A: 120, B: 110, fullMark: 150 },
+    { subject: 'Marketing', A: 98, B: 130, fullMark: 150 },
+    { subject: 'Development', A: 86, B: 130, fullMark: 150 },
+    { subject: 'Customer Support', A: 99, B: 100, fullMark: 150 },
+    { subject: 'Technology', A: 85, B: 90, fullMark: 150 },
+    { subject: 'HR', A: 65, B: 85, fullMark: 150 }
+  ]
+}
+
+// Örnek aktivite verileri
+const sampleActivities: ActivityItem[] = [
+  {
+    id: '1',
+    type: 'success',
+    title: 'completed a purchase',
+    description: 'Order #12345 - Premium Plan ($299)',
+    timestamp: new Date(Date.now() - 1000 * 60 * 5),
+    user: { name: 'John Doe', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=John' },
+    icon: <CreditCard className="h-4 w-4" />
+  },
+  {
+    id: '2',
+    type: 'info',
+    title: 'deployed new version',
+    description: 'v2.1.0 deployed to production',
+    timestamp: new Date(Date.now() - 1000 * 60 * 15),
+    user: { name: 'Sarah Chen' },
+    icon: <Package className="h-4 w-4" />
+  },
+  {
+    id: '3',
+    type: 'warning',
+    title: 'high server load detected',
+    description: 'CPU usage above 80% on server-02',
+    timestamp: new Date(Date.now() - 1000 * 60 * 30),
+    icon: <AlertCircle className="h-4 w-4" />
+  },
+  {
+    id: '4',
+    type: 'success',
+    title: 'new user registered',
+    description: 'Welcome email sent',
+    timestamp: new Date(Date.now() - 1000 * 60 * 45),
+    user: { name: 'Mike Johnson' }
+  },
+  {
+    id: '5',
+    type: 'error',
+    title: 'payment failed',
+    description: 'Card declined - Order #12346',
+    timestamp: new Date(Date.now() - 1000 * 60 * 60),
+    user: { name: 'Emma Wilson' }
+  }
+]
+
+// Örnek widget'lar
+const sampleWidgets: Widget[] = [
+  // Metrik widget'ları
+  {
+    id: 'metric-revenue',
+    type: 'metric',
+    title: 'Revenue',
+    size: { w: 3, h: 2 },
+    position: { x: 0, y: 0 },
+    data: sampleMetrics[0]
+  },
+  {
+    id: 'metric-users',
+    type: 'metric',
+    title: 'Users',
+    size: { w: 3, h: 2 },
+    position: { x: 3, y: 0 },
+    data: sampleMetrics[1]
+  },
+  {
+    id: 'metric-orders',
+    type: 'metric',
+    title: 'Orders',
+    size: { w: 3, h: 2 },
+    position: { x: 6, y: 0 },
+    data: sampleMetrics[2]
+  },
+  {
+    id: 'metric-conversion',
+    type: 'metric',
+    title: 'Conversion',
+    size: { w: 3, h: 2 },
+    position: { x: 9, y: 0 },
+    data: sampleMetrics[3]
+  },
+  // Chart widget'ları
+  {
+    id: 'chart-revenue-trend',
+    type: 'chart',
+    title: 'Revenue Trend',
+    description: 'Monthly revenue, profit and expenses',
+    size: { w: 8, h: 4 },
+    position: { x: 0, y: 2 },
+    data: revenueChartData
+  },
+  {
+    id: 'chart-sales-by-product',
+    type: 'chart',
+    title: 'Sales by Product',
+    description: 'Product distribution',
+    size: { w: 4, h: 4 },
+    position: { x: 8, y: 2 },
+    data: salesByProductData
+  },
+  {
+    id: 'chart-performance',
+    type: 'chart',
+    title: 'Team Performance',
+    description: 'Department comparison',
+    size: { w: 6, h: 4 },
+    position: { x: 0, y: 6 },
+    data: performanceData
+  },
+  // Activity feed
+  {
+    id: 'activity-feed',
+    type: 'activity',
+    title: 'Recent Activity',
+    size: { w: 6, h: 4 },
+    position: { x: 6, y: 6 },
+    data: {
+      items: sampleActivities,
+      realtime: true
+    }
+  }
+]
+
+export function DashboardDemo() {
+  return (
+    <div className="min-h-screen bg-background">
+      <Dashboard
+        title="Analytics Dashboard"
+        description="Real-time insights and performance metrics"
+        widgets={sampleWidgets}
+        editable={true}
+        realtime={true}
+        glassmorphism={true}
+        onWidgetAdd={(widget) => {
+          console.log('Widget added:', widget)
+        }}
+        onWidgetRemove={(widgetId) => {
+          console.log('Widget removed:', widgetId)
+        }}
+        onWidgetUpdate={(widgetId, updates) => {
+          console.log('Widget updated:', widgetId, updates)
+        }}
+        onExport={(format) => {
+          console.log('Export dashboard as:', format)
+        }}
+      />
+    </div>
+  )
+}
+
+// Standalone widget demos
+export function MetricCardDemo() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-6">
+      {sampleMetrics.map((metric) => (
+        <MetricCard
+          key={metric.id}
+          data={metric}
+          showSparkline={true}
+          showForecast={true}
+          interactive={true}
+          glassmorphism={true}
+          onAction={(action) => console.log('Metric action:', action)}
+        />
+      ))}
+    </div>
+  )
+}
+
+export function ChartWidgetDemo() {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
+      <ChartWidget
+        id="demo-1"
+        title="Revenue Analysis"
+        description="Monthly revenue breakdown"
+        data={revenueChartData}
+        height={300}
+        interactive={true}
+        glassmorphism={true}
+        onAction={(action, data) => console.log('Chart action:', action, data)}
+      />
+      <ChartWidget
+        id="demo-2"
+        title="Product Sales"
+        description="Sales distribution by product"
+        data={salesByProductData}
+        height={300}
+        interactive={true}
+        glassmorphism={true}
+      />
+    </div>
+  )
+}
+
+export function ActivityFeedDemo() {
+  return (
+    <div className="max-w-2xl mx-auto p-6">
+      <ActivityFeed
+        items={sampleActivities}
+        title="System Activity"
+        height={400}
+        showFilters={true}
+        showNotifications={true}
+        glassmorphism={true}
+        realtime={true}
+        onItemClick={(item) => console.log('Activity clicked:', item)}
+        onAction={(action, data) => console.log('Feed action:', action, data)}
+      />
+    </div>
+  )
+}