@chimera-pe/mui-saas 3.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 +12 -0
- package/dist/mui-saas.js +160 -0
- package/dist/mui-saas.umd.cjs +1 -0
- package/package.json +53 -0
package/README.md
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
# React + Vite
|
|
2
|
+
|
|
3
|
+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
4
|
+
|
|
5
|
+
Currently, two official plugins are available:
|
|
6
|
+
|
|
7
|
+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
|
8
|
+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
9
|
+
|
|
10
|
+
## Expanding the ESLint configuration
|
|
11
|
+
|
|
12
|
+
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
package/dist/mui-saas.js
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
import { jsxs as m, jsx as s, Fragment as y } from "react/jsx-runtime";
|
|
2
|
+
import n from "prop-types";
|
|
3
|
+
import { useSaasStore as x, SaasApp as T } from "@chimera-pe/react-saas";
|
|
4
|
+
import { useEffect as u, useMemo as b, useState as j, useCallback as C } from "react";
|
|
5
|
+
import { useMediaQuery as N, createTheme as v, ThemeProvider as k, CssBaseline as M, Snackbar as R, Alert as d, Box as f, CircularProgress as S, AlertTitle as q } from "@mui/material";
|
|
6
|
+
import { grey as p } from "@mui/material/colors";
|
|
7
|
+
import { create as A } from "zustand";
|
|
8
|
+
import { useTranslate as h } from "react-polyglot";
|
|
9
|
+
const c = A((o) => ({
|
|
10
|
+
tema: "light",
|
|
11
|
+
notificaciones: [],
|
|
12
|
+
cambiarTema: (r) => {
|
|
13
|
+
o({
|
|
14
|
+
tema: r
|
|
15
|
+
});
|
|
16
|
+
},
|
|
17
|
+
mostrarNotificacion: (r) => {
|
|
18
|
+
o((i) => ({
|
|
19
|
+
notificaciones: [r, ...i.notificaciones]
|
|
20
|
+
}));
|
|
21
|
+
},
|
|
22
|
+
ocultarNotificacion: () => {
|
|
23
|
+
o((r) => ({
|
|
24
|
+
notificaciones: r.notificaciones.slice(1)
|
|
25
|
+
}));
|
|
26
|
+
}
|
|
27
|
+
})), g = ({ children: o }) => {
|
|
28
|
+
const r = c((a) => a.cambiarTema), i = N("(prefers-color-scheme: dark)"), t = c((a) => a.tema), e = x((a) => a.instancia);
|
|
29
|
+
u(() => {
|
|
30
|
+
r(i ? "dark" : "light");
|
|
31
|
+
}, [r, i]);
|
|
32
|
+
const l = b(() => v({
|
|
33
|
+
palette: {
|
|
34
|
+
mode: t,
|
|
35
|
+
primary: {
|
|
36
|
+
main: e.color.primary
|
|
37
|
+
},
|
|
38
|
+
secondary: {
|
|
39
|
+
main: e.color.secondary
|
|
40
|
+
},
|
|
41
|
+
error: {
|
|
42
|
+
main: e.color.error
|
|
43
|
+
},
|
|
44
|
+
warning: {
|
|
45
|
+
main: e.color.warning
|
|
46
|
+
},
|
|
47
|
+
info: {
|
|
48
|
+
main: e.color.info
|
|
49
|
+
},
|
|
50
|
+
success: {
|
|
51
|
+
main: e.color.success
|
|
52
|
+
},
|
|
53
|
+
...t === "light" && {
|
|
54
|
+
background: {
|
|
55
|
+
default: p.A200,
|
|
56
|
+
paper: p[100]
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
shape: {
|
|
61
|
+
borderRadius: 6
|
|
62
|
+
}
|
|
63
|
+
}), [t, e]);
|
|
64
|
+
return /* @__PURE__ */ m(k, { theme: l, children: [
|
|
65
|
+
/* @__PURE__ */ s(M, {}),
|
|
66
|
+
o
|
|
67
|
+
] });
|
|
68
|
+
};
|
|
69
|
+
g.propTypes = {
|
|
70
|
+
children: n.element.isRequired
|
|
71
|
+
};
|
|
72
|
+
const w = () => {
|
|
73
|
+
const o = h(), [r, i] = j(!1), t = c((a) => a.ocultarNotificacion), e = c((a) => a.notificaciones[0]);
|
|
74
|
+
u(() => {
|
|
75
|
+
i(!!e);
|
|
76
|
+
}, [e]);
|
|
77
|
+
const l = () => {
|
|
78
|
+
i(!1), t();
|
|
79
|
+
};
|
|
80
|
+
return /* @__PURE__ */ s(
|
|
81
|
+
R,
|
|
82
|
+
{
|
|
83
|
+
open: r,
|
|
84
|
+
message: e ? e.tipo === "default" && o(e == null ? void 0 : e.mensaje) : null,
|
|
85
|
+
autoHideDuration: 5e3,
|
|
86
|
+
onClose: l,
|
|
87
|
+
anchorOrigin: e && {
|
|
88
|
+
vertical: e == null ? void 0 : e.posicion.vertical,
|
|
89
|
+
horizontal: e == null ? void 0 : e.posicion.horizontal
|
|
90
|
+
},
|
|
91
|
+
children: e && (e == null ? void 0 : e.tipo) !== "default" && /* @__PURE__ */ s(d, { severity: e.tipo, children: o(e.mensaje) })
|
|
92
|
+
}
|
|
93
|
+
);
|
|
94
|
+
}, D = ({
|
|
95
|
+
aplicacion: o,
|
|
96
|
+
dev: r = !1,
|
|
97
|
+
redirectUri: i,
|
|
98
|
+
mensajes: t = {
|
|
99
|
+
en: {},
|
|
100
|
+
es: {}
|
|
101
|
+
},
|
|
102
|
+
children: e
|
|
103
|
+
}) => /* @__PURE__ */ s(
|
|
104
|
+
T,
|
|
105
|
+
{
|
|
106
|
+
aplicacion: o,
|
|
107
|
+
dev: r,
|
|
108
|
+
redirectUri: i,
|
|
109
|
+
mensajes: t,
|
|
110
|
+
children: /* @__PURE__ */ s(g, { children: /* @__PURE__ */ m(y, { children: [
|
|
111
|
+
e,
|
|
112
|
+
/* @__PURE__ */ s(w, {})
|
|
113
|
+
] }) })
|
|
114
|
+
}
|
|
115
|
+
);
|
|
116
|
+
D.propTypes = {
|
|
117
|
+
aplicacion: n.string.isRequired,
|
|
118
|
+
dev: n.bool,
|
|
119
|
+
redirectUri: n.string.isRequired,
|
|
120
|
+
mensajes: n.object,
|
|
121
|
+
children: n.element.isRequired
|
|
122
|
+
};
|
|
123
|
+
const Q = () => /* @__PURE__ */ s(f, { sx: {
|
|
124
|
+
display: "flex",
|
|
125
|
+
flexDirection: "column",
|
|
126
|
+
flexGrow: 1,
|
|
127
|
+
justifyContent: "center",
|
|
128
|
+
alignItems: "center"
|
|
129
|
+
}, children: /* @__PURE__ */ s(S, {}) }), z = ({ titulo: o, texto: r, align: i = "center", severity: t = "error" }) => {
|
|
130
|
+
const e = h();
|
|
131
|
+
return /* @__PURE__ */ s(f, { sx: {
|
|
132
|
+
display: "flex",
|
|
133
|
+
flexDirection: "column",
|
|
134
|
+
flexGrow: 1,
|
|
135
|
+
justifyContent: "center",
|
|
136
|
+
alignItems: i
|
|
137
|
+
}, children: /* @__PURE__ */ m(d, { severity: t, children: [
|
|
138
|
+
/* @__PURE__ */ s(q, { children: e(o) }),
|
|
139
|
+
r && e(r)
|
|
140
|
+
] }) });
|
|
141
|
+
};
|
|
142
|
+
z.propTypes = {
|
|
143
|
+
titulo: n.string.isRequired,
|
|
144
|
+
texto: n.string,
|
|
145
|
+
align: n.string,
|
|
146
|
+
severity: n.string
|
|
147
|
+
};
|
|
148
|
+
const U = () => {
|
|
149
|
+
const o = c((r) => r.mostrarNotificacion);
|
|
150
|
+
return C((r, i = "default", t = { vertical: "botton", horizontal: "center" }) => {
|
|
151
|
+
o({ mensaje: r, tipo: i, posicion: t });
|
|
152
|
+
}, [o]);
|
|
153
|
+
};
|
|
154
|
+
export {
|
|
155
|
+
Q as Cargando,
|
|
156
|
+
z as Mensaje,
|
|
157
|
+
D as MuiApp,
|
|
158
|
+
c as useMuiStore,
|
|
159
|
+
U as useNotificar
|
|
160
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("prop-types"),require("@chimera-pe/react-saas"),require("react"),require("@mui/material"),require("@mui/material/colors"),require("zustand"),require("react-polyglot")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","prop-types","@chimera-pe/react-saas","react","@mui/material","@mui/material/colors","zustand","react-polyglot"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i["mui-saas"]={},i.ReactJSX,i.PropTypes,i.ReactSaas,i.React,i.MuiMaterial,i.MuiMaterialColors,i.Zustand,i.ReactPolyglot))})(this,function(i,t,a,m,d,o,h,q,p){"use strict";const u=q.create(n=>({tema:"light",notificaciones:[],cambiarTema:r=>{n({tema:r})},mostrarNotificacion:r=>{n(s=>({notificaciones:[r,...s.notificaciones]}))},ocultarNotificacion:()=>{n(r=>({notificaciones:r.notificaciones.slice(1)}))}})),g=({children:n})=>{const r=u(l=>l.cambiarTema),s=o.useMediaQuery("(prefers-color-scheme: dark)"),c=u(l=>l.tema),e=m.useSaasStore(l=>l.instancia);d.useEffect(()=>{r(s?"dark":"light")},[r,s]);const f=d.useMemo(()=>o.createTheme({palette:{mode:c,primary:{main:e.color.primary},secondary:{main:e.color.secondary},error:{main:e.color.error},warning:{main:e.color.warning},info:{main:e.color.info},success:{main:e.color.success},...c==="light"&&{background:{default:h.grey.A200,paper:h.grey[100]}}},shape:{borderRadius:6}}),[c,e]);return t.jsxs(o.ThemeProvider,{theme:f,children:[t.jsx(o.CssBaseline,{}),n]})};g.propTypes={children:a.element.isRequired};const j=()=>{const n=p.useTranslate(),[r,s]=d.useState(!1),c=u(l=>l.ocultarNotificacion),e=u(l=>l.notificaciones[0]);d.useEffect(()=>{s(!!e)},[e]);const f=()=>{s(!1),c()};return t.jsx(o.Snackbar,{open:r,message:e?e.tipo==="default"&&n(e==null?void 0:e.mensaje):null,autoHideDuration:5e3,onClose:f,anchorOrigin:e&&{vertical:e==null?void 0:e.posicion.vertical,horizontal:e==null?void 0:e.posicion.horizontal},children:e&&(e==null?void 0:e.tipo)!=="default"&&t.jsx(o.Alert,{severity:e.tipo,children:n(e.mensaje)})})},y=({aplicacion:n,dev:r=!1,redirectUri:s,mensajes:c={en:{},es:{}},children:e})=>t.jsx(m.SaasApp,{aplicacion:n,dev:r,redirectUri:s,mensajes:c,children:t.jsx(g,{children:t.jsxs(t.Fragment,{children:[e,t.jsx(j,{})]})})});y.propTypes={aplicacion:a.string.isRequired,dev:a.bool,redirectUri:a.string.isRequired,mensajes:a.object,children:a.element.isRequired};const x=()=>t.jsx(o.Box,{sx:{display:"flex",flexDirection:"column",flexGrow:1,justifyContent:"center",alignItems:"center"},children:t.jsx(o.CircularProgress,{})}),M=({titulo:n,texto:r,align:s="center",severity:c="error"})=>{const e=p.useTranslate();return t.jsx(o.Box,{sx:{display:"flex",flexDirection:"column",flexGrow:1,justifyContent:"center",alignItems:s},children:t.jsxs(o.Alert,{severity:c,children:[t.jsx(o.AlertTitle,{children:e(n)}),r&&e(r)]})})};M.propTypes={titulo:a.string.isRequired,texto:a.string,align:a.string,severity:a.string};const C=()=>{const n=u(r=>r.mostrarNotificacion);return d.useCallback((r,s="default",c={vertical:"botton",horizontal:"center"})=>{n({mensaje:r,tipo:s,posicion:c})},[n])};i.Cargando=x,i.Mensaje=M,i.MuiApp=y,i.useMuiStore=u,i.useNotificar=C,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@chimera-pe/mui-saas",
|
|
3
|
+
"version": "3.0.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://git.chimera.com.pe/nodejs/mui-saas.git"
|
|
8
|
+
},
|
|
9
|
+
"keywords": [
|
|
10
|
+
"Chimera Software",
|
|
11
|
+
"MaterialUi",
|
|
12
|
+
"mui"
|
|
13
|
+
],
|
|
14
|
+
"main": "./dist/mui-saas.umd.cjs",
|
|
15
|
+
"module": "./dist/mui-saas.js",
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"import": "./dist/mui-saas.js",
|
|
19
|
+
"require": "./dist/mui-saas.umd.cjs"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"files": [
|
|
23
|
+
"dist"
|
|
24
|
+
],
|
|
25
|
+
"scripts": {
|
|
26
|
+
"dev": "vite",
|
|
27
|
+
"build": "vite build",
|
|
28
|
+
"lint": "eslint .",
|
|
29
|
+
"preview": "vite preview",
|
|
30
|
+
"prepare": "npm run build"
|
|
31
|
+
},
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"@chimera-pe/react-saas": "^3.0.3",
|
|
34
|
+
"@emotion/react": "^11.14.0",
|
|
35
|
+
"@emotion/styled": "^11.14.0",
|
|
36
|
+
"@mui/material": "^7.1.0",
|
|
37
|
+
"react": "^19.1.0",
|
|
38
|
+
"react-dom": "^19.1.0",
|
|
39
|
+
"react-polyglot": "^0.7.2",
|
|
40
|
+
"zustand": "^5.0.4"
|
|
41
|
+
},
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"@eslint/js": "^9.22.0",
|
|
44
|
+
"@types/react": "^19.1.4",
|
|
45
|
+
"@types/react-dom": "^19.1.5",
|
|
46
|
+
"@vitejs/plugin-react": "^4.4.1",
|
|
47
|
+
"eslint": "^9.27.0",
|
|
48
|
+
"eslint-plugin-react-hooks": "^5.2.0",
|
|
49
|
+
"eslint-plugin-react-refresh": "^0.4.20",
|
|
50
|
+
"globals": "^16.1.0",
|
|
51
|
+
"vite": "^6.3.5"
|
|
52
|
+
}
|
|
53
|
+
}
|