@matteoaliano/forest-ui 0.8.1 → 0.8.2
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 +34 -3
- package/dist/index.js +336 -370
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +9 -43
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -2
- package/skills/forest-alkemy-plus/SKILL.md +6 -3
package/README.md
CHANGED
|
@@ -4,26 +4,57 @@ Forest Design System — A multi-tenant MUI v7 + Emotion component library.
|
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
|
+
Install the package and its peer dependencies:
|
|
8
|
+
|
|
7
9
|
```bash
|
|
8
|
-
npm install @matteoaliano/forest-ui
|
|
10
|
+
npm install @matteoaliano/forest-ui \
|
|
11
|
+
@mui/material@^7 @mui/icons-material@^7 \
|
|
12
|
+
@mui/x-charts@^7 @mui/x-data-grid@^7 @mui/x-date-pickers@^8 \
|
|
13
|
+
@emotion/react @emotion/styled dayjs
|
|
9
14
|
```
|
|
10
15
|
|
|
16
|
+
Forest UI re-exports MUI components with Forest defaults, so you should import everything from `@matteoaliano/forest-ui` rather than `@mui/material`. The only direct MUI import you need is `@mui/icons-material` for icons.
|
|
17
|
+
|
|
11
18
|
## Quick Start
|
|
12
19
|
|
|
13
20
|
```tsx
|
|
14
21
|
import { ForestProvider, Button, Typography } from '@matteoaliano/forest-ui';
|
|
15
|
-
import '@
|
|
22
|
+
import '@matteoaliano/forest-ui/fonts/aeonik/aeonik.css';
|
|
16
23
|
|
|
17
24
|
function App() {
|
|
18
25
|
return (
|
|
19
26
|
<ForestProvider>
|
|
20
27
|
<Typography variant="h1">Hello Forest</Typography>
|
|
21
|
-
<Button
|
|
28
|
+
<Button>Click me</Button>
|
|
22
29
|
</ForestProvider>
|
|
23
30
|
);
|
|
24
31
|
}
|
|
25
32
|
```
|
|
26
33
|
|
|
34
|
+
## Next.js setup
|
|
35
|
+
|
|
36
|
+
Forest UI works with Next.js 14 / 15 / 16 (App Router and Pages Router). For best results with Turbopack and bundle size, add the following to `next.config.js`:
|
|
37
|
+
|
|
38
|
+
```js
|
|
39
|
+
/** @type {import('next').NextConfig} */
|
|
40
|
+
const nextConfig = {
|
|
41
|
+
transpilePackages: ['@matteoaliano/forest-ui'],
|
|
42
|
+
experimental: {
|
|
43
|
+
optimizePackageImports: [
|
|
44
|
+
'@matteoaliano/forest-ui',
|
|
45
|
+
'@mui/material',
|
|
46
|
+
'@mui/icons-material',
|
|
47
|
+
],
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
module.exports = nextConfig;
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Because `ForestProvider` is a client component, wrap your app in a client boundary (a `'use client'` component or a dedicated `providers.tsx`) before mounting it inside the App Router root layout.
|
|
55
|
+
|
|
56
|
+
> **Known issue:** some `@mui/x-*` packages have intermittent Turbopack issues upstream that are unrelated to Forest UI. If you hit one, falling back to webpack (`next dev` without `--turbo`) usually clears it.
|
|
57
|
+
|
|
27
58
|
## Theme Presets
|
|
28
59
|
|
|
29
60
|
Three presets are available:
|