@dashadmin/dash-app-common 1.3.51 → 1.3.53

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.
@@ -5,11 +5,13 @@ import { Box } from "@mui/material";
5
5
  const DashDefaultRouteLoader = () => /* @__PURE__ */ jsx(
6
6
  Box,
7
7
  {
8
- display: "flex",
9
- justifyContent: "center",
10
- alignItems: "center",
11
- minHeight: "200px",
12
- sx: { color: "var(--text-color, inherit)" },
8
+ sx: {
9
+ display: "flex",
10
+ justifyContent: "center",
11
+ alignItems: "center",
12
+ minHeight: "200px",
13
+ color: "var(--text-color, inherit)"
14
+ },
13
15
  children: "Loading..."
14
16
  }
15
17
  );
@@ -265,7 +265,17 @@ const DefaultSignUpPage = (props) => {
265
265
  ] }),
266
266
  /* @__PURE__ */ jsx("div", { className: "dash-app-form-item", children: /* @__PURE__ */ jsxs(FormControl, { component: "fieldset", fullWidth: true, children: [
267
267
  /* @__PURE__ */ jsx(FormLabel, { component: "legend", children: /* @__PURE__ */ jsx(Typography, { variant: isMobile ? "h6" : "h5", gutterBottom: true, children: "Choose Your Plan" }) }),
268
- plansLoading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: 2, children: /* @__PURE__ */ jsx(Typography, { children: "Loading plans..." }) }) : /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: plans.map((plan) => /* @__PURE__ */ jsx(Grid, { size: { xs: 12, sm: 6, md: 4 }, children: /* @__PURE__ */ jsx(
268
+ plansLoading ? /* @__PURE__ */ jsx(
269
+ Box,
270
+ {
271
+ sx: {
272
+ display: "flex",
273
+ justifyContent: "center",
274
+ p: 2
275
+ },
276
+ children: /* @__PURE__ */ jsx(Typography, { children: "Loading plans..." })
277
+ }
278
+ ) : /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: plans.map((plan) => /* @__PURE__ */ jsx(Grid, { size: { xs: 12, sm: 6, md: 4 }, children: /* @__PURE__ */ jsx(
269
279
  Card,
270
280
  {
271
281
  variant: selectedPlan === plan.id ? "outlined" : "elevation",
@@ -278,10 +288,20 @@ const DefaultSignUpPage = (props) => {
278
288
  },
279
289
  onClick: () => handlePlanSelection(plan.id),
280
290
  children: /* @__PURE__ */ jsxs(CardContent, { children: [
281
- /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mb: 2, children: [
282
- /* @__PURE__ */ jsx(Typography, { variant: "h6", children: plan.name }),
283
- selectedPlan === plan.id && /* @__PURE__ */ jsx(CheckCircleIcon, { color: "primary", sx: { ml: "auto" } })
284
- ] }),
291
+ /* @__PURE__ */ jsxs(
292
+ Box,
293
+ {
294
+ sx: {
295
+ display: "flex",
296
+ alignItems: "center",
297
+ mb: 2
298
+ },
299
+ children: [
300
+ /* @__PURE__ */ jsx(Typography, { variant: "h6", children: plan.name }),
301
+ selectedPlan === plan.id && /* @__PURE__ */ jsx(CheckCircleIcon, { color: "primary", sx: { ml: "auto" } })
302
+ ]
303
+ }
304
+ ),
285
305
  /* @__PURE__ */ jsxs(Typography, { variant: "h4", color: "primary", gutterBottom: true, children: [
286
306
  "$",
287
307
  formatPrice(plan.price, plan.billing_cycle)
@@ -301,9 +321,11 @@ const DefaultSignUpPage = (props) => {
301
321
  required: true,
302
322
  fullWidth: true
303
323
  }, register("email", { required: "Email is required" })), {
304
- inputProps: { type: "email" },
305
324
  error: !!errors.email,
306
- helperText: (_a = errors.email) == null ? void 0 : _a.message
325
+ helperText: (_a = errors.email) == null ? void 0 : _a.message,
326
+ slotProps: {
327
+ htmlInput: { type: "email" }
328
+ }
307
329
  })
308
330
  ) }),
309
331
  /* @__PURE__ */ jsx("div", { className: "dash-app-form-item", children: /* @__PURE__ */ jsx(
@@ -39,7 +39,9 @@ const DefaultSignUpSuccessPage = (props) => {
39
39
  }
40
40
  ),
41
41
  /* @__PURE__ */ jsx(Typography, { variant: "h4", component: "h1", gutterBottom: true, children: "Account Created Successfully!" }),
42
- /* @__PURE__ */ jsxs(Typography, { variant: "body1", color: "textSecondary", paragraph: true, children: [
42
+ /* @__PURE__ */ jsxs(Typography, { variant: "body1", color: "textSecondary", sx: {
43
+ marginBottom: "16px"
44
+ }, children: [
43
45
  "Thank you for signing up",
44
46
  (state == null ? void 0 : state.planName) ? ` for the ${state.planName} plan` : "",
45
47
  "."
@@ -58,7 +60,9 @@ const DefaultSignUpSuccessPage = (props) => {
58
60
  },
59
61
  children: [
60
62
  /* @__PURE__ */ jsx(EmailIcon, { sx: { mr: 1, color: "info.dark" } }),
61
- /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "info.dark", children: [
63
+ /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: {
64
+ color: "info.dark"
65
+ }, children: [
62
66
  "We've sent a verification email to ",
63
67
  /* @__PURE__ */ jsx("strong", { children: (state == null ? void 0 : state.email) || "your email address" }),
64
68
  ". Please check your inbox and verify your email to complete the registration."
@@ -66,7 +70,9 @@ const DefaultSignUpSuccessPage = (props) => {
66
70
  ]
67
71
  }
68
72
  ),
69
- /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", paragraph: true, children: "If you don't see the email, please check your spam folder or request a new verification email." }),
73
+ /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", sx: {
74
+ marginBottom: "16px"
75
+ }, children: "If you don't see the email, please check your spam folder or request a new verification email." }),
70
76
  /* @__PURE__ */ jsxs(Box, { sx: { mt: 4, display: "flex", flexDirection: "column", gap: 2 }, children: [
71
77
  /* @__PURE__ */ jsx(
72
78
  Button,
@@ -164,19 +164,21 @@ const LoginPage = () => {
164
164
  placeholder: "Contrase\xF1a"
165
165
  }, register("password")), {
166
166
  className: "dash-app-form-item-input",
167
- InputProps: {
168
- autoComplete: "password",
169
- type: showPassword ? "text" : "password",
170
- endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
171
- IconButton,
172
- {
173
- "aria-label": "toggle password visibility",
174
- onClick: handleClickShowPassword,
175
- onMouseDown: handleMouseDownPassword,
176
- edge: "end",
177
- children: showPassword ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {})
178
- }
179
- ) })
167
+ slotProps: {
168
+ input: {
169
+ autoComplete: "password",
170
+ type: showPassword ? "text" : "password",
171
+ endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
172
+ IconButton,
173
+ {
174
+ "aria-label": "toggle password visibility",
175
+ onClick: handleClickShowPassword,
176
+ onMouseDown: handleMouseDownPassword,
177
+ edge: "end",
178
+ children: showPassword ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {})
179
+ }
180
+ ) })
181
+ }
180
182
  }
181
183
  })
182
184
  ),
@@ -42,7 +42,9 @@ const DefaultNotFound = ({
42
42
  ),
43
43
  /* @__PURE__ */ jsx(Typography, { variant: "h1", component: "h1", sx: { fontWeight: "bold", mb: 2 }, children: "404" }),
44
44
  /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", gutterBottom: true, children: title }),
45
- /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary", paragraph: true, children: message }),
45
+ /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary", sx: {
46
+ marginBottom: "16px"
47
+ }, children: message }),
46
48
  /* @__PURE__ */ jsxs(Box, { sx: { mt: 4, display: "flex", justifyContent: "center", gap: 2, flexWrap: "wrap" }, children: [
47
49
  showBackButton && /* @__PURE__ */ jsx(
48
50
  Button,
@@ -47,7 +47,9 @@ const DefaultServerError = ({
47
47
  ),
48
48
  /* @__PURE__ */ jsx(Typography, { variant: "h1", component: "h1", sx: { fontWeight: "bold", mb: 2 }, children: "500" }),
49
49
  /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", gutterBottom: true, children: title }),
50
- /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary", paragraph: true, children: message }),
50
+ /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary", sx: {
51
+ marginBottom: "16px"
52
+ }, children: message }),
51
53
  /* @__PURE__ */ jsxs(Box, { sx: { mt: 4, display: "flex", justifyContent: "center", gap: 2, flexWrap: "wrap" }, children: [
52
54
  showRetryButton && /* @__PURE__ */ jsx(
53
55
  Button,
@@ -48,7 +48,9 @@ const DefaultUnauthorized = ({
48
48
  ),
49
49
  /* @__PURE__ */ jsx(Typography, { variant: "h1", component: "h1", sx: { fontWeight: "bold", mb: 2 }, children: "403" }),
50
50
  /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", gutterBottom: true, children: title }),
51
- /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary", paragraph: true, children: message }),
51
+ /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary", sx: {
52
+ marginBottom: "16px"
53
+ }, children: message }),
52
54
  /* @__PURE__ */ jsxs(Box, { sx: { mt: 4, display: "flex", justifyContent: "center", gap: 2, flexWrap: "wrap" }, children: [
53
55
  showBackButton && /* @__PURE__ */ jsx(
54
56
  Button,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dashadmin/dash-app-common",
3
- "version": "1.3.51",
3
+ "version": "1.3.53",
4
4
  "description": "Common defaults and utilities for Dash applications - provides pre-configured components, extensions, pages, filters, and schemas",
5
5
  "main": "dist/index.js",
6
6
  "type": "module",
@@ -26,8 +26,8 @@
26
26
  ]
27
27
  },
28
28
  "dependencies": {
29
- "react": "latest",
30
- "react-dom": "latest",
29
+ "react": "19.2.8",
30
+ "react-dom": "19.2.8",
31
31
  "react-redux": "latest",
32
32
  "react-router-dom": "^7.9.6",
33
33
  "@dashadmin/dash-utils": "workspace:*",
@@ -11,12 +11,13 @@ import { Box } from '@mui/material';
11
11
  // Loading fallback component
12
12
  const DashDefaultRouteLoader = () => (
13
13
  <Box
14
- display="flex"
15
- justifyContent="center"
16
- alignItems="center"
17
- minHeight="200px"
18
- sx={{ color: 'var(--text-color, inherit)' }}
19
- >
14
+ sx={{
15
+ display: "flex",
16
+ justifyContent: "center",
17
+ alignItems: "center",
18
+ minHeight: "200px",
19
+ color: 'var(--text-color, inherit)'
20
+ }}>
20
21
  Loading...
21
22
  </Box>
22
23
  );
@@ -301,7 +301,12 @@ const DefaultSignUpPage: React.FC<DefaultSignUpPageProps> = (props) => {
301
301
  </FormLabel>
302
302
 
303
303
  {plansLoading ? (
304
- <Box display="flex" justifyContent="center" p={2}>
304
+ <Box
305
+ sx={{
306
+ display: "flex",
307
+ justifyContent: "center",
308
+ p: 2
309
+ }}>
305
310
  <Typography>Loading plans...</Typography>
306
311
  </Box>
307
312
  ) : (
@@ -320,7 +325,12 @@ const DefaultSignUpPage: React.FC<DefaultSignUpPageProps> = (props) => {
320
325
  onClick={() => handlePlanSelection(plan.id)}
321
326
  >
322
327
  <CardContent>
323
- <Box display="flex" alignItems="center" mb={2}>
328
+ <Box
329
+ sx={{
330
+ display: "flex",
331
+ alignItems: "center",
332
+ mb: 2
333
+ }}>
324
334
  <Typography variant="h6">{plan.name}</Typography>
325
335
  {selectedPlan === plan.id && (
326
336
  <CheckCircleIcon color="primary" sx={{ ml: 'auto' }} />
@@ -359,9 +369,11 @@ const DefaultSignUpPage: React.FC<DefaultSignUpPageProps> = (props) => {
359
369
  required
360
370
  fullWidth
361
371
  {...register('email', { required: 'Email is required' })}
362
- inputProps={{ type: 'email' }}
363
372
  error={!!errors.email}
364
373
  helperText={errors.email?.message}
374
+ slotProps={{
375
+ htmlInput: { type: 'email' }
376
+ }}
365
377
  />
366
378
  </div>
367
379
 
@@ -59,7 +59,9 @@ const DefaultSignUpSuccessPage: React.FC<DefaultSignUpSuccessPageProps> = (props
59
59
  Account Created Successfully!
60
60
  </Typography>
61
61
 
62
- <Typography variant="body1" color="textSecondary" paragraph>
62
+ <Typography variant="body1" color="textSecondary" sx={{
63
+ marginBottom: "16px"
64
+ }}>
63
65
  Thank you for signing up{state?.planName ? ` for the ${state.planName} plan` : ''}.
64
66
  </Typography>
65
67
 
@@ -75,13 +77,17 @@ const DefaultSignUpSuccessPage: React.FC<DefaultSignUpSuccessPageProps> = (props
75
77
  }}
76
78
  >
77
79
  <EmailIcon sx={{ mr: 1, color: 'info.dark' }} />
78
- <Typography variant="body2" color="info.dark">
80
+ <Typography variant="body2" sx={{
81
+ color: "info.dark"
82
+ }}>
79
83
  We've sent a verification email to <strong>{state?.email || 'your email address'}</strong>.
80
84
  Please check your inbox and verify your email to complete the registration.
81
85
  </Typography>
82
86
  </Box>
83
87
 
84
- <Typography variant="body2" color="textSecondary" paragraph>
88
+ <Typography variant="body2" color="textSecondary" sx={{
89
+ marginBottom: "16px"
90
+ }}>
85
91
  If you don't see the email, please check your spam folder or request a new verification email.
86
92
  </Typography>
87
93
 
@@ -119,11 +119,11 @@ const LoginPage: React.FC = () => {
119
119
  const banner = AuthPersistenceService.getTenantImages()?.banner?.original;
120
120
 
121
121
  return (
122
- <FullLayoutMarkup
122
+ <FullLayoutMarkup
123
123
  logo={horizontal_logo}
124
124
  loginBackground={banner}
125
125
  >
126
- <>
126
+ <>
127
127
  {!loggedIn ? (
128
128
  <form
129
129
  onSubmit={handleSubmit(onSubmit)}
@@ -154,22 +154,24 @@ const LoginPage: React.FC = () => {
154
154
  placeholder='Contraseña'
155
155
  {...register('password')}
156
156
  className='dash-app-form-item-input'
157
- InputProps={{
158
- autoComplete: 'password',
159
- type: showPassword ? 'text' : 'password',
160
- endAdornment: (
161
- <InputAdornment position='end'>
162
- <IconButton
163
- aria-label='toggle password visibility'
164
- onClick={handleClickShowPassword}
165
- onMouseDown={handleMouseDownPassword}
166
- edge='end'
167
- >
168
- {showPassword ? <VisibilityOff /> : <Visibility />}
169
- </IconButton>
170
- </InputAdornment>
171
- ),
172
- }}
157
+ slotProps={{
158
+ input: {
159
+ autoComplete: 'password',
160
+ type: showPassword ? 'text' : 'password',
161
+ endAdornment: (
162
+ <InputAdornment position='end'>
163
+ <IconButton
164
+ aria-label='toggle password visibility'
165
+ onClick={handleClickShowPassword}
166
+ onMouseDown={handleMouseDownPassword}
167
+ edge='end'
168
+ >
169
+ {showPassword ? <VisibilityOff /> : <Visibility />}
170
+ </IconButton>
171
+ </InputAdornment>
172
+ ),
173
+ }
174
+ }}
173
175
  />
174
176
  {errors.password && (
175
177
  <span style={{ color: 'red' }}>
@@ -217,8 +219,8 @@ const LoginPage: React.FC = () => {
217
219
  </>
218
220
  )}
219
221
  </>
220
- </FullLayoutMarkup>
221
- );
222
+ </FullLayoutMarkup>
223
+ );
222
224
  };
223
225
 
224
226
  export default LoginPage;
@@ -62,7 +62,9 @@ const DefaultNotFound: React.FC<DefaultNotFoundProps> = ({
62
62
  {title}
63
63
  </Typography>
64
64
 
65
- <Typography variant="body1" color="textSecondary" paragraph>
65
+ <Typography variant="body1" color="textSecondary" sx={{
66
+ marginBottom: "16px"
67
+ }}>
66
68
  {message}
67
69
  </Typography>
68
70
 
@@ -68,7 +68,9 @@ const DefaultServerError: React.FC<DefaultServerErrorProps> = ({
68
68
  {title}
69
69
  </Typography>
70
70
 
71
- <Typography variant="body1" color="textSecondary" paragraph>
71
+ <Typography variant="body1" color="textSecondary" sx={{
72
+ marginBottom: "16px"
73
+ }}>
72
74
  {message}
73
75
  </Typography>
74
76
 
@@ -71,7 +71,9 @@ const DefaultUnauthorized: React.FC<DefaultUnauthorizedProps> = ({
71
71
  {title}
72
72
  </Typography>
73
73
 
74
- <Typography variant="body1" color="textSecondary" paragraph>
74
+ <Typography variant="body1" color="textSecondary" sx={{
75
+ marginBottom: "16px"
76
+ }}>
75
77
  {message}
76
78
  </Typography>
77
79