Se agrega detección de idioma

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chimera-pe/react-saas",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,36 +11,37 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.1",
+    "@mui/icons-material": "^5.14.8",
-    "@mui/lab": "^5.0.0-alpha.137",
+    "@mui/lab": "^5.0.0-alpha.143",
-    "@mui/material": "^5.14.1",
+    "@mui/material": "^5.14.8",
-    "@mui/x-date-pickers": "^6.10.1",
+    "@mui/x-date-pickers": "^6.12.1",
     "@reduxjs/toolkit": "^1.9.5",
-    "axios": "^1.4.0",
+    "axios": "^1.5.0",
     "date-fns": "^2.30.0",
-    "final-form": "^4.20.9",
+    "final-form": "^4.20.10",
     "jwt-decode": "^3.1.2",
-    "mui-rff": "^6.2.0",
+    "mui-rff": "^6.2.3",
+    "navigator-languages": "^2.0.2",
     "react": ">=18",
     "react-dom": ">=18",
     "react-final-form": "^6.5.9",
     "react-polyglot": "^0.7.2",
-    "react-redux": "^8.1.1",
+    "react-redux": "^8.1.2",
-    "react-router-dom": "^6.14.2"
+    "react-router-dom": "^6.15.0"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@types/react": "^18.2.14",
+    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.6",
+    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.1",
+    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.44.0",
+    "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.1",
+    "eslint-plugin-react-refresh": "^0.4.3",
-    "vite": "^4.4.0"
+    "vite": "^4.4.5"
   },
   "description": "Componente integrador con SaaS",
   "main": "./dist/react-saas.umd.cjs",

src/components/Idioma.jsx

@@ -5,13 +5,14 @@ import {I18n} from "react-polyglot";
 import {enGB,es} from "date-fns/locale"
 import {LocalizationProvider} from "@mui/x-date-pickers";
 import {AdapterDateFns} from "@mui/x-date-pickers/AdapterDateFns";
+import navigatorLanguages from "navigator-languages";
 import {cambiarIdioma} from "../redux";
 import saasMessages from "../i18n";
 
-const supportedLocales={en: enGB,es};
+const supportedLocales = {en: enGB,es};
 
-const IdiomaInner=({messages,children}) => {
+const IdiomaInner = ({messages,children}) => {
-	const idioma=useSelector(store => store.ui.idioma);
+	const idioma = useSelector(store => store.ui.idioma);
 
 	return (
 		<I18n locale={idioma} messages={messages[idioma]}>
@@ -22,23 +23,41 @@ const IdiomaInner=({messages,children}) => {
 	);
 };
 
-IdiomaInner.propTypes={
+IdiomaInner.propTypes = {
 	messages: PropTypes.object,
 	children: PropTypes.element.isRequired
 };
 
-const Idioma=({messages,idioma,children}) => {
+const getIdiomaNavegador = () => {
-	const dispatch=useDispatch();
+	const idiomas = navigatorLanguages();
+	if(!idiomas?.length) {
+		return undefined;
+	}
+	const idioma = idiomas[0];
+	if(idioma.indexOf("-")) {
+		return idioma.substring(0,idioma.indexOf("-"));
+	}
+	return idioma;
+};
+
+const Idioma = ({messages,idiomaDefecto,children}) => {
+	const dispatch = useDispatch();
+	const idiomaNavegador = getIdiomaNavegador();
 
 	useEffect(() => {
-		if(idioma){
+		let idioma = Reflect.ownKeys(messages)[0];
-			dispatch(cambiarIdioma(idioma));
+		if(idiomaNavegador && Object.hasOwn(messages,idiomaNavegador)) {
+			idioma = idiomaNavegador;
 		}
-	},[dispatch,idioma]);
+		else if(idiomaDefecto && Object.hasOwn(messages,idiomaDefecto)) {
+			idioma = idiomaDefecto;
+		}
+		dispatch(cambiarIdioma(idioma));
+	},[dispatch,messages,idiomaDefecto,idiomaNavegador]);
 
-	const m={};
+	const m = {};
 	Object.keys(messages).forEach(key => {
-		m[key]={
+		m[key] = {
 			...messages[key],
 			saas: saasMessages[key]
 		};
@@ -51,9 +70,9 @@ const Idioma=({messages,idioma,children}) => {
 	);
 };
 
-Idioma.propTypes={
+Idioma.propTypes = {
 	messages: PropTypes.object,
-	idioma: PropTypes.string,
+	idiomaDefecto: PropTypes.string,
 	children: PropTypes.element.isRequired
 };
 

src/components/Inicializar.jsx

@@ -47,7 +47,7 @@ const Inicializar = ({
 	devSaasURL,
 	devAuthURL,
 	messages,
-	idioma,
+	idiomaDefecto,
 	children
 }) => {
 	const dispatch = useDispatch();
@@ -57,7 +57,7 @@ const Inicializar = ({
 	},[dispatch,aplicacion,devSaasURL]);
 
 	return (
-		<Idioma messages={messages} idioma={idioma}>
+		<Idioma messages={messages} idiomaDefecto={idiomaDefecto}>
 			<Tema>
 				<InicializarInner devURL={devAuthURL}>
 					{children}
@@ -71,8 +71,8 @@ Inicializar.propTypes={
 	aplicacion: PropTypes.string.isRequired,
 	devSaasURL: PropTypes.string,
 	devAuthURL: PropTypes.string,
-	messages: PropTypes.object,
+	messages: PropTypes.object.isRequired,
-	idioma: PropTypes.string,
+	idiomaDefecto: PropTypes.string,
 	children: PropTypes.element.isRequired
 };
 

src/components/SaasApp.jsx

@@ -9,7 +9,7 @@ const SaasApp = ({
 	devSaasURL,
 	devAuthURL,
 	dev = false,
-	idioma,
+	idiomaDefecto,
 	messages,
 	children
 }) => {
@@ -19,7 +19,7 @@ const SaasApp = ({
 				aplicacion={aplicacion}
 				devSaasURL={dev ? devSaasURL : undefined}
 				devAuthURL={dev ? devAuthURL : undefined}
-				idioma={idioma}
+				idiomaDefecto={idiomaDefecto}
 				messages={messages}
 			>
 				{children}
@@ -34,7 +34,7 @@ SaasApp.propTypes={
 	devSaasURL: PropTypes.string,
 	devAuthURL: PropTypes.string,
 	dev: PropTypes.bool,
-	idioma: PropTypes.string,
+	idiomaDefecto: PropTypes.string,
 	messages: PropTypes.object,
 	children: PropTypes.element.isRequired
 };

vite.config.js

@@ -31,6 +31,7 @@ export default defineConfig({
 				"date-fns/locale",
 				"jwt-decode",
 				"mui-rff",
+				"navigator-languages",
 				"react-polyglot",
 				"react-redux",
 				"react-router-dom",
@@ -59,6 +60,7 @@ export default defineConfig({
 					"date-fns/locale": "DateFNSLocale",
 					"jwt-decode": "JWTDecode",
 					"mui-rff": "MUIRFF",
+					"navigator-languages": "NavigatorLanguages",
 					"react-polyglot": "ReactPolyglot",
 					"react-redux": "ReactRedux",
 					"react-router-dom": "ReactRouterDom",