@matteoaliano/forest-ui 0.2.11 → 0.3.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 +123 -0
- package/dist/{chunk-6W3RIXXY.mjs → chunk-EULMNCHH.mjs} +935 -352
- package/dist/chunk-EULMNCHH.mjs.map +1 -0
- package/dist/{index-DJDmMb_c.d.mts → index-EkBIDmEu.d.mts} +11 -9
- package/dist/{index-DJDmMb_c.d.ts → index-EkBIDmEu.d.ts} +11 -9
- package/dist/index.d.mts +26 -10
- package/dist/index.d.ts +26 -10
- package/dist/index.js +1011 -370
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +71 -15
- package/dist/index.mjs.map +1 -1
- package/dist/theme.d.mts +1 -1
- package/dist/theme.d.ts +1 -1
- package/dist/theme.js +935 -351
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +1 -1
- package/guidelines/FOREST_BE_GUIDELINES.md +1 -1
- package/guidelines/FOREST_FE_GUIDELINES.md +1 -1
- package/guidelines/FOREST_UI_GUIDELINES.md +1 -1
- package/package.json +12 -5
- package/dist/chunk-6W3RIXXY.mjs.map +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
# Forest UI
|
|
2
|
+
|
|
3
|
+
Forest Design System — A multi-tenant MUI v7 + Emotion component library.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @matteoaliano/forest-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { ForestProvider, Button, Typography } from '@matteoaliano/forest-ui';
|
|
15
|
+
import '@fontsource/poppins'; // or load Aeonik font
|
|
16
|
+
|
|
17
|
+
function App() {
|
|
18
|
+
return (
|
|
19
|
+
<ForestProvider>
|
|
20
|
+
<Typography variant="h1">Hello Forest</Typography>
|
|
21
|
+
<Button variant="contained">Click me</Button>
|
|
22
|
+
</ForestProvider>
|
|
23
|
+
);
|
|
24
|
+
}
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Theme Presets
|
|
28
|
+
|
|
29
|
+
Three presets are available:
|
|
30
|
+
|
|
31
|
+
| Preset | Use Case |
|
|
32
|
+
|--------|----------|
|
|
33
|
+
| `forest-agency` | Internal tools + partner agencies (default) |
|
|
34
|
+
| `forest-external` | Client-facing products |
|
|
35
|
+
| `forest-internal` | Internal tools |
|
|
36
|
+
|
|
37
|
+
### Using a Preset
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { ForestProvider } from '@matteoaliano/forest-ui';
|
|
41
|
+
|
|
42
|
+
<ForestProvider preset="forest-external">
|
|
43
|
+
{/* Your app */}
|
|
44
|
+
</ForestProvider>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Using a Custom Theme
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
import { ForestProvider, buildTheme } from '@matteoaliano/forest-ui';
|
|
51
|
+
import { getPreset } from '@matteoaliano/forest-ui';
|
|
52
|
+
|
|
53
|
+
const preset = getPreset('forest-agency');
|
|
54
|
+
const theme = buildTheme(preset.variants.light.tokens);
|
|
55
|
+
|
|
56
|
+
<ForestProvider theme={theme}>
|
|
57
|
+
{/* Your app */}
|
|
58
|
+
</ForestProvider>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Components
|
|
62
|
+
|
|
63
|
+
40+ wrapped MUI components with Forest defaults. See [Storybook](https://storybook.url) for all components.
|
|
64
|
+
|
|
65
|
+
### Inputs
|
|
66
|
+
- Button, ButtonGroup
|
|
67
|
+
- TextField, Select, MultiSelect
|
|
68
|
+
- Checkbox, RadioGroup, Switch
|
|
69
|
+
- ToggleButton
|
|
70
|
+
- DatePicker
|
|
71
|
+
- Autocomplete
|
|
72
|
+
- Search
|
|
73
|
+
|
|
74
|
+
### Data Display
|
|
75
|
+
- Typography
|
|
76
|
+
- Table, DataGrid
|
|
77
|
+
- Chip, Badge
|
|
78
|
+
- Tooltip
|
|
79
|
+
- List
|
|
80
|
+
- Divider
|
|
81
|
+
- Skeleton
|
|
82
|
+
|
|
83
|
+
### Surfaces
|
|
84
|
+
- Card, Paper
|
|
85
|
+
- AppBar
|
|
86
|
+
- Accordion
|
|
87
|
+
|
|
88
|
+
### Feedback
|
|
89
|
+
- Alert, Snackbar
|
|
90
|
+
- Dialog, Modal, Popover
|
|
91
|
+
- Progress (Linear, Circular)
|
|
92
|
+
- Backdrop
|
|
93
|
+
|
|
94
|
+
### Navigation
|
|
95
|
+
- Tabs, Stepper
|
|
96
|
+
- Pagination
|
|
97
|
+
- Breadcrumbs
|
|
98
|
+
- Link
|
|
99
|
+
- Menu
|
|
100
|
+
- SidebarNav
|
|
101
|
+
|
|
102
|
+
### Charts
|
|
103
|
+
- LineChart, BarChart, PieChart
|
|
104
|
+
|
|
105
|
+
## Development
|
|
106
|
+
|
|
107
|
+
```bash
|
|
108
|
+
# Install dependencies
|
|
109
|
+
npm install
|
|
110
|
+
|
|
111
|
+
# Build
|
|
112
|
+
npm run build
|
|
113
|
+
|
|
114
|
+
# Run tests
|
|
115
|
+
npm test
|
|
116
|
+
|
|
117
|
+
# Storybook
|
|
118
|
+
npm run storybook
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## License
|
|
122
|
+
|
|
123
|
+
MIT
|