@undefine-ui/design-system 3.12.0 → 3.13.1
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 +64 -5
- package/dist/index.cjs +1183 -738
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +33 -2
- package/dist/index.d.ts +33 -2
- package/dist/index.js +1146 -701
- package/dist/index.js.map +1 -1
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -30,6 +30,62 @@ export function DesignSystemApp({ children }: { children: React.ReactNode }) {
|
|
|
30
30
|
}
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
+
### Next.js App Router Setup
|
|
34
|
+
|
|
35
|
+
For Next.js 13+ with the App Router, install the additional MUI integration package and set up your providers:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
pnpm add @mui/material-nextjs
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
**1. Create a providers file (`app/providers.tsx`):**
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
'use client';
|
|
45
|
+
|
|
46
|
+
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
|
|
47
|
+
import { SettingsProvider, defaultSettings, ThemeProvider } from '@undefine-ui/design-system';
|
|
48
|
+
|
|
49
|
+
type ProvidersProps = {
|
|
50
|
+
children: React.ReactNode;
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export function Providers({ children }: ProvidersProps) {
|
|
54
|
+
return (
|
|
55
|
+
<AppRouterCacheProvider options={{ key: 'css' }}>
|
|
56
|
+
<SettingsProvider settings={defaultSettings}>
|
|
57
|
+
<ThemeProvider>{children}</ThemeProvider>
|
|
58
|
+
</SettingsProvider>
|
|
59
|
+
</AppRouterCacheProvider>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
**2. Update your root layout (`app/layout.tsx`):**
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
import { getInitColorSchemeScript } from '@undefine-ui/design-system';
|
|
68
|
+
import { Providers } from './providers';
|
|
69
|
+
|
|
70
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
71
|
+
return (
|
|
72
|
+
<html lang="en" suppressHydrationWarning>
|
|
73
|
+
<head>{getInitColorSchemeScript}</head>
|
|
74
|
+
<body>
|
|
75
|
+
<Providers>{children}</Providers>
|
|
76
|
+
</body>
|
|
77
|
+
</html>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
**Key points:**
|
|
83
|
+
|
|
84
|
+
- `AppRouterCacheProvider` ensures Emotion's CSS-in-JS works correctly with React Server Components and streaming SSR
|
|
85
|
+
- `getInitColorSchemeScript` prevents flash-of-unstyled-content (FOUC) during hydration by setting the color scheme before React loads
|
|
86
|
+
- `suppressHydrationWarning` on `<html>` prevents React warnings from the color scheme script
|
|
87
|
+
- Adjust `@mui/material-nextjs/v15-appRouter` to match your Next.js version (v13, v14, v15, etc.)
|
|
88
|
+
|
|
33
89
|
- `SettingsProvider` exposes the design-system preferences (mode, contrast, fonts, nav layout) through the `useSettings` hook. Provide your own `settings` object if you want different defaults or if you persist user choices.
|
|
34
90
|
- `ThemeProvider` wraps MUI's CssVarsProvider with the Define theme (`createTheme`). It accepts any React children and automatically injects `CssBaseline` and loads the required fonts (Work Sans and Geist).
|
|
35
91
|
- Both providers are exported from the package root so you can colocate them with your router/root layout.
|
|
@@ -78,21 +134,24 @@ Storybook (`pnpm dev:storybook`) documents each component and token surface.
|
|
|
78
134
|
|
|
79
135
|
### Icon library
|
|
80
136
|
|
|
81
|
-
The package includes a comprehensive icon library with
|
|
137
|
+
The package includes a comprehensive icon library with 70+ SVG icons organized by category.
|
|
82
138
|
|
|
83
139
|
**Available icons:**
|
|
84
140
|
|
|
85
|
-
- **Navigation:** NavArrowLeft, NavArrowRight, NavArrowDown, NavArrowDownSolid, LongArrowUpLeftSolid
|
|
86
|
-
- **User:** User, UserSolid, Building, Bank
|
|
141
|
+
- **Navigation:** NavArrowLeft, NavArrowRight, NavArrowDown, NavArrowDownSolid, LongArrowUpLeftSolid, ArrowLeft, ArrowUpCircleSolid
|
|
142
|
+
- **User:** User, UserSolid, Building, Bank, BadgeCheck
|
|
87
143
|
- **Form Controls:** CheckboxDefault, CheckboxSelect, CheckboxIndeterminate, RadioDefault, RadioSelect
|
|
88
|
-
- **Actions:** Search, Copy, Edit, Trash, XMark, XMarkSolid, CloudUpload, Download, Settings, Plus, Minus, PlusSquare, Attachment, FilterList, RefreshDouble, MoreHorizontal
|
|
144
|
+
- **Actions:** Search, Copy, Edit, Trash, XMark, XMarkSolid, CloudUpload, Download, Settings, Plus, Minus, PlusSquare, Attachment, FilterList, RefreshDouble, MoreHorizontal, Repeat, ExpandLines
|
|
89
145
|
- **Feedback:** InfoCircle, InfoCircleSolid, CheckCircleSolid, HelpCircle, ClipboardCheck, Loader, BellNotification, Circle, ChatBubbleQuestionSolid
|
|
90
146
|
- **Visibility:** Eye, EyeClosed, ZoomIn, ZoomOut
|
|
91
147
|
- **Date & Time:** Calendar, Clock
|
|
92
148
|
- **Data:** SortUp, SortDown, StatUp, StatDown
|
|
93
149
|
- **Toast:** InfoToast, SuccessToast, WarningToast, ErrorToast
|
|
94
150
|
- **Files:** FilePdf, FileAudio, FileVideo, FileDocument, FileGeneric
|
|
95
|
-
- **Location:** MapPinXMark
|
|
151
|
+
- **Location:** MapPin, MapPinXMark
|
|
152
|
+
- **Media:** ModernTv, MegaPhone
|
|
153
|
+
- **Commerce:** SimpleCart
|
|
154
|
+
- **Communication:** SendMail
|
|
96
155
|
- **System:** KeyCommand
|
|
97
156
|
|
|
98
157
|
**Usage:**
|