@turk.net/mui 3.0.7 → 3.0.8

package/.opencode/rules/design-compliance.md

@@ -0,0 +1,119 @@
+# OneHub Design Compliance Rule
+
+> **alwaysApply: true**
+> **priority: high**
+> **category: design**
+
+---
+
+## Core Rules (Condensed from DESIGN_RULES.md)
+
+When writing UI code for OneHub, you **MUST** follow these rules. Any violation is a **blocking design defect**.
+
+### TYPOGRAPHY — MUST NOT use MUI default variants
+
+- **MUST NOT** use `h1`-`h6`, `body1`, `body2`, `subtitle1`, `subtitle2`, `caption`, `button`, `overline` — these are DISABLED in the theme
+- **MUST ONLY** use Untitled UI variants: `display.*` (titles) and `text.*` (body, labels)
+- Page titles: `display.lg.bold` or `display.md.semibold`
+- Body text: `text.md.regular` or `text.sm.regular`
+- Table headers: `text.xs.medium`
+- Labels: `text.xs.regular` or `text.sm.regular`
+
+### COLORS — MUST NOT use raw hex or non-vars palette
+
+- **MUST reference colors via CSS custom properties** with `--palette-` prefix: `var(--palette-neutral-foreground-1-rest)`, `var(--palette-brand-background-1-rest)`
+- **THE `--palette-` PREFIX IS REQUIRED.** MUI v5'te custom renk şemasına CSS variables olarak yalnızca `--palette-*` prefix'i ile erişilebilir. `var(--neutral-foreground-1-rest)` çalışmaz.
+- **MUST NOT** use raw hex values (`#242424`, `#2970ff`)
+- **MUST NOT** use `theme.palette.primary.main` (non-vars palette)
+- Component `color` props MUST match COMPONENT_MAP.md:
+  - Button: `primary` | `secondary` | `error`
+  - TextField/Select: `neutral` | `brand` | `danger`
+  - Checkbox/Radio/Switch: `primary` | `error`
+  - Chip: `informative` | `brand` | `danger` | `success` | `severewarning` | `important` | `warning`
+  - Badge: `default` | `brand` | `success` | `danger` | `severe-warning` | `warning` | `important` | `white`
+  - Alert: `success` | `warning` | `error` | `info`
+
+**CSS custom property kullanım örnekleri:**
+```typescript
+// ✅ CORRECT — --palette- prefix ile (MUI v5'te çalışan yazım)
+sx={{ color: 'var(--palette-neutral-foreground-1-rest)' }}
+sx={{ bgcolor: 'var(--palette-brand-background-1-rest)' }}
+sx={{ borderColor: 'var(--palette-neutral-stroke-1-rest)' }}
+
+// ❌ WRONG — prefix eksik, MUI v5'te çalışmaz
+sx={{ color: 'var(--neutral-foreground-1-rest)' }}
+sx={{ bgcolor: 'var(--brand-background-1-rest)' }}
+```
+
+### SPACING — MUST NOT use raw pixel values
+
+- **MUST use `theme.spacing(n)`** for all spacing (1 unit = 4px)
+- **MUST NOT** use raw values: `'8px'`, `16`, `sx={{ padding: '16px' }}`
+- Standard values: 4px=spacing(1), 8px=spacing(2), 12px=spacing(3), 16px=spacing(4), 24px=spacing(6), 32px=spacing(8), 64px=spacing(16)
+
+### COMPONENTS — MUST NOT use invalid props
+
+- **MUST NOT** use `style={{}}` (inline styles) — use `sx` prop
+- **MUST NOT** create custom components duplicating MUI functionality
+- **MUST** verify variant/size/color combinations against COMPONENT_MAP.md
+- Checkbox/Radio size **MUST NOT** be `large` (only `small`, `medium`)
+
+### FORMS — MUST use standard libraries
+
+- Forms MUST use Formik + Yup
+- Data fetching MUST use React Query (TanStack Query)
+- API calls MUST use Hermes API client (GraphQL)
+
+### LAYOUT — MUST use OneHub layout components
+
+- TabBased: `@turknet/onehub/layouts/app/TabBased`
+- WithSidebar: `@turknet/onehub/layouts/page/WithSidebar`
+- **MUST NOT** use MUI Drawer or AppBar directly
+
+### ICONS — MUST use OneHub icon system
+
+- Import from `@turknet/onehub/icons` (SVG components, preferred)
+- Or use Tune icon font via project's `TuneIcon` component
+
+### STYLING — MUST use theme-aware styling
+
+- Use `sx` prop with theme values for one-off styles
+- Use `styled()` from `@mui/material/styles` for reusable components
+- Use CSS custom properties for colors, shadows, borders
+
+---
+
+## Quick Validation Before Commit
+
+Before committing any UI code, verify:
+- [ ] No `<Typography variant="h1">` (or any default MUI variant)
+- [ ] No `style={{}}` props
+- [ ] No raw hex colors (`#XXXXXX`)
+- [ ] All CSS `var()` references use `--palette-` prefix (e.g. `var(--palette-neutral-foreground-1-rest)`)
+- [ ] No raw px values in spacing (`'8px'`, `16`)
+- [ ] All color props match valid values per component
+- [ ] Icons from `@turknet/onehub/icons`, not from `@mui/icons-material`
+
+---
+
+## Reference
+
+| File | Use |
+|------|-----|
+| `DESIGN_RULES.md` | Full mandatory rules with examples |
+| `COMPONENT_MAP.md` | Figma → MUI component mapping with exact props |
+| `COMPONENT_GLOSSARY.md` | All usable components with valid prop combinations |
+| `DESIGN_TOKENS_MAP.md` | Color, spacing, typography token paths |
+| `PAGE_PATTERNS.md` | Standard page layout patterns |
+
+---
+
+## Enforcement
+
+This rule is enforced by:
+1. **This file** — Always-apply rule in `.opencode/rules/`
+2. **`onehub-design-verification` skill** — Step-by-step manual verification
+3. **`scripts/verify-design.js`** — Automated scanner for CI
+4. **ESLINT_DESIGN_RULES.md** — Specification for future ESLint plugin
+
+Run the automated check: `node scripts/verify-design.js src/`

package/.opencode/skills/onehub-design-verification/SKILL.md

@@ -0,0 +1,315 @@
+---
+name: onehub-design-verification
+description: Use WHEN user asks for design review, design audit, or after creating new pages/components. Step-by-step design validation checklist checking typography, colors, spacing, component props, and layout patterns against OneHub design rules.
+license: MIT
+compatibility: React 18.2+, Next.js 13+, MUI v5/v9
+metadata:
+  theme-package: "@turknet/onehub"
+  design-system: "Untitled UI"
+---
+
+# OneHub Design Verification Skill
+
+> **Purpose:** Step-by-step design validation checklist for AI agents and developers. Use this after writing any UI code to verify compliance with OneHub design rules.
+>
+> **References:** DESIGN_RULES.md, COMPONENT_MAP.md, DESIGN_TOKENS_MAP.md, COMPONENT_GLOSSARY.md
+
+---
+
+## Scope & Trigger
+
+**You MUST use this skill WHEN:**
+- User explicitly asks for a design review or design audit
+- After creating new pages, components, or UI features
+- After modifying existing component code
+- Before committing UI changes to version control
+- When user says "check design", "verify design", "design review"
+
+**You SHOULD use this skill WHEN:**
+- Reviewing pull requests that contain UI code
+- Onboarding new developers to OneHub
+- Debugging visual inconsistencies between code and Figma design
+
+---
+
+## Verification Checklist
+
+Complete each check in order. Every check marked ❌ is a **design defect** that MUST be fixed before merge.
+
+### 1. Typography Check
+
+- [ ] No MUI default variants used (`h1`-`h6`, `body1`, `body2`, `subtitle1`, `subtitle2`, `caption`, `button`, `overline`)
+- [ ] All `<Typography>` takes Untitled UI variant (`display.*`, `text.*`)
+- [ ] Page titles use `display.lg.bold` or appropriate heading
+- [ ] Body text uses `text.md.regular` or `text.sm.regular`
+- [ ] Table headers use `text.xs.medium`
+- [ ] Labels use `text.xs.regular` or `text.sm.regular`
+- [ ] Font weight matches context (see DESIGN_RULES.md Rule 1.3)
+
+```typescript
+// ✅ CORRECT
+<Typography variant="display.lg.bold">Page Title</Typography>
+<Typography variant="text.md.regular">Body text</Typography>
+<Typography variant="text.xs.medium">LABEL</Typography>
+
+// ❌ WRONG
+<Typography variant="h1">Page Title</Typography>         // MUI default — DISABLED
+<Typography variant="body1">Text</Typography>             // MUI default — DISABLED
+```
+
+### 2. Color Check
+
+- [ ] No raw hex color values (`#242424`, `#2970ff`, etc.) in component code
+- [ ] All colors use CSS custom properties (`var(--neutral-foreground-1-rest)`) or `theme.vars.palette.*`
+- [ ] Component `color` props use ONLY valid values from COMPONENT_MAP.md:
+  - `Button`: `primary`, `secondary`, `error`
+  - `TextField`/`Select`: `neutral`, `brand`, `danger`
+  - `Checkbox`/`Radio`/`Switch`: `primary`, `error`
+  - `Chip`: `primary`, `secondary`, `error`
+  - `Badge`: `default`, `brand`, `success`, `danger`, `severewarning`, `warning`, `important`
+  - `Alert`: `success`, `warning`, `error`, `info`
+- [ ] No `color="success"` on Button (not defined)
+- [ ] No `color="primary"` on TextField (not defined)
+
+```typescript
+// ✅ CORRECT
+sx={{ color: 'var(--neutral-foreground-1-rest)' }}
+sx={{ bgcolor: theme.vars.palette.brand.background[1].rest }}
+<Button color="primary" variant="contained">Save</Button>
+<TextField color="neutral" />
+
+// ❌ WRONG
+sx={{ color: '#242424' }}          // Raw hex
+<Button color="success">Save</Button>  // Undefined for Button
+<TextField color="primary" />           // Undefined for TextField
+```
+
+### 3. Spacing Check
+
+- [ ] No raw pixel values in spacing (`'8px'`, `16`, etc.)
+- [ ] All spacing uses `theme.spacing(n)` (1 unit = 4px)
+- [ ] Spacing values follow standard grid: 4px, 8px, 12px, 16px, 24px, 32px, 64px
+- [ ] No `sx={{ padding: '8px' }}` — use `sx={{ padding: theme.spacing(2) }}`
+
+```typescript
+// ✅ CORRECT
+sx={{ padding: theme.spacing(2) }}
+sx={{ gap: theme.spacing(1) }}
+sx={{ marginLeft: theme.spacing(3) }}
+
+// ❌ WRONG
+sx={{ padding: '8px' }}
+sx={{ gap: 4 }}
+sx={{ marginLeft: 12 }}
+```
+
+### 4. Component Props Check
+
+- [ ] All `variant`/`size`/`color` combinations match COMPONENT_MAP.md
+- [ ] No undefined combinations (e.g., `<Button variant="gradient">`)
+- [ ] `<Checkbox>` and `<Radio>` size is NOT `large` (only `small`, `medium`)
+- [ ] `<Chip>` variant is one of: `filled`, `tint`, `outline`, `ghost`
+- [ ] `<Badge>` color uses OneHub palette (NOT MUI default `primary`/`secondary`/`error`)
+- [ ] Buttons have `disableElevation: true` by default (theme handles this)
+
+```typescript
+// ❌ WRONG — Invalid combinations
+<Button variant="gradient" color="success">Gradient</Button>
+<Checkbox size="large" />
+<Chip variant="soft" color="success" />
+
+// ✅ CORRECT
+<Button variant="contained" color="primary">Save</Button>
+<Checkbox color="primary" size="small" />
+<Chip variant="tint" color="primary" label="Active" />
+```
+
+### 5. Style Check
+
+- [ ] No inline `style={{}}` props on ANY component
+- [ ] All styling uses `sx` prop with theme values
+- [ ] CSS custom properties used for colors, shadows, borders
+- [ ] `styled()` is used for complex/reusable style objects
+
+```typescript
+// ❌ WRONG
+<div style={{ padding: 20, color: 'red' }}>Text</div>
+<Button style={{ backgroundColor: 'blue' }}>Click</Button>
+
+// ✅ CORRECT
+<Box sx={{ padding: theme.spacing(5), color: 'var(--danger-foreground-1-rest)' }}>
+<Button sx={{ bgcolor: theme.vars.palette.brand.background[1].rest }}>
+```
+
+### 6. Component Selection Check
+
+- [ ] No custom components duplicating MUI functionality
+- [ ] No forbidden MUI components (ToggleButton, Rating, SpeedDial, BottomNavigation, MobileStepper, ImageList, Timeline, Accordion, Breadcrumbs, Drawer, AppBar)
+- [ ] Tables use custom Box-based layout (not MUI Table for data tables — see COMPONENT_MAP.md#table-data-grid)
+- [ ] Forms use Formik + Yup
+- [ ] Data fetching uses React Query (TanStack Query)
+- [ ] Icons imported from `@turknet/onehub/icons` or Tune icon font
+- [ ] Layout uses `TabBasedLayout` or `WithSidebarLayout` from `@turknet/onehub`
+
+### 7. Typography Variant Selection Check
+
+Verify typography variant matches content hierarchy:
+
+| Context | Expected Variant |
+|---------|-----------------|
+| Page title | `display.lg.bold` or `display.md.semibold` |
+| Section header | `text.lg.medium` or `text.md.semibold` |
+| Body text | `text.md.regular` or `text.sm.regular` |
+| Table header | `text.xs.medium` |
+| Table cell | `text.sm.regular` |
+| Form label | `text.sm.regular` or `text.xs.regular` |
+| Helper/error text | `text.xs.regular` |
+| Button text | `text.sm.medium` |
+| Chip/Badge text | `text.xs.medium` |
+
+### 8. Border Radius Check
+
+- [ ] Small elements (checkbox): `4px` → `theme.shape.borderRadius / 2`
+- [ ] Buttons, inputs, cards, radio: `8px` → `theme.shape.borderRadius`
+- [ ] Chips, badges, filter tags: `16px` → `theme.shape.borderRadius * 2`
+
+### 9. Accessibility Check
+
+- [ ] All form inputs have associated labels
+- [ ] Icon buttons have `aria-label`
+- [ ] Tables have proper header rows
+- [ ] Interactive elements are keyboard accessible
+
+### 10. Import Check
+
+- [ ] No full library imports (`import * as Mui from '@mui/material'`)
+- [ ] Named imports only from `@mui/material`
+- [ ] `@mui/material/styles` for `styled()` function
+
+---
+
+## Running the VERIFICATION Script
+
+After completing the manual checklist, run the automated scanner:
+
+```bash
+# src/ dizinini tara
+node scripts/verify-design.js src/
+
+# Belirli bir dizini tara
+node scripts/verify-design.js src/components/
+
+# Çıkış kodu: 0 = temiz, 1 = ihlal var
+echo $?
+```
+
+The script checks:
+- Invalid variant/color/size props on MUI components
+- Forbidden MUI typography variants
+- Inline styles (`style={{}}`)
+- Magic number spacing (raw px values)
+- Raw hex colors
+- Forbidden MUI components (no theme override)
+
+---
+
+## Design Review Output Format
+
+When performing a design review, output results in this format:
+
+```markdown
+## Design Review Results
+
+### Summary
+- Files checked: X
+- Violations found: Y
+- Rules checked: 10
+
+### Violations
+
+#### 1. Typography (N issues)
+- `file.tsx:123` — `<Typography variant="h3">` — MUI default variant DISABLED
+
+#### 2. Colors (N issues)
+- `file.tsx:45` — `color="#2970ff"` — Raw hex, use theme.vars
+
+#### 3. Spacing (N issues)
+- `file.tsx:78` — `padding: '16px'` — Magic number, use theme.spacing(4)
+
+### ✅ Passed Checks
+- Component props: All valid
+- Component selection: No forbidden components
+- Accessibility: Labels present
+```
+
+---
+
+## Reference Files
+
+Always consult these files when verifying:
+
+| File | Content |
+|------|---------|
+| `DESIGN_RULES.md` | Mandatory rules (MUST/MUST NOT) |
+| `COMPONENT_MAP.md` | Figma → MUI component mapping with exact props |
+| `COMPONENT_GLOSSARY.md` | Full component catalog with valid prop combinations |
+| `DESIGN_TOKENS_MAP.md` | Color, spacing, typography token mapping |
+| `PAGE_PATTERNS.md` | Standard page layout patterns |
+| `LLM_GUIDELINES.md` | Component usage rules |
+| `LLM_EXAMPLES.md` | Correct/incorrect usage examples |
+
+---
+
+## Common Violations & Fixes
+
+### Violation: MUI default typography
+
+```typescript
+// ❌ WRONG
+<Typography variant="h1">Title</Typography>
+
+// ✅ FIX
+<Typography variant="display.lg.bold">Title</Typography>
+```
+
+### Violation: Raw color
+
+```typescript
+// ❌ WRONG
+sx={{ backgroundColor: '#2970ff' }}
+
+// ✅ FIX
+sx={{ backgroundColor: 'var(--brand-background-1-rest)' }}
+// or
+sx={{ backgroundColor: theme.vars.palette.brand.background[1].rest }}
+```
+
+### Violation: Magic spacing
+
+```typescript
+// ❌ WRONG
+sx={{ padding: '16px' }}
+
+// ✅ FIX
+sx={{ padding: theme.spacing(4) }}
+```
+
+### Violation: Invalid color prop
+
+```typescript
+// ❌ WRONG
+<Button color="success">Save</Button>
+
+// ✅ FIX
+<Button color="primary" variant="contained">Save</Button>
+```
+
+### Violation: Inline style
+
+```typescript
+// ❌ WRONG
+<Button style={{ marginTop: 20 }}>Click</Button>
+
+// ✅ FIX
+<Button sx={{ marginTop: theme.spacing(5) }}>Click</Button>
+```

package/.opencode/skills/turknet-onehub-component-usage/SKILL.md

@@ -10,28 +10,28 @@ metadata:
 
 # @turknet/onehub Material UI Component Usage Guide
 
-> **CRITICAL FOR LLM MODELS**: This skill is essential when writing components for projects using `@turknet/onehub`. Read and apply ALL rules.
+> **CRITICAL FOR LLM MODELS**: This skill is essential when writing components for projects using `@turknet/onehub`. You MUST read and apply ALL rules.
 
 ---
 
-## 🎯 Scope & Trigger
+## Scope & Trigger
 
-**Use this skill WHEN:**
+**You MUST use this skill WHEN:**
 - Generating React/TSX components for projects using `@turknet/onehub` theme
 - Writing code that imports Material UI components (`@mui/material`)
 - Styling buttons, forms, typography, cards, dialogs, tables, or any MUI component
 - Creating layouts with Paper, Container, Box, Stack, Grid
 
-**Do NOT use this skill WHEN:**
+**You MUST NOT use this skill WHEN:**
 - Using other UI frameworks (Chakra UI, shadcn/ui, Tailwind custom components)
 - Writing non-UI code (hooks, utilities, services, API calls)
 - Dealing with unrelated packages
 
 ---
 
-## 📋 Foundation Rules
+## Foundation Rules
 
-### Rule 1: Always Use Material UI from @mui/material
+### Rule 1: You MUST ONLY Use Material UI from @mui/material
 
 ```tsx
 // ✅ CORRECT
@@ -42,7 +42,7 @@ import CustomButton from './components/CustomButton';
 import { Button } from 'chakra-ui';
 ```
 
-### Rule 2: Only Use Defined Variants, Sizes, and Colors
+### Rule 2: You MUST ONLY Use Defined Variants, Sizes, and Colors
 
 ```tsx
 // ✅ CORRECT: Defined combination
@@ -52,7 +52,7 @@ import { Button } from 'chakra-ui';
 <Button variant="gradient" size="huge" color="unknown" />
 ```
 
-### Rule 3: Never Write Custom Components or Inline Styles
+### Rule 3: You MUST NEVER Write Custom Components or Inline Styles
 
 ```tsx
 // ✅ CORRECT
@@ -71,7 +71,7 @@ function CustomButton() {
 </Button>
 ```
 
-### Rule 4: Use Theme Color Palettes Correctly
+### Rule 4: You MUST Use Theme Color Palettes Correctly
 
 ```tsx
 // ✅ CORRECT: Use neutral, brand, danger
@@ -85,9 +85,9 @@ function CustomButton() {
 </div>
 ```
 
-**Note**: Shared colors (red, green, orange, etc.) are only for custom components when design demands them.
+**Note**: Shared colors (red, green, orange, etc.) MUST ONLY be used for custom components when design demands them. They MUST NOT be used via inline styles on MUI components.
 
-### Rule 5: Always Use Typography Variants
+### Rule 5: You MUST ALWAYS Use Typography Variants
 
 ```tsx
 // ✅ CORRECT: Use customized variants
@@ -103,7 +103,7 @@ function CustomButton() {
 
 ---
 
-## 🎨 Theme System Reference
+## Theme System Reference
 
 ### Color Palettes
 
@@ -188,7 +188,7 @@ text.xs.{regular|medium|semibold|bold}        → 12px
 
 ### Paper Elevation Levels
 
-Use `elevation` prop with values **0-24**:
+You MUST use the `elevation` prop with values **0-24 only**:
 
 ```tsx
 <Paper elevation={0}>Flat (no shadow)</Paper>
@@ -200,7 +200,7 @@ Use `elevation` prop with values **0-24**:
 
 ---
 
-## 📦 Component Structure & Sub-Components
+## Component Structure & Sub-Components
 
 ### Form Components with Sub-Components
 
@@ -549,8 +549,8 @@ const CustomStatusBadge = () => (
 
 ### Checklist
 
-- [ ] Does the component use only Material UI from `@mui/material`?
-- [ ] Are all variant/size/color combinations defined in this guide?
+- [ ] Does the component use ONLY Material UI from `@mui/material`?
+- [ ] Are ALL variant/size/color combinations defined in this guide?
 - [ ] Did I use Typography variants instead of HTML tags?
 - [ ] Did I avoid inline styles and custom components?
 - [ ] For form components, did I specify the `color` prop?