@turk.net/mui 3.0.7 → 3.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turk.net/mui",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "description": "A theme library customized for Material UI (v9).",
   "keywords": [
     "mui",
@@ -116,14 +116,31 @@
     "./LLM_GUIDELINES.md": "./LLM_GUIDELINES.md",
     "./LLM_EXAMPLES.md": "./LLM_EXAMPLES.md",
     "./SKILL_SETUP.md": "./SKILL_SETUP.md",
-    "./skills/*": "./.opencode/skills/*"
+    "./DESIGN_RULES.md": "./DESIGN_RULES.md",
+    "./COMPONENT_MAP.md": "./COMPONENT_MAP.md",
+    "./COMPONENT_GLOSSARY.md": "./COMPONENT_GLOSSARY.md",
+    "./DESIGN_SOURCES.md": "./DESIGN_SOURCES.md",
+    "./DESIGN_TOKENS_MAP.md": "./DESIGN_TOKENS_MAP.md",
+    "./PAGE_PATTERNS.md": "./PAGE_PATTERNS.md",
+    "./ESLINT_DESIGN_RULES.md": "./ESLINT_DESIGN_RULES.md",
+    "./skills/*": "./.opencode/skills/*",
+    "./skills/design-verification": "./.opencode/skills/onehub-design-verification/SKILL.md"
   },
   "files": [
     "dist",
     "LLM_GUIDELINES.md",
     "LLM_EXAMPLES.md",
     "SKILL_SETUP.md",
-    ".opencode/skills"
+    "DESIGN_RULES.md",
+    "COMPONENT_MAP.md",
+    "COMPONENT_GLOSSARY.md",
+    "DESIGN_SOURCES.md",
+    "DESIGN_TOKENS_MAP.md",
+    "PAGE_PATTERNS.md",
+    "ESLINT_DESIGN_RULES.md",
+    "scripts/verify-design.js",
+    ".opencode/skills",
+    ".opencode/rules"
   ],
   "sideEffects": [
     "**/*.css",

package/scripts/verify-design.js

@@ -0,0 +1,351 @@
+#!/usr/bin/env node
+
+// OneHub Design Verification Script
+// Tarama: .tsx dosyalarını tarar, tasarım kurallarına aykırılıkları raporlar.
+// Çıkış kodu: İhlal varsa 1, yoksa 0 (CI uyumlu).
+//
+// VALID_VARIANTS ve VALID_COLORS değerleri doğrudan tema paketinin
+// component-augmentations.ts dosyasındaki type override'larından alınır.
+// SADECE augmentation'da true/false ile belirtilen değerler kontrol edilir.
+
+const fs = require('fs');
+const path = require('path');
+
+// ============================================================
+// Tanımlar — Tema component-augmentations.ts baz alınarak
+// ============================================================
+
+// Variant kontrolü: augmentation'da variant değerleri true/false ile
+// kısıtlanmış bileşenler
+const VALID_VARIANTS = {
+  Button:       ['contained', 'outlined', 'text'],
+  ButtonGroup:  ['contained', 'outlined', 'text'],
+  Chip:         ['filled', 'tint', 'outline', 'ghost'],
+};
+
+// Color kontrolü: augmentation'da color değerleri true/false ile
+// kısıtlanmış bileşenler (false = kullanılamaz)
+const VALID_COLORS = {
+  Button:       ['primary', 'secondary', 'error'],
+  ButtonGroup:  ['primary', 'secondary', 'error'],
+  TextField:    ['neutral', 'brand', 'danger'],
+  Chip:         ['informative', 'brand', 'danger', 'success', 'severewarning', 'important', 'warning'],
+  Badge:        ['default', 'brand', 'success', 'danger', 'severe-warning', 'warning', 'important', 'white'],
+};
+
+// Checkbox için augmentation'da size.large = false
+// Radio ve Switch için augmentation'da color/size kısıtlaması yok
+
+// Yasaklı typography variant'ları (MUI default)
+// Augmentation'da h1-h6, body1, body2, subtitle1, subtitle2, caption, button = false
+const FORBIDDEN_TYPOGRAPHY_VARIANTS = [
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'body1', 'body2',
+  'subtitle1', 'subtitle2',
+  'caption',
+  'button',
+  'overline',
+];
+
+// ============================================================
+// Yardımcı fonksiyonlar
+// ============================================================
+
+/**
+ * Bir dizindeki tüm .tsx dosyalarını recursive olarak bulur
+ */
+function findTsxFiles(dir) {
+  const results = [];
+  if (!fs.existsSync(dir)) {
+    console.error(`Hata: Dizin bulunamadı: ${dir}`);
+    process.exit(2);
+  }
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    // node_modules ve .next dizinlerini atla
+    if (entry.name === 'node_modules' || entry.name === '.next' || entry.name === '.git') {
+      continue;
+    }
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      results.push(...findTsxFiles(fullPath));
+    } else if (entry.name.endsWith('.tsx') || entry.name.endsWith('.jsx')) {
+      results.push(fullPath);
+    }
+  }
+  return results;
+}
+
+/**
+ * Dosyadaki bir satırın ihlal raporu
+ */
+function violation(filePath, lineNumber, rule, message) {
+  return { file: filePath, line: lineNumber, rule, message };
+}
+
+// ============================================================
+// Denetim (check) fonksiyonları
+// ============================================================
+
+/**
+ * Check 1: Geçersiz variant prop'ları
+ * Tema augmentation'ında kısıtlanmış variant değerleri kontrol edilir
+ */
+function checkInvalidVariants(filePath, lines) {
+  const violations = [];
+  const variantRegex = /<(\w+)[^>]*?\bvariant\s*=\s*["'{]([^"'}]+)["'}][^>]*?\/?>/gi;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    let match;
+    while ((match = variantRegex.exec(line)) !== null) {
+      const componentName = match[1];
+      const variantValue = match[2];
+      const valid = VALID_VARIANTS[componentName];
+      if (valid && !valid.includes(variantValue)) {
+        violations.push(violation(
+          filePath, i + 1, 'invalid-variant',
+          `<${componentName}> bileşeninde geçersiz variant="${variantValue}". Geçerli: [${valid.join(', ')}]`
+        ));
+      }
+    }
+  }
+  return violations;
+}
+
+/**
+ * Check 2: Geçersiz color prop'ları
+ * Tema augmentation'ında kısıtlanmış color değerleri kontrol edilir
+ */
+function checkInvalidColors(filePath, lines) {
+  const violations = [];
+  const colorRegex = /<(\w+)[^>]*?\bcolor\s*=\s*["'{]([^"'}]+)["'}][^>]*?\/?>/gi;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    let match;
+    while ((match = colorRegex.exec(line)) !== null) {
+      const componentName = match[1];
+      const colorValue = match[2];
+      const valid = VALID_COLORS[componentName];
+      if (valid && !valid.includes(colorValue)) {
+        violations.push(violation(
+          filePath, i + 1, 'invalid-color',
+          `<${componentName}> bileşeninde geçersiz color="${colorValue}". Geçerli: [${valid.join(', ')}]`
+        ));
+      }
+    }
+  }
+  return violations;
+}
+
+/**
+ * Check 3: Yasaklı typography variant'ları
+ * Tema augmentation'ında false olan MUI default variant'lar
+ */
+function checkForbiddenTypographyVariants(filePath, lines) {
+  const violations = [];
+  const variantRegex = /<Typography[^>]*?\bvariant\s*=\s*["'{]([^"'}]+)["'}]/gi;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    let match;
+    while ((match = variantRegex.exec(line)) !== null) {
+      const variantValue = match[1];
+      if (FORBIDDEN_TYPOGRAPHY_VARIANTS.includes(variantValue)) {
+        violations.push(violation(
+          filePath, i + 1, 'forbidden-typography-variant',
+          `<Typography variant="${variantValue}"> kullanılmış. MUI default typography variant'ları DEVRE DIŞI. Untitled UI variant'larını (display.*, text.*) kullanın.`
+        ));
+      }
+    }
+  }
+  return violations;
+}
+
+/**
+ * Check 4: Inline style={{}} kullanımı
+ */
+function checkInlineStyles(filePath, lines) {
+  const violations = [];
+  const inlineStyleRegex = /\bstyle\s*=\s*\{\{/;
+
+  for (let i = 0; i < lines.length; i++) {
+    if (inlineStyleRegex.test(lines[i])) {
+      violations.push(violation(
+        filePath, i + 1, 'inline-style',
+        'Inline style={{}} kullanımı yasak. Bunun yerine sx prop veya styled() kullanın.'
+      ));
+    }
+  }
+  return violations;
+}
+
+/**
+ * Check 5: Magic number spacing — sx içinde raw px değerleri
+ * padding: '8px', margin: '16px' gibi
+ */
+function checkMagicNumberSpacing(filePath, lines) {
+  const violations = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // String px değerleri: '8px', "8px"
+    const pxStringRegex = /(?:padding|margin|gap|top|bottom|left|right|px|py|pt|pb|pl|pr|mx|my|mt|mb|ml|mr|spacing)\s*:\s*['"](\d+)px['"]/gi;
+    let match;
+    while ((match = pxStringRegex.exec(line)) !== null) {
+      const pxValue = match[1];
+      if (!/theme\.spacing/.test(line)) {
+        violations.push(violation(
+          filePath, i + 1, 'magic-number-spacing',
+          `Raw piksel değeri kullanılmış: '${pxValue}px'. theme.spacing(${Math.round(pxValue / 4)}) kullanın (${pxValue}px = theme.spacing(${Math.round(pxValue / 4)})).`
+        ));
+      }
+    }
+  }
+  return violations;
+}
+
+/**
+ * Check 6: Raw hex renk değerleri
+ * sx={{ color: '#242424' }} gibi. CSS var() / theme.vars kullanmayanlar.
+ * TEMA DOSYALARI HARİÇ (src/theme/ altındakiler kontrol edilmez —
+ * tema override dosyalarında hex kullanımı normaldir).
+ */
+function checkRawHexColors(filePath, lines) {
+  const violations = [];
+
+  // Tema dosyalarını atla — override tanımlarında hex normaldir
+  if (filePath.includes('/theme/') || filePath.includes('\\theme\\')) {
+    return violations;
+  }
+
+  const hexRegex = /['"](#[0-9a-fA-F]{3,8})['"]/g;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    let match;
+    while ((match = hexRegex.exec(line)) !== null) {
+      const hexValue = match[1];
+      // theme.vars veya CSS var() kullanıyorsa atla
+      if (!/theme\.vars/.test(line) && !/var\(--/.test(line)) {
+        violations.push(violation(
+          filePath, i + 1, 'raw-hex-color',
+          `Raw hex rengi kullanılmış: ${hexValue}. CSS custom property veya theme.vars.palette.* kullanın.`
+        ));
+      }
+    }
+  }
+  return violations;
+}
+
+/**
+ * Check 7: Checkbox için size="large" kullanımı
+ * Augmentation'da CheckboxPropsSizeOverrides.large = false
+ */
+function checkInvalidSizes(filePath, lines) {
+  const violations = [];
+  const sizeCheckRegex = /<(Checkbox)[^>]*?\bsize\s*=\s*["'{](large)["'}]/gi;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    let match;
+    while ((match = sizeCheckRegex.exec(line)) !== null) {
+      violations.push(violation(
+        filePath, i + 1, 'invalid-size',
+        `<${match[1]}> bileşeninde size="large" kullanımı DEVRE DIŞI (augmentation: large=false). Sadece "small" ve "medium" geçerlidir.`
+      ));
+    }
+  }
+  return violations;
+}
+
+// ============================================================
+// Ana tarama fonksiyonu
+// ============================================================
+
+function scanFile(filePath) {
+  const content = fs.readFileSync(filePath, 'utf-8');
+  const lines = content.split('\n');
+
+  return [
+    ...checkInvalidVariants(filePath, lines),
+    ...checkInvalidColors(filePath, lines),
+    ...checkForbiddenTypographyVariants(filePath, lines),
+    ...checkInlineStyles(filePath, lines),
+    ...checkMagicNumberSpacing(filePath, lines),
+    ...checkRawHexColors(filePath, lines),
+    ...checkInvalidSizes(filePath, lines),
+  ];
+}
+
+function main() {
+  const args = process.argv.slice(2);
+  const targetDir = args[0] || 'src/';
+  const absTargetDir = path.resolve(process.cwd(), targetDir);
+
+  console.log(`\n🔍 OneHub Design Verification`);
+  console.log(`   Tarama dizini: ${absTargetDir}\n`);
+
+  const startTime = Date.now();
+  const files = findTsxFiles(absTargetDir);
+
+  if (files.length === 0) {
+    console.log(`   ⚠️  Hiç .tsx/.jsx dosyası bulunamadı: ${absTargetDir}`);
+    console.log(`   ✅ İhlal yok.\n`);
+    process.exit(0);
+  }
+
+  console.log(`   ${files.length} dosya taranıyor...\n`);
+
+  let allViolations = [];
+  for (const file of files) {
+    allViolations = allViolations.concat(scanFile(file));
+  }
+
+  const ruleCounts = {};
+  for (const v of allViolations) {
+    ruleCounts[v.rule] = (ruleCounts[v.rule] || 0) + 1;
+  }
+
+  const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+
+  if (allViolations.length === 0) {
+    console.log(`   ✅ Tasarım ihlali bulunamadı! (${files.length} dosya, ${elapsed}s)\n`);
+    process.exit(0);
+  }
+
+  console.log(`   ❌ ${allViolations.length} ihlal bulundu (${files.length} dosya, ${elapsed}s):\n`);
+  console.log(`   Kategori Dağılımı:`);
+  for (const [rule, count] of Object.entries(ruleCounts).sort()) {
+    console.log(`     ${rule}: ${count}`);
+  }
+  console.log();
+
+  console.log(`   İhlal Detayları:`);
+  console.log(`${'─'.repeat(80)}`);
+
+  const byFile = {};
+  for (const v of allViolations) {
+    if (!byFile[v.file]) byFile[v.file] = [];
+    byFile[v.file].push(v);
+  }
+
+  for (const [file, fileViolations] of Object.entries(byFile).sort()) {
+    const relativeFile = path.relative(process.cwd(), file);
+    console.log(`\n   📄 ${relativeFile}`);
+    for (const v of fileViolations) {
+      console.log(`      Satır ${v.line}: [${v.rule}] ${v.message}`);
+    }
+  }
+
+  console.log(`\n${'─'.repeat(80)}`);
+  console.log(`   Toplam: ${allViolations.length} ihlal, ${Object.keys(byFile).length} dosya`);
+  console.log(`   Tasarım kuralları için: DESIGN_RULES.md`);
+  console.log(`   Bileşen kullanımı için: COMPONENT_MAP.md, COMPONENT_GLOSSARY.md\n`);
+
+  process.exit(1);
+}
+
+main();