@turk.net/mui 3.0.9 → 3.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.opencode/rules/design-compliance.md +8 -5
- package/.opencode/skills/onehub-design-verification/SKILL.md +4 -4
- package/.opencode/skills/turknet-onehub-component-usage/SKILL.md +24 -14
- package/COMPONENT_MAP.md +576 -47
- package/DESIGN_RULES.md +43 -19
- package/DESIGN_SOURCES.md +22 -0
- package/DESIGN_TOKENS_MAP.md +14 -5
- package/ESLINT_DESIGN_RULES.md +5 -3
- package/LLM_EXAMPLES.md +5 -5
- package/LLM_GUIDELINES.md +7 -7
- package/PAGE_PATTERNS.md +1 -1
- package/SKILL_SETUP.md +14 -14
- package/dist/index.js +75 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +76 -5
- package/dist/index.mjs.map +1 -1
- package/dist/theme/components/Tabs.d.mts +3 -0
- package/dist/theme/components/Tabs.d.ts +3 -0
- package/dist/theme/index.js +75 -4
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/index.mjs +76 -5
- package/dist/theme/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -66,9 +66,11 @@ sx={{ bgcolor: 'var(--brand-background-1-rest)' }}
|
|
|
66
66
|
|
|
67
67
|
### LAYOUT — MUST use OneHub layout components
|
|
68
68
|
|
|
69
|
-
- TabBased: `@
|
|
70
|
-
-
|
|
71
|
-
-
|
|
69
|
+
- TabBased: `@turk.net/mui/layouts/app/TabBased`
|
|
70
|
+
- Dashboard: Modül başına özel sidebar layout (`src/components/layouts/dashboard/`)
|
|
71
|
+
- Empty: Passthrough wrapper (`src/components/layouts/empty.tsx`)
|
|
72
|
+
- Login: Özel login layout'u
|
|
73
|
+
- **MUST NOT** use MUI Drawer or AppBar directly (Drawer slotProps ile kullanılabilir)
|
|
72
74
|
|
|
73
75
|
**Figma "Header tab navigation" layer → TabBased layout:**
|
|
74
76
|
Eğer Figma tasarımında `"Header tab navigation"` isimli bir layer varsa, bu sayfa TabBased layout içinde bir **sekme** olarak geliştirilmelidir. Header'ı sayfa içinde tekrar oluşturma — layout otomatik olarak sağlar.
|
|
@@ -81,8 +83,9 @@ Eğer Figma'da `"Card"` veya `"Container"` isimli bir layer şu stillere sahipse
|
|
|
81
83
|
|
|
82
84
|
### ICONS — MUST use OneHub icon system
|
|
83
85
|
|
|
84
|
-
- Import from `@
|
|
86
|
+
- Import from `@turk.net/mui/icons/*` (SVG components, tercih edilen)
|
|
85
87
|
- Or use Tune icon font via project's `TuneIcon` component
|
|
88
|
+
- **MUST NOT** import from `@mui/icons-material` (sadece istisnai durumlarda `Error` ikonu kullanılabilir)
|
|
86
89
|
|
|
87
90
|
### STYLING — MUST use theme-aware styling
|
|
88
91
|
|
|
@@ -101,7 +104,7 @@ Before committing any UI code, verify:
|
|
|
101
104
|
- [ ] All CSS `var()` references use `--palette-` prefix (e.g. `var(--palette-neutral-foreground-1-rest)`)
|
|
102
105
|
- [ ] No raw px values in spacing (`'8px'`, `16`)
|
|
103
106
|
- [ ] All color props match valid values per component
|
|
104
|
-
- [ ] Icons from `@
|
|
107
|
+
- [ ] Icons from `@turk.net/mui/icons`, not from `@mui/icons-material`
|
|
105
108
|
|
|
106
109
|
---
|
|
107
110
|
|
|
@@ -4,7 +4,7 @@ description: Use WHEN user asks for design review, design audit, or after creati
|
|
|
4
4
|
license: MIT
|
|
5
5
|
compatibility: React 18.2+, Next.js 13+, MUI v5/v9
|
|
6
6
|
metadata:
|
|
7
|
-
theme-package: "@
|
|
7
|
+
theme-package: "@turk.net/mui"
|
|
8
8
|
design-system: "Untitled UI"
|
|
9
9
|
---
|
|
10
10
|
|
|
@@ -65,7 +65,7 @@ Complete each check in order. Every check marked ❌ is a **design defect** that
|
|
|
65
65
|
- `Button`: `primary`, `secondary`, `error`
|
|
66
66
|
- `TextField`/`Select`: `neutral`, `brand`, `danger`
|
|
67
67
|
- `Checkbox`/`Radio`/`Switch`: `primary`, `error`
|
|
68
|
-
- `Chip`: `
|
|
68
|
+
- `Chip`: `informative`, `brand`, `danger`, `success`, `severewarning`, `important`, `warning`
|
|
69
69
|
- `Badge`: `default`, `brand`, `success`, `danger`, `severewarning`, `warning`, `important`
|
|
70
70
|
- `Alert`: `success`, `warning`, `error`, `info`
|
|
71
71
|
- [ ] No `color="success"` on Button (not defined)
|
|
@@ -148,8 +148,8 @@ sx={{ marginLeft: 12 }}
|
|
|
148
148
|
- [ ] Tables use custom Box-based layout (not MUI Table for data tables — see COMPONENT_MAP.md#table-data-grid)
|
|
149
149
|
- [ ] Forms use Formik + Yup
|
|
150
150
|
- [ ] Data fetching uses React Query (TanStack Query)
|
|
151
|
-
- [ ] Icons imported from `@
|
|
152
|
-
- [ ] Layout uses `TabBasedLayout`
|
|
151
|
+
- [ ] Icons imported from `@turk.net/mui/icons/*` or Tune icon font
|
|
152
|
+
- [ ] Layout uses `TabBasedLayout` from `@turk.net/mui` or custom dashboard layout
|
|
153
153
|
|
|
154
154
|
### 7. Typography Variant Selection Check
|
|
155
155
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: turknet-onehub-component-usage
|
|
3
|
-
description: Use ONLY when generating Material UI component code with @
|
|
3
|
+
description: Use ONLY when generating Material UI component code with @turk.net/mui theme. Enforces correct component usage, variant/size/color rules, and prohibits custom components.
|
|
4
4
|
license: MIT
|
|
5
5
|
compatibility: React 18.2+, Next.js 13+
|
|
6
6
|
metadata:
|
|
@@ -8,16 +8,16 @@ metadata:
|
|
|
8
8
|
mui-version: "7.0.0+"
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
-
# @
|
|
11
|
+
# @turk.net/mui Material UI Component Usage Guide
|
|
12
12
|
|
|
13
|
-
> **CRITICAL FOR LLM MODELS**: This skill is essential when writing components for projects using `@
|
|
13
|
+
> **CRITICAL FOR LLM MODELS**: This skill is essential when writing components for projects using `@turk.net/mui`. You MUST read and apply ALL rules.
|
|
14
14
|
|
|
15
15
|
---
|
|
16
16
|
|
|
17
17
|
## Scope & Trigger
|
|
18
18
|
|
|
19
19
|
**You MUST use this skill WHEN:**
|
|
20
|
-
- Generating React/TSX components for projects using `@
|
|
20
|
+
- Generating React/TSX components for projects using `@turk.net/mui` theme
|
|
21
21
|
- Writing code that imports Material UI components (`@mui/material`)
|
|
22
22
|
- Styling buttons, forms, typography, cards, dialogs, tables, or any MUI component
|
|
23
23
|
- Creating layouts with Paper, Container, Box, Stack, Grid
|
|
@@ -34,7 +34,15 @@ metadata:
|
|
|
34
34
|
### Rule 1: You MUST ONLY Use Material UI from @mui/material
|
|
35
35
|
|
|
36
36
|
```tsx
|
|
37
|
-
// ✅ CORRECT
|
|
37
|
+
// ✅ CORRECT — Path-based import (gerçek projelerde kullanılan yöntem)
|
|
38
|
+
import Button from "@mui/material/Button";
|
|
39
|
+
import Typography from "@mui/material/Typography";
|
|
40
|
+
import TextField from "@mui/material/TextField";
|
|
41
|
+
import Box from "@mui/material/Box";
|
|
42
|
+
import Paper from "@mui/material/Paper";
|
|
43
|
+
import Chip from "@mui/material/Chip";
|
|
44
|
+
|
|
45
|
+
// ✅ ALSO CORRECT — Barrel import
|
|
38
46
|
import { Button, Typography, TextField } from '@mui/material';
|
|
39
47
|
|
|
40
48
|
// ❌ WRONG
|
|
@@ -127,7 +135,7 @@ palette:
|
|
|
127
135
|
| **Checkbox** | primary, error | primary |
|
|
128
136
|
| **Radio** | primary, error | primary |
|
|
129
137
|
| **Switch** | primary, error | primary |
|
|
130
|
-
| **Chip** |
|
|
138
|
+
| **Chip** | informative, brand, danger, success, severewarning, important, warning | informative |
|
|
131
139
|
| **Alert** | success, warning, error, info | - |
|
|
132
140
|
| **Badge** | primary, secondary, error, success, warning, info | - |
|
|
133
141
|
|
|
@@ -412,10 +420,12 @@ You MUST use the `elevation` prop with values **0-24 only**:
|
|
|
412
420
|
|
|
413
421
|
```tsx
|
|
414
422
|
// Different Chip styles
|
|
415
|
-
<Chip label="Tag" variant="filled" color="
|
|
416
|
-
<Chip label="Tag" variant="
|
|
417
|
-
<Chip label="
|
|
418
|
-
<Chip
|
|
423
|
+
<Chip label="Tag" variant="filled" color="informative" />
|
|
424
|
+
<Chip label="Tag" variant="tint" color="brand" />
|
|
425
|
+
<Chip label="Tag" variant="outline" color="important" />
|
|
426
|
+
<Chip label="Removable" variant="tint" color="primary" onDelete={() => {}} />
|
|
427
|
+
<Chip icon={<StarIcon />} label="Active" variant="tint" color="success" />
|
|
428
|
+
<Chip icon={<ErrorIcon />} label="Error" variant="tint" color="danger" />
|
|
419
429
|
|
|
420
430
|
// Badge
|
|
421
431
|
<Badge badgeContent={4} color="error">
|
|
@@ -682,7 +692,7 @@ export function LoginForm() {
|
|
|
682
692
|
|
|
683
693
|
## 📚 References
|
|
684
694
|
|
|
685
|
-
- **@
|
|
695
|
+
- **@turk.net/mui Package**: https://npm.js/package/@turk.net/mui
|
|
686
696
|
- **LLM Guidelines**: Look for `LLM_GUIDELINES.md` in the package
|
|
687
697
|
- **Usage Examples**: Look for `LLM_EXAMPLES.md` in the package
|
|
688
698
|
- **Material UI Docs**: https://mui.com/material-ui/
|
|
@@ -695,7 +705,7 @@ export function LoginForm() {
|
|
|
695
705
|
### 1. Install the Theme Package
|
|
696
706
|
|
|
697
707
|
```bash
|
|
698
|
-
yarn add @
|
|
708
|
+
yarn add @turk.net/mui
|
|
699
709
|
```
|
|
700
710
|
|
|
701
711
|
### 2. Apply Theme Provider
|
|
@@ -703,8 +713,8 @@ yarn add @turknet/onehub
|
|
|
703
713
|
```tsx
|
|
704
714
|
// pages/_app.tsx or app layout
|
|
705
715
|
import { ThemeProvider } from '@mui/material/styles';
|
|
706
|
-
import theme from '@
|
|
707
|
-
import '@
|
|
716
|
+
import theme from '@turk.net/mui/theme';
|
|
717
|
+
import '@turk.net/mui/fonts.css';
|
|
708
718
|
|
|
709
719
|
export default function App({ Component, pageProps }) {
|
|
710
720
|
return (
|