@moontra/moonui 4.1.0 → 5.0.1

package/src/components/ui/badge.tsx

@@ -51,16 +51,16 @@ const badgeVariants = cva(
           "dark:bg-error/90 dark:text-white dark:shadow-inner dark:shadow-error/10",
         ],
         success: [
-          "border-transparent bg-success text-white",
+          "border-transparent bg-success text-success-foreground",
           "hover:bg-success/90 dark:hover:bg-success/80",
           "focus-visible:ring-success/30 dark:focus-visible:ring-success/25",
-          "dark:bg-success/90 dark:text-white dark:shadow-inner dark:shadow-success/10",
+          "dark:bg-success/90 dark:text-success-foreground dark:shadow-inner dark:shadow-success/10",
         ],
         warning: [
-          "border-transparent bg-warning text-white",
+          "border-transparent bg-warning text-warning-foreground",
           "hover:bg-warning/90 dark:hover:bg-warning/80",
           "focus-visible:ring-warning/30 dark:focus-visible:ring-warning/25",
-          "dark:bg-warning/90 dark:text-gray-900 dark:shadow-inner dark:shadow-warning/10",
+          "dark:bg-warning/90 dark:text-warning-foreground dark:shadow-inner dark:shadow-warning/10",
         ],
         ghost: [
           "border border-gray-200 bg-gray-50/50 text-gray-700",

package/src/components/ui/command.tsx

@@ -52,7 +52,11 @@ const Command = React.forwardRef<
     {...props}
   />
 ))
-Command.displayName = CommandPrimitive.displayName
+// NOT: cmdk primitive'leri displayName tanımlamaz (Radix'ten farklı olarak). Bu yüzden
+// `CommandPrimitive.*.displayName` okumak `undefined` üretiyordu ve React DevTools ile hata
+// mesajlarında bileşenler isimsiz görünüyordu. Kütüphane genelindeki konvansiyona uyarak
+// displayName'ler açık string olarak verilir.
+Command.displayName = "Command"
 
 // CommandDialog bileşeni
 interface CommandDialogProps extends React.ComponentProps<typeof Dialog> {
@@ -100,7 +104,7 @@ const CommandInput = React.forwardRef<
     />
   </div>
 ))
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = "CommandInput"
 
 // CommandList bileşeni
 interface CommandListProps 
@@ -116,7 +120,7 @@ const CommandList = React.forwardRef<
     {...props}
   />
 ))
-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = "CommandList"
 
 // CommandEmpty bileşeni
 interface CommandEmptyProps 
@@ -132,7 +136,7 @@ const CommandEmpty = React.forwardRef<
     {...props}
   />
 ))
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = "CommandEmpty"
 
 // CommandGroup bileşeni
 interface CommandGroupProps 
@@ -151,7 +155,7 @@ const CommandGroup = React.forwardRef<
     {...props}
   />
 ))
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = "CommandGroup"
 
 // CommandSeparator bileşeni
 interface CommandSeparatorProps 
@@ -167,7 +171,7 @@ const CommandSeparator = React.forwardRef<
     {...props}
   />
 ))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+CommandSeparator.displayName = "CommandSeparator"
 
 // CommandItem bileşeni
 interface CommandItemProps 
@@ -186,7 +190,7 @@ const CommandItem = React.forwardRef<
     {...props}
   />
 ))
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = "CommandItem"
 
 // CommandShortcut bileşeni - utility component
 const CommandShortcut = ({

package/src/components/ui/date-picker.tsx

@@ -312,11 +312,11 @@ export interface DateRangePickerProps
   /**
    * Selected date range
    */
-  value?: { from: Date | undefined; to: Date | undefined };
+  value?: { from: Date | undefined; to?: Date | undefined };
   /**
    * Callback when date range changes
    */
-  onChange?: (range: { from: Date | undefined; to: Date | undefined } | undefined) => void;
+  onChange?: (range: { from: Date | undefined; to?: Date | undefined } | undefined) => void;
   /**
    * Separator between dates
    */
@@ -339,7 +339,10 @@ export const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePick
     setInternalRange(value);
   }, [value]);
 
-  const handleSelect = (range: { from: Date | undefined; to: Date | undefined } | undefined) => {
+  // NOT: `to` OPSİYONEL. react-day-picker'ın `DateRange` tipi de öyle
+  // (`to?: Date | undefined`). Önce burada zorunlu-ama-undefined yazılmıştı ve
+  // uyuşmadığı için `onSelect={handleSelect}` cast'i gerekiyordu.
+  const handleSelect = (range: { from: Date | undefined; to?: Date | undefined } | undefined) => {
     setInternalRange(range);
     onChange?.(range);
     if (range?.from && range?.to) {
@@ -386,7 +389,7 @@ export const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePick
           mode="range"
           defaultMonth={internalRange?.from}
           selected={internalRange}
-          onSelect={handleSelect as any}
+          onSelect={handleSelect}
           showOutsideDays={false}
           {...props.calendarProps}
           className="rounded-2xl"
@@ -421,7 +424,10 @@ export interface DateTimePickerProps extends DatePickerProps {
 export const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(function DateTimePicker({
   value,
   onChange,
-  formatString = "PPP p",
+  // Saat ayrı bir <select> ile gösterildiği için buton yalnızca TARİHİ yazar;
+  // varsayılan bu yüzden "PPP p" değil "PPP". (Eski hâlde "PPP p" alınıp hiç
+  // kullanılmıyordu — çağıranın verdiği formatString sessizce yok sayılıyordu.)
+  formatString = "PPP",
   showTimePicker = true,
   timeFormat = "24",
   timeInterval = 15,
@@ -486,7 +492,7 @@ export const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerPro
         {...props}
         value={date}
         onChange={handleDateChange}
-        formatString="PPP"
+        formatString={formatString}
         showTodayButton={false}
       />
       {showTimePicker && date && (

package/src/components/ui/toast.tsx

@@ -93,6 +93,9 @@ const ToastClose = React.forwardRef<
     {...props}
   >
     <X className="h-4 w-4" />
+    {/* İkon-only kapatma düğmesinin erişilebilir bir ismi olmalı (WCAG 4.1.2);
+        aynı desen dialog.tsx'teki kapatma düğmesinde de kullanılıyor. */}
+    <span className="sr-only">Close</span>
   </ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;

package/src/styles/tokens.css

@@ -126,24 +126,34 @@
    * surum yukseltmesinde sessizce maviden mora cevirirdi — kirici bir gorsel
    * degisiklik ve tum renk akislarinin bozulmasi demekti. Marka rengi isteyen
    * tuketici bilerek `bg-brand-600` yazar ya da "brand" preset'ini secer. */
-  --primary: 217.2 91.2% 59.8%;
-  --primary-foreground: 222.2 47.4% 11.2%;
+  --primary: 217.2 91.2% 51%;
+  /* Açık temada --primary MAVİ (L=59.8%); üzerine gelen metin/ikon de AÇIK
+     olmalı. Bu değer kardeşleriyle uyumsuz tek çiftti (L=11.2%, koyu) ve
+     `bg-primary text-primary-foreground` kullanan her yüzeyde — buton, rozet,
+     ilerleme noktası — mavi zemin üstünde KOYU metin üretiyordu.
+     Kardeş referanslar: --destructive-foreground ve --success-foreground
+     ikisi de 210 40% 98%. (Karanlık temada --primary zaten beyaz olduğu için
+     oradaki koyu foreground DOĞRU ve değiştirilmedi.) */
+  --primary-foreground: 210 40% 98%;
   --secondary: 217.2 32.6% 94%;
-  --secondary-foreground: 217.2 91.2% 59.8%;
+  --secondary-foreground: 217.2 91.2% 51%;
   --muted: 217.2 32.6% 96%;
   --muted-foreground: 215.4 16.3% 46.9%;
   --accent: 217.2 32.6% 94%;
-  --accent-foreground: 217.2 91.2% 59.8%;
+  --accent-foreground: 217.2 91.2% 51%;
   --destructive: 0 84.2% 60.2%;
   --destructive-foreground: 210 40% 98%;
   --border: 214.3 31.8% 91.4%;
   --input: 214.3 31.8% 91.4%;
-  --ring: 217.2 91.2% 59.8%;
+  --ring: 217.2 91.2% 51%;
 
   /* Durum renkleri. Tailwind preset'i bg-success/bg-warning/bg-error/bg-info/
    * bg-caution siniflarini bu degiskenlere bagliyor; tanimsiz kalirlarsa o
    * siniflar renksiz uretilir. */
-  --success: 142 76% 36%;
+  /* Açık temada zemin, üzerine gelen açık metin (--success-foreground) için
+     fazla açıktı: beyaz metinle kontrast 3.18 (WCAG AA 4.5:1 altı). L=36% -> 29%
+     ile 4.69'a çıkar. --primary'de uygulanan düzeltmenin aynısı. */
+  --success: 142 76% 29%;
   --success-foreground: 210 40% 98%;
   --warning: 38 92% 50%;
   --warning-foreground: 24 10% 10%;
@@ -409,6 +419,11 @@
   --accent: 216 34% 17%;
   --accent-foreground: 210 40% 98%;
   --destructive: 0 63% 31%;
+  /* `--success` iki rolde birden kullanılıyor: açık temada `bg-success` ZEMİN
+     (üstünde açık metin), karanlık temada `text-success` METİN (koyu zemin
+     üstünde). Açık tema için 29%'e koyulaştırıldı; karanlık temada o değer
+     metin olarak okunmuyordu (3.30) — burada 36% korunur (4.86). */
+  --success: 142 76% 36%;
   --destructive-foreground: 210 40% 98%;
   --border: 216 34% 17%;
   --input: 216 34% 17%;

package/src/use-intersection-observer.tsx

@@ -27,6 +27,15 @@ export function useIntersectionObserver({
 
     const observer = new IntersectionObserver(
       ([entry]) => {
+        // freezeOnceVisible: bir kez görünür olduktan sonra state DONMALI.
+        // frozen guard'ı yalnızca yukarıdaki effect girişinde vardı; effect'in
+        // deps'i değişmediği için yeniden koşmuyor, dolayısıyla guard hiç
+        // devreye girmiyordu. Canlı observer bir sonraki entry'de
+        // setIsIntersecting(false) çağırıp donmayı bozuyordu.
+        if (frozen.current) {
+          return;
+        }
+
         const isElementIntersecting = entry.isIntersecting;
         setIsIntersecting(isElementIntersecting);
         onChange?.(isElementIntersecting, entry);

package/src/use-local-storage.tsx

@@ -1,5 +1,20 @@
 import { useState, useEffect } from 'react'
 
+/**
+ * Aynı sekmedeki diğer hook instance'larını haberdar eden özel olay.
+ *
+ * Native `storage` olayı YALNIZCA diğer sekme/pencerelerde tetiklenir — değeri
+ * yazan dokümanda hiç tetiklenmez. Bu yüzden aynı sayfada `useLocalStorage("k")`
+ * kullanan iki component birbirinden habersiz kalıyor, biri güncellenince
+ * diğeri bayat değeri göstermeye devam ediyordu.
+ */
+const LOCAL_SYNC_EVENT = 'moonui:local-storage'
+
+interface LocalSyncDetail {
+  key: string
+  value: unknown
+}
+
 // Local storage hook with error handling and SSR support
 export function useLocalStorage<T>(
   key: string,
@@ -40,6 +55,13 @@ export function useLocalStorage<T>(
         } else {
           window.localStorage.setItem(key, JSON.stringify(valueToStore))
         }
+
+        // Aynı dokümandaki diğer instance'ları bilgilendir (bkz. LOCAL_SYNC_EVENT)
+        window.dispatchEvent(
+          new CustomEvent<LocalSyncDetail>(LOCAL_SYNC_EVENT, {
+            detail: { key, value: valueToStore },
+          })
+        )
       }
     } catch (error) {
       // A more advanced implementation would handle the error case
@@ -63,8 +85,20 @@ export function useLocalStorage<T>(
       }
     }
 
+    // Aynı sekmedeki kardeş instance'lar
+    const handleLocalSync = (e: Event) => {
+      const detail = (e as CustomEvent<LocalSyncDetail>).detail
+      if (detail && detail.key === key) {
+        setStoredValue(detail.value as T)
+      }
+    }
+
     window.addEventListener('storage', handleStorageChange)
-    return () => window.removeEventListener('storage', handleStorageChange)
+    window.addEventListener(LOCAL_SYNC_EVENT, handleLocalSync)
+    return () => {
+      window.removeEventListener('storage', handleStorageChange)
+      window.removeEventListener(LOCAL_SYNC_EVENT, handleLocalSync)
+    }
   }, [key])
 
   return [storedValue, setValue]

package/src/components/ui/__tests__/data-table.test.tsx

@@ -1,256 +0,0 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { DataTable } from '../data-table';
-import { ColumnDef } from '@tanstack/react-table';
-import '@testing-library/jest-dom';
-
-type TestData = {
-  id: string;
-  name: string;
-  email: string;
-  age: number;
-  status: 'active' | 'inactive';
-};
-
-const mockData: TestData[] = [
-  { id: '1', name: 'John Doe', email: 'john@example.com', age: 30, status: 'active' },
-  { id: '2', name: 'Jane Smith', email: 'jane@example.com', age: 25, status: 'inactive' },
-  { id: '3', name: 'Bob Johnson', email: 'bob@example.com', age: 35, status: 'active' },
-];
-
-const mockColumns: ColumnDef<TestData>[] = [
-  {
-    accessorKey: 'name',
-    header: 'Name',
-  },
-  {
-    accessorKey: 'email',
-    header: 'Email',
-  },
-  {
-    accessorKey: 'age',
-    header: 'Age',
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status',
-  },
-];
-
-describe('DataTable', () => {
-  it('renders correctly with basic data', () => {
-    render(<DataTable columns={mockColumns} data={mockData} />);
-    
-    // Check headers
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Email')).toBeInTheDocument();
-    expect(screen.getByText('Age')).toBeInTheDocument();
-    expect(screen.getByText('Status')).toBeInTheDocument();
-    
-    // Check data rows
-    expect(screen.getByText('John Doe')).toBeInTheDocument();
-    expect(screen.getByText('john@example.com')).toBeInTheDocument();
-    expect(screen.getByText('30')).toBeInTheDocument();
-    expect(screen.getByText('active')).toBeInTheDocument();
-  });
-
-  it('renders empty state when no data', () => {
-    render(<DataTable columns={mockColumns} data={[]} />);
-    expect(screen.getByText('No results.')).toBeInTheDocument();
-  });
-
-  it('shows search input when searchable is true', () => {
-    render(<DataTable columns={mockColumns} data={mockData} searchable />);
-    expect(screen.getByPlaceholderText('Search all columns...')).toBeInTheDocument();
-  });
-
-  it('filters data based on search input', async () => {
-    render(<DataTable columns={mockColumns} data={mockData} searchable />);
-    
-    const searchInput = screen.getByPlaceholderText('Search all columns...');
-    fireEvent.change(searchInput, { target: { value: 'john' } });
-    
-    await waitFor(() => {
-      expect(screen.getByText('John Doe')).toBeInTheDocument();
-      expect(screen.queryByText('Jane Smith')).not.toBeInTheDocument();
-    });
-  });
-
-  it('shows filter button when filterable is true', () => {
-    render(<DataTable columns={mockColumns} data={mockData} filterable />);
-    expect(screen.getByText('Filter')).toBeInTheDocument();
-  });
-
-  it('shows export button when exportable is true', () => {
-    render(<DataTable columns={mockColumns} data={mockData} exportable />);
-    expect(screen.getByText('Export')).toBeInTheDocument();
-  });
-
-  it('handles pagination correctly', () => {
-    const largeData = Array.from({ length: 25 }, (_, i) => ({
-      id: `${i + 1}`,
-      name: `User ${i + 1}`,
-      email: `user${i + 1}@example.com`,
-      age: 20 + i,
-      status: i % 2 === 0 ? 'active' as const : 'inactive' as const,
-    }));
-
-    render(<DataTable columns={mockColumns} data={largeData} />);
-    
-    // Check pagination controls
-    expect(screen.getByText('Previous')).toBeInTheDocument();
-    expect(screen.getByText('Next')).toBeInTheDocument();
-    expect(screen.getByText('1 of 3')).toBeInTheDocument(); // 25 items, 10 per page = 3 pages
-  });
-
-  it('handles sorting correctly', async () => {
-    const sortableColumns: ColumnDef<TestData>[] = [
-      {
-        accessorKey: 'name',
-        header: ({ column }) => (
-          <button onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
-            Name
-          </button>
-        ),
-      },
-      {
-        accessorKey: 'age',
-        header: ({ column }) => (
-          <button onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
-            Age
-          </button>
-        ),
-      },
-    ];
-
-    render(<DataTable columns={sortableColumns} data={mockData} />);
-    
-    const nameHeader = screen.getByText('Name');
-    fireEvent.click(nameHeader);
-    
-    await waitFor(() => {
-      const rows = screen.getAllByRole('row');
-      // First row should be header, second should be Bob Johnson (alphabetically first)
-      expect(rows[1]).toHaveTextContent('Bob Johnson');
-    });
-  });
-
-  it('handles row selection', () => {
-    const selectableColumns: ColumnDef<TestData>[] = [
-      {
-        id: 'select',
-        header: ({ table }) => (
-          <input
-            type="checkbox"
-            checked={table.getIsAllPageRowsSelected()}
-            onChange={(e) => table.toggleAllPageRowsSelected(e.target.checked)}
-          />
-        ),
-        cell: ({ row }) => (
-          <input
-            type="checkbox"
-            checked={row.getIsSelected()}
-            onChange={(e) => row.toggleSelected(e.target.checked)}
-          />
-        ),
-      },
-      ...mockColumns,
-    ];
-
-    render(<DataTable columns={selectableColumns} data={mockData} />);
-    
-    const checkboxes = screen.getAllByRole('checkbox');
-    expect(checkboxes).toHaveLength(4); // 1 header + 3 rows
-    
-    // Select first row
-    fireEvent.click(checkboxes[1]);
-    expect(checkboxes[1]).toBeChecked();
-  });
-
-  it('handles column visibility', () => {
-    render(<DataTable columns={mockColumns} data={mockData} />);
-    
-    // All columns should be visible by default
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Email')).toBeInTheDocument();
-    expect(screen.getByText('Age')).toBeInTheDocument();
-    expect(screen.getByText('Status')).toBeInTheDocument();
-  });
-
-  it('shows loading state', () => {
-    render(<DataTable columns={mockColumns} data={mockData} loading />);
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-  });
-
-  it('handles custom cell rendering', () => {
-    const customColumns: ColumnDef<TestData>[] = [
-      {
-        accessorKey: 'name',
-        header: 'Name',
-        cell: ({ row }) => (
-          <div className="font-bold">{row.getValue('name')}</div>
-        ),
-      },
-      {
-        accessorKey: 'status',
-        header: 'Status',
-        cell: ({ row }) => {
-          const status = row.getValue('status') as string;
-          return (
-            <span className={status === 'active' ? 'text-green-600' : 'text-red-600'}>
-              {status}
-            </span>
-          );
-        },
-      },
-    ];
-
-    render(<DataTable columns={customColumns} data={mockData} />);
-    
-    // Check if custom rendering is applied
-    const johnDoeCell = screen.getByText('John Doe');
-    expect(johnDoeCell).toHaveClass('font-bold');
-    
-    const activeStatus = screen.getAllByText('active')[0];
-    expect(activeStatus).toHaveClass('text-green-600');
-  });
-
-  it('handles empty columns gracefully', () => {
-    render(<DataTable columns={[]} data={mockData} />);
-    expect(screen.getByText('No results.')).toBeInTheDocument();
-  });
-
-  it('handles keyboard navigation', () => {
-    render(<DataTable columns={mockColumns} data={mockData} />);
-    
-    const table = screen.getByRole('table');
-    expect(table).toBeInTheDocument();
-    
-    // Table should be keyboard accessible
-    fireEvent.keyDown(table, { key: 'Tab' });
-    expect(table).toBeInTheDocument();
-  });
-
-  it('exports data when export button is clicked', async () => {
-    // Mock the download functionality
-    const mockCreateObjectURL = jest.fn();
-    const mockRevokeObjectURL = jest.fn();
-    global.URL.createObjectURL = mockCreateObjectURL;
-    global.URL.revokeObjectURL = mockRevokeObjectURL;
-
-    render(<DataTable columns={mockColumns} data={mockData} exportable />);
-    
-    const exportButton = screen.getByText('Export');
-    fireEvent.click(exportButton);
-    
-    await waitFor(() => {
-      expect(mockCreateObjectURL).toHaveBeenCalled();
-    });
-  });
-
-  it('handles responsive design', () => {
-    render(<DataTable columns={mockColumns} data={mockData} />);
-    
-    const tableContainer = screen.getByTestId('data-table-container');
-    expect(tableContainer).toHaveClass('overflow-auto');
-  });
-});