@fullstackunicorn/create-root 1.0.16 → 1.0.18

package/assets/root.fullstackunicorn.dev/frontend/imports/fonts/tools.js

@@ -0,0 +1,72 @@
+import { api } from '#@/client/@api.js'
+import { uri } from '#@/App.uri.js'
+
+class Tools {
+
+    waitForFontsToLoad = async (families = []) => {
+        const quoteFont = s => (/\s/.test(s) ? `"${s}"` : s)
+        if (!('fonts' in document)) return // older browsers: skip
+        const loads = families.map(f => document.fonts.load(`1em ${quoteFont(f)}`))
+        await Promise.all(loads)
+        await document.fonts.ready
+    }
+
+    extractFontFamilies = (fontfaceText) => {
+        const out = new Set()
+        // matches: font-family: Open Sans;  or  font-family: 'Open Sans';
+        const re = /font-family\s*:\s*(['"]?)([^;'"]+)\1\s*;/gi
+        let m
+        while ((m = re.exec(fontfaceText))) out.add(m[2].trim())
+        return Array.from(out)
+    }
+
+    checkFontFaceStyle = (fontface) => {
+        if (!F3.str.isGood(fontface)) return false
+        const head = document.head || document.getElementsByTagName('head')[0]
+        const styleTags = head.getElementsByTagName('style')
+
+        for (let styleTag of styleTags) {
+            if (styleTag.innerHTML.includes(fontface)) return true
+        }
+        return false
+    }
+
+    addFontFaceStyle = (fontface) => {
+        const head = document.head || document.getElementsByTagName('head')[0]
+        const style = document.createElement('style')
+        style.media = 'screen, print'
+        style.appendChild(document.createTextNode(fontface))
+        head.appendChild(style)
+    }
+
+    fontLoader = async (alphabets, language) => {
+
+        const fontNames = alphabets[language.alphabet]
+        if (!fontNames) return []
+
+        const fontfacesList = []
+        const loadedFamilies = new Set()
+
+        for (const fontName of Object.keys(fontNames)) {
+
+            const name = fontNames[fontName]
+            const fontfaceUrl = F3.fabUrl(uri.font.fontface, { name })
+            const fontface = await api.fonts.get(fontfaceUrl)
+
+            if (fontface?.isError || fontface?.isOffline) continue
+            if (!F3.str.isGood(fontface)) continue
+
+            fontfacesList.push({ fontName, fontface })
+        }
+
+        for (const fontfaceItem of fontfacesList) {
+
+            const isPresent = this.checkFontFaceStyle(fontfaceItem.fontface)
+            if (!isPresent) this.addFontFaceStyle(fontfaceItem.fontface)
+            this.extractFontFamilies(fontfaceItem.fontface).forEach(f => loadedFamilies.add(f))
+        }
+        return Array.from(loadedFamilies)
+    }
+}
+
+export const tools = new Tools()

package/assets/root.fullstackunicorn.dev/frontend/imports/fonts/use.js

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react'
+import { useStyleFonts } from '#@/style/@use'
+import { useGetLanguage, useGetLanguageContent } from '#@/base/language/@use'
+import { tools } from '#@/imports/fonts/tools.js'
+import { constants } from '#@/root/constants.js'
+
+export const useLoadFonts = isLoaded => {
+
+    const { alphabets } = useStyleFonts()
+
+    const language = useGetLanguage()
+    const languageContent = useGetLanguageContent()
+    const isDifferent = languageContent.alphabet !== language.alphabet
+
+    const [isFontLoaded, setIsFontLoaded] = useState(false)
+
+    useEffect(() => {
+
+        const loadFonts = async () => {
+
+            let familiesContent = []
+
+            if (isDifferent) familiesContent = await tools.fontLoader(alphabets, languageContent)
+            const familiesMain = await tools.fontLoader(alphabets, language)
+
+            const families = Array.from(new Set([...(familiesMain || []), ...(familiesContent || [])]))
+            if (families.length) await tools.waitForFontsToLoad(families)
+
+            setIsFontLoaded(true)
+        }
+
+        if (isLoaded) loadFonts()
+
+    }, [isLoaded, alphabets, language, languageContent, isDifferent])
+
+    return isFontLoaded
+}
+
+export const useGetFont = (name, language = {}) => {
+
+    const { env } = constants
+    const platform = env.PLATFORM
+    const globalLanguage = useGetLanguage()
+    const { fonts } = useStyleFonts()
+
+    const font = `${name}-${language.alphabet ? language.alphabet : globalLanguage.alphabet}`
+    const fontDefault = `${name}-default-${platform}`
+
+    if (!name) return fonts[`f1-default-${platform}`]
+    return fonts[font] || fonts[fontDefault]
+
+}

package/assets/root.fullstackunicorn.dev/frontend/imports/head/Head.js

@@ -0,0 +1,39 @@
+import { Helmet } from "react-helmet-async"
+import { useGetMeta } from "#@/pages/@use.js"
+
+export const Head = () => {
+
+    const meta = useGetMeta()
+
+    if (!F3.obj.isGood(meta)) return null;
+
+    const { metadata, opengraph, twitter, schema } = meta
+
+    return (
+        <Helmet>
+
+            {metadata?.title && <title>{metadata.title}</title>}
+            {metadata?.description && <meta name="description" content={metadata.description} />}
+            {metadata?.keywords && <meta name="keywords" content={metadata.keywords} />}
+
+            {opengraph?.title && <meta property="og:title" content={opengraph.title} />}
+            {opengraph?.description && <meta property="og:description" content={opengraph.description} />}
+            {opengraph?.type && <meta property="og:type" content={opengraph.type} />}
+            {opengraph?.url && <meta property="og:url" content={opengraph.url} />}
+            {opengraph?.site_name && <meta property="og:site_name" content={opengraph.site_name} />}
+            {opengraph?.image && <meta property="og:image" content={opengraph.image} />}
+
+            {twitter?.card && <meta name="twitter:card" content={twitter.card} />}
+            {twitter?.title && <meta name="twitter:title" content={twitter.title} />}
+            {twitter?.description && <meta name="twitter:description" content={twitter.description} />}
+            {twitter?.image && <meta name="twitter:image" content={twitter.image} />}
+            {twitter?.site && <meta name="twitter:site" content={twitter.site} />}
+
+            {schema?.schema && (
+                <script type="application/ld+json">
+                    {JSON.stringify(schema.schema)}
+                </script>
+            )}
+        </Helmet>
+    );
+}

package/assets/root.fullstackunicorn.dev/frontend/imports/npm.js

@@ -0,0 +1,20 @@
+export { v4 as makeId } from 'uuid' 
+export { default as getHash } from 'object-hash' 
+export { useAtom, 
+         useSetAtom, 
+         useAtomValue as useGetAtom } from 'jotai/react'
+export { atom } from 'jotai'
+
+export { jwtDecode } from 'jwt-decode'
+export { default as jwtEncode } from 'jwt-encode'
+export { default as qs } from 'qs'
+
+export { Blurhash } from 'react-blurhash' 
+export { decode } from 'blurhash'
+
+export { set, get } from 'idb-keyval'
+
+import axiosnpm from 'axios'
+export const axios = axiosnpm.create({ 
+    validateStatus: status => status >= 200 && status < 300 || status === 304
+})

package/assets/root.fullstackunicorn.dev/frontend/imports/router.js

@@ -0,0 +1,21 @@
+export { BrowserRouter as RouterProvider } from 'react-router-dom'
+export { Link as RouterHref } from 'react-router-dom'
+export {
+    Routes, Route, Outlet, useLocation, useNavigate, matchPath,
+    Navigate, useParams as useGetUrlParams, useNavigationType
+} from 'react-router-dom'
+
+export const useNavigateUrl = () => url => window.location.href = url
+
+import { useLocation } from 'react-router-dom'
+
+export const useGetUrl = () => {
+    const location = useLocation()
+    return location.pathname
+}
+
+export const useIsUrl = () => {
+    const location = useLocation()
+    const isUrl = url => location.pathname === url
+    return isUrl
+}

package/assets/root.fullstackunicorn.dev/frontend/imports/scroll/@use.js

@@ -0,0 +1,85 @@
+import { useRef, useEffect, useCallback } from 'react'
+import { useUrl, useIsBack } from '#@/base/router/@use.js'
+import { scroll } from './scroll.js'
+
+export const usePersistentScroll = () => {
+    const scrollRef = useRef(null)
+    const { path } = useUrl()
+    const [isBack, setIsBack] = useIsBack()
+    const restoreDoneRef = useRef(false)
+    const prevPathRef = useRef(path)
+
+    const onScroll = useCallback(() => {
+        const node = scrollRef.current
+        if (!node) return
+        scroll.setTop(path, node.scrollTop)
+    }, [path])
+
+    useEffect(() => {
+        restoreDoneRef.current = false
+    }, [path])
+
+    useEffect(() => {
+        if (!isBack) return
+        if (!scrollRef.current) return
+        if (restoreDoneRef.current) return
+
+        let frame = 0
+        let observer = null
+
+        const tryRestore = () => {
+            const node = scrollRef.current
+            if (!node) return false
+
+            const top = scroll.getTop(path)
+            const maxScroll = node.scrollHeight - node.clientHeight
+
+            if (maxScroll < top) return false
+
+            node.scrollTop = top
+            restoreDoneRef.current = true
+            setIsBack(false)
+            return true
+        }
+
+        if (tryRestore()) return
+
+        const node = scrollRef.current
+        if (!node) return
+
+        if (typeof ResizeObserver !== 'undefined') {
+            observer = new ResizeObserver(() => {
+                if (restoreDoneRef.current) return
+                if (tryRestore()) observer?.disconnect()
+            })
+            observer.observe(node)
+        }
+
+        const tick = () => {
+            if (restoreDoneRef.current) return
+            if (tryRestore()) return
+            frame = requestAnimationFrame(tick)
+        }
+        frame = requestAnimationFrame(tick)
+
+        return () => {
+            observer?.disconnect()
+            cancelAnimationFrame(frame)
+        }
+
+    }, [isBack, path])
+
+    useEffect(() => {
+        const prevPath = prevPathRef.current
+        prevPathRef.current = path
+
+        if (isBack) return
+        if (prevPath === path) return
+
+        const node = scrollRef.current
+        if (!node) return
+        node.scrollTop = 0
+    }, [path, isBack])
+
+    return { scrollRef, onScroll }
+}

package/assets/root.fullstackunicorn.dev/frontend/imports/scroll/scroll.js

@@ -0,0 +1,33 @@
+// scroll.js
+import { storage } from '#@/imports/storage.js'
+
+class Scroll {
+
+  _read() {
+    return storage.getJSON('scroll') || {}
+  }
+
+  _write(data) {
+    storage.setJSON('scroll', data)
+  }
+
+  getTop(path) {
+    const data = this._read()
+    const v = data[path]
+    return typeof v === 'number' ? v : 0
+  }
+
+  setTop(path, value) {
+    const data = this._read()
+    data[path] = value ?? 0
+    this._write(data)
+  }
+
+  restore(path, scrollRef) {
+    const top = this.getTop(path)
+    if (scrollRef?.current) scrollRef.current.scrollTop = top
+    return top
+  }
+}
+
+export const scroll = new Scroll()

package/assets/root.fullstackunicorn.dev/frontend/imports/service.js

@@ -0,0 +1,27 @@
+import { cache } from '#@/imports/cache'
+
+class Service {
+
+    constructor() {
+        this.cachePreload = 'cache-preload'
+    }
+
+    todayUTC = () => new Date().toISOString().slice(0, 10)
+
+    setPreload = async key => {
+        const store = await cache.open(this.cachePreload)
+        const request = new Request(key)
+        const response = new Response(this.todayUTC(), { headers: { 'Content-Type': 'text/plain' } })
+        await store.put(request, response)
+    }
+
+    isPreload = async key => {
+        const store = await cache.open(this.cachePreload)
+        const response = await store.match(key)
+        if (!response) return true
+        const lastDay = (await response.text()).trim()
+        return true // lastDay < this.todayUTC()
+    }
+}
+
+export const service = new Service()

package/assets/root.fullstackunicorn.dev/frontend/imports/storage.js

@@ -0,0 +1,48 @@
+const normalize = value => {
+    if (value === 'false') return false
+    if (value === 'true') return true
+    return value
+}
+
+export const storage = {
+
+    getJSON: (key) => {
+        const value = localStorage.getItem(key)
+        return value ? JSON.parse(value) : {}
+    },
+
+    setJSON: (key, value={}) => {
+        localStorage.setItem(key, JSON.stringify(value))
+        return value
+    },
+
+    initJSON: (key, value={}) => {
+        const item = localStorage.getItem(key)
+        const itemParsed = JSON.parse(item) || {}
+        if (F3.obj.isGood(itemParsed)) return itemParsed
+        localStorage.setItem(key, JSON.stringify(value))
+        return value
+    },
+
+    get: (key) => {
+        const value = localStorage.getItem(key)
+        return normalize(value)
+    },
+
+    set: (key, value) => {
+        localStorage.setItem(key, value)
+        return value
+    },
+
+    init: (key, value) => {
+        const item = localStorage.getItem(key)
+        if (item) return normalize(item)
+        localStorage.setItem(key, value)
+        return value
+    },
+
+    remove: (key) => {
+        localStorage.removeItem(key)
+        return true
+    }
+}

package/assets/root.fullstackunicorn.dev/frontend/imports/use.js

@@ -0,0 +1,62 @@
+import { useState, useEffect, useRef } from 'react'
+import { constants } from '#@/root/constants.js'
+
+export const useDefaultLanguage = () => 'en-US'
+
+export const useIsDefaultThemeDark = () => {
+    if (constants.services.IS_CARD_THEME_OFF) return false
+    if (constants.services.IS_DEFAULT_THEME_DARK) return true
+    else return false
+}
+
+export const useWindowDimensions = () => {
+    const [windowDimensions, setWindowDimensions] = useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    })
+    useEffect(() => {
+        const handleResize = () => {
+            setWindowDimensions({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            })
+        }
+        window.addEventListener('resize', handleResize)
+        return () => window.removeEventListener('resize', handleResize)
+    }, [])
+
+    return windowDimensions
+}
+
+export const useContainerSize = () => {
+
+    const viewRef = useRef(null)
+
+    const [size, setSize] = useState({
+        width: 0,
+        height: 0,
+    })
+
+    useEffect(() => {
+        if (!viewRef.current) return
+
+        const handleResize = () => {
+            const width = viewRef.current?.offsetWidth || 0
+            const height = viewRef.current?.offsetHeight || 0
+            setSize({ width, height })
+        }
+
+        handleResize()
+
+        const observer = new ResizeObserver(handleResize)
+        observer.observe(viewRef.current)
+
+        return () => observer.disconnect()
+    }, [])
+
+    return {
+        viewRef,
+        width: size.width,
+        height: size.height,
+    }
+}

package/assets/root.fullstackunicorn.dev/frontend/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+
+<!-- {{language}} -->
+
+<head>
+
+    <meta charset="UTF-8" />
+    <meta name="author" content="lucanigido" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+
+    <meta content="#ffffff" name="msapplication-TileColor" />
+    <meta content="/icons/icon-512.png" name="msapplication-TileImage" />
+    <meta content="Carlo" name="apple-mobile-web-app-title" />
+    <link href="/icons/icon-180.png" rel="apple-touch-icon" sizes="180x180" />
+    <link href="/index.webmanifest" rel="manifest" />
+    
+    <link href="/favicon.ico" rel="shortcut icon" />
+    <link href="/icons/favicon.png" rel="icon" type="image/png" />
+    
+    <!-- {{metadata}} -->
+    <!-- {{languages}} -->
+    <!-- {{opengraph}} -->
+    <!-- {{twitter}} -->
+    <!-- {{schema}} -->
+
+</head>
+
+<body>
+    <div id="root"></div>
+    <script type="module" src="/App.js"></script>
+</body>
+
+</html>

package/assets/root.fullstackunicorn.dev/frontend/jsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "#@": ["./"],
+      "#@/*": ["./*"]
+    }
+  },
+  "include": [
+    "src/**/*",
+    "imports/**/*",
+    "**/*.js",
+    "**/*.jsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/assets/root.fullstackunicorn.dev/frontend/menus/@use.js

@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react'
+import { useUrl } from '#@/base/router/@use.js'
+
+export const useApi= (func, path) => {
+    const { lang } = useUrl()
+    const [result, setResult] = useState()
+    useEffect(() => {
+        const load = async () => {
+            const response = await func({ lang, path })
+            setResult(response?.data)
+        }
+        load()
+    }, [lang])
+    return result
+}

package/assets/root.fullstackunicorn.dev/frontend/menus/Main.js

@@ -0,0 +1,33 @@
+import { useUrl } from '#@/base/router/@use.js'
+import { routes } from '#@/root/routes.js'
+import { MenuBoxTwo, MenuLinkTwo } from '#@/base/layout/menus/MenuTwo.js'
+import { useGetMenus } from '#@/base/layout/menus/@use.js'
+
+export const Main = ({ isTwo }) => {
+
+    const menus = useGetMenus()
+
+    const { lang, isUrl } = useUrl()
+    const verbal = menus?.main?.verbal || {}
+
+    if (!F3.obj.isGood(menus)) return null
+    return (
+        <MenuBoxTwo>
+            {Object.keys(routes.public).map(key => {
+
+                if (!routes.public[key].isMenu) return null
+                let link = F3.fabUrl(routes.public[key].path, { lang })
+
+                return (
+                    <MenuLinkTwo
+                        isFlip={isTwo}
+                        key={routes.public[key].path}
+                        isActive={isUrl(link)}
+                        linkTo={link}
+                        text={verbal[key] || routes.public[key].id || key}
+                    />
+                )
+            })}
+        </MenuBoxTwo>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/menus/Main.use.js

@@ -0,0 +1,22 @@
+import { uri } from '#@/App.uri.js'
+import { useSetMenus } from '#@/base/layout/menus/@use.js'
+
+export const useLoadMainMenu = (lang) => {
+
+    const setMenus = useSetMenus()
+
+    const loadMainMenu = (data) => {
+
+        const paths = {}
+        paths.verbal = F3.fabUrl(uri.data.menus.verbal, { lang, path:'main' })
+        paths.logic = F3.fabUrl(uri.data.menus.logic, { path:'main' })
+
+        const menus = {}
+        menus.main = {}
+        menus.main.verbal = F3.obj.get(data[0], `data.items.${paths.verbal}.data.@data.routes.items`) || {}
+        menus.main.logic = F3.obj.get(data[0], `data.items.${paths.logic}.data.@data.routes.items`) || []
+        
+        setMenus(menus)
+    }
+    return loadMainMenu
+}

package/assets/root.fullstackunicorn.dev/frontend/modals/countries/countries.js

@@ -0,0 +1,39 @@
+import { uri } from '#@/App.uri.js'
+import { api } from '#@/client/@api.js'
+import { useUrl } from '#@/base/router/@use.js'
+import { useLoad } from '#@/pages/@use.js'
+
+// #1 define the path to the route
+const path = 'countries'
+
+// #2 define fetch for preload and api
+const dataFetch = async params => {
+    const verbal = await api.statics.get(uri.lookups.verbal, params)
+    const visual = await api.statics.get(uri.lookups.visual, params)
+    const newData = {}
+    newData.verbal =  verbal.data['@data']
+    newData.visual =  visual.data
+    return newData
+}
+
+// // #3A define usePreload list
+// export const usePreloadCountriesList = () => {
+//     const { lang } = useUrl()
+//     const result = F3.fabUrl(uri.lookups.verbal, {lang, path})
+//     return result
+// }
+
+// // #3B define usePreload hook
+// export const usePreloadCountries = () => {
+//     const { lang } = useUrl()
+//     const key = F3.fabUrl(uri.lookups.verbal, {lang, path})
+//     const result = usePreload(dataFetch, lang, path, key)
+//     return result
+// }
+
+// #4 define useApi hook
+export const useApiCountries = () => {
+    const { lang } = useUrl()
+    const result = useLoad(dataFetch, lang, path)
+    return result
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/buttons/IconTextButton.js

@@ -0,0 +1,17 @@
+import { useState } from 'react'
+import { IconTextButtonPod } from './IconTextButton.pod.js'
+
+export const IconTextButton = ({ svg, text, onPress }) => {
+
+    const [isHover, setIsHover ] = useState(false)
+
+    return (
+        <IconTextButtonPod 
+            svg={svg}
+            text={text}
+            onPress={onPress}
+            isHover={isHover}
+            setIsHover={setIsHover}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/buttons/IconTextButton.pod.js

@@ -0,0 +1,24 @@
+import { useStyle } from '#@/style/@use'
+import { Pressable } from '#@/imports/core/Pressable'
+import { Icon } from '#@/modules/core/Icon'
+import { Textline } from '#@/imports/core/Text'
+
+export const IconTextButtonPod = ({ onPress, svg, text, isHover, setIsHover}) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    F.text = [s.textS, s.fs16, s.lh24, s.fw500]
+
+    B.hover = isHover ? [c.item_C1_B100] : [c.item_NN_B400]
+
+    S.pressable = [s.row_cXcY, s.Y48, s.paddingS4, s.paddingE12, s.radius8, ...B.hover]
+    S.icon = [s.X40, s.Y48],
+    S.text = F.text
+
+    return (
+        <Pressable classes={S.pressable} onPress={onPress} setIsHover={setIsHover}>
+            <Icon classes={S.icon} svg={svg} />
+            <Textline classes={S.text} font={f.f1} text={text} />
+        </Pressable>
+    )
+}