ywana-core8 0.1.48 → 0.1.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/site/index.js

@@ -1,4 +1,4 @@
-export * from './site2'
+export * from './site'
 export * from './siteContext'
 export * from './page'
 export * from './dialog'

package/src/site/site.js

@@ -25,25 +25,25 @@ 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 [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)
         }
-        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)
-            }, [])
+
+        window.addEventListener("popstate", handlePopState)
+        return () => window.removeEventListener("popstate", handlePopState)
+    }, [])
 
     const value = {
 
@@ -61,7 +61,7 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
             return term ? term[lang] : key
         },
         */
-        
+
         sideNav,
         setSideNav,
 
@@ -136,7 +136,7 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
 
     return (
         <SiteContext.Provider value={value}>
-                {children}
+            {children}
         </SiteContext.Provider>
     )
 }

package/src/site/site2.js

@@ -1,338 +0,0 @@
-import React, { Children, Fragment, useState, useContext, useEffect, useCallback, useMemo } from 'react'
-import { Header } from './header'
-import { Icon } from '../html/icon'
-import { Page } from './page'
-import { ConfirmDialog } from './dialog'
-import './site.css'
-
-/**
- * Site Context
- */
-export const SiteContext = React.createContext({})
-
-/**
- * Site Provider
- */
-export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
-
-    const [lang, setLang] = useState(siteLang)
-    const [dictionary, setDictionary] = useState(siteDictionary)
-    const [sideNav, setSideNav] = useState('max')
-    const [showNav, setShowNav] = useState(false)
-    const [info, setInfo] = useState(true)
-    const [showConsole, setShowConsole] = useState(false)
-    const [consoleLines, setConsoleLines] = useState([])
-    const [dialog, setDialog] = useState()
-    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 value = useMemo(() => ({
-
-        lang,
-        setLang,
-        dictionary,
-        setDictionary,
-        translate: useCallback((key) => dictionary?.[key]?.[lang] || key, [lang, dictionary]),
-
-        sideNav,
-        setSideNav,
-
-        showNav,
-        setShowNav,
-
-        info,
-        openInfo: (info) => { setInfo(info) },
-        closeInfo: () => { setInfo(null) },
-
-        consoleLines,
-        showConsole,
-        toggleConsole: () => { setShowConsole(!showConsole) },
-        writeLog: (line) => {
-            const next = consoleLines.concat(line)
-            setConsoleLines(next)
-        },
-        clearLog: () => { setConsoleLines([]) },
-
-        breadcrumb,
-        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
-            }
-        },
-
-        dialog,
-        openDialog: (dialog) => { setDialog(dialog) },
-        closeDialog: () => { setDialog(null) },
-
-        preview,
-        openPreview: (preview) => { setPreview(preview) },
-        closePreview: () => { setPreview(null) },
-
-        confirm: (props) => {
-            setPromptDialog(<ConfirmDialog {...props} />)
-        },
-
-        prompt: (message) => window.prompt(message),
-
-        promptDialog,
-        openPromptDialog: (dialog) => { setPromptDialog(dialog) },
-        closePromptDialog: () => { setPromptDialog(null) },
-
-    }), [lang, dictionary, sideNav, showNav, info, consoleLines, showConsole, breadcrumb, page, dialog, promptDialog, preview])
-
-    return (
-        <SiteContext.Provider value={value}>
-            {children}
-        </SiteContext.Provider>
-    )
-}
-
-/**
- * Site
- */
-export const Site = ({ icon, logo, title, headerBar, asideBar, footer, children, init, min, lang, dictionary }) => {
-    return (
-        <SiteErrorBoundary>
-            <SiteProvider siteLang={lang} siteDictionary={dictionary}>
-                <div className="site10">
-                    <SiteHeader icon={icon} logo={logo} title={title} >
-                        {headerBar}
-                    </SiteHeader>
-                    <SiteMenu title={title} min={min} >{children}</SiteMenu>
-                    <SitePage init={init}>
-                        {children}
-                        <Page id="EMPTY">EMPTY</Page>
-                    </SitePage>
-                    <SiteBar>{asideBar}</SiteBar>
-                    <SiteAside />
-                    <SiteDialog />
-                    <SitePromptDialog />
-                    <SitePreview />
-                    <SiteFooter>{footer}</SiteFooter>
-                </div>
-            </SiteProvider>
-        </SiteErrorBoundary>
-    )
-}
-
-/**
- * Site Header
- */
-const SiteHeader = (props) => {
-
-    const context = useContext(SiteContext)
-    const { sideNav, setSideNav } = context
-    const { icon = "equalizer", logo, title } = props
-
-    function toggleMenu() {
-        const next = sideNav === 'max' ? 'min' : 'max'
-        setSideNav(next)
-    }
-
-    return (
-        <Header icon={icon} iconAction={toggleMenu} logo={logo} title={title} />
-    )
-}
-
-/**
- * Site Bar
- */
-const SiteBar = ({ children }) => {
-    return (
-        <nav>
-            {children}
-        </nav>
-    )
-}
-
-/**
- * Site Footer
- */
-const SiteFooter = ({ children }) => {
-    return (
-        <footer>
-            {children}
-        </footer>
-    )
-}
-
-/**
- * Site Aside
- */
-const SiteAside = () => {
-    const context = useContext(SiteContext)
-    return context.info ? (
-        <aside>
-            {context.info}
-        </aside>
-    ) : ''
-}
-
-/**
- * SiteMenu
- */
-const SiteMenu = ({ iconSrc, title, children, min }) => {
-
-    const context = useContext(SiteContext)
-    const { page, sideNav, setSideNav, showNav } = context
-
-    useEffect(() => {
-        if (min) context.setSideNav('min')
-    }, [])
-
-    function toggle() {
-        const next = sideNav === 'max' ? 'min' : 'max'
-        setSideNav(next)
-    }
-
-    const goto = (id) => {
-        context.setShowNav(false)
-        context.goto(id)
-    }
-
-    const sections = useMemo(() => {
-        return children.reduce((acc, child) => {
-            const section = child.props.section || "";
-            if (!acc[section]) acc[section] = [];
-            const { title } = child.props;
-            if (title) acc[section].push(child.props);
-            return acc;
-        }, {});
-    }, [children]);
-
-    const style = sideNav === 'max' ? 'max' : 'min'
-    return (
-        <menu className={`${style} ${showNav ? 'show' : ''}`}>
-            <main >
-                {Object.keys(sections).map(title => (
-                    <Fragment key={title}>
-                        {title === 'undefined' ? '' : <div className={`section-title ${style}`}>{sideNav === "max" ? title : ''}</div>}
-                        {sections[title].map(({ id, icon = 'info', title }) => {
-                            const styleItem = id === page ? 'selected' : ''
-                            const titleTxt = context.translate(title)
-                            return (
-                                <div className={`site-menu-item ${styleItem}`} key={id} onClick={() => goto(id)}>
-                                    <Icon key={id} icon={icon} clickable />
-                                    {sideNav === 'max' ? <label>{titleTxt}</label> : null}
-                                </div>
-                            )
-                        })}
-                        <div className="section-divider" ></div>
-                    </Fragment>
-                ))}
-            </main>
-        </menu>
-    )
-}
-
-/**
- * SitePage
- */
-const SitePage = ({ children, init }) => {
-    const context = useContext(SiteContext)
-    const { page } = context
-    useEffect(() => {
-        if (init) {
-            context.goto(init)
-        } else {
-            context.goto("EMPTY")
-        }
-    }, [])
-    return (
-        <main>
-            {React.Children.toArray(children).filter(child => child.props ? child.props.id === page : false)}
-        </main>
-    )
-}
-
-/**
- * Site Dialog
- */
-const SiteDialog = () => {
-    const context = useContext(SiteContext)
-    return context.dialog ? context.dialog : ''
-}
-
-/**
- * Site Promtp Dialog
- */
-const SitePromptDialog = () => {
-    const context = useContext(SiteContext)
-    return context.promptDialog ? context.promptDialog : ''
-}
-
-/**
- * Site Preview
- */
-const SitePreview = () => {
-    const context = useContext(SiteContext)
-    return context.preview ? (
-        <div className="site-preview" >
-            {context.preview}
-        </div>
-    ) : ''
-}
-
-class SiteErrorBoundary extends React.Component {
-
-    constructor(props) {
-        super(props)
-        this.state = { hasError: false }
-    }
-
-    static getDerivedStateFromError(error) {
-        return { hasError: true, error }
-    }
-
-    componentDidCatch(error, errorInfo) {
-        console.error("SiteErrorBoundary >", error, errorInfo)
-    }
-
-    render() {
-        if (this.state.hasError) {
-
-            const { error } = this.state
-
-            return (
-                <div className="site-error">
-                    <h1>Site Error</h1>
-                    <p>Error {error.status}: {error.message}</p>
-                </div>
-            )
-        }
-        return this.props.children
-    }
-}