@moontra/moonui-pro 2.5.0 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.5.0",
+  "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",

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

@@ -7,7 +7,8 @@ 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 { 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 { 
@@ -45,31 +46,114 @@ export function DashboardGrid({
   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],
+  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')
 
-  // Layout oluştur
-  const generateLayout = (): Layout[] => {
-    return widgets.map((widget) => ({
+  // 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,
-      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,
+      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
@@ -134,6 +218,27 @@ export function DashboardGrid({
               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 (
@@ -248,8 +353,11 @@ export function DashboardGrid({
     )
   }
 
+  // Mobile kontrolü
+  const isMobile = currentBreakpoint === 'xs' || currentBreakpoint === 'xxs' || currentBreakpoint === 'sm';
+
   return (
-    <div className={cn("w-full", className)}>
+    <div ref={containerRef} className={cn("w-full relative", className)}>
       <AnimatePresence>
         {fullscreenWidget ? (
           // Fullscreen widget
@@ -263,34 +371,61 @@ export function DashboardGrid({
               .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>
         ) : (
-          // Grid layout
-          <GridLayout
+          // Desktop Grid layout
+          <ResponsiveGridLayout
             className="layout"
-            layout={generateLayout()}
-            cols={cols[currentBreakpoint as keyof typeof cols] || cols.lg}
-            rowHeight={rowHeight}
-            width={1200}
-            margin={margin}
-            containerPadding={containerPadding}
-            onLayoutChange={(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="vertical"
+            compactType={compactType}
             preventCollision={false}
+            useCSSTransforms={true}
+            transformScale={1}
+            isDroppable={true}
+            autoSize={true}
+            verticalCompact={true}
           >
             {widgets.map(widget => (
               <div key={widget.id}>
                 {renderWidget(widget)}
               </div>
             ))}
-          </GridLayout>
+          </ResponsiveGridLayout>
         )}
       </AnimatePresence>
 

package/src/components/dashboard/demo.tsx

@@ -3,6 +3,9 @@
 import React from 'react'
 import { Dashboard } from './index'
 import { Widget, MetricData, ChartData, ActivityItem } from './types'
+import { MetricCard } from './widgets/metric-card'
+import { ChartWidget } from './widgets/chart-widget'
+import { ActivityFeed } from './widgets/activity-feed'
 import { 
   Users, 
   DollarSign, 

package/src/components/dashboard/index.tsx

@@ -259,6 +259,11 @@ export function Dashboard({
   const [refreshing, setRefreshing] = React.useState(false)
   const [notifications, setNotifications] = React.useState<number>(3)
 
+  // initialWidgets değiştiğinde state'i güncelle
+  React.useEffect(() => {
+    setWidgets(initialWidgets)
+  }, [initialWidgets])
+
   // WebSocket bağlantısı (real-time için)
   React.useEffect(() => {
     if (!realtime) return
@@ -308,7 +313,9 @@ export function Dashboard({
   const applyTemplate = (template: DashboardTemplate) => {
     const newWidgets = template.widgets.map((w, index) => ({
       ...w,
-      id: `widget-${Date.now()}-${index}`
+      id: `widget-${Date.now()}-${index}`,
+      position: w.position || { x: (index * 3) % 12, y: Math.floor((index * 3) / 12) * 3 },
+      size: w.size || { w: 3, h: 3 }
     }))
     
     setWidgets(newWidgets as Widget[])
@@ -739,4 +746,5 @@ export function Dashboard({
   )
 }
 
+export type { Widget, MetricData, ChartData, ActivityItem, ProgressData, ComparisonData } from './types'
 export default Dashboard

package/src/components/dashboard/time-range-picker.tsx

@@ -160,7 +160,9 @@ export function TimeRangePicker({
           "w-auto p-0",
           glassmorphism && "bg-background/95 backdrop-blur-md border-white/10"
         )} 
-        align="start"
+        align="end"
+        side="bottom"
+        sideOffset={4}
       >
         <motion.div
           initial={{ opacity: 0, y: -10 }}

package/src/components/dashboard/types.ts

@@ -120,8 +120,8 @@ export interface Widget {
   type: WidgetType
   title: string
   description?: string
-  size: WidgetSize
-  position: WidgetPosition
+  size?: WidgetSize
+  position?: WidgetPosition
   data?: any
   config?: any
   loading?: boolean

package/src/components/index.ts

@@ -81,4 +81,7 @@ export * from "./performance-monitor"
 export * from "./file-upload"
 
 // Data Table
-export * from "./data-table"
+export * from "./data-table"
+
+// Sidebar
+export * from "./sidebar"