@moontra/moonui 6.19.0 → 6.19.2

package/package.json

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

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

@@ -0,0 +1,331 @@
+/**
+ * #424 — Progress `warning` / `error` varyantlarında dolgu↔track kontrast değişmezi.
+ *
+ * BULGU (#372'nin birebir kardeşi): dolgu `bg-warning` / `bg-error`, track ise
+ * `bg-warning/20` / `bg-error/20` — dolgu ile track AYNI token'ın iki alfa değeri.
+ * LIGHT temada ayrım kayboluyordu: warning 1.83 · error 2.89 (eşik 3:1, WCAG
+ * 1.4.11 metin-dışı). DARK tema zaten temizdi (warning 6.97 · error 4.46), yani
+ * bu bulgu YALNIZ light temaya ait — düzeltmenin de dark render'ı değiştirmemesi
+ * gerekir. axe bunu yakalamaz: `color-contrast` yalnız METİN öğelerini ölçer.
+ *
+ * KÖK NEDEN — token seviyesinde eksik tema-uyarlaması:
+ * `--warning` ve `--error` tokens.css'te `.dark` bloğunda EZİLMİYOR; iki temada
+ * da aynı renk. Kardeşleri tema-uyarlanabilir olduğu için eşiği geçiyor
+ * (`--success` light %29 → dark %36). Bu iki aile o uyarlamadan yoksun.
+ *
+ * ÇÖZÜM: eksik uyarlamayı component düzeyinde ver — light'ta skalanın -700
+ * kademesine in, dark'ta semantik token'a dokunma:
+ *   warning: "bg-[rgb(var(--warning-700))] dark:bg-warning"
+ *   error:   "bg-[rgb(var(--error-700))] dark:bg-error"
+ *
+ * Tema-KÖR bir -700 ataması (issue gövdesinin uyardığı refleks) dark'ı KIRARDI —
+ * aşağıda testle kanıtlanıyor. `#372`'nin tek-orta-ton çözümü (`--secondary-500`)
+ * burada UYGULANAMAZ: orada `--secondary` temaya göre değişiyordu, burada
+ * değişmiyor; track `/20` iken skalada iki temayı birden geçen kademe YOK
+ * (o da aşağıda kanıtlanıyor). Track alfaları bu yüzden `/20` KALDI.
+ *
+ * Hesap yöntemi progress-secondary-contrast.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: #372'nin dosyasıyla BİLEREK ayrı dosya — o dosya `--secondary` eksenini
+ * kilitler, bu dosya `--warning`/`--error` eksenini; ç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ı ("--warning-700: 161 98 7") HSL DEĞİL, RGB üçlüsüdür
+ * (semantik token'ların HSL formatından farklı) — component'te bu yüzden
+ * `bg-[rgb(var(--warning-700))]` 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-warning/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. Bu zemin bu bulguda DARBOĞAZ: en düşük oranları o veriyor.
+ */
+const KART_GERCEK_DARK: [number, number, number] = [17, 24, 39]
+
+const AILELER = ['warning', 'error'] as const
+type Aile = (typeof AILELER)[number]
+
+/** Semantik token'ın ilgili temadaki değeri — `.dark` ezmesi YOKSA light'a düşer */
+function semantikRgb(aile: Aile, blok: 'light' | 'dark'): [number, number, number] {
+  return hslTokenRgb(tokenOku(aile, blok) ?? tokenOku(aile, 'light')!)
+}
+
+/** O temada track'in oluşabileceği tüm zeminler */
+function zeminler(blok: 'light' | 'dark'): Array<[string, [number, number, number]]> {
+  const z: Array<[string, [number, number, number]]> = [
+    ['--background', hslTokenRgb(tokenOku('background', blok)!)],
+    ['--card', hslTokenRgb(tokenOku('card', blok)!)],
+  ]
+  if (blok === 'dark') z.push(['gerçek kart #111827', KART_GERCEK_DARK])
+  return z
+}
+
+// ——— Renkler KAYNAKTAN türetilir ———————————————————————————————————————
+// Ölçümü `bg-...-700` varsayımına göre değil, progress.tsx'in O ANKİ sınıf
+// dizgelerine göre yapıyoruz. Böylece aşağıdaki ≥3:1 testleri component'e
+// GERÇEKTEN bağlanır: biri dolguyu eski hâline döndürürse (ya da track alfasını
+// oynatırsa) kriter testi kırmızı olur — yalnız sözleşme testleri değil.
+const kaynak = fs.readFileSync(path.join(KOK, 'components/ui/progress.tsx'), 'utf8')
+const AYRAC = kaynak.indexOf('progressIndicatorVariants')
+const TRACK_BLOK = kaynak.slice(0, AYRAC)
+const DOLGU_BLOK = kaynak.slice(AYRAC)
+
+/** CVA bloğundan `<aile>: "<sınıflar>"` değerini oku */
+function varyantSinifi(blok: string, aile: Aile): string {
+  const m = blok.match(new RegExp(`\\n\\s*${aile}:\\s*"([^"]+)"`))
+  if (!m) throw new Error(`${aile} varyantı bulunamadı`)
+  return m[1]
+}
+
+/** Tek bir Tailwind bg sınıfını renge çevir (arbitrary skala VEYA semantik token) */
+function sinifRengi(sinif: string, blok: 'light' | 'dark'): [number, number, number] {
+  const skala = sinif.match(/^bg-\[rgb\(var\(--([a-z0-9-]+)\)\)\]$/)
+  if (skala) return rgbTokenRgb(tokenOku(skala[1], 'light')!) // skala yalnız :root'ta
+  const semantik = sinif.match(/^bg-([a-z-]+)$/)
+  if (semantik) return hslTokenRgb(tokenOku(semantik[1], blok) ?? tokenOku(semantik[1], 'light')!)
+  throw new Error(`çözülemeyen sınıf: ${sinif}`)
+}
+
+/** Dolgunun o temada GERÇEKTEN uygulanan rengi — `dark:` öneki dark'ta kazanır */
+function dolguRengi(aile: Aile, blok: 'light' | 'dark'): [number, number, number] {
+  const siniflar = varyantSinifi(DOLGU_BLOK, aile).split(/\s+/)
+  const darkSinif = siniflar.find((s) => s.startsWith('dark:'))?.slice('dark:'.length)
+  const lightSinif = siniflar.find((s) => !s.startsWith('dark:'))
+  if (!lightSinif) throw new Error(`${aile}: temel (light) sınıf yok`)
+  return sinifRengi(blok === 'dark' ? darkSinif ?? lightSinif : lightSinif, blok)
+}
+
+/** Track'in o zemin üstündeki bileşke rengi — alfa da kaynaktan okunur */
+function trackler(aile: Aile, blok: 'light' | 'dark') {
+  const sinif = varyantSinifi(TRACK_BLOK, aile)
+  const m = sinif.match(/^bg-([a-z-]+)\/(\d+)$/)
+  if (!m) throw new Error(`track sınıfı çözülemedi: ${sinif}`)
+  const taban = hslTokenRgb(tokenOku(m[1], blok) ?? tokenOku(m[1], 'light')!)
+  const alfa = Number(m[2]) / 100
+  return zeminler(blok).map(([ad, z]) => [ad, alfaBileske(taban, alfa, z)] as const)
+}
+
+const KADEMELER = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+
+describe('#424 progress warning/error 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('hesaplayıcı, denetimin TARAYICIDA ölçtüğü renkleri birebir üretiyor', () => {
+    // Çapraz doğrulama: issue #424 gövdesindeki gerçek tarayıcı ölçümleri
+    // warning dolgu rgb(245,159,10) / track rgb(253,236,206), error dolgu
+    // rgb(239,67,67) / track rgb(252,217,217). Model bunları tutturamıyorsa
+    // aşağıdaki tüm oranlar anlamsızdır.
+    expect(semantikRgb('warning', 'light')).toEqual([245, 159, 10])
+    expect(semantikRgb('error', 'light')).toEqual([239, 67, 67])
+    expect(trackler('warning', 'light')[0][1]).toEqual([253, 236, 206])
+    expect(trackler('error', 'light')[0][1]).toEqual([252, 217, 217])
+  })
+
+  describe('kök neden: --warning ve --error `.dark` bloğunda EZİLMİYOR', () => {
+    it.each(AILELER)('--%s dark ezmesi yok → iki temada aynı renk', (aile) => {
+      // Bu, bulgunun yapısal kök nedeni. Biri ileride `.dark` bloğuna
+      // `--warning`/`--error` eklerse bu test kırmızı olur ve component
+      // düzeyindeki `dark:` telafisinin yeniden ölçülmesi gerektiğini söyler.
+      expect(tokenOku(aile, 'dark')).toBeNull()
+      expect(semantikRgb(aile, 'light')).toEqual(semantikRgb(aile, 'dark'))
+    })
+
+    it('karşıtlık: --success tema-uyarlanabilir olduğu İÇİN eşiği geçiyor', () => {
+      // Neden success'e dokunulmadığının kanıtı: onun dark ezmesi VAR.
+      expect(tokenOku('success', 'dark')).not.toBeNull()
+      expect(tokenOku('success', 'light')).not.toBe(tokenOku('success', 'dark'))
+    })
+
+    it.each(AILELER)('--%s-700 tanımlı ve RGB üçlüsü olarak ayrıştırılabiliyor', (aile) => {
+      const ham = tokenOku(`${aile}-700`, 'light')
+      expect(ham).toBeTruthy()
+      rgbTokenRgb(ham!).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 renklere basıyor', () => {
+    it.each(AILELER)('track %s sınıfı `/20` alfasını KORUYOR (altı varyantın ortak deseni)', (aile) => {
+      expect(kaynak).toMatch(new RegExp(`${aile}:\\s*"bg-${aile}\\/20"`))
+    })
+
+    it.each(AILELER)('dolgu %s sınıfı light\'ta -700, dark\'ta semantik token', (aile) => {
+      expect(kaynak).toMatch(
+        new RegExp(`${aile}:\\s*"bg-\\[rgb\\(var\\(--${aile}-700\\)\\)\\] dark:bg-${aile}"`)
+      )
+    })
+  })
+
+  describe('render sözleşmesi', () => {
+    it.each(AILELER)('<Progress variant="%s" /> — track ve dolgu DOM\'a ayrışmış iniyor', (aile) => {
+      render(React.createElement(Progress, { variant: aile, value: 50 }))
+      const track = screen.getByRole('progressbar')
+      expect(track).toHaveClass(`bg-${aile}/20`)
+      const dolgu = track.firstElementChild as HTMLElement
+      expect(dolgu).not.toBeNull()
+      expect(dolgu.className).toContain(`bg-[rgb(var(--${aile}-700))]`)
+      expect(dolgu.className).toContain(`dark:bg-${aile}`)
+      // Light'ta semantik token dolguya UYGULANMAMALI (track'in aynısıydı):
+      // yalnız `dark:` önekli hâli kalmalı.
+      expect(dolgu.className).not.toMatch(new RegExp(`(?:^|\\s)bg-${aile}(?:\\s|$)`))
+    })
+
+    it.each(AILELER)('#318 düşüş mantığı KORUNUYOR — indicatorVariant hâlâ %s varyantını ezer', (aile) => {
+      render(
+        React.createElement(Progress, { variant: aile, indicatorVariant: 'success', value: 50 })
+      )
+      const dolgu = screen.getByRole('progressbar').firstElementChild as HTMLElement
+      expect(dolgu.className).toContain('bg-success')
+      expect(dolgu.className).not.toContain(`--${aile}-700`)
+    })
+  })
+
+  describe.each(AILELER)('%s — kabul kriteri ≥3:1 (WCAG 1.4.11)', (aile) => {
+    it.each(['light', 'dark'] as const)('%s temada TÜM zeminlerde eşiği geçiyor', (blok) => {
+      // Ölçülen: warning light 4.24 · dark 6.97 (docs kartı 5.77)
+      //          error   light 4.95 · dark 4.46 (docs kartı 3.82)
+      const dolgu = dolguRengi(aile, blok)
+      for (const [ad, track] of trackler(aile, blok)) {
+        const oran = rgbKontrast(dolgu, track)
+        expect({ zemin: ad, gecti: oran >= 3.0 }).toEqual({ zemin: ad, gecti: true })
+      }
+    })
+
+    it('ESKİ dolgu (semantik token) LIGHT temada başarısızdı — bug\'ın belgesi', () => {
+      // warning 1.83 · error 2.89. Bu test düzeltmenin GEREKLİLİĞİNİ sabitler:
+      // biri dolguyu `bg-warning`/`bg-error`e geri döndürürse üstteki kriter
+      // testi kırmızı olur, burası da nedenini belgeler.
+      const eski = semantikRgb(aile, 'light')
+      for (const [, track] of trackler(aile, 'light')) {
+        expect(rgbKontrast(eski, track)).toBeLessThan(3.0)
+      }
+    })
+
+    it('DARK render değişmedi — eski dolgu dark\'ta zaten geçiyordu ve hâlâ o renk', () => {
+      // Bulgu light'a özgüydü; düzeltmenin dark'ta hiçbir şeyi oynatmaması
+      // bilinçli bir kısıt (regresyon yüzeyini sıfıra indirir).
+      expect(dolguRengi(aile, 'dark')).toEqual(semantikRgb(aile, 'dark'))
+      for (const [, track] of trackler(aile, 'dark')) {
+        expect(rgbKontrast(semantikRgb(aile, 'dark'), track)).toBeGreaterThanOrEqual(3.0)
+      }
+    })
+  })
+
+  describe('seçim gerekçesi — reddedilen alternatifler', () => {
+    it.each(AILELER)('TEMA-KÖR `-700` ataması %s varyantını DARK\'ta kırardı', (aile) => {
+      // Issue gövdesinin uyardığı refleks. -700 kademesi dark track'e karşı
+      // (gerçek docs kartı zemininde) eşiğin ALTINDA: warning 2.50 · error 2.23.
+      // `dark:` ayrımı tam olarak bunu önlüyor.
+      const k700 = rgbTokenRgb(tokenOku(`${aile}-700`, 'light')!)
+      const docsTrack = trackler(aile, 'dark').find(([ad]) => ad === 'gerçek kart #111827')![1]
+      expect(rgbKontrast(k700, docsTrack)).toBeLessThan(3.0)
+    })
+
+    it.each(AILELER)('#372\'nin tek-orta-ton çözümü %s için UYGULANAMAZ — geçen kademe YOK', (aile) => {
+      // #372 dolguyu tek bir skala kademesine (`--secondary-500`) sabitleyip iki
+      // temayı birden geçebilmişti, çünkü `--secondary` temaya göre DEĞİŞİYOR.
+      // Burada semantik token sabit olduğundan track'ler birbirinden çok uzak:
+      // skalanın 11 kademesinin HİÇBİRİ tema-kör olarak iki temayı birden
+      // geçemiyor. Bu, `dark:` ayrımını zorunlu kılan kanıttır.
+      const tumTrackler = [...trackler(aile, 'light'), ...trackler(aile, 'dark')]
+      const gecen = KADEMELER.filter((k) => {
+        const ham = tokenOku(`${aile}-${k}`, 'light')
+        if (!ham) return false
+        const d = rgbTokenRgb(ham)
+        return tumTrackler.every(([, t]) => rgbKontrast(d, t) >= 3.0)
+      })
+      expect(gecen).toEqual([])
+    })
+
+    it.each(AILELER)('%s track alfası düşürülmedi — /20 ayrımı /10\'dan güçlü', (aile) => {
+      // Alternatif öneri track'i `/10`'a çekmekti; kabul edilmedi çünkü track
+      // zemine yaklaşır ve barın TOPLAM uzunluğu görünmez olur. Altı varyantın
+      // ortak `/20` deseni de bozulurdu.
+      const zemin = zeminler('light')[0][1]
+      const sem = semantikRgb(aile, 'light')
+      const yirmi = rgbKontrast(alfaBileske(sem, 0.2, zemin), zemin)
+      const on = rgbKontrast(alfaBileske(sem, 0.1, zemin), zemin)
+      expect(yirmi).toBeGreaterThan(on)
+    })
+  })
+})

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

@@ -235,14 +235,21 @@ describe('Progress Component', () => {
       render(<Progress indicatorVariant="warning" />)
       const progress = screen.getByRole('progressbar')
       const indicator = progress.querySelector('div')
-      expect(indicator).toHaveClass('bg-warning')
+      // #424: dolgu light'ta artık `bg-warning` DEĞİL — o token track'in
+      // (`bg-warning/20`) aynısıydı, light'ta ayrım 1.83'e düşüyordu. Dark
+      // render'ı korumak için semantik token `dark:` altına taşındı.
+      // Gerekçe + kontrast hesabı: progress-warning-error-contrast.test.ts
+      expect(indicator).toHaveClass('bg-[rgb(var(--warning-700))]')
+      expect(indicator).toHaveClass('dark:bg-warning')
     })
 
     it('renders error indicator variant correctly', () => {
       render(<Progress indicatorVariant="error" />)
       const progress = screen.getByRole('progressbar')
       const indicator = progress.querySelector('div')
-      expect(indicator).toHaveClass('bg-error')
+      // #424: aynı düzeltme — light 2.89 → 4.95, dark render'ı değişmedi.
+      expect(indicator).toHaveClass('bg-[rgb(var(--error-700))]')
+      expect(indicator).toHaveClass('dark:bg-error')
     })
   })