ywana-core8 0.1.55 → 0.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.55",
+  "version": "0.1.57",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",
@@ -36,6 +36,7 @@
     "axios": "^1.3.4",
     "crypto-js": "^4.1.1",
     "deep-equal": "^2.0.5",
+    "framer-motion": "^5.6.0",
     "material-design-icons-iconfont": "^6.7.0",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",

package/src/site/index.js

@@ -2,4 +2,6 @@ export * from './site'
 export * from './siteContext'
 export * from './page'
 export * from './dialog'
-export * from './view'
+export * from './view'
+export * from './link'
+export * from './navigation'

package/src/site/link.js

@@ -0,0 +1,75 @@
+import { useEffect, useState, useRef } from "react"
+import React, { useContext } from 'react'
+import { SiteContext } from './siteContext'
+
+/**
+ * Use Hash Page
+ */
+export function useHashPage(defaultPage = "home") {
+    const getCurrentPageFromURL = () => {
+        const hash = window.location.hash.replace("#", "")
+        return hash || defaultPage
+    }
+
+    const [page, setPage] = useState(getCurrentPageFromURL())
+    const [history, setHistory] = useState([])
+    const isFirstLoad = useRef(true)
+
+    useEffect(() => {
+        const handleHashChange = () => {
+            const newPage = getCurrentPageFromURL()
+            if (!isFirstLoad.current) {
+                setHistory(prev => [...prev, page]) // Guarda la página anterior
+            } else {
+                isFirstLoad.current = false
+            }
+            setPage(newPage)
+        }
+
+        window.addEventListener("hashchange", handleHashChange)
+        return () => window.removeEventListener("hashchange", handleHashChange)
+    }, [page])
+
+    const goto = (id) => {
+        if (page) {
+            setHistory(prev => [...prev, page])
+        }
+        setPage(id)
+        window.location.hash = id
+    }
+
+    const goBack = () => {
+        if (history.length > 0) {
+            const lastPage = history[history.length - 1]
+            setHistory(prev => prev.slice(0, -1))
+            setPage(lastPage)
+            window.location.hash = lastPage
+        }
+    }
+
+    return { page, goto, goBack, history }
+}
+
+/**
+ * PageLink - Navegación declarativa usando el sistema de hash
+ * 
+ * Props:
+ * - page: string → ID de la página a mostrar
+ * - children: ReactNode → contenido visual del enlace
+ * - className: string → clases opcionales
+ * - style: object → estilos en línea opcionales
+ */
+export const PageLink = ({ page, children, className = '', style = {} }) => {
+    const { goto } = useContext(SiteContext)
+
+    const handleClick = (e) => {
+        e.preventDefault()
+        goto(page)
+    }
+
+    return (
+        <a href={`#${page}`} onClick={handleClick} className={className} style={style}>
+            {children}
+        </a>
+    )
+}

package/src/site/navigation.js

@@ -0,0 +1,54 @@
+import { useEffect, useState, useRef } from "react"
+import React, { useContext } from 'react'
+import { SiteContext } from './siteContext'
+
+/**
+ * Use Hash Page
+ */
+export function useHashPage(defaultPage = "home") {
+    const getCurrentPageFromURL = () => {
+        const hash = window.location.hash.replace("#", "")
+        return hash || defaultPage
+    }
+
+    const [page, setPage] = useState(getCurrentPageFromURL())
+    const [history, setHistory] = useState([])
+    const [direction, setDirection] = useState("left")
+    const isFirstLoad = useRef(true)
+
+    useEffect(() => {
+        const handleHashChange = () => {
+            const newPage = getCurrentPageFromURL()
+            if (!isFirstLoad.current) {
+                setHistory(prev => [...prev, page]) // Guarda la página anterior
+            } else {
+                isFirstLoad.current = false
+            }
+            setPage(newPage)
+        }
+
+        window.addEventListener("hashchange", handleHashChange)
+        return () => window.removeEventListener("hashchange", handleHashChange)
+    }, [page])
+
+    const goto = (id, dir = "left") => {
+        if (page) {
+            setHistory(prev => [...prev, page])
+        }
+        setDirection(dir)
+        setPage(id)
+        window.location.hash = id
+    }
+
+    const goBack = () => {
+        if (history.length > 0) {
+            const lastPage = history[history.length - 1]
+            setHistory(prev => prev.slice(0, -1))
+            setDirection("right")
+            setPage(lastPage)
+            window.location.hash = lastPage
+        }
+    }
+
+    return { page, goto, goBack, history }
+}

package/src/site/site.css

@@ -118,6 +118,11 @@
     align-items: center;
 }
 
+.site-page-container {
+    position:relative;
+    overflow: hidden;
+}
+
 .site6>main {
     grid-area: main;
     overflow: hidden;

package/src/site/site.js

@@ -6,6 +6,8 @@ import { Tooltip } from '../html/tooltip'
 import { Page } from './page'
 import { SiteContext } from './siteContext'
 import { ReactNotifications, Store } from 'react-notifications-component'
+import { useHashPage } from './navigation'
+import { AnimatePresence, motion } from 'framer-motion'
 import 'react-notifications-component/dist/theme.css'
 import './site.css'
 
@@ -25,25 +27,8 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
     const [promptDialog, setPromptDialog] = useState()
     const [preview, setPreview] = useState()
     const [breadcrumb, setBreadcrumb] = useState()
-    const [history, setHistory] = useState([])
 
-    // 📌 Extraer la página actual desde la URL (por defecto "home")
-    const getCurrentPageFromURL = () => {
-        const path = window.location.pathname.replace("/", "")
-        return path || "home"
-    }
-    const [page, setPage] = useState(getCurrentPageFromURL())
-
-    useEffect(() => {
-        // 📌 Detectar cambios en la URL cuando el usuario presiona "Atrás" o "Adelante"
-        const handlePopState = (event) => {
-            const previousPage = event.state?.page || "home"
-            setPage(previousPage)
-        }
-
-        window.addEventListener("popstate", handlePopState)
-        return () => window.removeEventListener("popstate", handlePopState)
-    }, [])
+    const { page, goto, goBack } = useHashPage()
 
     const value = {
 
@@ -53,14 +38,6 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
         dictionary,
         setDictionary,
         translate: useCallback((key) => dictionary?.[key]?.[lang] || key, [lang, dictionary]),
-        /*
-        translate: (key) => {
-            if (!key) return key
-            if (dictionary === undefined) return key
-            const term = dictionary[key]
-            return term ? term[lang] : key
-        },
-        */
 
         sideNav,
         setSideNav,
@@ -85,21 +62,8 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
         setBreadcrumb,
 
         page,
-        goto: (id) => {
-            if (page) {
-                setHistory(prev => [...prev, page]) // 🔹 Guarda la página actual en el historial antes de cambiar
-            }
-            setPage(id)
-            window.history.pushState({ page: id }, "", `/${id}`) // 🔹 Actualiza la URL
-        },
-        goBack: () => {
-            if (history.length > 0) {
-                const lastPage = history[history.length - 1]
-                setHistory(prev => prev.slice(0, -1)) // 🔹 Elimina la última entrada del historial
-                setPage(lastPage) // 🔹 Vuelve a la página anterior
-                window.history.back() // 🔹 Regresa en la navegación del navegador
-            }
-        },
+        goto,
+        goBack,
 
         dialog,
         openDialog: (dialog) => { setDialog(dialog) },
@@ -290,7 +254,7 @@ const SiteMenu = ({ iconSrc, title, children, min }) => {
  */
 const SitePage = ({ children, init }) => {
     const context = useContext(SiteContext)
-    const { page } = context
+    const { page, direction } = context
     useEffect(() => {
         if (init) {
             context.goto(init)
@@ -298,9 +262,24 @@ const SitePage = ({ children, init }) => {
             context.goto("EMPTY")
         }
     }, [])
+    
+    const currentPage = React.Children.toArray(children).filter(child => child.props ? child.props.id === page : false)
+    const xOffset = direction === "left" ? 40 : -40
     return (
-        <main>
-            {React.Children.toArray(children).filter(child => child.props ? child.props.id === page : false)}
+        <main className='site-page-container'>
+            <AnimatePresence exitBeforeEnter>
+                {currentPage && (
+                    <motion.div
+                        key={page}
+                        initial={{ opacity: 0, x: xOffset }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: -xOffset }}
+                        transition={{ duration: 0.3 }}
+                    >
+                        {currentPage}
+                    </motion.div>
+                )}
+            </AnimatePresence>
         </main>
     )
 }