@moontra/moonui-pro 2.2.2 → 2.2.4

package/src/components/ui/table.tsx

@@ -0,0 +1,334 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+export type SortDirection = "asc" | "desc" | null;
+
+const MoonUItableVariantsPro = cva(
+  "w-full caption-bottom text-sm",
+  {
+    variants: {
+      variant: {
+        default: "dark:text-gray-200",
+        bordered: "border border-border dark:border-gray-700",
+        striped: "dark:text-gray-200",
+        card: "border border-border dark:border-gray-700 rounded-md shadow-sm dark:shadow-gray-900/20",
+        minimal: "border-none dark:text-gray-200",
+      },
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ColumnDefinition<T> {
+  id: string;
+  header: React.ReactNode;
+  accessorKey?: keyof T;
+  cell?: (row: T) => React.ReactNode;
+  sortable?: boolean;
+}
+
+interface TableProps<T>
+  extends React.HTMLAttributes<HTMLTableElement>,
+    VariantProps<typeof MoonUItableVariantsPro> {
+  /** Veri yükleniyor durumunu gösterir */
+  loading?: boolean;
+  /** Sıralama için kullanılan sütun */
+  sortColumn?: string;
+  /** Sıralama yönü */
+  sortDirection?: SortDirection;
+  /** Sıralama değiştiğinde çağrılacak fonksiyon */
+  onSortChange?: (column: string, direction: SortDirection) => void;
+  /** Boş durum için özel içerik */
+  emptyContent?: React.ReactNode;
+  /** Seçili satır id'leri */
+  selectedRowIds?: string[];
+  /** Satır seçim değiştiğinde çağrılacak fonksiyon */
+  onRowSelectionChange?: (selectedRowIds: string[]) => void;
+  /** Satır seçim devre dışı */
+  disableRowSelection?: boolean;
+  /** Her satır için benzersiz id çıkarma fonksiyonu */
+  getRowId?: (row: T) => string;
+}
+
+// Tip parametresiz Table bileşeni için varsayılan tip, herhangi bir veri tipini kabul edebilmesi için
+const MoonUITablePro = React.forwardRef<
+  HTMLTableElement,
+  TableProps<unknown>
+>(({ 
+  className, 
+  variant, 
+  size, 
+  loading, 
+  emptyContent,
+  // Kullanılmayan özellikleri yoruma alarak lint uyarılarını önlüyoruz
+  // sortColumn,
+  // sortDirection,
+  // onSortChange,
+  // selectedRowIds,
+  // onRowSelectionChange,
+  // disableRowSelection,
+  // getRowId,
+  ...props 
+}, ref) => {
+  // Apply striped styles to the tbody via a class name
+  const MoonUIstripedPro = variant === "striped";
+  
+  // Çocukları güvenli bir şekilde işle ve tip kontrollerini doğru yap
+  const MoonUIchildrenWithPropsPro = React.Children.map(props.children, (child) => {
+    if (React.isValidElement(child)) {
+      if (child.type === "tbody") {
+        // Tip güvenliği için props'ları düzgün şekilde ele alıyoruz
+        const MoonUItbodyPropsPro = child.props as Record<string, unknown>;
+        return React.cloneElement(child as React.ReactElement<React.HTMLAttributes<HTMLTableSectionElement>>, {
+          className: cn(tbodyProps.className as string | undefined, striped && "even:[&>tr]:bg-muted/50")
+        });
+      }
+    }
+    return child;
+  });
+  
+  return (
+    <div className="relative w-full overflow-auto">
+      {/* Yükleniyor durumu için overlay */}
+      {loading && (
+        <div className="absolute inset-0 bg-background/60 flex items-center justify-center z-10">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
+        </div>
+      )}
+      
+      <table
+        ref={ref}
+        className={cn(
+          MoonUItableVariantsPro({ variant, size }),
+          loading && "opacity-70",
+          className
+        )}
+        {...props}
+      >
+        {childrenWithProps}
+      </table>
+      
+    </div>
+  );
+});
+MoonUITablePro.displayName = "TablePro";
+
+const MoonUITableHeaderPro = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+MoonUITableHeaderPro.displayName = "TableHeaderPro";
+
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  /** Veri yoksa gösterilecek boş durum içeriği */
+  emptyContent?: React.ReactNode;
+  /** Varsayılan boş durum mesajı */
+  emptyMessage?: string;
+}
+
+const MoonUITableBodyPro = React.forwardRef<
+  HTMLTableSectionElement,
+  TableBodyProps
+>(({ className, emptyContent, emptyMessage = "No data available", children, ...props }, ref) => {
+  // Çocuk elementlerin varlığını kontrol et
+  const MoonUIhasChildrenPro = React.Children.count(children) > 0;
+  
+  return (
+    <tbody
+      ref={ref}
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    >
+      {hasChildren ? (
+        children
+      ) : (
+        <tr>
+          <td colSpan={100} className="h-24 text-center">
+            {emptyContent || (
+              <div className="py-6 text-muted-foreground">
+                <div className="text-sm">
+                  {emptyMessage}
+                </div>
+              </div>
+            )}
+          </td>
+        </tr>
+      )}
+    </tbody>
+  )
+});
+MoonUITableBodyPro.displayName = "TableBodyPro";
+
+const MoonUITableFooterPro = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-primary text-primary-foreground font-medium", className)}
+    {...props}
+  />
+));
+MoonUITableFooterPro.displayName = "TableFooterPro";
+
+const MoonUITableRowPro = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+MoonUITableRowPro.displayName = "TableRowPro";
+
+interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  /** Bu sütun için sıralama durumu */
+  sortable?: boolean;
+  /** Bu sütunun sıralanma durumu */
+  sorted?: SortDirection;
+  /** Sıralama değiştiğinde çağrılacak fonksiyon */
+  onSort?: () => void;
+}
+
+const MoonUITableHeadPro = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+  ({ className, sortable, sorted, onSort, children, ...props }, ref) => {
+    // Sıralama için simgeler
+    const MoonUIrenderSortIconPro = () => {
+      if (!sortable) return null;
+      
+      if (sorted === "asc") {
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="ml-1 h-4 w-4 inline-block"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+        );
+      }
+      
+      if (sorted === "desc") {
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="ml-1 h-4 w-4 inline-block"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+        );
+      }
+      
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="ml-1 h-4 w-4 inline-block opacity-30"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+            clipRule="evenodd"
+          />
+        </svg>
+      );
+    };
+    
+    return (
+      <th
+        ref={ref}
+        className={cn(
+          "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+          sortable && "cursor-pointer hover:text-foreground select-none",
+          className
+        )}
+        onClick={sortable ? onSort : undefined}
+        {...props}
+      >
+        <div className="flex items-center">
+          {children}
+          {sortable && renderSortIcon()}
+        </div>
+      </th>
+    );
+  }
+);
+MoonUITableHeadPro.displayName = "TableHeadPro";
+
+const MoonUITableCellPro = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+MoonUITableCellPro.displayName = "TableCellPro";
+
+const MoonUITableCaptionPro = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+MoonUITableCaptionPro.displayName = "TableCaptionPro";
+
+
+// Internal aliases for Pro component usage
+export const tableVariantsInternal = MoonUItableVariantsPro
+export const TableInternal = MoonUITablePro
+export const stripedInternal = MoonUIstripedPro
+export const childrenWithPropsInternal = MoonUIchildrenWithPropsPro
+export const tbodyPropsInternal = MoonUItbodyPropsPro
+export const TableHeaderInternal = MoonUITableHeaderPro
+export const TableBodyInternal = MoonUITableBodyPro
+export const hasChildrenInternal = MoonUIhasChildrenPro
+export const TableFooterInternal = MoonUITableFooterPro
+export const TableRowInternal = MoonUITableRowPro
+export const TableHeadInternal = MoonUITableHeadPro
+export const renderSortIconInternal = MoonUIrenderSortIconPro
+export const TableCellInternal = MoonUITableCellPro
+export const TableCaptionInternal = MoonUITableCaptionPro
+
+// Pro exports  
+export { MoonUItableVariantsPro, MoonUITablePro, MoonUIstripedPro, MoonUIchildrenWithPropsPro, MoonUItbodyPropsPro, MoonUITableHeaderPro, MoonUITableBodyPro, MoonUIhasChildrenPro, MoonUITableFooterPro, MoonUITableRowPro, MoonUITableHeadPro, MoonUIrenderSortIconPro, MoonUITableCellPro, MoonUITableCaptionPro }
+
+// Clean exports (without MoonUI prefix for easier usage)
+export { MoonUItableVariantsPro as tableVariants, MoonUITablePro as Table, MoonUIstripedPro as striped, MoonUIchildrenWithPropsPro as childrenWithProps, MoonUItbodyPropsPro as tbodyProps, MoonUITableHeaderPro as TableHeader, MoonUITableBodyPro as TableBody, MoonUIhasChildrenPro as hasChildren, MoonUITableFooterPro as TableFooter, MoonUITableRowPro as TableRow, MoonUITableHeadPro as TableHead, MoonUIrenderSortIconPro as renderSortIcon, MoonUITableCellPro as TableCell, MoonUITableCaptionPro as TableCaption };
+
+export type { TableBodyProps };

package/src/components/ui/toggle.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const MoonUItoggleVariantsPro = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ToggleProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, VariantProps<typeof MoonUItoggleVariantsPro> {}
+
+const MoonUITogglePro = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  ToggleProps
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(MoonUItoggleVariantsPro({ variant, size, className }))}
+    {...props}
+  />
+))
+
+MoonUITogglePro.displayName = TogglePrimitive.Root.displayName
+
+
+// Internal aliases for Pro component usage
+export const toggleVariantsInternal = MoonUItoggleVariantsPro
+export const ToggleInternal = MoonUITogglePro
+
+// Pro exports  
+export { MoonUItoggleVariantsPro, MoonUITogglePro }
+
+// Clean exports (without MoonUI prefix for easier usage)
+export { MoonUItoggleVariantsPro as toggleVariants, MoonUITogglePro as Toggle }
+export type { ToggleProps }

package/src/utils/cn.ts

@@ -1,69 +1,6 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
-// Utility function using clsx and tailwind-merge
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
-
-// Date formatting utility
-export function formatDate(date: Date): string {
-  if (isNaN(date.getTime())) {
-    return 'Invalid Date'
-  }
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-  })
-}
-
-// Currency formatting utility
-export function formatCurrency(amount: number): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD'
-  }).format(amount)
-}
-
-// Text truncation utility
-export function truncateText(text: string, maxLength: number): string {
-  if (text.length <= maxLength) {
-    return text
-  }
-  return text.slice(0, maxLength) + '...'
-}
-
-// ID generation utility
-export function generateId(length: number = 8): string {
-  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-  let result = ''
-  for (let i = 0; i < length; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length))
-  }
-  return result
-}
-
-// Get client IP address from request
-export function getClientIP(request: Request): string {
-  // Check various headers for IP address
-  const forwarded = request.headers.get('x-forwarded-for')
-  const realIP = request.headers.get('x-real-ip')
-  const remoteAddr = request.headers.get('x-remote-addr')
-  
-  if (forwarded) {
-    // x-forwarded-for can contain multiple IPs, take the first one
-    return forwarded.split(',')[0].trim()
-  }
-  
-  if (realIP) {
-    return realIP
-  }
-  
-  if (remoteAddr) {
-    return remoteAddr
-  }
-  
-  // Fallback to a default IP if none found
-  return '127.0.0.1'
-}