@undefine-ui/design-system 3.12.0 → 3.13.0
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 +56 -0
- package/dist/index.cjs +16 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +15 -2
- 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.
|
package/dist/index.cjs
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
"use strict";
|
|
2
3
|
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
@@ -203,6 +204,7 @@ __export(index_exports, {
|
|
|
203
204
|
getDateRangeFromPreset: () => getDateRangeFromPreset,
|
|
204
205
|
getDefaultChartOptions: () => getDefaultChartOptions,
|
|
205
206
|
getFileCategory: () => getFileCategory,
|
|
207
|
+
getInitColorSchemeScript: () => getInitColorSchemeScript,
|
|
206
208
|
getInitials: () => getInitials,
|
|
207
209
|
getMimeFromExtension: () => getMimeFromExtension,
|
|
208
210
|
getStorage: () => getStorage,
|
|
@@ -13734,10 +13736,20 @@ var shouldSkipGeneratingVar = (keys) => {
|
|
|
13734
13736
|
};
|
|
13735
13737
|
|
|
13736
13738
|
// src/theme/color-scheme-script.tsx
|
|
13739
|
+
var import_InitColorSchemeScript = __toESM(require("@mui/material/InitColorSchemeScript"), 1);
|
|
13740
|
+
var import_jsx_runtime127 = require("react/jsx-runtime");
|
|
13737
13741
|
var schemeConfig = {
|
|
13738
13742
|
modeStorageKey: "theme-mode",
|
|
13739
13743
|
defaultMode: defaultSettings.colorScheme
|
|
13740
13744
|
};
|
|
13745
|
+
var getInitColorSchemeScript = /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
13746
|
+
import_InitColorSchemeScript.default,
|
|
13747
|
+
{
|
|
13748
|
+
modeStorageKey: schemeConfig.modeStorageKey,
|
|
13749
|
+
colorSchemeNode: schemeConfig.defaultMode
|
|
13750
|
+
},
|
|
13751
|
+
schemeConfig.modeStorageKey
|
|
13752
|
+
);
|
|
13741
13753
|
|
|
13742
13754
|
// src/theme/ThemeProvider.tsx
|
|
13743
13755
|
var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"), 1);
|
|
@@ -13753,18 +13765,18 @@ var import__8 = require("@fontsource/geist/500.css");
|
|
|
13753
13765
|
var import__9 = require("@fontsource/geist/600.css");
|
|
13754
13766
|
var import__10 = require("@fontsource/geist/700.css");
|
|
13755
13767
|
var import_satoshi = require("./satoshi-4X3TX4PE.css");
|
|
13756
|
-
var
|
|
13768
|
+
var import_jsx_runtime128 = require("react/jsx-runtime");
|
|
13757
13769
|
var ThemeProvider = ({ children }) => {
|
|
13758
13770
|
const settings = useSettings();
|
|
13759
13771
|
const theme = createTheme(settings);
|
|
13760
|
-
return /* @__PURE__ */ (0,
|
|
13772
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
|
|
13761
13773
|
import_styles42.ThemeProvider,
|
|
13762
13774
|
{
|
|
13763
13775
|
theme,
|
|
13764
13776
|
defaultMode: schemeConfig.defaultMode,
|
|
13765
13777
|
modeStorageKey: schemeConfig.modeStorageKey,
|
|
13766
13778
|
children: [
|
|
13767
|
-
/* @__PURE__ */ (0,
|
|
13779
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_CssBaseline.default, {}),
|
|
13768
13780
|
children
|
|
13769
13781
|
]
|
|
13770
13782
|
}
|
|
@@ -13947,6 +13959,7 @@ __reExport(index_exports, components_exports2, module.exports);
|
|
|
13947
13959
|
getDateRangeFromPreset,
|
|
13948
13960
|
getDefaultChartOptions,
|
|
13949
13961
|
getFileCategory,
|
|
13962
|
+
getInitColorSchemeScript,
|
|
13950
13963
|
getInitials,
|
|
13951
13964
|
getMimeFromExtension,
|
|
13952
13965
|
getStorage,
|