@moontra/moonui-pro 2.4.3 → 2.4.5

package/src/components/data-table/data-table-column-toggle.tsx

@@ -25,7 +25,12 @@ export function DataTableColumnToggle({ table, trigger }: DataTableColumnToggleP
   // Get all columns that can be hidden
   const columns = table
     .getAllColumns()
-    .filter((column: any) => column.getCanHide())
+    .filter((column: any) => 
+      column.getCanHide() && 
+      column.id !== 'select' && 
+      column.id !== 'actions' &&
+      column.id !== 'expander'
+    )
 
   // Filter columns based on search
   const filteredColumns = React.useMemo(() => {
@@ -45,9 +50,7 @@ export function DataTableColumnToggle({ table, trigger }: DataTableColumnToggleP
   const visibleCount = columns.filter((col: any) => col.getIsVisible()).length
 
   const handleToggleAll = (visible: boolean) => {
-    columns.forEach((column: any) => {
-      column.toggleVisibility(visible)
-    })
+    table.toggleAllColumnsVisible(visible)
   }
 
   return (

package/src/components/data-table/data-table-filter-drawer.tsx

@@ -44,6 +44,8 @@ export interface DataTableFilterDrawerProps<TData> {
   filters?: FilterCondition[]
   onFiltersChange?: (filters: FilterCondition[]) => void
   customFilters?: React.ReactNode
+  matchAll?: boolean
+  onMatchAllChange?: (matchAll: boolean) => void
 }
 
 const operatorLabels: Record<FilterOperator, string> = {
@@ -88,12 +90,16 @@ export function DataTableFilterDrawer<TData>({
   filters: externalFilters,
   onFiltersChange,
   customFilters,
+  matchAll: externalMatchAll,
+  onMatchAllChange,
 }: DataTableFilterDrawerProps<TData>) {
   const [internalFilters, setInternalFilters] = useState<FilterCondition[]>([])
-  const [matchAll, setMatchAll] = useState(true)
+  const [internalMatchAll, setInternalMatchAll] = useState(true)
 
   const filters = externalFilters || internalFilters
   const setFilters = onFiltersChange || setInternalFilters
+  const matchAll = externalMatchAll !== undefined ? externalMatchAll : internalMatchAll
+  const setMatchAll = onMatchAllChange || setInternalMatchAll
 
   // Get filterable columns
   const filterableColumns = useMemo(() => {
@@ -135,64 +141,64 @@ export function DataTableFilterDrawer<TData>({
   }
 
   const applyFilters = () => {
-    // Reset all column filters first
-    table.resetColumnFilters()
+    // Create a custom filter function that handles all our conditions
+    const customFilterFn = (row: any, columnId: string, filterValue: any) => {
+      // Find the filter condition for this column
+      const filterCondition = filters.find(f => f.column === columnId)
+      if (!filterCondition) return true
 
-    // Apply each filter
-    filters.forEach(filter => {
-      const column = table.getColumn(filter.column)
-      if (!column) return
+      const cellValue = row.getValue(columnId)
+      const filterVal = filterCondition.value
 
-      // Apply filter based on operator
-      switch (filter.operator) {
+      switch (filterCondition.operator) {
         case 'equals':
-          column.setFilterValue(filter.value)
-          break
+          return cellValue === filterVal
         case 'notEquals':
-          column.setFilterValue((value: any) => value !== filter.value)
-          break
+          return cellValue !== filterVal
         case 'contains':
-          column.setFilterValue((value: any) => 
-            String(value).toLowerCase().includes(String(filter.value).toLowerCase())
-          )
-          break
+          return String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase())
         case 'notContains':
-          column.setFilterValue((value: any) => 
-            !String(value).toLowerCase().includes(String(filter.value).toLowerCase())
-          )
-          break
+          return !String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase())
         case 'startsWith':
-          column.setFilterValue((value: any) => 
-            String(value).toLowerCase().startsWith(String(filter.value).toLowerCase())
-          )
-          break
+          return String(cellValue).toLowerCase().startsWith(String(filterVal).toLowerCase())
         case 'endsWith':
-          column.setFilterValue((value: any) => 
-            String(value).toLowerCase().endsWith(String(filter.value).toLowerCase())
-          )
-          break
+          return String(cellValue).toLowerCase().endsWith(String(filterVal).toLowerCase())
         case 'greaterThan':
-          column.setFilterValue((value: any) => Number(value) > Number(filter.value))
-          break
+          return Number(cellValue) > Number(filterVal)
         case 'lessThan':
-          column.setFilterValue((value: any) => Number(value) < Number(filter.value))
-          break
+          return Number(cellValue) < Number(filterVal)
         case 'greaterThanOrEqual':
-          column.setFilterValue((value: any) => Number(value) >= Number(filter.value))
-          break
+          return Number(cellValue) >= Number(filterVal)
         case 'lessThanOrEqual':
-          column.setFilterValue((value: any) => Number(value) <= Number(filter.value))
-          break
+          return Number(cellValue) <= Number(filterVal)
         case 'isNull':
-          column.setFilterValue((value: any) => value == null || value === '')
-          break
+          return cellValue == null || cellValue === ''
         case 'isNotNull':
-          column.setFilterValue((value: any) => value != null && value !== '')
-          break
-        // Add more operators as needed
+          return cellValue != null && cellValue !== ''
+        default:
+          return true
       }
+    }
+
+    // Reset all column filters first
+    table.resetColumnFilters()
+
+    // Apply filter for each column that has a filter condition
+    const columnsWithFilters = [...new Set(filters.map(f => f.column))]
+    
+    columnsWithFilters.forEach(columnId => {
+      const column = table.getColumn(columnId)
+      if (!column) return
+      
+      // Set filter with custom function
+      column.setFilterValue({ custom: true, filters, matchAll })
     })
 
+    // If no filters, ensure all filters are cleared
+    if (filters.length === 0) {
+      table.resetColumnFilters()
+    }
+
     onOpenChange(false)
   }
 

package/src/components/data-table/index.tsx

@@ -44,7 +44,7 @@ import { motion, AnimatePresence } from 'framer-motion'
 import { DataTableColumnToggle } from './data-table-column-toggle'
 import { DataTableBulkActions, type BulkAction } from './data-table-bulk-actions'
 import { exportData, type ExportFormat, getVisibleColumns } from './data-table-export'
-import { DataTableFilterDrawer, type FilterCondition } from './data-table-filter-drawer'
+import { DataTableFilterDrawer, type FilterCondition, type FilterOperator } from './data-table-filter-drawer'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -153,12 +153,17 @@ export function DataTable<TData, TValue>({
   onColumnFiltersChange,
   state: externalState,
 }: DataTableProps<TData, TValue>) {
-  // Process columns to ensure they can be hidden
+  // Process columns to ensure they can be hidden and use custom filter
   const columns = React.useMemo(() => {
-    return originalColumns.map(col => ({
-      ...col,
-      enableHiding: col.enableHiding !== false,
-    }))
+    return originalColumns.map(col => {
+      // Remove any enableHiding: false to avoid conflicts
+      const { enableHiding, ...restCol } = col as any;
+      return {
+        ...restCol,
+        enableHiding: true, // Force all columns to be hideable
+        filterFn: 'custom', // Use our custom filter function
+      }
+    })
   }, [originalColumns])
   // Check if we're in docs mode or have pro access
   const { hasProAccess, isLoading } = useSubscription()
@@ -226,17 +231,65 @@ export function DataTable<TData, TValue>({
     onRowSelectionChange: setRowSelection,
     onGlobalFilterChange: setGlobalFilter,
     globalFilterFn: 'includesString',
+    filterFns: {
+      custom: (row, columnId, filterValue) => {
+        if (!filterValue?.custom || !filterValue?.filters) return true
+        
+        const filters = filterValue.filters as FilterCondition[]
+        const matchAll = filterValue.matchAll !== undefined ? filterValue.matchAll : true
+        
+        // Get all filter conditions (not just for this column)
+        const allFilterResults = filters.map(filterCondition => {
+          const cellValue = row.getValue(filterCondition.column)
+          const filterVal = filterCondition.value
+
+          switch (filterCondition.operator) {
+            case 'equals':
+              return cellValue === filterVal
+            case 'notEquals':
+              return cellValue !== filterVal
+            case 'contains':
+              return String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase())
+            case 'notContains':
+              return !String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase())
+            case 'startsWith':
+              return String(cellValue).toLowerCase().startsWith(String(filterVal).toLowerCase())
+            case 'endsWith':
+              return String(cellValue).toLowerCase().endsWith(String(filterVal).toLowerCase())
+            case 'greaterThan':
+              return Number(cellValue) > Number(filterVal)
+            case 'lessThan':
+              return Number(cellValue) < Number(filterVal)
+            case 'greaterThanOrEqual':
+              return Number(cellValue) >= Number(filterVal)
+            case 'lessThanOrEqual':
+              return Number(cellValue) <= Number(filterVal)
+            case 'isNull':
+              return cellValue == null || cellValue === ''
+            case 'isNotNull':
+              return cellValue != null && cellValue !== ''
+            default:
+              return true
+          }
+        })
+        
+        // Apply match logic
+        if (matchAll) {
+          return allFilterResults.every(result => result)
+        } else {
+          return allFilterResults.some(result => result)
+        }
+      }
+    },
     manualPagination,
     pageCount,
-    enableColumnFilters: true,
-    enableSorting: true,
-    enableHiding: true,
-    state: externalState || {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-      globalFilter,
+    state: {
+      sorting: externalState?.sorting ?? sorting,
+      columnFilters: externalState?.columnFilters ?? columnFilters,
+      columnVisibility: externalState?.columnVisibility ?? columnVisibility,
+      rowSelection: externalState?.rowSelection ?? rowSelection,
+      globalFilter: externalState?.globalFilter ?? globalFilter,
+      ...(externalState || {}),
     },
     initialState: {
       pagination: {
@@ -421,11 +474,9 @@ export function DataTable<TData, TValue>({
           <thead className="moonui-data-table-header">
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id} className="moonui-data-table-row border-b">
-                {headerGroup.headers.map((header) => {
-                  // Column visibility kontrolü
-                  if (!header.column.getIsVisible()) return null;
-                  
-                  return (
+                {headerGroup.headers
+                  .filter((header) => header.column.getIsVisible())
+                  .map((header) => (
                     <th
                       key={header.id}
                       className="moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground"
@@ -453,8 +504,7 @@ export function DataTable<TData, TValue>({
                         </div>
                       )}
                     </th>
-                  );
-                })}
+                  ))}
               </tr>
             ))}
           </thead>
@@ -467,7 +517,7 @@ export function DataTable<TData, TValue>({
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.2 }}
               >
-                <td colSpan={table.getVisibleLeafColumns().length} className="h-24 text-center">
+                <td colSpan={table.getAllLeafColumns().filter(col => col.getIsVisible()).length} className="h-24 text-center">
                   <div className="flex items-center justify-center space-x-2">
                     <span suppressHydrationWarning><Loader2 className="h-4 w-4 animate-spin" /></span>
                     <span className="text-sm text-muted-foreground">Loading...</span>
@@ -488,6 +538,7 @@ export function DataTable<TData, TValue>({
                       isExpanded={isExpanded}
                       enableExpandable={enableExpandable}
                       renderSubComponent={renderSubComponent}
+                      visibilityState={table.getState().columnVisibility}
                     />
                   );
                 })}
@@ -500,7 +551,7 @@ export function DataTable<TData, TValue>({
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.2 }}
               >
-                <td colSpan={table.getVisibleLeafColumns().length} className="h-24 text-center">
+                <td colSpan={table.getAllLeafColumns().filter(col => col.getIsVisible()).length} className="h-24 text-center">
                   No results found.
                 </td>
               </motion.tr>
@@ -709,6 +760,7 @@ interface TableRowProps {
   isExpanded: boolean
   enableExpandable: boolean
   renderSubComponent?: (props: { row: { original: any; id: string } }) => React.ReactNode
+  visibilityState: Record<string, boolean>
 }
 
 const TableRow = React.memo(({ 
@@ -716,7 +768,8 @@ const TableRow = React.memo(({
   columns, 
   isExpanded, 
   enableExpandable,
-  renderSubComponent 
+  renderSubComponent,
+  visibilityState 
 }: TableRowProps) => {
   const rowId = (row.original as any).id || row.id
   
@@ -729,21 +782,26 @@ const TableRow = React.memo(({
           isExpanded && "border-b-0"
         )}
       >
-        {row.getVisibleCells().map((cell) => {
-          // Column visibility kontrolü
-          if (!cell.column.getIsVisible()) return null;
-          
-          return (
-            <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </td>
-          );
-        })}
+        {row.getAllCells()
+          .filter((cell) => {
+            // Manual visibility check
+            const isVisible = visibilityState[cell.column.id] !== false;
+            return isVisible;
+          })
+          .map((cell) => {
+            return (
+              <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </td>
+            );
+          })}
       </tr>
       
       {isExpanded && renderSubComponent && (
         <tr className="border-b">
-          <td colSpan={row.getVisibleCells().filter(cell => cell.column.getIsVisible()).length} className="p-0 overflow-hidden">
+          <td colSpan={row.getAllCells().filter(cell => 
+            visibilityState[cell.column.id] !== false
+          ).length || 1} className="p-0 overflow-hidden">
             <div 
               className="transition-all duration-300 ease-out"
               style={{
@@ -761,13 +819,21 @@ const TableRow = React.memo(({
     </>
   )
 }, (prevProps, nextProps) => {
-  // Custom comparison - only re-render if row data or expanded state changed
+  // Custom comparison - only re-render if row data, expanded state, or visibility changed
   const prevRowId = (prevProps.row.original as any).id || prevProps.row.id
   const nextRowId = (nextProps.row.original as any).id || nextProps.row.id
   
+  // Include visibility state in comparison
+  const prevVisibilityKeys = Object.keys(prevProps.visibilityState).sort().join(',')
+  const nextVisibilityKeys = Object.keys(nextProps.visibilityState).sort().join(',')
+  const prevVisibilityValues = Object.values(prevProps.visibilityState).join(',')
+  const nextVisibilityValues = Object.values(nextProps.visibilityState).join(',')
+  
   return prevRowId === nextRowId && 
          prevProps.isExpanded === nextProps.isExpanded &&
-         prevProps.row.getIsSelected() === nextProps.row.getIsSelected()
+         prevProps.row.getIsSelected() === nextProps.row.getIsSelected() &&
+         prevVisibilityKeys === nextVisibilityKeys &&
+         prevVisibilityValues === nextVisibilityValues
 })
 
 TableRow.displayName = 'TableRow'

package/src/styles/advanced-chart.css

@@ -0,0 +1,239 @@
+/* Advanced Chart Styles */
+
+/* Chart animation classes */
+.chart-animate-in {
+  animation: chartFadeIn 0.5s ease-out;
+}
+
+.chart-point-pulse {
+  animation: pointPulse 2s ease-in-out infinite;
+}
+
+.chart-gradient-shift {
+  animation: gradientShift 3s ease-in-out infinite;
+}
+
+/* Custom chart tooltips */
+.recharts-tooltip-wrapper {
+  outline: none !important;
+}
+
+.recharts-tooltip-cursor {
+  fill: hsl(var(--muted) / 0.1);
+}
+
+/* Legend hover effects */
+.recharts-legend-item {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.recharts-legend-item:hover {
+  transform: translateY(-1px);
+}
+
+/* Smooth chart transitions */
+.recharts-line-curve,
+.recharts-area-curve {
+  transition: all 0.3s ease;
+}
+
+.recharts-bar-rectangle {
+  transition: all 0.2s ease;
+}
+
+.recharts-bar-rectangle:hover {
+  filter: brightness(1.1);
+}
+
+/* Pie chart enhancements */
+.recharts-pie-sector {
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.recharts-pie-sector:hover {
+  filter: brightness(1.1);
+  transform: scale(1.02);
+}
+
+/* Brush styling */
+.recharts-brush {
+  fill: hsl(var(--primary) / 0.1);
+  stroke: hsl(var(--primary) / 0.3);
+}
+
+.recharts-brush-slide {
+  fill: hsl(var(--primary) / 0.2);
+  fill-opacity: 0.5;
+}
+
+/* Grid styling */
+.recharts-cartesian-grid-horizontal line,
+.recharts-cartesian-grid-vertical line {
+  stroke-dasharray: 3 3;
+  opacity: 0.3;
+}
+
+/* Axis styling */
+.recharts-xAxis .recharts-cartesian-axis-tick-value,
+.recharts-yAxis .recharts-cartesian-axis-tick-value {
+  fill: hsl(var(--muted-foreground));
+  font-size: 11px;
+}
+
+/* Dark mode enhancements */
+.dark .recharts-tooltip-wrapper {
+  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
+}
+
+.dark .recharts-cartesian-grid-horizontal line,
+.dark .recharts-cartesian-grid-vertical line {
+  opacity: 0.2;
+}
+
+/* Sparkline mode */
+.sparkline-chart .recharts-surface {
+  overflow: visible !important;
+}
+
+/* Loading skeleton animation */
+@keyframes chartSkeletonPulse {
+  0%, 100% {
+    opacity: 0.5;
+    transform: scaleY(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+/* Chart animations */
+@keyframes chartFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pointPulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.8;
+  }
+}
+
+@keyframes gradientShift {
+  0%, 100% {
+    stop-opacity: 0.8;
+  }
+  50% {
+    stop-opacity: 0.4;
+  }
+}
+
+/* Interactive legend styles */
+.chart-legend-item {
+  position: relative;
+  overflow: hidden;
+}
+
+.chart-legend-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.1), transparent);
+  transition: left 0.5s ease;
+}
+
+.chart-legend-item:hover::before {
+  left: 100%;
+}
+
+/* Crosshair cursor */
+.chart-crosshair {
+  stroke: hsl(var(--muted-foreground));
+  stroke-width: 1;
+  stroke-dasharray: 5 5;
+  opacity: 0.5;
+}
+
+/* Mini map styles */
+.chart-minimap {
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-md);
+  background: hsl(var(--background) / 0.8);
+  backdrop-filter: blur(8px);
+}
+
+/* Export menu animation */
+.chart-export-menu {
+  animation: slideDown 0.2s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Zoom indicator */
+.chart-zoom-indicator {
+  background: hsl(var(--background) / 0.9);
+  backdrop-filter: blur(8px);
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-full);
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Performance optimizations */
+.recharts-surface {
+  will-change: transform;
+}
+
+.recharts-line,
+.recharts-area,
+.recharts-bar {
+  will-change: opacity, transform;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .recharts-wrapper {
+    font-size: 0.875rem;
+  }
+  
+  .recharts-legend-wrapper {
+    margin-top: 1rem !important;
+  }
+}
+
+/* Print styles */
+@media print {
+  .chart-controls {
+    display: none !important;
+  }
+  
+  .recharts-tooltip-wrapper {
+    display: none !important;
+  }
+}

package/src/styles/index.css

@@ -1,4 +1,5 @@
 /* MoonUI Pro - Complete CSS System */
 @import "./tailwind.css";
 @import "./tokens.css";
-@import "./design-system.css";
+@import "./design-system.css";
+@import "./advanced-chart.css";