@fullstackunicorn/create-root 1.0.16 → 1.0.18

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/Fader.js

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from 'react'
+import { useUrl } from '#@/base/router/@use.js'
+import { useGetIsFrozen } from '#@/base/layout/menus/@use.js'
+
+const linkMs = 250
+const menuMs = 300
+
+const FaderInner = ({ classes = [], inline = {}, children, wasFrozen }) => {
+
+    const [visible, setVisible] = useState(false)
+    const ms = wasFrozen ? menuMs : linkMs
+
+    useEffect(() => {
+        const r1 = requestAnimationFrame(() => {
+            const r2 = requestAnimationFrame(() => setVisible(true))
+            return () => cancelAnimationFrame(r2)
+        })
+        return () => cancelAnimationFrame(r1)
+    }, [])
+
+    const style = {
+        ...inline,
+        transition: `opacity ${ms}ms ease-in-out`,
+        opacity: visible ? 1 : 0,
+    }
+
+    return (
+        <div className={classes.join(' ')} style={style}>
+            {children}
+        </div>
+    )
+}
+
+export const Fader = ({ classes = [], inline = {}, children }) => {
+
+    const { url } = useUrl()
+    const isFrozen = useGetIsFrozen()
+    const frozenRef = useRef(isFrozen)
+    frozenRef.current = isFrozen
+
+    return (
+        <FaderInner key={url} classes={classes} inline={inline} wasFrozen={frozenRef.current}>
+            {children}
+        </FaderInner>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/HoverCard.js

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import { useStyle } from '#@/style/@use.js'
+
+export const HoverCard = ({ children, classes = [] }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    const [isHover, setIsHover] = useState(false)
+
+    S.box = [s.relative, s.radius24, s.overflowXYh, ...classes]
+
+    I.box = {
+        transition: 'transform 240ms cubic-bezier(0.2, 0, 0, 1), box-shadow 240ms cubic-bezier(0.2, 0, 0, 1)',
+        boxShadow: isHover
+            ? '0 6px 8px rgba(0, 0, 0, 0.12)'
+            : '0 2px 4px rgba(0, 0, 0, 0.06)',
+        transform: isHover ? 'translateY(-2px)' : 'translateY(0)',
+        willChange: 'transform, box-shadow',
+    }
+
+    return (
+        <div
+            className={S.box.join(' ')}
+            style={I.box}
+            onMouseEnter={() => setIsHover(true)}
+            onMouseLeave={() => setIsHover(false)}
+        >
+            {children}
+        </div>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/Layout.js

@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react'
+import { useStyle } from '#@/style/@use.js'
+import { useGetIsSideTwoOn, useGetIsSideTwoExternal } from '#@/base/layout/sideTwo/@use.js'
+import { useGetLanguage } from '#@/base/language/@use.js'
+import { useAnimationSidebarExternal } from '#@/imports/animated/Layout.use.js'
+
+export const SidebarExternal = ({ classes = [], inline = {}, children, isSidebarOne }) => {
+
+    const language = useGetLanguage()
+    const { duration, sidebarTwo } = useAnimationSidebarExternal()
+
+    const sidebar = sidebarTwo
+    const animated = isSidebarOne
+        ? {}
+        : (language.isRTL ? { marginLeft: sidebar } : { marginRight: sidebar })
+
+    const style = { ...inline, ...animated, transition: `all ${duration * 0.96}ms ease` }
+
+    return (
+        <div className={classes.join(' ')} style={style}>
+            {children}
+        </div>
+    )
+}
+
+export const Overlay = ({ classes = [], inline = {}, children, isClosed = true, duration = 250 }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    const [isOff, setIsOff] = useState(true)
+
+    const style = { ...inline, transition: `all ${duration * 0.96}ms ease` }
+
+    const className = [...classes, isOff ? c.base_NN_B750_00 : c.base_NN_B750_40]
+
+    useEffect(() => setIsOff(isClosed))
+
+    return (
+        <div className={className.join(' ')} style={{ ...style, ...inline }}>
+            {children}
+        </div>
+    )
+}
+
+export const Layout = ({ classes = [], inline = {}, children }) => {
+
+    const language = useGetLanguage()
+
+    const isSideTwoOn = useGetIsSideTwoOn()
+    const isSideTwoExternal = useGetIsSideTwoExternal()
+
+    const { duration, sideTwo } = useAnimationSidebarExternal()
+
+    let animated = {}
+
+    if (isSideTwoOn && isSideTwoExternal) {
+        animated = language.isRTL ? { marginRight: -sideTwo } : { marginLeft: sideTwo }
+    }
+
+    const style = { ...inline, ...animated, transition: `all ${duration * 0.96}ms ease` }
+
+    return (
+        <div className={classes.join(' ')} style={style}>
+            {children}
+        </div>
+    )
+}
+

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

@@ -0,0 +1,33 @@
+import { useState, useEffect, useMemo } from 'react'
+import { vars } from '#@/imports/animated/Layout.vars.js'
+import { useGetIsSideTwoClosed, useGetIsSideTwoExternal } from '#@/base/layout/sideTwo/@use.js'
+
+export const useAnimationSidebarExternal = () => {
+
+    const { duration } = vars
+    const { sidebarFalse, sidebarTrue, sideTwoFalse, sideTwoTrue } = vars.external
+
+    const isSideTwoExternal = useGetIsSideTwoExternal()
+    const isSideTwoClosed = useGetIsSideTwoClosed()
+
+    const sideTwoVisible = isSideTwoExternal && !isSideTwoClosed
+
+    const sidebarTwoTarget = sideTwoVisible ? sidebarTrue : sidebarFalse
+    const sideTwoShiftTarget = sideTwoVisible ? sideTwoTrue : sideTwoFalse
+
+    const [sidebarTwo, setSidebarTwo] = useState(sidebarFalse)
+    const [sideTwo, setSideTwo] = useState(sideTwoFalse)
+
+    useEffect(() => {
+        setSidebarTwo(sidebarTwoTarget)
+    }, [sidebarTwoTarget])
+
+    useEffect(() => {
+        setSideTwo(sideTwoShiftTarget)
+    }, [sideTwoShiftTarget])
+
+    return useMemo(
+        () => ({ duration, sidebarTwo, sideTwo }),
+        [duration, sidebarTwo, sideTwo]
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/Layout.vars.js

@@ -0,0 +1,20 @@
+const vars = {}
+
+vars.duration = 150
+vars.modalDuration = 250
+
+vars.internal = {}
+vars.internal.sidebarFalse = -328
+vars.internal.sidebarTrue = 4
+vars.internal.wingFalse = 0
+vars.internal.wingTrue = 324
+
+vars.external = {}
+vars.external.sidebarFalse = -328
+vars.external.sidebarTrue = 0
+vars.external.sideOneFalse = 0
+vars.external.sideOneTrue = 320
+vars.external.sideTwoFalse = 0
+vars.external.sideTwoTrue = -320
+    
+export { vars } 

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/Root.js

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react'
+import { useStyle } from '#@/style/@use.js'
+
+export const Root = ({ children, isLoaded }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    const [isOff, setIsOff] = useState(true)
+
+    useEffect(() => {
+        if (isLoaded)  setTimeout(() => { setIsOff(false)}, 100)
+    }, [isLoaded])
+
+    const style = {
+        transition: 'opacity 0.4s ease-in-out',
+        opacity: isOff ? 0 : 1,
+    }
+
+    const className = [s.XY]
+
+    return (
+        <div className={className.join(' ')} style={style}>
+            {children}
+        </div>
+    )
+}

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

@@ -0,0 +1,81 @@
+import { get, set } from '#@/imports/npm'
+
+class Cache {
+
+    constructor() {
+        this.cachePreload = 'cache-preload'
+    }
+
+    todayUTC = () => new Date().toISOString().slice(0, 10)
+
+    setPreload = async key => {
+        const store = await this.open(this.cachePreload)
+        const request = new Request(`preload:${key}`)
+        const response = new Response(this.todayUTC(), { headers: { 'Content-Type': 'text/plain' } })
+        await store.put(request, response)
+    }
+
+    isPreload = async key => {
+        const store = await this.open(this.cachePreload)
+        const response = await store.match(`preload:${key}`)
+        if (!response) return true 
+        const lastDay = (await response.text()).trim()
+        return lastDay < this.todayUTC()
+    }
+
+    open = async (name) => await caches.open(name)
+
+    get = async (cache, key, isBlob) => {
+        const match = await cache.match(key)
+        if (!match) return null
+        return isBlob ? await match.blob() : await match.json()
+    }
+
+    set = async (cache, key, value, isBlob) => {
+
+        const headers = { headers: {'Content-Type': value?.type || 'application/octet-stream'}}
+        const headersJson = { headers: { 'Content-Type': 'application/json' } }
+
+        const response = isBlob
+            ? new Response(value, headers)
+            : new Response(JSON.stringify(value), headersJson)
+
+        await cache.put(key, response)
+    }
+
+    getMeta = async (key) => {
+        const etag = await get(`etag:${key}`)
+        const timestamp = (await get(`timestamp:${key}`)) || 0
+        return { etag, timestamp }
+    }
+
+    setMeta = async (key, etag) => {
+        if (etag) await set(`etag:${key}`, etag)
+        await set(`timestamp:${key}`, Date.now())
+    }
+
+    remove = async (cache, key) => {
+        await cache.delete(key)
+        await set(`etag:${key}`, undefined)
+        await set(`timestamp:${key}`, undefined)
+    }
+
+    clear = async (name) => await caches.delete(name)
+
+    preBlob = (data) => {
+        if (!data) return null
+        if (data instanceof ArrayBuffer) return new Uint8Array(data)
+        if (ArrayBuffer.isView(data)) return new Uint8Array(data.buffer, data.byteOffset, data.byteLength)
+        try { return new Uint8Array(data) } catch { return null }
+    }
+
+    getBlob = (arrayBuffer, type) => {
+        const u8 = this.preBlob(arrayBuffer)
+        if (!u8) return null
+        const safeType = (type || 'application/octet-stream').split(';')[0].trim()
+        return new Blob([u8], { type: safeType })
+    }
+
+}
+
+export const cache = new Cache()

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

@@ -0,0 +1,248 @@
+import { axios } from '#@/imports/npm'
+import { constants } from '#@/root/constants.js'
+import { abs } from '#@/abstracts/abs.js'
+import { err } from '#@/abstracts/err.js'
+import { cache } from '#@/imports/cache.js'
+
+class Client {
+
+    constructor() {
+        this.cacheNameObjects = 'cache-objects'
+        this.cacheNameFiles = 'cache-files'
+        this.cacheNameImg = 'cache-img'
+        this.cacheStale = constants.cache.stale
+    }
+
+    validate = ({ response = {}, is = {} }) => {
+        if (!F3.obj.isGood(response)) return { isError: true, error: 'no-response' }
+        if (F3.err.is400(response.status)) return { isError: true, error: 'client-error' }
+        if (F3.err.is500(response.status)) return { isError: true, error: 'server-error' }
+        if (F3.isNil(response.data)) return { isError: true, error: 'no-data' }
+        if (is.graphQl) {
+            if (F3.arr.isGood(response.data?.errors)) return { isError: true, error: 'graphql-error' }
+            if (F3.isNil(response.data?.data)) return { isError: true, error: 'graphql-no-data' }
+        }
+        return { isValid: true }
+    }
+
+    post = async (endpoint, data, headers) => {
+        try {
+            const response = await axios.post(endpoint, data, headers)
+            const validated = this.validate({ response, is: { post: true } })
+            if (!validated.isValid) return validated
+            return response.data
+        } catch (error) { return await err.handle(error) }
+    }
+
+    graphQl = async (payload = {}, isNoCache) => {
+        if (isNoCache) return await this.directGraphQl(payload)
+        return await this.cacheGraphQl(payload)
+    }
+
+    data = async (payload = {}, isNoCache) => {
+        const isGet = payload.method === 'get'
+        if (isNoCache) return await this.directData(payload, isGet)
+        return await this.cacheData(payload, isGet)
+    }
+
+    file = async (payload = {}, isNoCache) => {
+        const isGet = payload.method === 'get'
+        // const params = isGet ? payload.config?.params : payload.data
+        const params = isGet ? undefined : payload.data
+        payload.key = abs.makeKey(payload.endpoint, payload.method, params)
+        if (isNoCache) return await this.directFile(payload, isGet)
+        return await this.cacheFile(payload, isGet)
+    }
+
+    image = async (payload = {}, type) => {
+
+        payload.method = 'get'
+        payload.key = abs.makeKey(payload.endpoint, payload.method)
+
+        if (type === 'get') return await this.cacheImgGet(payload)
+        if (type === 'set') return await this.cacheImgSet(payload)
+
+    }
+
+    directGraphQl = async ({ key, method, endpoint, data, config = {} }, isGet) => {
+
+    }
+
+    directData = async ({ key, method, endpoint, data, config = {} }, isGet) => {
+        try {
+            const response = isGet
+                ? await axios.get(endpoint, config)
+                : await axios[method](endpoint, data, config)
+            const validated = this.validate({ response, key })
+            if (!validated.isValid) return validated
+            return response.data
+        } catch (error) { return await err.handle(error) }
+    }
+
+    directFile = async ({ key, method, endpoint, config = {} }, isGet) => {
+        try {
+            config.responseType = 'arraybuffer'
+            config.timeout = 10000
+            const response = isGet
+                ? await axios.get(endpoint, config)
+                : await axios[method](endpoint, data, config)
+            const validated = this.validate({ response })
+            if (!validated.isValid) return validated
+            const blob = cache.getBlob(response.data, response.headers['content-type'])
+            return { key, blob }
+        } catch (error) { return await err.handle(error) }
+    }
+
+    cacheGraphQl = async ({ key, method, endpoint, data = {}, config = {} }, isGet) => {
+
+    }
+
+    cacheData = async ({ key, method, endpoint, data = {}, config = {} }, isGet) => {
+
+        const cacheStore = await cache.open(this.cacheNameObjects)
+        const cachedItem = await cache.get(cacheStore, key, false)
+        const cachedResponse = cachedItem ? { key, data: cachedItem } : undefined
+        const { etag, timestamp } = await cache.getMeta(key)
+
+        const age = (Date.now() - timestamp) / 1000
+        const isFresh = cachedItem && age < this.cacheStale
+        if (isFresh) return cachedResponse
+
+        config.timeout = 10000
+        if (etag) {
+            if (!config.headers) config.headers = {}
+            config.headers['If-None-Match'] = etag
+        }
+
+        try {
+
+            const response = isGet
+                ? await axios.get(endpoint, config)
+                : await axios[method](endpoint, data, config)
+
+            if (cachedItem && response.status === 304) {
+                return cachedResponse
+            }
+
+            const validated = this.validate({ response, key })
+            if (!validated.isValid) return validated
+
+            await cache.set(cacheStore, key, response.data, false)
+            await cache.setMeta(key, response.headers['etag'])
+
+            return { key, data: response.data }
+
+        } catch (error) { return await err.cache(error, cachedResponse) }
+    }
+
+    cacheImgGet = async ({ key }) => {
+
+        const cacheStore = await cache.open(this.cacheNameImg)
+        const cachedBlob = await cache.get(cacheStore, key, true)
+        if (!cachedBlob) return null
+        return { key, blob: cachedBlob }
+
+    }
+
+    cacheImgSet = async ({ key, endpoint, config = {} }) => {
+        const cacheStore = await cache.open(this.cacheNameImg)
+        const cachedBlob = await cache.get(cacheStore, key, true)
+        const cachedResponse = cachedBlob ? { key, blob: cachedBlob } : undefined
+        const { etag, timestamp } = await cache.getMeta(key)
+
+        config.responseType = 'arraybuffer'
+        config.timeout = 10000
+
+        if (etag) {
+            if (!config.headers) config.headers = {}
+            config.headers['If-None-Match'] = etag
+        }
+
+        try {
+            const response = await axios.get(endpoint, config)
+
+            if (cachedBlob && response.status === 304) return cachedResponse
+
+            const blob = cache.getBlob(response.data, response.headers['content-type'])
+            await cache.set(cacheStore, key, blob, true)
+            await cache.setMeta(key, response.headers['etag'])
+
+            return { key, blob }
+
+        } catch (error) {
+            return await err.cache(error, cachedResponse)
+        }
+    }
+
+    cacheFile = async ({ key, method, endpoint, data = {}, config = {} }, isGet) => {
+
+        const cacheStore = await cache.open(this.cacheNameFiles)
+        const cachedBlob = await cache.get(cacheStore, key, true)
+        const cachedResponse = cachedBlob ? { key, blob: cachedBlob } : undefined
+        const { etag, timestamp } = await cache.getMeta(key)
+
+        const age = (Date.now() - timestamp) / 1000
+        const isFresh = cachedResponse && age < this.cacheStale
+        if (isFresh) return cachedResponse
+
+        config.responseType = 'arraybuffer'
+        config.timeout = 10000
+
+        if (etag) {
+            if (!config.headers) config.headers = {}
+            config.headers['If-None-Match'] = etag
+        }
+
+        try {
+            const response = isGet
+                ? await axios.get(endpoint, config)
+                : await axios[method](endpoint, data, config)
+
+            if (cachedBlob && response.status === 304) return cachedResponse
+
+            const blob = cache.getBlob(response.data, response.headers['content-type'])
+            await cache.set(cacheStore, key, blob, true)
+            await cache.setMeta(key, response.headers['etag'])
+
+            return { key, blob }
+
+        } catch (error) { return await err.cache(error, cachedResponse) }
+    }
+
+    cacheRemove = async ({ method, endpoint, cacheName }) => {
+        const key = `${method}:${endpoint}`
+        const cacheStore = await cache.open(cacheName)
+        await cache.remove(cacheStore, key)
+    }
+
+    cacheClear = async (cacheName) => await cache.clear(cacheName)
+
+    cachePreloadGet = async (items = []) => {
+
+        if (!F3.arr.isGood(items)) return
+
+        const cacheStore = await cache.open(this.cacheNameObjects)
+
+        for (const item of items) {
+
+            if (!F3.obj.isGood(item)) continue
+
+            const { url, etag, data } = item
+
+            if (!F3.str.isGood(url)) continue
+            if (!F3.str.isGood(etag)) continue
+
+            if (F3.isArr(data)) { if (!F3.arr.isGood(data)) continue } 
+            else if (F3.isObj(data)) { if (!F3.obj.isGood(data)) continue } 
+            else { if (!F3.res.isGood(data)) continue }
+
+            const method = 'get'
+            const key = abs.makeKey(url, method)
+
+            await cache.set(cacheStore, key, data, false)
+            await cache.setMeta(key, etag)
+        }
+    }
+}
+
+export const client = new Client()

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Backdrop.js

@@ -0,0 +1,21 @@
+export const Backdrop = ({ 
+    classes=[], inline={}, children, 
+    onPress=()=>{}, setIsHover=()=>{} }) => {
+    return (
+        <div className={classes.join(' ')} style={inline}
+            onClick={e => { e.stopPropagation(); return onPress()}} 
+            onMouseEnter={() => setIsHover(true)}
+            onMouseLeave={() => setIsHover(false)}
+        >
+            {children}
+        </div>
+    )
+}
+
+export const Modal = ({ classes=[], inline={}, children }) => {
+    return (
+        <div className={classes.join(' ')} style={inline} onClick={e => { e.stopPropagation()}}>
+            {children}
+        </div>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Background.js

@@ -0,0 +1,21 @@
+
+import { abs } from '#@/abstracts/abs.js' 
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { BackgroundPod } from './Background.pod.js'
+
+export const Background = ({ classes, inline, children }) => {
+
+    const statics = useGetStatics()
+    const picture = statics.visual.base.background
+    const image = abs.getImage(picture)
+
+    return (
+        <BackgroundPod 
+            {...{classes, inline}} 
+            src={image.src} 
+            ratio={image.ratio}
+        >
+            {children}
+        </BackgroundPod>
+    ) 
+}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Background.pod.js

@@ -0,0 +1,20 @@
+import { useStyle } from '#@/style/@use'
+
+export const BackgroundPod = ({ classes=[], inline={}, src={}, ratio=1, children }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+    
+    S.img = [...classes]
+    I.img = { 
+        objectFit:'cover', 
+        background:`url(${src})`, 
+        aspectRatio:ratio,
+        ...inline
+    }
+
+    return (
+        <div className={S.img.join(' ')} style={I.img}>
+            {children}
+        </div>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Href.js

@@ -0,0 +1,22 @@
+import { useNavigateUrl } from '#@/imports/router'
+import { View } from '#@/imports/core/View'
+import { Pressable } from '#@/imports/core/Pressable'
+
+export const Href = ({ classes, inline, children, linkTo, isView }) => {
+
+    const navigateUrl = useNavigateUrl()
+
+    const onPress = () => navigateUrl(linkTo)
+
+    if (isView) return (
+        <View classes={classes} inline={inline}>
+            {children}
+        </View>
+    )
+
+    return ( 
+        <Pressable classes={classes} inline={inline} onPress={onPress}>
+            {children}
+        </Pressable>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Iframe.js

@@ -0,0 +1,13 @@
+export const Iframe = ({ classes=[], inline={}, width, height, src, title, onLoad=()=>{}, onError=()=>{} }) => {
+    return (
+        <iframe className={classes.join(' ')} style={inline}
+            width={width} 
+            height={height}
+            src={src} 
+            title={title}
+            allowFullScreen
+            onLoad={onLoad}
+            onError={onError}
+        ></iframe>
+    )
+}