@turk.net/mui 3.0.6 → 3.0.7
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/README.md +18 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @turk.net/mui - Material UI Theme Package
|
|
2
2
|
|
|
3
|
-
A Material UI theme package for
|
|
3
|
+
A Material UI theme package for NextJs projects, providing customized theme configuration, and icon components.
|
|
4
4
|
|
|
5
5
|
> **Note:** This is a theme package, not a component library. It provides styling and theming for Material UI components. For component usage, refer to the [Material UI documentation](https://mui.com/material-ui/getting-started/).
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
npm install @
|
|
10
|
+
npm install @turk.net/mui
|
|
11
11
|
# or
|
|
12
|
-
yarn add @
|
|
12
|
+
yarn add @turk.net/mui
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
## Usage
|
|
@@ -19,15 +19,11 @@ yarn add @turknet/onehub
|
|
|
19
19
|
Wrap your application with the theme provider:
|
|
20
20
|
|
|
21
21
|
```tsx
|
|
22
|
-
import { ThemeProvider } from
|
|
23
|
-
import theme from
|
|
22
|
+
import { ThemeProvider } from "@mui/material/styles";
|
|
23
|
+
import theme from "@turk.net/mui/theme";
|
|
24
24
|
|
|
25
25
|
function App() {
|
|
26
|
-
return
|
|
27
|
-
<ThemeProvider theme={theme}>
|
|
28
|
-
{/* Your app content */}
|
|
29
|
-
</ThemeProvider>
|
|
30
|
-
);
|
|
26
|
+
return <ThemeProvider theme={theme}>{/* Your app content */}</ThemeProvider>;
|
|
31
27
|
}
|
|
32
28
|
```
|
|
33
29
|
|
|
@@ -36,7 +32,7 @@ function App() {
|
|
|
36
32
|
Once the theme is applied, use Material UI components as documented in the [Material UI documentation](https://mui.com/material-ui/getting-started/):
|
|
37
33
|
|
|
38
34
|
```tsx
|
|
39
|
-
import { Button, Typography, Box } from
|
|
35
|
+
import { Button, Typography, Box } from "@mui/material";
|
|
40
36
|
|
|
41
37
|
function MyComponent() {
|
|
42
38
|
return (
|
|
@@ -57,7 +53,7 @@ The theme will automatically style all Material UI components according to the O
|
|
|
57
53
|
This theme includes custom typography variants following the Untitled UI design system:
|
|
58
54
|
|
|
59
55
|
```tsx
|
|
60
|
-
import { Typography } from
|
|
56
|
+
import { Typography } from "@mui/material";
|
|
61
57
|
|
|
62
58
|
function TypographyExamples() {
|
|
63
59
|
return (
|
|
@@ -67,7 +63,7 @@ function TypographyExamples() {
|
|
|
67
63
|
<Typography variant="display.xl.semibold">Large Display</Typography>
|
|
68
64
|
<Typography variant="display.lg.medium">Medium Display</Typography>
|
|
69
65
|
<Typography variant="display.md.regular">Regular Display</Typography>
|
|
70
|
-
|
|
66
|
+
|
|
71
67
|
{/* Text variants - for body text and UI elements */}
|
|
72
68
|
<Typography variant="text.xl.bold">Extra Large Text</Typography>
|
|
73
69
|
<Typography variant="text.lg.semibold">Large Text</Typography>
|
|
@@ -87,31 +83,32 @@ function TypographyExamples() {
|
|
|
87
83
|
The package includes custom icon components:
|
|
88
84
|
|
|
89
85
|
```tsx
|
|
90
|
-
import HomeIcon from
|
|
91
|
-
import
|
|
86
|
+
import HomeIcon from "@turk.net/mui/icons/Home";
|
|
87
|
+
import Settings01Icon from "@turk.net/mui/icons/Settings01Icon";
|
|
92
88
|
|
|
93
89
|
function MyComponent() {
|
|
94
90
|
return (
|
|
95
91
|
<div>
|
|
96
92
|
<HomeIcon />
|
|
97
|
-
<
|
|
93
|
+
<Settings01Icon />
|
|
98
94
|
</div>
|
|
99
95
|
);
|
|
100
96
|
}
|
|
101
97
|
```
|
|
102
98
|
|
|
103
|
-
> **Note:** Fonts are automatically loaded when you import the theme. No additional setup required!
|
|
104
|
-
|
|
105
99
|
## What's Included
|
|
100
|
+
|
|
106
101
|
- Custom color schemes (light/dark mode support)
|
|
107
102
|
- Typography variants following Untitled UI design system
|
|
108
103
|
- Custom shadows and spacing
|
|
109
104
|
- Component style overrides
|
|
110
105
|
|
|
111
106
|
### Icons
|
|
107
|
+
|
|
112
108
|
Custom SVG icons as React components, compatible with Material UI's icon system.
|
|
113
109
|
|
|
114
110
|
### Fonts
|
|
111
|
+
|
|
115
112
|
Inter font family (Regular, Medium, SemiBold, Bold with italic variants) in WOFF2 format.
|
|
116
113
|
|
|
117
114
|
## Development
|
|
@@ -123,6 +120,7 @@ yarn build
|
|
|
123
120
|
```
|
|
124
121
|
|
|
125
122
|
This will:
|
|
123
|
+
|
|
126
124
|
1. Generate icon components from SVG files
|
|
127
125
|
2. Bundle the library with tsup (ESM + CJS)
|
|
128
126
|
3. Convert TTF fonts to WOFF2 and generate fonts.css
|
|
@@ -158,6 +156,7 @@ For projects that want LLM models to automatically follow Material UI best pract
|
|
|
158
156
|
- **Skill File**: `.opencode/skills/turknet-onehub-component-usage/SKILL.md` - The actual skill that enforces component usage rules
|
|
159
157
|
|
|
160
158
|
The OpenCode skill automatically guides LLM models to:
|
|
159
|
+
|
|
161
160
|
- Use Material UI components exclusively
|
|
162
161
|
- Follow variant/size/color rules from the theme
|
|
163
162
|
- Avoid custom components
|