@dashadmin/dash-admin-state 1.0.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 +132 -0
- package/index.d.ts +3 -0
- package/index.js +693 -0
- package/package.json +37 -0
package/README.md
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
# DASH ADMIN STATE
|
|
2
|
+
|
|
3
|
+
DashAdminState is a redux helper for essential data that requires to be shared across the Dash Admin application.
|
|
4
|
+
|
|
5
|
+
The redux store is structured as follows, many of this stores are internally used by DashAdmin, while others such as common state could be interfaced and configured at a domain application level.
|
|
6
|
+
|
|
7
|
+
* IDashAdminState Key State Interfaces:
|
|
8
|
+
* - IAuthState: Manages authentication state with user and auth data
|
|
9
|
+
* - ICommonState: Handles common app state like loading, errors, navigation
|
|
10
|
+
* - IPageState: Controls page-level state like title and icons
|
|
11
|
+
* - ISettingsState: Manages app settings like theme, layout, locale
|
|
12
|
+
* - IDASHAppState: Root state interface combining all state slices
|
|
13
|
+
* - IFormDataState: Tracks form modification state
|
|
14
|
+
|
|
15
|
+
# IMPLEMENTATION EXAMPLE
|
|
16
|
+
|
|
17
|
+
## The library imported at the DashApp entrypoint; your Domain/App.tsx
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
import { IDASHAppState } from 'dash-admin-state';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## General
|
|
24
|
+
The key implementation points:
|
|
25
|
+
|
|
26
|
+
### Initial state must be defined in the App Entrypoint (App.tsx)
|
|
27
|
+
```
|
|
28
|
+
const INITIAL_APP_STATE: IDASHAppState<IDomainUser, IDomainAuth, IAppResourceConfig>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### The initial state are passed to the DashAdmin component
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
<DASHAdmin<U, A, R, C>
|
|
35
|
+
...
|
|
36
|
+
initialAppState={INITIAL_APP_STATE}
|
|
37
|
+
...
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Specific considerations
|
|
41
|
+
|
|
42
|
+
### Define the interfaces that will store your user data
|
|
43
|
+
|
|
44
|
+
While technically the User and Auth could be similar, User interface commonly will include only basic user data such as user id and name returned by the user login and user endpoint, while the Auth interface relies in the response of the getAuth api endpoint which architecturally returns additional or extra user data.
|
|
45
|
+
|
|
46
|
+
```
|
|
47
|
+
export interface IDomainUser {...}
|
|
48
|
+
export interface IDomainAuth {...}
|
|
49
|
+
|
|
50
|
+
const INITIAL_APP_STATE: IDASHAppState<
|
|
51
|
+
IDomainUser,
|
|
52
|
+
IDomainAuth,
|
|
53
|
+
IAppResourceConfig
|
|
54
|
+
> = {
|
|
55
|
+
page: defaultPageSettings,
|
|
56
|
+
settings: defaultSettings,
|
|
57
|
+
auth: defaultAuth,
|
|
58
|
+
common: defaultCommon,
|
|
59
|
+
resources: defaultResources,
|
|
60
|
+
formData: defaultFormState
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
<DASHAdmin<IDomainUser, IDomainAuth, IDashAutoAdminResourceConfig, IDASHAppConstants>
|
|
64
|
+
...
|
|
65
|
+
initialAppState={INITIAL_APP_STATE}
|
|
66
|
+
...
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Notes
|
|
70
|
+
- Note that they can also be technically defined as 'any'
|
|
71
|
+
- User and Auth state are considered to be deprecated int he future from DashAdminState in favor of AutoAdmin AuthContext.
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
# USAGE EXAMPLE - ACCESSING STATE
|
|
75
|
+
|
|
76
|
+
In your components
|
|
77
|
+
|
|
78
|
+
## Import settings
|
|
79
|
+
```
|
|
80
|
+
import { IDASHAppState } from 'dash-admin-state';
|
|
81
|
+
|
|
82
|
+
const settings: ISettingsState = useSelector(
|
|
83
|
+
(state: IDASHAppState) => state.settings,
|
|
84
|
+
);
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Get DashAdmin Resources
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
import { IDASHAppState } from 'dash-admin-state';
|
|
92
|
+
|
|
93
|
+
const resources = useSelector(
|
|
94
|
+
(
|
|
95
|
+
state: IDASHAppState<IDomainUser, IDomainAuth, IAppResourceConfig>,
|
|
96
|
+
) => {
|
|
97
|
+
if (debug || menu) {
|
|
98
|
+
return menu;
|
|
99
|
+
}
|
|
100
|
+
return state.resources.items;
|
|
101
|
+
},
|
|
102
|
+
);
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
```
|
|
106
|
+
const formData = useSelector(
|
|
107
|
+
(
|
|
108
|
+
state: IDASHAppState<any, any, IDashAutoAdminResourceConfig>,
|
|
109
|
+
) => {
|
|
110
|
+
|
|
111
|
+
return state.formData;
|
|
112
|
+
},
|
|
113
|
+
);
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
# UPDATING VALUES
|
|
117
|
+
|
|
118
|
+
```
|
|
119
|
+
import { DASH_REDUX_ACTIONS } from 'dash-admin-state';
|
|
120
|
+
|
|
121
|
+
...
|
|
122
|
+
const dispatch = useDispatch();
|
|
123
|
+
dispatch(DASH_REDUX_ACTIONS.toggleExpandedSideNav(true));
|
|
124
|
+
...
|
|
125
|
+
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
# DASH_REDUX_ACTIONS
|
|
129
|
+
|
|
130
|
+
TODO:
|
|
131
|
+
- Some methods are implemented in the DASH_REDUX_ACTIONS
|
|
132
|
+
- Implement generic methods to update each store
|
package/index.d.ts
ADDED
package/index.js
ADDED
|
@@ -0,0 +1,693 @@
|
|
|
1
|
+
import V from "redux-saga";
|
|
2
|
+
import { combineReducers as x, legacy_createStore as w, compose as W, applyMiddleware as z } from "redux";
|
|
3
|
+
import { routerMiddleware as N } from "connected-react-router";
|
|
4
|
+
import { all as B } from "redux-saga/effects";
|
|
5
|
+
import { dashStorage as E } from "@dashadmin/dash-utils";
|
|
6
|
+
import { createSlice as b } from "@reduxjs/toolkit";
|
|
7
|
+
import { createBrowserHistory as G } from "history";
|
|
8
|
+
import { thunk as F } from "redux-thunk";
|
|
9
|
+
import { DASHAdminSystemConstants as i } from "@dashadmin/dash-constants";
|
|
10
|
+
import { useSelector as r } from "react-redux";
|
|
11
|
+
import { useMemo as d } from "react";
|
|
12
|
+
import { isEqual as s } from "lodash";
|
|
13
|
+
function* k(e) {
|
|
14
|
+
yield B([
|
|
15
|
+
//authSagas(),
|
|
16
|
+
]);
|
|
17
|
+
}
|
|
18
|
+
class o {
|
|
19
|
+
static TAB_SIZE = 992;
|
|
20
|
+
static MOBILE_SIZE = 575;
|
|
21
|
+
static THEME_TYPE = "THEME_TYPE";
|
|
22
|
+
static THEME_TYPE_LIGHT = "light";
|
|
23
|
+
static THEME_TYPE_DARK = "dark";
|
|
24
|
+
static THEME_TYPE_DASH_DEFAULT = "light";
|
|
25
|
+
static THEME_TYPE_SEMI_DARK = "THEME_TYPE_SEMI_DARK";
|
|
26
|
+
static THEME_COLOR = "THEME_COLOR";
|
|
27
|
+
static LAYOUT_TYPE = "LAYOUT_TYPE";
|
|
28
|
+
static LAYOUT_TYPE_FRAMED = "framed-layout";
|
|
29
|
+
static LAYOUT_TYPE_BOXED = "boxed-layout";
|
|
30
|
+
static LAYOUT_TYPE_FULL = "full-layout";
|
|
31
|
+
static NAV_STYLE = "NAV_STYLE";
|
|
32
|
+
static NAV_STYLE_FIXED = "NAV_STYLE_FIXED";
|
|
33
|
+
static NAV_STYLE_MINI_SIDEBAR = "NAV_STYLE_MINI_SIDEBAR";
|
|
34
|
+
static NAV_STYLE_DRAWER = "NAV_STYLE_DRAWER";
|
|
35
|
+
static NAV_STYLE_NO_HEADER_MINI_SIDEBAR = "NAV_STYLE_NO_HEADER_MINI_SIDEBAR";
|
|
36
|
+
static NAV_STYLE_NO_HEADER_EXPANDED_SIDEBAR = "NAV_STYLE_NO_HEADER_EXPANDED_SIDEBAR";
|
|
37
|
+
static NAV_STYLE_DEFAULT_HORIZONTAL = "NAV_STYLE_DEFAULT_HORIZONTAL";
|
|
38
|
+
static NAV_STYLE_DARK_HORIZONTAL = "NAV_STYLE_DARK_HORIZONTAL";
|
|
39
|
+
static NAV_STYLE_INSIDE_HEADER_HORIZONTAL = "NAV_STYLE_INSIDE_HEADER_HORIZONTAL";
|
|
40
|
+
static NAV_STYLE_BELOW_HEADER = "NAV_STYLE_BELOW_HEADER";
|
|
41
|
+
static NAV_STYLE_ABOVE_HEADER = "NAV_STYLE_ABOVE_HEADER";
|
|
42
|
+
static NAV_STYLE_COLLAPSABLE = "NAV_STYLE_COLLAPSABLE";
|
|
43
|
+
static UPDATE_RTL_STATUS = "UPDATE_RTL_STATUS";
|
|
44
|
+
}
|
|
45
|
+
const Z = "SET_FORM_DATA", X = "CLEAR_FORM_DATA", T = "SET_RESOURCES", h = "APPEND_RESOURCES", y = "SET_HEADER_COMPONENTS", D = "SET_PANEL_COMPONENTS", K = "TOGGLE_COLLAPSE_MENU", R = "WINDOW-WIDTH", u = "UPDATE_THEME_SETTINGS", O = "CONTENT-WIDTH", L = "CONTENT-HEIGHT", H = "SWITCH-LANGUAGE", q = "fetch_start", j = "fetch_success", $ = "fetch_error", J = "SHOW_MESSAGE", Q = "HIDE_MESSAGE", C = "LOADING", ee = "SET_NAV_EXPANDED", te = "SET_NAV_SIZE", ae = (e = {
|
|
46
|
+
loading: !1,
|
|
47
|
+
navStyle: void 0,
|
|
48
|
+
layoutType: "",
|
|
49
|
+
themeType: void 0,
|
|
50
|
+
themeColor: "",
|
|
51
|
+
isDirectionRTL: !1,
|
|
52
|
+
/* @ts-ignore */
|
|
53
|
+
locale: {
|
|
54
|
+
languageId: "",
|
|
55
|
+
locale: "",
|
|
56
|
+
name: "",
|
|
57
|
+
icon: ""
|
|
58
|
+
}
|
|
59
|
+
}, t) => {
|
|
60
|
+
switch (t.type) {
|
|
61
|
+
case T:
|
|
62
|
+
return {
|
|
63
|
+
...e,
|
|
64
|
+
resources: t.payload
|
|
65
|
+
};
|
|
66
|
+
case o.THEME_TYPE:
|
|
67
|
+
return {
|
|
68
|
+
...e,
|
|
69
|
+
themeType: t.themeType
|
|
70
|
+
};
|
|
71
|
+
case o.THEME_COLOR:
|
|
72
|
+
return {
|
|
73
|
+
...e,
|
|
74
|
+
themeColor: t.themeColor
|
|
75
|
+
};
|
|
76
|
+
case o.UPDATE_RTL_STATUS:
|
|
77
|
+
return {
|
|
78
|
+
...e,
|
|
79
|
+
isDirectionRTL: t.rtlStatus
|
|
80
|
+
};
|
|
81
|
+
case u:
|
|
82
|
+
return {
|
|
83
|
+
...e,
|
|
84
|
+
...t.payload
|
|
85
|
+
};
|
|
86
|
+
case o.NAV_STYLE:
|
|
87
|
+
return {
|
|
88
|
+
...e,
|
|
89
|
+
navStyle: t.navStyle
|
|
90
|
+
};
|
|
91
|
+
case o.LAYOUT_TYPE:
|
|
92
|
+
return {
|
|
93
|
+
...e,
|
|
94
|
+
layoutType: t.layoutType
|
|
95
|
+
};
|
|
96
|
+
case H:
|
|
97
|
+
return {
|
|
98
|
+
...e,
|
|
99
|
+
locale: t.payload
|
|
100
|
+
};
|
|
101
|
+
default:
|
|
102
|
+
return e;
|
|
103
|
+
}
|
|
104
|
+
}, oe = "ACTION_UPDATE_AUTH", ne = "ACTION_UPDATE_AUTH_AUTH", re = "ACTION_UPDATE_AUTH_USER", se = "ACTION_UPDATE_AUTH_AUTHENTICATED", ie = (e = {
|
|
105
|
+
authenticated: !1,
|
|
106
|
+
user: void 0,
|
|
107
|
+
auth: void 0
|
|
108
|
+
}, t) => {
|
|
109
|
+
switch (t.type) {
|
|
110
|
+
case oe:
|
|
111
|
+
return {
|
|
112
|
+
...e,
|
|
113
|
+
...t.payload
|
|
114
|
+
};
|
|
115
|
+
case ne:
|
|
116
|
+
return {
|
|
117
|
+
...e,
|
|
118
|
+
auth: t.payload.auth
|
|
119
|
+
};
|
|
120
|
+
case re:
|
|
121
|
+
return {
|
|
122
|
+
...e,
|
|
123
|
+
user: t.payload.user
|
|
124
|
+
};
|
|
125
|
+
case se:
|
|
126
|
+
return {
|
|
127
|
+
...e,
|
|
128
|
+
authenticated: t.payload.authenticated
|
|
129
|
+
};
|
|
130
|
+
default:
|
|
131
|
+
return e;
|
|
132
|
+
}
|
|
133
|
+
}, le = {
|
|
134
|
+
appPath: "/",
|
|
135
|
+
error: "",
|
|
136
|
+
loading: !1,
|
|
137
|
+
message: "",
|
|
138
|
+
navExpanded: !0,
|
|
139
|
+
width: typeof window < "u" ? window.innerWidth : 1920,
|
|
140
|
+
height: typeof window < "u" ? window.innerHeight : 1080,
|
|
141
|
+
content_width: null,
|
|
142
|
+
content_height: null,
|
|
143
|
+
pathname: "/",
|
|
144
|
+
componentsState: {},
|
|
145
|
+
headerToolBar: null,
|
|
146
|
+
headerToolBarReplace: !1,
|
|
147
|
+
navSize: "small",
|
|
148
|
+
// Panel settings with sidebar dimensions
|
|
149
|
+
// These values can be overridden by CSS variables at runtime
|
|
150
|
+
panelSettings: {
|
|
151
|
+
// Branding
|
|
152
|
+
appName: "Dash App",
|
|
153
|
+
horizontalLogo: /* @__PURE__ */ React.createElement(React.Fragment, null, "🖥"),
|
|
154
|
+
squaredLogo: /* @__PURE__ */ React.createElement(React.Fragment, null, "🖥"),
|
|
155
|
+
loginBackground: void 0,
|
|
156
|
+
// Sidebar dimensions (can be overridden via CSS variables)
|
|
157
|
+
sidebarLargeWidth: 255,
|
|
158
|
+
sidebarSmallWidth: 64,
|
|
159
|
+
sidebarHorizontalHeight: 120,
|
|
160
|
+
// Logo dimensions
|
|
161
|
+
logoVerticalMaxWidth: 130,
|
|
162
|
+
logoVerticalMaxHeight: 130,
|
|
163
|
+
logoHorizontalMaxWidth: 200,
|
|
164
|
+
logoHorizontalMaxHeight: 60,
|
|
165
|
+
// Content padding (derived from sidebar)
|
|
166
|
+
paddingHorizontal: 255,
|
|
167
|
+
paddingVertical: 120,
|
|
168
|
+
// Position
|
|
169
|
+
sidebarPosition: "left"
|
|
170
|
+
}
|
|
171
|
+
}, l = (e, t) => {
|
|
172
|
+
try {
|
|
173
|
+
E.setItem("dashNavExpanded", String(e)), E.setItem("dashNavSize", t);
|
|
174
|
+
} catch (n) {
|
|
175
|
+
console.error("Failed to save navigation state to localStorage:", n);
|
|
176
|
+
}
|
|
177
|
+
}, Ee = (e = le, t) => {
|
|
178
|
+
switch (t.type) {
|
|
179
|
+
case "@@router/LOCATION_CHANGE":
|
|
180
|
+
return {
|
|
181
|
+
...e,
|
|
182
|
+
pathname: t.payload.location.pathname
|
|
183
|
+
};
|
|
184
|
+
case "SET_COMPONENT_STATE":
|
|
185
|
+
return {
|
|
186
|
+
...e,
|
|
187
|
+
componentsState: {
|
|
188
|
+
...e.componentsState,
|
|
189
|
+
[t.componentId]: t.state
|
|
190
|
+
}
|
|
191
|
+
};
|
|
192
|
+
case "UNSET_COMPONENT_STATE":
|
|
193
|
+
let n = { ...e.componentsState };
|
|
194
|
+
return delete n[t.componentId], {
|
|
195
|
+
...e,
|
|
196
|
+
componentsState: n
|
|
197
|
+
// Fixed typo: was componentStates, should be componentsState
|
|
198
|
+
};
|
|
199
|
+
case y:
|
|
200
|
+
return {
|
|
201
|
+
...e,
|
|
202
|
+
headerToolBar: t.headerToolBar,
|
|
203
|
+
headerToolBarReplace: t.headerToolBarReplace ?? e.headerToolBarReplace
|
|
204
|
+
};
|
|
205
|
+
case D:
|
|
206
|
+
return {
|
|
207
|
+
...e,
|
|
208
|
+
panelSettings: { ...e.panelSettings, ...t.panelSettings }
|
|
209
|
+
};
|
|
210
|
+
case O:
|
|
211
|
+
return {
|
|
212
|
+
...e,
|
|
213
|
+
content_width: parseInt(t.width)
|
|
214
|
+
};
|
|
215
|
+
case L:
|
|
216
|
+
return {
|
|
217
|
+
...e,
|
|
218
|
+
content_height: parseInt(t.height)
|
|
219
|
+
};
|
|
220
|
+
case R:
|
|
221
|
+
return console.log("updating width", t.width, {
|
|
222
|
+
...e,
|
|
223
|
+
width: t.width
|
|
224
|
+
}), {
|
|
225
|
+
...e,
|
|
226
|
+
width: t.width
|
|
227
|
+
};
|
|
228
|
+
case K: {
|
|
229
|
+
const a = t.navExpanded;
|
|
230
|
+
return l(a, e.navSize), {
|
|
231
|
+
...e,
|
|
232
|
+
navExpanded: a
|
|
233
|
+
};
|
|
234
|
+
}
|
|
235
|
+
case "SET_NAV_EXPANDED": {
|
|
236
|
+
const a = t.payload;
|
|
237
|
+
return l(a, e.navSize), {
|
|
238
|
+
...e,
|
|
239
|
+
navExpanded: a
|
|
240
|
+
};
|
|
241
|
+
}
|
|
242
|
+
case "SET_NAV_SIZE": {
|
|
243
|
+
const a = t.payload;
|
|
244
|
+
return l(e.navExpanded, a), {
|
|
245
|
+
...e,
|
|
246
|
+
navSize: a
|
|
247
|
+
};
|
|
248
|
+
}
|
|
249
|
+
case q:
|
|
250
|
+
return { ...e, error: "", message: "", loading: !0 };
|
|
251
|
+
case j:
|
|
252
|
+
return { ...e, error: "", message: "", loading: !1 };
|
|
253
|
+
case J:
|
|
254
|
+
return { ...e, error: "", message: t.payload, loading: !1 };
|
|
255
|
+
case C:
|
|
256
|
+
return { ...e, loading: t.payload };
|
|
257
|
+
case $:
|
|
258
|
+
return { ...e, loading: !1, error: t.payload, message: "" };
|
|
259
|
+
case Q:
|
|
260
|
+
return { ...e, loading: !1, error: "", message: "" };
|
|
261
|
+
default:
|
|
262
|
+
return e;
|
|
263
|
+
}
|
|
264
|
+
}, I = "UPDATE_PAGE", ce = (e = {}, t) => t.type === I ? {
|
|
265
|
+
...e,
|
|
266
|
+
...t.payload
|
|
267
|
+
} : e, de = (e = { items: [] }, t) => {
|
|
268
|
+
switch (t.type) {
|
|
269
|
+
case T:
|
|
270
|
+
return {
|
|
271
|
+
items: [...t.payload]
|
|
272
|
+
};
|
|
273
|
+
case h:
|
|
274
|
+
return {
|
|
275
|
+
items: [...e.items, ...t.payload]
|
|
276
|
+
};
|
|
277
|
+
default:
|
|
278
|
+
return e;
|
|
279
|
+
}
|
|
280
|
+
}, g = {}, Te = (e = g, t) => {
|
|
281
|
+
switch (t.type) {
|
|
282
|
+
case Z:
|
|
283
|
+
return {
|
|
284
|
+
...e,
|
|
285
|
+
...t.payload
|
|
286
|
+
};
|
|
287
|
+
case X:
|
|
288
|
+
return g;
|
|
289
|
+
default:
|
|
290
|
+
return e;
|
|
291
|
+
}
|
|
292
|
+
}, ue = {}, P = b({
|
|
293
|
+
name: "menu",
|
|
294
|
+
initialState: ue,
|
|
295
|
+
reducers: {
|
|
296
|
+
// Deprecated - use common reducer actions instead
|
|
297
|
+
setNavExpanded(e, t) {
|
|
298
|
+
console.warn("menu/setNavExpanded is deprecated. Use common reducer actions instead.");
|
|
299
|
+
},
|
|
300
|
+
toggleNavExpanded(e) {
|
|
301
|
+
console.warn("menu/toggleNavExpanded is deprecated. Use common reducer actions instead.");
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
}), { setNavExpanded: it, toggleNavExpanded: lt } = P.actions, _e = P.reducer, _ = "SET_COMPONENT_DATA", S = "CLEAR_COMPONENT_DATA", p = "REMOVE_COMPONENT_DATA_KEY", A = "MERGE_COMPONENT_DATA", M = (e, t) => ({
|
|
305
|
+
type: _,
|
|
306
|
+
payload: { key: e, data: t }
|
|
307
|
+
}), Se = (e, t) => ({
|
|
308
|
+
type: A,
|
|
309
|
+
payload: { key: e, data: t }
|
|
310
|
+
}), pe = (e) => ({
|
|
311
|
+
type: p,
|
|
312
|
+
payload: { key: e }
|
|
313
|
+
}), f = () => ({
|
|
314
|
+
type: S
|
|
315
|
+
}), Ae = M, ge = f, m = {}, me = (e = m, t) => {
|
|
316
|
+
switch (t.type) {
|
|
317
|
+
case _:
|
|
318
|
+
return {
|
|
319
|
+
...e,
|
|
320
|
+
[t.payload.key]: {
|
|
321
|
+
...t.payload.data,
|
|
322
|
+
_timestamp: Date.now(),
|
|
323
|
+
// Add automatic timestamp
|
|
324
|
+
_version: "1.0"
|
|
325
|
+
// Add version for cache invalidation
|
|
326
|
+
}
|
|
327
|
+
};
|
|
328
|
+
case A:
|
|
329
|
+
const n = e[t.payload.key] || {};
|
|
330
|
+
return {
|
|
331
|
+
...e,
|
|
332
|
+
[t.payload.key]: {
|
|
333
|
+
...n,
|
|
334
|
+
...t.payload.data,
|
|
335
|
+
_timestamp: Date.now(),
|
|
336
|
+
_version: n._version || "1.0"
|
|
337
|
+
}
|
|
338
|
+
};
|
|
339
|
+
case p:
|
|
340
|
+
const a = { ...e };
|
|
341
|
+
return delete a[t.payload.key], a;
|
|
342
|
+
case S:
|
|
343
|
+
return m;
|
|
344
|
+
default:
|
|
345
|
+
return e;
|
|
346
|
+
}
|
|
347
|
+
}, Ne = () => x({
|
|
348
|
+
//router: connectRouter(history),
|
|
349
|
+
page: ce,
|
|
350
|
+
settings: ae,
|
|
351
|
+
auth: ie,
|
|
352
|
+
common: Ee,
|
|
353
|
+
resources: de,
|
|
354
|
+
formData: Te,
|
|
355
|
+
menu: _e,
|
|
356
|
+
componentData: me
|
|
357
|
+
}), v = G(), he = N(v), U = V(), ye = [F, U, he], Et = (e) => {
|
|
358
|
+
const t = w(
|
|
359
|
+
Ne(
|
|
360
|
+
/*history*/
|
|
361
|
+
),
|
|
362
|
+
// root reducer with router state
|
|
363
|
+
e,
|
|
364
|
+
W(
|
|
365
|
+
z(
|
|
366
|
+
N(v),
|
|
367
|
+
...ye
|
|
368
|
+
)
|
|
369
|
+
)
|
|
370
|
+
);
|
|
371
|
+
return U.run(k, {}), t;
|
|
372
|
+
}, ct = {
|
|
373
|
+
authenticated: !1,
|
|
374
|
+
user: null,
|
|
375
|
+
auth: null
|
|
376
|
+
}, dt = {
|
|
377
|
+
title: "",
|
|
378
|
+
icon: null,
|
|
379
|
+
subTitle: ""
|
|
380
|
+
}, Tt = {
|
|
381
|
+
// Loading state
|
|
382
|
+
loading: !1,
|
|
383
|
+
// Navigation and layout
|
|
384
|
+
navStyle: i.panel.NAV_STYLE_FIXED,
|
|
385
|
+
layoutType: i.panel.LAYOUT_TYPE_FULL,
|
|
386
|
+
themeType: i.panel.THEME_TYPE_DARK,
|
|
387
|
+
themeColor: "",
|
|
388
|
+
isDirectionRTL: !1,
|
|
389
|
+
// Layout settings (dimensions, breakpoints, etc.)
|
|
390
|
+
layoutSettings: {
|
|
391
|
+
// Sidebar dimensions
|
|
392
|
+
sidebarLargeWidth: 255,
|
|
393
|
+
sidebarSmallWidth: 64,
|
|
394
|
+
sidebarHorizontalHeight: 120,
|
|
395
|
+
// Logo dimensions
|
|
396
|
+
logoVerticalMaxWidth: 130,
|
|
397
|
+
logoVerticalMaxHeight: 130,
|
|
398
|
+
logoHorizontalMaxWidth: 200,
|
|
399
|
+
logoHorizontalMaxHeight: 60,
|
|
400
|
+
// Content padding (based on sidebar)
|
|
401
|
+
paddingHorizontal: 255,
|
|
402
|
+
paddingVertical: 120,
|
|
403
|
+
// Breakpoints
|
|
404
|
+
mobileBreakpoint: 768,
|
|
405
|
+
tabletBreakpoint: 1024
|
|
406
|
+
},
|
|
407
|
+
// Localization
|
|
408
|
+
locale: "es",
|
|
409
|
+
availableLocales: [
|
|
410
|
+
{
|
|
411
|
+
locale: "es",
|
|
412
|
+
languageId: "spanish",
|
|
413
|
+
name: "Español",
|
|
414
|
+
icon: "es"
|
|
415
|
+
},
|
|
416
|
+
{
|
|
417
|
+
locale: "en",
|
|
418
|
+
languageId: "english",
|
|
419
|
+
name: "English",
|
|
420
|
+
icon: "en"
|
|
421
|
+
}
|
|
422
|
+
],
|
|
423
|
+
// Translations (populated by i18n provider)
|
|
424
|
+
translations: {}
|
|
425
|
+
}, De = () => r(
|
|
426
|
+
(e) => ({
|
|
427
|
+
navStyle: e.settings.navStyle,
|
|
428
|
+
layoutType: e.settings.layoutType,
|
|
429
|
+
themeType: e.settings.themeType,
|
|
430
|
+
layoutSettings: e.settings.layoutSettings,
|
|
431
|
+
navExpanded: e.common?.navExpanded ?? e.common?.navExpanded ?? !0,
|
|
432
|
+
navSize: e.common.navSize,
|
|
433
|
+
panelSettings: e.common.panelSettings
|
|
434
|
+
}),
|
|
435
|
+
s
|
|
436
|
+
), ut = () => r(
|
|
437
|
+
(e) => ({
|
|
438
|
+
authenticated: e.auth.authenticated,
|
|
439
|
+
user: e.auth.user
|
|
440
|
+
}),
|
|
441
|
+
s
|
|
442
|
+
), _t = () => r(
|
|
443
|
+
(e) => ({
|
|
444
|
+
groupIcons: e.settings.groupIcons,
|
|
445
|
+
locale: e.settings.locale,
|
|
446
|
+
themeColor: e.settings.themeColor,
|
|
447
|
+
availableLocales: e.settings.availableLocales,
|
|
448
|
+
isDirectionRTL: e.settings.isDirectionRTL
|
|
449
|
+
}),
|
|
450
|
+
s
|
|
451
|
+
), Y = () => r(
|
|
452
|
+
(e) => ({
|
|
453
|
+
appPath: e.common.appPath,
|
|
454
|
+
width: e.common.width,
|
|
455
|
+
height: e.common.height,
|
|
456
|
+
headerToolBar: e.common.headerToolBar,
|
|
457
|
+
panelSettings: e.common.panelSettings
|
|
458
|
+
}),
|
|
459
|
+
s
|
|
460
|
+
), St = () => r(
|
|
461
|
+
(e) => ({
|
|
462
|
+
title: e.page.title,
|
|
463
|
+
icon: e.page.icon,
|
|
464
|
+
subTitle: e.page.subTitle
|
|
465
|
+
}),
|
|
466
|
+
s
|
|
467
|
+
), pt = () => r(
|
|
468
|
+
(e) => ({
|
|
469
|
+
items: e.resources.items
|
|
470
|
+
}),
|
|
471
|
+
s
|
|
472
|
+
), Re = () => {
|
|
473
|
+
const { panelSettings: e } = Y();
|
|
474
|
+
return d(() => ({
|
|
475
|
+
horizontalLogo: e?.horizontalLogo || /* @__PURE__ */ React.createElement(React.Fragment, null),
|
|
476
|
+
squaredLogo: e?.squaredLogo || /* @__PURE__ */ React.createElement(React.Fragment, null),
|
|
477
|
+
loginBackground: e?.loginBackground
|
|
478
|
+
}), [e]);
|
|
479
|
+
}, At = () => {
|
|
480
|
+
const { panelSettings: e } = Y();
|
|
481
|
+
return d(() => ({
|
|
482
|
+
// Sidebar position: 'left' | 'right' | 'top' | 'bottom'
|
|
483
|
+
sidebarPosition: e?.sidebarPosition || "left",
|
|
484
|
+
// Sidebar dimensions
|
|
485
|
+
sidebarLargeWidth: e?.sidebarLargeWidth || 255,
|
|
486
|
+
sidebarSmallWidth: e?.sidebarSmallWidth || 60,
|
|
487
|
+
sidebarHorizontalHeight: e?.sidebarHorizontalHeight || 120,
|
|
488
|
+
// Logo dimensions for vertical sidebar (left/right)
|
|
489
|
+
logoVerticalMaxWidth: e?.logoVerticalMaxWidth || 130,
|
|
490
|
+
logoVerticalMaxHeight: e?.logoVerticalMaxHeight || 130,
|
|
491
|
+
// Logo dimensions for horizontal sidebar (top/bottom)
|
|
492
|
+
logoHorizontalMaxWidth: e?.logoHorizontalMaxWidth || 200,
|
|
493
|
+
logoHorizontalMaxHeight: e?.logoHorizontalMaxHeight || 60,
|
|
494
|
+
// Padding configuration
|
|
495
|
+
paddingHorizontal: e?.paddingHorizontal || 255,
|
|
496
|
+
paddingVertical: e?.paddingVertical || 120,
|
|
497
|
+
// App name
|
|
498
|
+
appName: e?.appName || "DASH"
|
|
499
|
+
}), [e]);
|
|
500
|
+
}, gt = () => {
|
|
501
|
+
const e = De(), t = Re();
|
|
502
|
+
return d(() => ({
|
|
503
|
+
...e,
|
|
504
|
+
...t
|
|
505
|
+
}), [e, t]);
|
|
506
|
+
}, mt = () => r(
|
|
507
|
+
(e) => ({
|
|
508
|
+
navExpanded: e.common?.navExpanded ?? e.common?.navExpanded ?? !0,
|
|
509
|
+
navSize: e.common.navSize,
|
|
510
|
+
navStyle: e.settings.navStyle,
|
|
511
|
+
layoutSettings: e.settings.layoutSettings
|
|
512
|
+
}),
|
|
513
|
+
s
|
|
514
|
+
);
|
|
515
|
+
function Oe(e) {
|
|
516
|
+
return { type: C, loading: e };
|
|
517
|
+
}
|
|
518
|
+
const Le = (e, t) => ({
|
|
519
|
+
type: "SET_COMPONENT_STATE",
|
|
520
|
+
componentId: e,
|
|
521
|
+
state: t
|
|
522
|
+
}), He = (e) => ({
|
|
523
|
+
type: "UNSET_COMPONENT_STATE",
|
|
524
|
+
componentId: e
|
|
525
|
+
}), Ce = (e, t) => ({
|
|
526
|
+
type: y,
|
|
527
|
+
headerToolBar: e,
|
|
528
|
+
headerToolBarReplace: t ?? !1
|
|
529
|
+
}), Ie = (e) => ({
|
|
530
|
+
type: D,
|
|
531
|
+
panelSettings: e
|
|
532
|
+
}), Pe = (e) => ({
|
|
533
|
+
type: ee,
|
|
534
|
+
payload: e
|
|
535
|
+
}), Me = (e) => ({
|
|
536
|
+
type: te,
|
|
537
|
+
payload: e
|
|
538
|
+
});
|
|
539
|
+
function fe(e) {
|
|
540
|
+
return console.log("dash theme type", e), E.setItem("theme", e), { type: o.THEME_TYPE, themeType: e };
|
|
541
|
+
}
|
|
542
|
+
function ve(e) {
|
|
543
|
+
return (t) => {
|
|
544
|
+
t({ type: R, width: e });
|
|
545
|
+
};
|
|
546
|
+
}
|
|
547
|
+
function Ue(e) {
|
|
548
|
+
return (t) => {
|
|
549
|
+
t({ type: O, width: e });
|
|
550
|
+
};
|
|
551
|
+
}
|
|
552
|
+
function Ye(e) {
|
|
553
|
+
return (t) => {
|
|
554
|
+
t({ type: L, height: e });
|
|
555
|
+
};
|
|
556
|
+
}
|
|
557
|
+
function Ve(e) {
|
|
558
|
+
return (t) => {
|
|
559
|
+
t({ type: o.THEME_TYPE, themeType: e });
|
|
560
|
+
};
|
|
561
|
+
}
|
|
562
|
+
function xe(e) {
|
|
563
|
+
return (t) => {
|
|
564
|
+
t({ type: o.THEME_COLOR, themeColor: e });
|
|
565
|
+
};
|
|
566
|
+
}
|
|
567
|
+
function we(e) {
|
|
568
|
+
return (t) => {
|
|
569
|
+
t({ type: o.UPDATE_RTL_STATUS, rtlStatus: e });
|
|
570
|
+
};
|
|
571
|
+
}
|
|
572
|
+
function We(e) {
|
|
573
|
+
return (t) => {
|
|
574
|
+
t({ type: o.NAV_STYLE, navStyle: e });
|
|
575
|
+
};
|
|
576
|
+
}
|
|
577
|
+
function ze(e) {
|
|
578
|
+
return (t) => {
|
|
579
|
+
t({ type: o.LAYOUT_TYPE, layoutType: e });
|
|
580
|
+
};
|
|
581
|
+
}
|
|
582
|
+
function Be(e) {
|
|
583
|
+
return (t) => {
|
|
584
|
+
t({
|
|
585
|
+
type: H,
|
|
586
|
+
payload: e
|
|
587
|
+
});
|
|
588
|
+
};
|
|
589
|
+
}
|
|
590
|
+
function be(e, t) {
|
|
591
|
+
return (n) => {
|
|
592
|
+
n({
|
|
593
|
+
type: u,
|
|
594
|
+
payload: { width: e, expandedWidth: t }
|
|
595
|
+
});
|
|
596
|
+
};
|
|
597
|
+
}
|
|
598
|
+
function Ge(e) {
|
|
599
|
+
return {
|
|
600
|
+
type: u,
|
|
601
|
+
payload: e
|
|
602
|
+
};
|
|
603
|
+
}
|
|
604
|
+
function Fe(e, t) {
|
|
605
|
+
return { type: e, payload: t };
|
|
606
|
+
}
|
|
607
|
+
function ke(e) {
|
|
608
|
+
return { type: I, payload: e };
|
|
609
|
+
}
|
|
610
|
+
function Ze(e) {
|
|
611
|
+
return (t) => {
|
|
612
|
+
t({
|
|
613
|
+
type: T,
|
|
614
|
+
payload: e
|
|
615
|
+
});
|
|
616
|
+
};
|
|
617
|
+
}
|
|
618
|
+
function Xe(e) {
|
|
619
|
+
return (t) => {
|
|
620
|
+
t({
|
|
621
|
+
type: h,
|
|
622
|
+
payload: e
|
|
623
|
+
});
|
|
624
|
+
};
|
|
625
|
+
}
|
|
626
|
+
const Nt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
627
|
+
__proto__: null,
|
|
628
|
+
CLEAR_COMPONENT_DATA: S,
|
|
629
|
+
MERGE_COMPONENT_DATA: A,
|
|
630
|
+
REMOVE_COMPONENT_DATA_KEY: p,
|
|
631
|
+
SET_COMPONENT_DATA: _,
|
|
632
|
+
appendResources: Xe,
|
|
633
|
+
clearComponentData: f,
|
|
634
|
+
clearCustomData: ge,
|
|
635
|
+
loading: Oe,
|
|
636
|
+
mergeComponentData: Se,
|
|
637
|
+
onLayoutTypeChange: ze,
|
|
638
|
+
onNavStyleChange: We,
|
|
639
|
+
removeComponentDataKey: pe,
|
|
640
|
+
setComponentData: M,
|
|
641
|
+
setComponentState: Le,
|
|
642
|
+
setCustomData: Ae,
|
|
643
|
+
setDirectionRTL: we,
|
|
644
|
+
setHeaderComponent: Ce,
|
|
645
|
+
setNavExpanded: Pe,
|
|
646
|
+
setNavSize: Me,
|
|
647
|
+
setPanelSettings: Ie,
|
|
648
|
+
setResources: Ze,
|
|
649
|
+
setSidebarProps: be,
|
|
650
|
+
setThemeColor: xe,
|
|
651
|
+
setThemeType: Ve,
|
|
652
|
+
switchLanguage: Be,
|
|
653
|
+
toggleThemeType: fe,
|
|
654
|
+
unsetComponentState: He,
|
|
655
|
+
updateAuth: Fe,
|
|
656
|
+
updateContentHeight: Ye,
|
|
657
|
+
updateContentWidth: Ue,
|
|
658
|
+
updatePage: ke,
|
|
659
|
+
updateThemeSettings: Ge,
|
|
660
|
+
updateWindowWidth: ve
|
|
661
|
+
}, Symbol.toStringTag, { value: "Module" }));
|
|
662
|
+
let c = null;
|
|
663
|
+
const ht = (e) => {
|
|
664
|
+
c = e;
|
|
665
|
+
}, Ke = () => {
|
|
666
|
+
if (!c)
|
|
667
|
+
throw new Error("Redux store not initialized. Call setReduxStore first.");
|
|
668
|
+
return c;
|
|
669
|
+
}, yt = (e) => Ke().dispatch(e);
|
|
670
|
+
export {
|
|
671
|
+
Ne as DASHCreateRootReducer,
|
|
672
|
+
Et as DASHStoreConfig,
|
|
673
|
+
Nt as DASH_REDUX_ACTIONS,
|
|
674
|
+
o as DASH_THEME_SETTINGS,
|
|
675
|
+
ct as defaultAuth,
|
|
676
|
+
le as defaultCommon,
|
|
677
|
+
g as defaultFormState,
|
|
678
|
+
dt as defaultPageSettings,
|
|
679
|
+
Tt as defaultSettings,
|
|
680
|
+
yt as dispatchToRedux,
|
|
681
|
+
Ke as getReduxStore,
|
|
682
|
+
ht as setReduxStore,
|
|
683
|
+
ut as useAuthState,
|
|
684
|
+
Y as useCommonState,
|
|
685
|
+
De as useLayoutState,
|
|
686
|
+
Re as useLogoSettings,
|
|
687
|
+
mt as useNavigationState,
|
|
688
|
+
St as usePageState,
|
|
689
|
+
At as usePanelSettings,
|
|
690
|
+
pt as useResourcesState,
|
|
691
|
+
_t as useSettingsState,
|
|
692
|
+
gt as useThemeState
|
|
693
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@dashadmin/dash-admin-state",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "dash-admin-state — DASH framework package",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "Francisco Aranda <farandal@gmail.com>",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"main": "index.js",
|
|
9
|
+
"module": "index.js",
|
|
10
|
+
"types": "index.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"types": "./index.d.ts",
|
|
14
|
+
"import": "./index.js"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"**/*"
|
|
19
|
+
],
|
|
20
|
+
"sideEffects": false,
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"connected-react-router": "latest",
|
|
23
|
+
"@dashadmin/dash-auto-admin": "^1.0.0",
|
|
24
|
+
"@dashadmin/dash-constants": "^1.0.0",
|
|
25
|
+
"@dashadmin/dash-utils": "^1.0.0",
|
|
26
|
+
"history": "latest",
|
|
27
|
+
"react-redux": "latest",
|
|
28
|
+
"redux-saga": "latest",
|
|
29
|
+
"redux-thunk": "^3.1.0"
|
|
30
|
+
},
|
|
31
|
+
"publishConfig": {
|
|
32
|
+
"access": "public"
|
|
33
|
+
},
|
|
34
|
+
"engines": {
|
|
35
|
+
"node": ">=18"
|
|
36
|
+
}
|
|
37
|
+
}
|