@turk.net/mui 3.0.7 → 3.0.8

package/SKILL_SETUP.md

@@ -1,70 +1,107 @@
-# OpenCode Skill Setup - @turknet/onehub Material UI Theme
+# OpenCode Skill & Rule Setup — @turknet/onehub Design System
 
-Bu belge, `@turknet/onehub` tema paketini kullanan projelere OpenCode skill'ini nasıl kuracağınızı açıklar.
+This document explains how to set up OpenCode skills, rules, and verification tools for projects using the `@turknet/onehub` MUI theme package.
 
 ---
 
-## 🎯 Amaç
+## Purpose
 
-Bu skill, projelerizdeki LLM (yapay zeka modelleri) tarafından Material UI bileşenlerinin **doğru şekilde** yazılmasını sağlar:
+The complete design verification system ensures AI agents (LLMs) and developers write Material UI code that complies with OneHub design rules:
 
-- ✅ Custom component yazmaktan caydırır
-- ✅ Material UI bileşenlerini zorlar
-- ✅ Tema paketinin kurallarını uygular
-- ✅ Variant/size/color kombinasyonlarını kontrol eder
-- ✅ Typography variant'larının doğru kullanılmasını sağlar
+- **Skills** guide AI agents when generating UI code
+- **Rules** automatically enforce design constraints  
+- **Verification script** scans code for design violations
+- **Reference files** provide authoritative prop combinations
 
 ---
 
-## 📦 Ön Koşullar
+## Prerequisites
 
-- OpenCode CLI kurulu (`opencode` komutu çalışıyor)
-- Proje `.opencode.json` veya `.opencode/` klasörü ile yapılandırılmış
-- `@turknet/onehub` paketi `package.json` dependencies'inde
+- OpenCode CLI installed (`opencode` command works)
+- Project configured with `.opencode.json` or `.opencode/` directory
+- `@turknet/onehub` in `package.json` dependencies
 
 ---
 
-## 🚀 Kurulum Adımları
+## Complete Setup (All Components)
 
-### Adım 1: Skill Dosyasını Oluştur
+### Step 1: Copy Skills to Your Project
 
-Projenizde `.opencode/skills/` klasörünü oluşturun:
+**Component Usage Skill** (forces correct MUI component usage):
 
 ```bash
+# Create skill directory
 mkdir -p .opencode/skills/turknet-onehub-component-usage
+
+# Copy skill file from theme package
+cp node_modules/@turknet/onehub/.opencode/skills/turknet-onehub-component-usage/SKILL.md \
+   .opencode/skills/turknet-onehub-component-usage/SKILL.md
 ```
 
-### Adım 2: SKILL.md Dosyasını Kopyala
+**Design Verification Skill** (step-by-step validation checklist):
+
+```bash
+# Create skill directory
+mkdir -p .opencode/skills/onehub-design-verification
+
+# Copy skill file from theme package
+cp node_modules/@turknet/onehub/.opencode/skills/onehub-design-verification/SKILL.md \
+   .opencode/skills/onehub-design-verification/SKILL.md
+```
 
-Tema paketindeki SKILL.md dosyasını kopyalayın:
+### Step 2: Copy Design Compliance Rule
+
+The design-compliance rule automatically enforces design constraints whenever AI agents write code:
 
 ```bash
-cp node_modules/@turknet/onehub/.opencode/skills/turknet-onehub-component-usage/SKILL.md \
-   .opencode/skills/turknet-onehub-component-usage/SKILL.md
+# Create rules directory
+mkdir -p .opencode/rules
+
+# Copy rule file from theme package
+cp node_modules/@turknet/onehub/.opencode/rules/design-compliance.md \
+   .opencode/rules/design-compliance.md
 ```
 
-**VEYA** manuel olarak oluşturun:
+### Step 3: Copy Verification Script
 
 ```bash
-cat > .opencode/skills/turknet-onehub-component-usage/SKILL.md << 'EOF'
-# Skill içeriği buraya yapıştırılır
-EOF
+# Create scripts directory if it doesn't exist
+mkdir -p scripts
+
+# Copy verification script
+cp node_modules/@turknet/onehub/scripts/verify-design.js \
+   scripts/verify-design.js
 ```
 
-### Adım 3: OpenCode Config'i Güncelle
+### Step 4: Add Verify Script to package.json
 
-Proje kökünüzde `.opencode.json` dosyasını açın (veya oluşturun):
+Add this to your `package.json` scripts:
+
+```json
+{
+  "scripts": {
+    "verify-design": "node scripts/verify-design.js src/"
+  }
+}
+```
+
+### Step 5: Configure OpenCode
+
+In your project's `.opencode.json` (create if it doesn't exist):
 
 ```json
 {
   "$schema": "https://opencode.ai/config.json",
   "skills": {
     "paths": [".opencode/skills"]
+  },
+  "rules": {
+    "paths": [".opencode/rules"]
   }
 }
 ```
 
-Eğer zaten `.opencode.json` varsa, `skills.paths` bölümünü ekleyin:
+If you already have `.opencode.json`, add the `skills` and `rules` sections:
 
 ```json
 {
@@ -72,278 +109,278 @@ Eğer zaten `.opencode.json` varsa, `skills.paths` bölümünü ekleyin:
   "skills": {
     "paths": [".opencode/skills"]
   },
-  // ... diğer config'ler
+  "rules": {
+    "paths": [".opencode/rules"]
+  }
 }
 ```
 
-### Adım 4: OpenCode'u Yeniden Başlat
+### Step 6: Restart OpenCode
 
-Skill dosyalarını yüklemek için OpenCode'u kapatıp tekrar açın:
+Close and reopen OpenCode to load the new skills and rules:
 
 ```bash
-# Eski session'ı kapat
-# Ctrl+C or quit command
-
-# Yeni session açın
+# Close current OpenCode session (Ctrl+C or /quit)
+# Then open a new session:
 opencode
 ```
 
 ---
 
-## ✅ Kurulumu Doğrula
+## Verify Installation
 
-### Test 1: Skill Yüklenmiş Mi?
+### Test 1: Skills Loaded?
 
-OpenCode'da `ctrl+p` tuşlarına basın ve şunu yazın:
+In OpenCode, press `Ctrl+P` and type:
 
 ```
-/skill turknet-onehub
+/skill onehub
 ```
 
-Eğer skill listesinde görülürse, kurulum başarılıdır! ✅
-
-### Test 2: Skill'i Tetikle
+Both skills should appear in the list:
+- `turknet-onehub-component-usage`
+- `onehub-design-verification`
 
-Bir komponenti yazmanız istendiğinde, LLM model şu mesajı görmelidir:
+### Test 2: Rules Active
 
-> "Using skill: turknet-onehub-component-usage"
+When you write UI code, the AI agent should automatically reference design rules (typography, colors, spacing).
 
-veya skill'in `description` alanında tanımlanan mesaj.
+### Test 3: Verification Script Works
 
----
+```bash
+node scripts/verify-design.js src/
 
-## 📋 Seçenek: Manuel Skill Yönetimi
+# Exit code: 0 = clean, 1 = violations found
+echo $?
+```
 
-Eğer otomatik yüklemeyi tercih etmezseniz, inline config kullanabilirsiniz:
+---
 
-### opencode.json İçinde
+## File Structure After Setup
 
-```json
-{
-  "$schema": "https://opencode.ai/config.json",
-  "skills": {
-    "paths": [".opencode/skills"],
-    "urls": [
-      "https://raw.githubusercontent.com/turknet-it/tn.onehub.lib.mui/main/.opencode/skills/"
-    ]
-  }
-}
 ```
-
-Bu şekilde skill'i internetten otomatik olarak yükler.
+your-project/
+├── .opencode/
+│   ├── rules/
+│   │   └── design-compliance.md          # Always-apply design rule
+│   └── skills/
+│       ├── turknet-onehub-component-usage/
+│       │   └── SKILL.md                   # Component usage skill
+│       └── onehub-design-verification/
+│           └── SKILL.md                   # Design verification skill
+├── scripts/
+│   └── verify-design.js                   # Automated verification script
+├── node_modules/
+│   └── @turknet/onehub/
+│       ├── DESIGN_RULES.md                # Mandatory design rules
+│       ├── COMPONENT_MAP.md               # Figma → MUI component mapping
+│       ├── COMPONENT_GLOSSARY.md          # Valid component prop combinations
+│       ├── DESIGN_TOKENS_MAP.md           # Color, spacing, typography tokens
+│       ├── DESIGN_SOURCES.md              # Figma design file references
+│       ├── PAGE_PATTERNS.md              # Standard page layout patterns
+│       ├── LLM_GUIDELINES.md             # Component usage guide
+│       ├── LLM_EXAMPLES.md               # Usage examples
+│       └── ESLINT_DESIGN_RULES.md         # Future ESLint plugin spec
+├── package.json                           # Includes "verify-design" script
+└── src/
+    └── components/
+```
 
 ---
 
-## 🔧 Skill Kustomizasyonu
+## Available Commands
 
-Eğer projenizin ihtiyaçlarına göre skill'i kustomize etmek istiyorsanız:
+### Design Verification
 
-1. `.opencode/skills/turknet-onehub-component-usage/SKILL.md` dosyasını düzenleyin
-2. OpenCode'u yeniden başlatın
-3. Değişiklikler aktif olacaktır
-
-### Kustomizasyon Örnekleri
-
-#### Örnek 1: Ek Typography Variant'ı Ekle
+```bash
+# Scan entire src/ directory
+yarn verify-design
 
-```markdown
-### Custom Typography Variant (Proje Özel)
+# Scan specific directory
+node scripts/verify-design.js src/components/pages/
 
-```tsx
-// Proje ihtiyacı varsa
-<Typography variant="display.xl2.extra-bold">
-  Özel başlık
-</Typography>
-```
+# Exit code for CI
+node scripts/verify-design.js src/ && echo "PASS" || echo "FAIL"
 ```
 
-#### Örnek 2: Proje Spesifik Kurallar
+### OpenCode Skills
 
-```markdown
-## Proje Spesifik Kurallar
+In OpenCode, available via `Ctrl+P`:
 
-### Renk Kullanımı
+- `/skill turknet-onehub-component-usage` — Load component usage rules
+- `/skill onehub-design-verification` — Load design verification checklist
 
-Bu projede:
-- Tüm primary butonlar `primary` color kullanır
-- Secondary butonlar sadece form'larda `secondary` kullanır
-- Error butonları sadece delete işlemleri için `error` kullanır
-```
+### Reference Files (in node_modules)
 
-#### Örnek 3: Disabled Kurallar
+```bash
+# Read design rules
+cat node_modules/@turknet/onehub/DESIGN_RULES.md
 
-Eğer projeniz Material UI v6 kullanıyorsa:
+# Check component prop validity
+cat node_modules/@turknet/onehub/COMPONENT_GLOSSARY.md
 
-```markdown
----
-compatibility: React 16.8+, Next.js 12+
----
+# Find the right component for a Figma pattern
+cat node_modules/@turknet/onehub/COMPONENT_MAP.md
 ```
 
 ---
 
-## 📂 Dosya Yapısı
+## CI Integration
 
-Kurulum tamamlandıktan sonra proje yapınız şu şekilde görünmelidir:
+### Bitbucket Pipelines
 
+```yaml
+pipelines:
+  default:
+    - step:
+        name: Design Compliance Check
+        script:
+          - yarn install
+          - node scripts/verify-design.js src/
 ```
-your-project/
-├── .opencode/
-│   ├── opencode.json (ya da projeKökü opencode.json)
-│   └── skills/
-│       └── turknet-onehub-component-usage/
-│           └── SKILL.md
-├── node_modules/
-│   └── @turknet/onehub/
-│       ├── LLM_GUIDELINES.md
-│       ├── LLM_EXAMPLES.md
-│       └── .opencode/
-│           └── skills/ (template buradan kopyalanır)
-├── package.json
-└── src/
-    └── components/
-```
-
----
-
-## 🔗 İlişkili Belgeler
 
-Bu skill ile birlikte kullan:
+### GitHub Actions
 
-1. **[LLM_GUIDELINES.md](./LLM_GUIDELINES.md)** - Tema paketinde
-   - Material UI component kullanım rehberi
-   - Renk sistem açıklaması
-   - Typography variant'ları
-   - 35+ component referansı
+```yaml
+name: Design Compliance
+on: [push, pull_request]
+jobs:
+  design-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - run: node scripts/verify-design.js src/
+```
 
-2. **[LLM_EXAMPLES.md](./LLM_EXAMPLES.md)** - Tema paketinde
-   - 88 doğru kullanım örneği
-   - 49 yanlış kullanım örneği
-   - Component kategorilerine göre örnekler
+### Pre-commit Hook (Husky)
 
-3. **Bu skill** - Proje .opencode/ klasöründe
-   - Yoğunlaştırılmış rehber
-   - Component checklist'i
-   - Kurulum talimatları
+```bash
+# .husky/pre-commit
+node scripts/verify-design.js src/
+```
 
 ---
 
-## 🚨 Sorun Giderme
+## Quick Start for New Modules
 
-### Sorun 1: Skill Gösterilmiyor
+If you're creating a new OneHub module, add this to your setup:
 
-**Çözüm:**
 ```bash
-# 1. Dosyaların doğru konumda olup olmadığını kontrol et
-ls -la .opencode/skills/turknet-onehub-component-usage/SKILL.md
+# In your new module directory:
+mkdir -p .opencode/skills .opencode/rules scripts
 
-# 2. opencode.json'daki skills.paths kontrol et
-cat .opencode.json | grep -A 2 '"skills"'
+# Copy from boilerplate or theme package:
+cp -r /path/to/tn.onehub.lib.mui/.opencode/skills/* .opencode/skills/
+cp /path/to/tn.onehub.lib.mui/.opencode/rules/design-compliance.md .opencode/rules/
+cp /path/to/tn.onehub.lib.mui/scripts/verify-design.js scripts/
 
-# 3. OpenCode'u temiz başlat
-rm -rf ~/.opencode/cache/  # Cache'i temizle
-opencode                   # Yeniden başla
+# Add to package.json scripts:
+# "verify-design": "node scripts/verify-design.js src/"
 ```
 
-### Sorun 2: SKILL.md Formatı Hatalı
+---
 
-**Çözüm:**
-- Frontmatter (---) bölümünün en başta olup olmadığını kontrol et
-- `name:` alanı klasör ismiyle eşleşiyor mu?
-- `description:` alanı boş değil mi?
+## Skill Customization
 
-```yaml
----
-name: turknet-onehub-component-usage
-description: Use ONLY when... (açıklamaya bakın)
----
-```
+If your project needs custom rules beyond the theme defaults:
 
-### Sorun 3: OpenCode Config Hatası
+### Add Custom Typography Variant (if needed)
 
-**Çözüm:**
-```bash
-# JSON syntax'ı kontrol et
-python -m json.tool .opencode.json
+```markdown
+<!-- In .opencode/skills/turknet-onehub-component-usage/SKILL.md -->
+
+### Custom Typography Variant (Project-Specific)
 
-# Hata varsa, resmi açıklamaya bakın
-# https://opencode.ai/docs
+...
 ```
 
----
+### Add Project-Specific Rules
 
-## 📝 Best Practices
+Create an additional rule file in `.opencode/rules/`:
 
-### 1. Skill'i Projenizde Saklayın
+```markdown
+# project-specific-rules.md
 
-Skill'i version control'de commit edin:
+> **alwaysApply: true**
 
-```bash
-git add .opencode/skills/turknet-onehub-component-usage/
-git commit -m "feat: @turknet/onehub Material UI component usage skill ekle"
+## Project Rules
+- All save buttons must be color="primary"
+- All cancel actions must be color="secondary"
+- Delete confirmations must use color="error"
 ```
 
-### 2. Takım İçin Döküment Ekleyin
+---
 
-`DEVELOPMENT.md` veya `CONTRIBUTING.md` dosyasında skill'den bahsedin:
+## Troubleshooting
 
-```markdown
-## Component Yazımı
+### Skills Not Showing
+
+```bash
+# Check file locations
+ls -la .opencode/skills/turknet-onehub-component-usage/SKILL.md
+ls -la .opencode/skills/onehub-design-verification/SKILL.md
 
-OpenCode kullandığınızda, `turknet-onehub-component-usage` skill'i otomatik olarak yüklenir
-ve Material UI bileşenlerini doğru şekilde yazmanıza yardımcı olur.
+# Check config
+cat .opencode.json | python3 -m json.tool
 
-Eğer kurulmadıysa: `SKILL_SETUP.md` dosyasını okuyun.
+# Clear cache and restart
+rm -rf ~/.opencode/cache/
 ```
 
-### 3. Skill'i Güncelleyin
-
-Yeni Material UI versiyonları veya tema paketi güncellemeleri sonrası skill'i güncelleyin:
+### Rules Not Applied
 
 ```bash
-# Tema paketini güncelleyin
-yarn upgrade @turknet/onehub
-
-# Skill dosyasını yeniden kopyalayın
-cp node_modules/@turknet/onehub/.opencode/skills/turknet-onehub-component-usage/SKILL.md \
-   .opencode/skills/turknet-onehub-component-usage/SKILL.md
+# Check rules directory
+ls -la .opencode/rules/design-compliance.md
 
-# Değişiklikleri commit edin
-git add .opencode/skills/
-git commit -m "feat: @turknet/onehub skill'i güncelle"
+# Verify config has rules.paths
+cat .opencode.json | grep -A 3 '"rules"'
 ```
 
----
+### Verification Script Too Strict
 
-## 🎓 Kullanım Örneği
+Edit `scripts/verify-design.js` to adjust rule severity or add exceptions. The script is plain Node.js with no dependencies.
 
-Skill kurulduktan sonra:
+### verify-design.js: No Such File
 
+Make sure you copied the script:
+```bash
+cp node_modules/@turknet/onehub/scripts/verify-design.js scripts/
 ```
-User: "Bir login formu yaz"
 
-OpenCode: "I'll create a login form using @turknet/onehub Material UI theme."
-          "Loading skill: turknet-onehub-component-usage..."
+---
+
+## Design Reference Files
 
-// OpenCode, Material UI'ı doğru kullanır:
-// - Variant/size/color kombinasyonları kontrol eder
-// - Typography variant'larını seçer
-// - Custom component yazmaktan kaçınır
-// - Tema renk paletini kullanır
-```
+All files are available in `node_modules/@turknet/onehub/` after installing:
+
+| File | What It Provides |
+|------|-----------------|
+| `DESIGN_RULES.md` | Mandatory design constraints (RFC 2119) |
+| `COMPONENT_MAP.md` | Figma UI pattern → MUI component with exact props |
+| `COMPONENT_GLOSSARY.md` | Every usable component with all valid prop combinations |
+| `DESIGN_TOKENS_MAP.md` | Color palette, spacing grid, typography tokens |
+| `DESIGN_SOURCES.md` | Figma file references for all modules |
+| `PAGE_PATTERNS.md` | Standard page template patterns |
+| `LLM_GUIDELINES.md` | Component usage rules for AI agents |
+| `LLM_EXAMPLES.md` | Correct/incorrect usage examples |
+| `ESLINT_DESIGN_RULES.md` | Spec for future custom ESLint plugin |
 
 ---
 
-## 📞 Destek
+## Support
 
-Sorun veya önerileriniz varsa:
+For issues or suggestions:
 
-- **@turknet/onehub Repository**: [GitHub Link]
+- **@turknet/onehub Repository**: Internal Git repository
 - **OpenCode Docs**: https://opencode.ai
 - **Material UI Docs**: https://mui.com
 
 ---
 
-**Last Updated**: May 2026  
-**Skill Version**: 1.0  
-**Theme Version**: 2.0+
+**Last Updated**: June 2026
+**Skill Version**: 2.0
+**Theme Version**: 3.0+

package/dist/index.js

@@ -1760,6 +1760,7 @@ function createButton() {
         return {
           lineHeight: "1",
           padding: "var(--padding-y) var(--padding-x)",
+          textTransform: "unset",
           "&:focus": {
             outline: `2px solid ${neutral?.stroke.focus[2]}`,
             outlineOffset: "2px"