@moontra/moonui 6.28.0 → 6.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "6.28.0",
+  "version": "6.29.0",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",

package/src/__tests__/issue-646-dark-scope-override.test.tsx

@@ -266,8 +266,25 @@ describe('#646 — kaynak çapaları (regresyon koruması)', () => {
 
 // ════════════════════════════════════════════════════════════════════════════════
 describe('#646 — NEGATİF KONTROL: kapsam dışı yollar BOZULMADI', () => {
-  it('Badge `outline` varyantı DEĞİŞMEDİ (`dark:bg-transparent` duruyor)', () => {
-    expect(parcala(badgeVariants({ variant: 'outline' }))).toContain('dark:bg-transparent')
+  /**
+   * ⚠️ KAPSAM GÜNCELLENDİ (#708 kalem 3). Bu madde #646 gününde bir NEGATİF
+   * KONTROLDÜ: "`primary` düzeltilirken `outline`a dokunulmadı" iddiasını
+   * kilitliyordu. #708 `outline`ı BİLEREK kapsama aldı — docs "PRO" rozetinde
+   * `dark:text-gray-100` tüketicinin `text-white`ını ezip koyu temada 4.18:1
+   * (AA 4.5 altı) üretiyordu. `dark:bg-transparent` de saf tekrardı.
+   *
+   * Kontrolün AMACI korunuyor, yönü tersine çevrildi: `outline`ın #646'da
+   * dokunulmayan diğer yolları (öneksiz çift, kenarlık, ring, blur) hâlâ yerinde.
+   */
+  it('Badge `outline` #708 ile kapsama alındı — `dark:bg-*`/`dark:text-*` yok', () => {
+    const cls = parcala(badgeVariants({ variant: 'outline' }))
+    expect(cls).not.toContain('dark:bg-transparent')
+    expect(cls.filter((c) => c.startsWith('dark:text-'))).toEqual([])
+    // #646'nın gerçek negatif kontrolü: geri kalan yollar bozulmadı
+    expect(cls).toContain('bg-transparent')
+    expect(cls).toContain('text-foreground')
+    expect(cls).toContain('dark:border-gray-600')
+    expect(cls).toContain('dark:backdrop-blur-sm')
   })
 
   it('Badge `destructive` #544 yolu bozulmadı (`bg-error-600`)', () => {

package/src/__tests__/issue-708-badge-outline-override.test.tsx

@@ -0,0 +1,319 @@
+/**
+ * #708 kalem 3 — docs "PRO" rozeti koyu temada AA altında (4.177:1).
+ *
+ * ══ Mekanizma — #715 Dal 1'in BİREBİR AYNISI, bu kez `badge`de ═══════════════════
+ * `cn()` = `twMerge(clsx(...))`. Tüketici (`DocsHeader.getBadgeClassName()`)
+ * `text-white` yazdığında twMerge ÖNEKSİZ `text-foreground`u eler — ama
+ * `dark:text-gray-100` AYRI bir modifier grubu olduğu için ELENMEZ ve koyu temada
+ * özgüllükle kazanır:
+ *   .dark\:text-gray-100:is(.dark *)  → (0,2,0)
+ *   text-white                         → (0,1,0)
+ *
+ * Rozet zemini `from-brand-600 to-brand-accent-600` gradyanı; metin `text-xs`
+ * (küçük metin → AA 4.5:1). `--brand-*` token'larının `.dark` ezmesi YOK
+ * (tokens.css:93-106 yalnız `:root`ta) → zemin iki temada birebir aynı, yalnız
+ * METİN değişiyordu:
+ *   light  beyaz     → en kötü uç 4.60  ✓
+ *   dark   gray-100  → en kötü uç 4.18  ✗   (A18-V 10/10 sayfada ölçtü)
+ *
+ * ══ #715'in ayrımı burada nasıl uygulandı ═══════════════════════════════════════
+ * "Her `dark:` satırını sil" YANLIŞ olurdu. Satır satır soruldu:
+ *   · `dark:bg-transparent`   → öneksiz `bg-transparent` ZATEN dizide (badge.tsx:53)
+ *                               ve `outline`da başka `bg-*` yok → sıralama guard'ı
+ *                               da DEĞİL → SAF TEKRAR → KALDIRILDI.
+ *   · `dark:text-gray-100`    → öneksiz ikizi `text-foreground`tan FARKLI bir değere
+ *                               gidiyor (aşağıda ölçüldü), yani #715'in "tekrar"
+ *                               tanımına girmiyor. Yine de KALDIRILDI, çünkü
+ *                               kazandırdığı fark AA'yı etkilemeyecek kadar küçük
+ *                               (aşağıdaki "kendi görünümü" testi ölçüyor) ama
+ *                               tüketicinin AA'yı geçen `text-white`ını EZİYOR.
+ *   · `dark:backdrop-blur-sm` → öneksiz ikizi YOK, koyu-temaya özgü gerçek bir
+ *                               efekt → KORUNDU.
+ *
+ * ⚠️ SIRALAMA GUARD'I KONTROLÜ (#715'in ikinci dersi): guard yalnız varyant AYNI
+ * özellik için FARKLI değerli bir `dark:` taban kuralı da bildiriyorsa gerekir.
+ * `outline`da tek `bg-*` `bg-transparent`, tek `text-*` `text-foreground` →
+ * yenilecek rakip yok → guard gerekçesi yok. (Aşağıda kaynaktan doğrulanıyor.)
+ *
+ * ⚠️ jsdom Tailwind kaskadını çözmez → burada `getComputedStyle` ile RENK ölçülmez.
+ * Ölçülen şey MEKANİZMA: (a) gerçek `cn()`/twMerge ile hangi sınıflar sağ kalıyor,
+ * (b) sağ kalan sınıfların token değerleriyle WCAG oranı. Gerçek tarayıcı
+ * doğrulaması bu dosyanın kapsamı DIŞINDADIR ve raporda ayrıca belirtilir.
+ */
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import * as fs from 'fs'
+import * as path from 'path'
+import { Badge } from '../components/ui/badge'
+import { cn } from '../lib/utils'
+
+const PKG = path.resolve(__dirname, '..')
+const DEPO = path.resolve(__dirname, '../../../..')
+const tokens = fs.readFileSync(path.join(PKG, 'styles/tokens.css'), 'utf8')
+const freeSrc = fs.readFileSync(path.join(PKG, 'components/ui/badge.tsx'), 'utf8')
+const proSrc = fs.readFileSync(
+  path.join(DEPO, 'packages/moonui-pro/src/components/ui/badge.tsx'),
+  'utf8'
+)
+
+type RGB = [number, number, number]
+type Blok = 'light' | 'dark'
+
+// ─── Renk aritmetiği (#544/#715 testleriyle birebir aynı yöntem) ────────────────
+
+function tokenOku(name: string, blok: Blok): string | null {
+  const source =
+    blok === 'dark'
+      ? tokens.slice(tokens.indexOf('.dark'))
+      : tokens.slice(0, tokens.indexOf('.dark'))
+  return source.match(new RegExp(`--${name}:\\s*([^;]+);`))?.[1].trim() ?? null
+}
+
+function hslToRgb(h: number, s: number, l: number): RGB {
+  h /= 360
+  s /= 100
+  l /= 100
+  const f = (n: number) => {
+    const k = (n + h * 12) % 12
+    const a = s * Math.min(l, 1 - l)
+    return l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)))
+  }
+  return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))]
+}
+
+const hslTokenRgb = (v: string): RGB => {
+  const [h, s, l] = v.split(/\s+/).map((x) => parseFloat(x))
+  return hslToRgb(h, s, l)
+}
+const semanticRgb = (name: string, blok: Blok): RGB =>
+  hslTokenRgb(tokenOku(name, blok) ?? tokenOku(name, 'light')!)
+
+function relativeLuminance([r, g, b]: RGB): number {
+  const c = (v: number) => {
+    const x = v / 255
+    return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4)
+  }
+  return 0.2126 * c(r) + 0.7152 * c(g) + 0.0722 * c(b)
+}
+function kontrast(a: RGB, b: RGB): number {
+  const la = relativeLuminance(a)
+  const lb = relativeLuminance(b)
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
+}
+const hex = ([r, g, b]: RGB): string =>
+  '#' + [r, g, b].map((x) => Math.round(x).toString(16).padStart(2, '0')).join('')
+
+// ─── Sabitler — HER BİRİ ADIYLA ANILIR ──────────────────────────────────────────
+
+const AA_TEXT = 4.5
+/** Tailwind varsayılan paleti — `gray-*` ne tokens.css'te ne preset'te tanımlı. */
+const GRAY_100: RGB = [243, 244, 246]
+const GRAY_200: RGB = [229, 231, 235]
+const WHITE: RGB = [255, 255, 255]
+/** Docs kabuğunda ölçülen GERÇEK koyu kart (#284/#448/#454/#715 konvansiyonu) */
+const CARD_ACTUAL_DARK: RGB = [17, 24, 39]
+
+/** `DocsHeader.getBadgeClassName()` — beş docs kabuğu dosyasında birebir tekrar eder. */
+const DOCS_PRO_BADGE_CLASS =
+  'bg-gradient-to-r from-brand-600 to-brand-accent-600 text-white border-0'
+
+// ─── Varyant sınıflarını KAYNAKTAN çöz (#715 ile aynı ayrıştırıcı) ──────────────
+
+function variantClass(source: string, variantVal: string): string {
+  const m = source.match(new RegExp(`\\n\\s*${variantVal}:\\s*\\[([\\s\\S]*?)\\n\\s*\\]`))
+  if (!m) throw new Error(`${variantVal} varyantı bulunamadı`)
+  return (m[1].match(/"([^"]*)"/g) ?? []).map((s) => s.slice(1, -1)).join(' ')
+}
+const variantClasses = (source: string, v: string): string[] =>
+  variantClass(source, v).split(/\s+/).filter(Boolean)
+
+const PAKETLER = [
+  ['free', freeSrc],
+  ['pro', proSrc],
+] as const
+
+const badgeCls = (jsx: React.ReactElement): string[] => {
+  const { container } = render(jsx)
+  return (container.firstElementChild as HTMLElement).className.split(/\s+/)
+}
+
+// ════════════════════════════════════════════════════════════════════════════════
+// Kusurun ÖLÇÜSÜ — düzeltmeden bağımsız, iddiayı kilitler
+// ════════════════════════════════════════════════════════════════════════════════
+
+describe('#708 kalem 3 — kusurun ölçüsü (regresyon çıpası)', () => {
+  it('gradyan zemin iki temada BİREBİR aynı — `--brand-*` `.dark` ezmesi yok', () => {
+    for (const t of ['brand-600', 'brand-accent-600']) {
+      // `.dark` bloğunda hiç tanım YOK → `:root` değeri iki temada da geçerli.
+      expect(`${t} dark ezmesi: ${tokenOku(t, 'dark')}`).toBe(`${t} dark ezmesi: null`)
+      expect(tokenOku(t, 'light')).not.toBeNull()
+    }
+  })
+
+  it('tüketicinin istediği BEYAZ gradyanın iki ucunda da AA geçiyor', () => {
+    for (const t of ['brand-600', 'brand-accent-600']) {
+      const zemin = semanticRgb(t, 'light')
+      const oran = kontrast(WHITE, zemin)
+      expect(`${t} ${hex(zemin)} beyaz: ${oran >= AA_TEXT ? 'geçer' : oran.toFixed(2)}`).toBe(
+        `${t} ${hex(zemin)} beyaz: geçer`
+      )
+    }
+  })
+
+  it('varyantın DAYATTIĞI koyu-tema metni AA ALTINDA (kusurun kendisi)', () => {
+    // A18-V'nin ölçtüğü en kötü uç: `to-brand-accent-600`.
+    const enKotu = semanticRgb('brand-accent-600', 'light')
+    const gray100 = kontrast(GRAY_100, enKotu)
+    const gray200 = kontrast(GRAY_200, enKotu)
+    expect(gray100).toBeLessThan(AA_TEXT)
+    expect(gray100).toBeCloseTo(4.18, 1) // raporlanan 4.177
+    // pro ikizi `gray-200` kullanıyordu — o daha da kötü
+    expect(gray200).toBeLessThan(gray100)
+  })
+
+  it('öneksiz `text-foreground` de bu gradyanda AA taşımaz → çözüm "token" değil', () => {
+    // Yani `dark:text-gray-100` yerine `text-foreground` bırakmak DA yetmezdi;
+    // kurtaran şey tüketicinin `text-white`ının artık EZİLMEMESİ.
+    const enKotu = semanticRgb('brand-accent-600', 'light')
+    expect(kontrast(semanticRgb('foreground', 'dark'), enKotu)).toBeLessThan(AA_TEXT)
+  })
+})
+
+// ════════════════════════════════════════════════════════════════════════════════
+// Düzeltme — `outline` artık tüketiciyi EZMİYOR
+// ════════════════════════════════════════════════════════════════════════════════
+
+describe('#708 kalem 3 — `outline` varyantı tüketici override\'ını ezmiyor', () => {
+  it.each(PAKETLER)('%s: `outline` dizisinde hiç `dark:text-*` YOK', (_ad, src) => {
+    expect(variantClasses(src, 'outline').filter((c) => /^dark:text-/.test(c))).toEqual([])
+  })
+
+  it.each(PAKETLER)('%s: `dark:bg-transparent` SAF TEKRARDI, kaldırıldı', (_ad, src) => {
+    const liste = variantClasses(src, 'outline')
+    expect(liste).toContain('bg-transparent') // öneksiz ikiz KORUNDU
+    expect(liste).not.toContain('dark:bg-transparent')
+  })
+
+  it.each(PAKETLER)('%s: sıralama guard\'ı gerekmiyor — rakip `dark:` taban kuralı yok', (_ad, src) => {
+    // #715'in ikinci dersi: `dark:X` bir guard olabilir, ama yalnız varyant AYNI
+    // özellik için FARKLI değerli bir `dark:` taban kuralı bildiriyorsa.
+    const liste = variantClasses(src, 'outline')
+    const ozellik = (c: string) => c.replace(/^(?:[a-z-]+:)+/, '').match(/^(bg|text)-/)?.[1]
+    const rakipler = liste
+      .filter((c) => /^dark:(?!hover:|active:|focus-visible:)/.test(c))
+      .filter((c) => !liste.includes(c.slice('dark:'.length)))
+      .map(ozellik)
+      .filter(Boolean)
+    expect(rakipler).toEqual([])
+  })
+
+  it.each(PAKETLER)('%s: `dark:backdrop-blur-sm` KORUNDU (öneksiz ikizi yok)', (_ad, src) => {
+    expect(variantClasses(src, 'outline')).toContain('dark:backdrop-blur-sm')
+  })
+
+  it.each(PAKETLER)('%s: kaynakta `dark:text-gray-*` hiç kalmadı (`outline` dalı)', (_ad, src) => {
+    // Yorum satırları issue'yu anlatmak için sınıf adını LİTERAL içeriyor →
+    // yorumsuz gövde üzerinden bak (yoksa test kendi belgesine takılır).
+    const yorumsuz = src.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*\/\/.*$/gm, '')
+    expect(yorumsuz).not.toContain('dark:text-gray-100 dark:bg-transparent')
+    expect(yorumsuz).not.toContain('dark:text-gray-200 dark:bg-transparent')
+  })
+})
+
+describe('#708 kalem 3 — GERÇEK docs vakası (DocsHeader "PRO" rozeti)', () => {
+  it('`text-white` sağ kalıyor ve onu yenecek `dark:text-*` YOK', () => {
+    const parcalar = badgeCls(
+      <Badge variant="outline" className={cn('text-xs', DOCS_PRO_BADGE_CLASS)}>
+        PRO
+      </Badge>
+    )
+    expect(parcalar).toContain('text-white')
+    // Kusurun imzası: twMerge öneksizi eler, `dark:` ikizi kalır ve (0,2,0) ile
+    // tüketicinin (0,1,0) sınıfını yener. Hiç `dark:text-*` kalmadıysa mümkün değil.
+    expect(parcalar.filter((x) => x.startsWith('dark:text-'))).toEqual([])
+    expect(parcalar).not.toContain('text-foreground')
+  })
+
+  it('gradyan zemin sağ kalıyor — `dark:bg-transparent` onu boyamıyor', () => {
+    const parcalar = badgeCls(
+      <Badge variant="outline" className={cn('text-xs', DOCS_PRO_BADGE_CLASS)}>
+        PRO
+      </Badge>
+    )
+    expect(parcalar).toContain('bg-gradient-to-r')
+    expect(parcalar).toContain('from-brand-600')
+    expect(parcalar).toContain('to-brand-accent-600')
+    // ⚠️ twMerge `bg-gradient-to-r`(background-image) ile `bg-transparent`
+    // (background-color) sınıflarını AYNI grupta saymaz → öneksiz olan sağ kalır
+    // (gradyan onu boyar, sorun değil). Tehlikeli olan `dark:` ikiziydi.
+    expect(parcalar).not.toContain('dark:bg-transparent')
+  })
+
+  it('`DocsNavigation`in `scale-75`li ikizi de aynı sonucu veriyor', () => {
+    const parcalar = badgeCls(
+      <Badge variant="outline" className={`${DOCS_PRO_BADGE_CLASS} text-xs scale-75`}>
+        PRO
+      </Badge>
+    )
+    expect(parcalar).toContain('text-white')
+    expect(parcalar.filter((x) => x.startsWith('dark:text-'))).toEqual([])
+  })
+})
+
+describe('#708 kalem 3 — KONTROL GRUBU: rozetin KENDİ görünümü bozulmadı', () => {
+  it.each(PAKETLER)('%s: `outline` hâlâ `bg-transparent text-foreground` çifti', (_ad, src) => {
+    expect(variantClass(src, 'outline')).toContain('bg-transparent text-foreground')
+  })
+
+  it('tüketici sınıfı YOKKEN metin `--foreground` — iki temada da AA üstü', () => {
+    // `dark:text-gray-100` kalkınca koyu temada metin gray-100 yerine
+    // `--foreground` (dark) oluyor. Fark ölçüldü: ikisi de rahatça geçiyor,
+    // yani kaldırmanın rozetin kendi okunurluğuna maliyeti YOK.
+    const eski = kontrast(GRAY_100, CARD_ACTUAL_DARK)
+    const yeni = kontrast(semanticRgb('foreground', 'dark'), CARD_ACTUAL_DARK)
+    expect(eski).toBeGreaterThanOrEqual(AA_TEXT)
+    expect(yeni).toBeGreaterThanOrEqual(AA_TEXT)
+    // "az bir fark" iddiasının kilidi — 2 kattan fazla ayrılırlarsa test düşsün
+    expect(Math.abs(eski - yeni)).toBeLessThan(2)
+  })
+
+  it('açık temada davranış hiç değişmedi (`text-foreground` zaten öneksizdi)', () => {
+    const parcalar = badgeCls(<Badge variant="outline">Free</Badge>)
+    expect(parcalar).toContain('text-foreground')
+    expect(parcalar).toContain('bg-transparent')
+  })
+
+  it.each(PAKETLER)('%s: diğer varyantlar #708 kapsamı DIŞINDA — dokunulmadı', (_ad, src) => {
+    // `primary` #646'da, `destructive` #544/#715'te ele alındı; #708 yalnız
+    // `outline` dalını değiştirir.
+    expect(variantClass(src, 'primary')).toContain('bg-primary text-primary-foreground')
+    expect(variantClass(src, 'destructive')).toContain('bg-error-600 text-white')
+  })
+})
+
+describe('#708 kalem 3 — free ↔ pro İKİZ EŞİTLİĞİ', () => {
+  const outlineOf = (src: string) => variantClasses(src, 'outline')
+
+  it('`outline`ın METİN sınıfları iki pakette birebir aynı', () => {
+    const metin = (src: string) => outlineOf(src).filter((c) => /(^|:)text-/.test(c))
+    expect(metin(proSrc)).toEqual(metin(freeSrc))
+    expect(metin(freeSrc)).toEqual(['text-foreground'])
+  })
+
+  it('`outline`ın ARKA PLAN sınıfları iki pakette birebir aynı', () => {
+    const zemin = (src: string) => outlineOf(src).filter((c) => /(^|:)bg-/.test(c))
+    expect(zemin(proSrc)).toEqual(zemin(freeSrc))
+    expect(zemin(freeSrc)).toEqual(['bg-transparent'])
+  })
+
+  it('ikisinde de `dark:` yalnız KENARLIK, RING ve BLUR için kaldı', () => {
+    for (const src of [freeSrc, proSrc]) {
+      const kalanlar = outlineOf(src)
+        .filter((c) => c.startsWith('dark:'))
+        .map((c) => c.replace(/^dark:(?:hover:)?/, '').replace(/-.*/, ''))
+      expect([...new Set(kalanlar)].sort()).toEqual(['backdrop', 'border', 'focus'])
+    }
+  })
+})