@moontra/moonui 6.17.0 → 6.19.0

package/src/components/ui/__tests__/progress-secondary-contrast.test.ts

@@ -0,0 +1,231 @@
+/**
+ * #372 — Progress `variant="secondary"` dolgu↔track kontrast değişmezi.
+ *
+ * BULGU (#318'in ardılı): #318 `indicatorVariant ?? variant` düşüşünü kurunca
+ * `variant="secondary"` dolguya İLK KEZ ulaştı — ve ulaşan değer görünmez çıktı.
+ * Dolgu `bg-secondary`, track `bg-secondary/20`: ikisi de AYNI yüzey token'ına
+ * basıyor. `--secondary` light'ta rgb(235,239,245), dark'ta rgb(2,8,23) — %20
+ * alfa track ile tam dolgu iki temada da ~1.0 oranında, bar hiç görünmüyordu.
+ * axe bunu yakalamaz: `color-contrast` yalnız METİN öğelerini ölçer.
+ *
+ * DÜZELTME: dolgu `bg-[rgb(var(--secondary-500))]` (tokens.css slate skalası).
+ * `bg-secondary-foreground` BİLEREK seçilmedi — light'ta --primary ile aynı
+ * hue/sat'ta ΔL=%2, dark'ta birebir --primary değeri: varyant primary klonuna
+ * dönerdi. Track `bg-secondary/20` KALDI (issue #372 seçenek 1; track↔zemin
+ * ayrışması ayrı token-ekseni bulgusudur, kapsam dışı).
+ *
+ * Kabul kriteri (issue #372 §3): dolgu↔track kontrastı light ve dark temada
+ * ≥3:1 (WCAG 1.4.11 non-text eşiği). Buradaki testler hem bu eşiği hem de
+ * "500 iki temada da geçen TEK kademe" seçim gerekçesini kilitler.
+ *
+ * Hesap yöntemi primary-subtle-token.test.ts ile birebir aynıdır (WCAG 2.x
+ * bağıl parlaklık); oradaki "hesaplayıcı doğru mu?" çapası burada da var.
+ * NOT: #375'in dark-token-contrast.test.ts dosyasıyla bilerek AYRI dosya —
+ * o PR --destructive/--muted/--muted-foreground'u değiştirir, --secondary'ye
+ * ve --secondary-500 skalasına dokunmaz (diff'i teyit edildi, çakışma yok).
+ */
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import * as fs from 'fs'
+import * as path from 'path'
+import { Progress } from '../progress'
+
+const KOK = path.resolve(__dirname, '../../..')
+const tokens = fs.readFileSync(path.join(KOK, 'styles/tokens.css'), 'utf8')
+
+/** "H S% L%" biçimindeki token değerini oku (light = :root, dark = .dark bloğu) */
+function tokenOku(ad: string, blok: 'light' | 'dark'): string | null {
+  const kaynak =
+    blok === 'dark'
+      ? tokens.slice(tokens.indexOf('.dark'))
+      : tokens.slice(0, tokens.indexOf('.dark'))
+  return kaynak.match(new RegExp(`--${ad}:\\s*([^;]+);`))?.[1].trim() ?? null
+}
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  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): [number, number, number] => {
+  const [h, s, l] = v.split(/\s+/).map((x) => parseFloat(x))
+  return hslToRgb(h, s, l)
+}
+
+/**
+ * Skala token'ları ("--secondary-500: 100 116 139") HSL DEĞİL, RGB üçlüsüdür
+ * (slate-500 = rgb(100,116,139) ile birebir; component'te bu yüzden
+ * `bg-[rgb(var(--secondary-500))]` kompozisyonu kullanılır, hsl() değil).
+ */
+const rgbTokenRgb = (v: string): [number, number, number] => {
+  const p = v.split(/\s+/).map((x) => parseFloat(x))
+  return [p[0], p[1], p[2]]
+}
+
+function bagilParlaklik([r, g, b]: [number, number, number]): 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 rgbKontrast(a: [number, number, number], b: [number, number, number]): number {
+  const la = bagilParlaklik(a)
+  const lb = bagilParlaklik(b)
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+/** `bg-secondary/20` gibi alfa katmanının zemin üstündeki bileşke rengi */
+function alfaBileske(
+  ust: [number, number, number],
+  alfa: number,
+  zemin: [number, number, number]
+): [number, number, number] {
+  return [
+    Math.round(alfa * ust[0] + (1 - alfa) * zemin[0]),
+    Math.round(alfa * ust[1] + (1 - alfa) * zemin[1]),
+    Math.round(alfa * ust[2] + (1 - alfa) * zemin[2]),
+  ]
+}
+
+/**
+ * Docs kabuğunda ölçülen GERÇEK koyu kart zemini (#111827 = rgb(17,24,39)) —
+ * #284/#368 konvansiyonu: kontrast, --background'ın yanında bu gerçek yüzeye
+ * göre de ölçülür (tokens.css --input notu).
+ */
+const KART_GERCEK_DARK: [number, number, number] = [17, 24, 39]
+
+/** Tema başına dolgu (secondary-500) ve track (secondary@%20 ∘ zemin) renkleri */
+function temaRenkleri(blok: 'light' | 'dark') {
+  const dolgu = rgbTokenRgb(tokenOku('secondary-500', 'light')!) // skala yalnız :root'ta — iki temada aynı
+  const secondary = hslTokenRgb(tokenOku('secondary', blok)!)
+  const background = hslTokenRgb(tokenOku('background', blok)!)
+  const card = hslTokenRgb(tokenOku('card', blok)!)
+  const zeminler: Array<[string, [number, number, number]]> = [
+    ['--background', background],
+    ['--card', card],
+  ]
+  if (blok === 'dark') zeminler.push(['gerçek kart #111827', KART_GERCEK_DARK])
+  return { dolgu, secondary, zeminler }
+}
+
+describe('#372 progress secondary dolgu↔track kontrastı', () => {
+  it('hesaplayıcı DOĞRU — bilinen bir çift belgelenen oranı veriyor', () => {
+    // Sessiz-yeşil koruması: `--info-subtle` çifti tokens.css'te 9.52:1 diye
+    // belgelenmiş; hesaplayıcı bozulursa bu çapa kırmızı olur.
+    const oran = rgbKontrast(
+      hslTokenRgb(tokenOku('info-subtle', 'light')!),
+      hslTokenRgb(tokenOku('info-subtle-foreground', 'light')!)
+    )
+    expect(oran).toBeGreaterThan(9.3)
+    expect(oran).toBeLessThan(9.7)
+  })
+
+  it('--secondary-500 tanımlı ve RGB üçlüsü olarak ayrıştırılabiliyor', () => {
+    const ham = tokenOku('secondary-500', 'light')
+    expect(ham).toBeTruthy()
+    const rgb = rgbTokenRgb(ham!)
+    rgb.forEach((kanal) => {
+      expect(Number.isFinite(kanal)).toBe(true)
+      expect(kanal).toBeGreaterThanOrEqual(0)
+      expect(kanal).toBeLessThanOrEqual(255)
+    })
+  })
+
+  describe('kaynak sözleşmesi: dolgu ile track FARKLI token’lara basıyor', () => {
+    const kaynak = fs.readFileSync(path.join(KOK, 'components/ui/progress.tsx'), 'utf8')
+
+    it('track secondary sınıfı `bg-secondary/20` (issue seçenek 1 — değişmedi)', () => {
+      expect(kaynak).toMatch(/secondary:\s*"bg-secondary\/20"/)
+    })
+
+    it('dolgu secondary sınıfı `bg-[rgb(var(--secondary-500))]` (artık --secondary DEĞİL)', () => {
+      expect(kaynak).toMatch(/secondary:\s*"bg-\[rgb\(var\(--secondary-500\)\)\]"/)
+    })
+  })
+
+  describe('render sözleşmesi: <Progress variant="secondary" />', () => {
+    it('track ve dolgu sınıfları DOM’a farklı token’larla iniyor', () => {
+      render(React.createElement(Progress, { variant: 'secondary', value: 50 }))
+      const track = screen.getByRole('progressbar')
+      expect(track).toHaveClass('bg-secondary/20')
+      const dolgu = track.firstElementChild as HTMLElement
+      expect(dolgu).not.toBeNull()
+      expect(dolgu.className).toContain('bg-[rgb(var(--secondary-500))]')
+      expect(dolgu.className).not.toMatch(/(?:^|\s)bg-secondary(?:\s|$)/)
+    })
+
+    it('#318 düşüş mantığı KORUNUYOR — indicatorVariant hâlâ variant’ı ezer', () => {
+      render(React.createElement(Progress, { variant: 'secondary', indicatorVariant: 'success', value: 50 }))
+      const dolgu = screen.getByRole('progressbar').firstElementChild as HTMLElement
+      expect(dolgu.className).toContain('bg-success')
+      expect(dolgu.className).not.toContain('bg-[rgb(var(--secondary-500))]')
+    })
+  })
+
+  describe.each(['light', 'dark'] as const)('%s tema — kabul kriteri ≥3:1 (WCAG 1.4.11)', (blok) => {
+    it('YENİ dolgu (secondary-500), track’in her olası zemindeki bileşkesine ≥3:1', () => {
+      // Ölçülen değerler: light 4.63 (--background=--card=beyaz) · dark 4.23
+      // (--background=--card) / 3.83 (gerçek kart #111827).
+      const { dolgu, secondary, zeminler } = temaRenkleri(blok)
+      for (const [ad, zemin] of zeminler) {
+        const track = alfaBileske(secondary, 0.2, zemin)
+        const oran = rgbKontrast(dolgu, track)
+        expect({ zemin: ad, oran }).toEqual({ zemin: ad, oran: expect.any(Number) })
+        expect(oran).toBeGreaterThanOrEqual(3.0)
+      }
+    })
+
+    it('ESKİ dolgu (bg-secondary) aynı ölçümde başarısızdı — bug’ın belgesi', () => {
+      // Biri dolguyu `bg-secondary`ye geri döndürürse bu test ona "eski değer
+      // zaten görünmüyordu" diye değil, üstteki kriter testi kırmızıyla söyler;
+      // burası ise düzeltmenin GEREKLİLİĞİNİ sabitler (light 1.02, dark ~1.0-1.5).
+      const { secondary, zeminler } = temaRenkleri(blok)
+      for (const [, zemin] of zeminler) {
+        const track = alfaBileske(secondary, 0.2, zemin)
+        expect(rgbKontrast(secondary, track)).toBeLessThan(3.0)
+      }
+    })
+  })
+
+  describe('seçim gerekçesi: 500, iki temada birden geçen TEK skala kademesi', () => {
+    // Dolgu her iki temada AYNI renk olduğundan parlaklığı [~0.107, ~0.289]
+    // bandında kalmalı: daha açık kademe light track'e (near-white), daha koyu
+    // kademe dark track'e (near-black) yetişemiyor. Komşu kademeler bunu kanıtlar.
+    it('secondary-400 light temada eşiğin ALTINDA kalır (~2.50)', () => {
+      const k400 = rgbTokenRgb(tokenOku('secondary-400', 'light')!)
+      const { secondary, zeminler } = temaRenkleri('light')
+      const track = alfaBileske(secondary, 0.2, zeminler[0][1])
+      expect(rgbKontrast(k400, track)).toBeLessThan(3.0)
+    })
+
+    it('secondary-600 dark temada eşiğin ALTINDA kalır (~2.66)', () => {
+      const k600 = rgbTokenRgb(tokenOku('secondary-600', 'light')!)
+      const { secondary, zeminler } = temaRenkleri('dark')
+      const track = alfaBileske(secondary, 0.2, zeminler[0][1])
+      expect(rgbKontrast(k600, track)).toBeLessThan(3.0)
+    })
+
+    it('secondary-foreground kontrastı GEÇERDİ ama primary klonu üretirdi — kilit', () => {
+      // Bu test "neden secondary-foreground değil?" kararının dayanağını sabitler:
+      // light'ta --secondary-foreground ile --primary aynı hue/sat'ta ΔL=%2
+      // (fill↔fill 1.07), dark'ta birebir aynı değer. Varyant kimliği kaybolurdu.
+      const lightOran = rgbKontrast(
+        hslTokenRgb(tokenOku('secondary-foreground', 'light')!),
+        hslTokenRgb(tokenOku('primary', 'light')!)
+      )
+      expect(lightOran).toBeLessThan(1.3) // ayırt edilemez — near-identical
+      expect(tokenOku('secondary-foreground', 'dark')).toBe(tokenOku('primary', 'dark'))
+    })
+  })
+})

package/src/components/ui/__tests__/progress.test.tsx

@@ -218,7 +218,10 @@ describe('Progress Component', () => {
       render(<Progress indicatorVariant="secondary" />)
       const progress = screen.getByRole('progressbar')
       const indicator = progress.querySelector('div')
-      expect(indicator).toHaveClass('bg-secondary')
+      // #372: dolgu artık `bg-secondary` DEĞİL — o yüzey token'ı track'in
+      // (`bg-secondary/20`) aynısıydı ve bar iki temada da görünmüyordu.
+      // Gerekçe + kontrast hesabı: progress-secondary-contrast.test.ts
+      expect(indicator).toHaveClass('bg-[rgb(var(--secondary-500))]')
     })
 
     it('renders success indicator variant correctly', () => {

package/src/components/ui/__tests__/responsive-color-invariance.test.ts

@@ -0,0 +1,92 @@
+/**
+ * #354 — kontrast ölçümü viewport'tan BAĞIMSIZ olmalı.
+ *
+ * Issue'nun kabul kriteri "sabit viewport"ta ölçüm istiyordu. Ama mevcut tarayıcı
+ * araçlarıyla viewport DEĞİŞTİRİLEMEDİ: `resize_window` "başarılı" dönüyor,
+ * `innerWidth` 2751'de kalıyor, `outerWidth` 0 raporlanıyor.
+ *
+ * Bu yüzden risk ÖLÇÜLMEK yerine ORTADAN KALDIRILDI: eğer hiçbir kırılma noktası
+ * renk değiştirmiyorsa, contrast sonucu viewport'tan bağımsızdır ve tek bir
+ * genişlikte ölçmek yeterlidir.
+ *
+ * Tarama sonucu (2026-08-04): iki pakette 351 dosyada 199 responsive varyant
+ * (free 17 + pro 182); renk ailesinden olanların tamamı boyut/hiza değerleri.
+ * **Sıfır renk varyantı.**
+ *
+ * Bu test o değişmezi kilitler: biri `md:text-primary` gibi bir sınıf eklerse
+ * kırmızı olur ve "artık viewport başına ölçmek gerekiyor" uyarısı verir.
+ */
+import * as fs from 'fs'
+import * as path from 'path'
+
+const KOKLER = [
+  path.resolve(__dirname, '../../..'),                    // packages/moonui/src
+  path.resolve(__dirname, '../../../../../moonui-pro/src'), // packages/moonui-pro/src
+]
+
+/** Renk ailesinden yardımcı adları — boyut/hiza/spacing DEĞİL. */
+const RENK_ONEKLERI = ['text', 'bg', 'border', 'from', 'via', 'to', 'ring', 'divide',
+  'placeholder', 'decoration', 'caret', 'accent', 'outline', 'shadow']
+
+/** `text-*` ailesinde renk OLMAYAN değerler (boyut, hiza, taşma). */
+const RENK_OLMAYAN_TEXT = new Set([
+  'xs','sm','base','lg','xl','2xl','3xl','4xl','5xl','6xl','7xl','8xl','9xl',
+  'left','center','right','justify','start','end',
+  'wrap','nowrap','balance','pretty','clip','ellipsis',
+])
+
+function dosyalar(kok: string): string[] {
+  const cikti: string[] = []
+  if (!fs.existsSync(kok)) return cikti
+  ;(function walk(dir: string) {
+    for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+      const p = path.join(dir, e.name)
+      if (e.isDirectory()) {
+        if (!/node_modules|__tests__|dist/.test(p)) walk(p)
+      } else if (/\.(tsx?|css)$/.test(e.name)) cikti.push(p)
+    }
+  })(kok)
+  return cikti
+}
+
+const tumDosyalar = KOKLER.flatMap(dosyalar)
+const RESPONSIVE = /\b(sm|md|lg|xl|2xl):([a-z][a-z0-9-]*)(?:-([a-z0-9[\]#/.%-]+))?/g
+
+describe('#354 responsive renk değişmezi', () => {
+  it('tarayıcı GERÇEKTEN responsive varyant buluyor (sessiz-yeşil koruması)', () => {
+    // Bu koruma olmadan, regex/yol bozulduğunda test "0 renk varyantı" ile YEŞİL
+    // geçerdi ve viewport riski sessizce açık kalırdı.
+    //
+    // Eşik, gerçek sayıya (2026-08-04'te 199) YAPIŞIK olmamalı: ölü dosya silmek
+    // gibi meşru işler sayıyı birkaç birim düşürür. İlk sürüm `> 200` idi ve o
+    // günkü değer 202'ydi; #365'te ölü `dashboard/demo.tsx` (3 varyant) silinince
+    // kırmızıya döndü — regex bozulmadan. Amaç "tarayıcı ölü mü" sorusunu
+    // yanıtlamak olduğundan büyüklük mertebesi yeterli.
+    let toplam = 0
+    for (const f of tumDosyalar) {
+      toplam += [...fs.readFileSync(f, 'utf8').matchAll(RESPONSIVE)].length
+    }
+    expect(toplam).toBeGreaterThan(100)
+    expect(tumDosyalar.length).toBeGreaterThan(100)
+  })
+
+  it('hiçbir kırılma noktası RENK değiştirmiyor', () => {
+    const ihlaller: string[] = []
+    for (const f of tumDosyalar) {
+      const src = fs.readFileSync(f, 'utf8')
+      for (const m of src.matchAll(RESPONSIVE)) {
+        const [tam, , yardimci, deger] = m
+        if (!RENK_ONEKLERI.includes(yardimci)) continue
+        if (!deger) continue
+        // `text-` ailesinde boyut/hiza değerleri renk değildir
+        if (yardimci === 'text' && RENK_OLMAYAN_TEXT.has(deger)) continue
+        // köşeli parantezli keyfi değerler: renk mi boyut mu? `#`/`rgb` varsa renk.
+        if (deger.startsWith('[') && !/#|rgb|hsl/.test(deger)) continue
+        ihlaller.push(`${path.basename(f)} → ${tam}`)
+      }
+    }
+    // Boş olmalı: aksi halde contrast ölçümü artık viewport'a bağımlıdır ve
+    // #354'ün "tek genişlikte ölçmek yeterli" gerekçesi düşer.
+    expect(ihlaller).toEqual([])
+  })
+})