@fullstackunicorn/create-root 1.0.17 → 1.0.18

package/assets/root.fullstackunicorn.dev/frontend/base/router/@use.js

@@ -0,0 +1,212 @@
+import { useEffect } from 'react'
+import { useLocation, useGetUrl, useNavigate } from '#@/imports/router.js'
+import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm.js'
+import { routes } from '#@/root/routes.js'
+import { useGetLanguage } from '#@/base/language/@use.js'
+
+export const title = atom('')
+export const history = atom([])
+export const parent = atom('/')
+export const isBack = atom(false)
+
+export const useTitle = () => useAtom(title)
+export const useSetTitle = () => useSetAtom(title)
+export const useGetTitle = () => useGetAtom(title)
+
+export const useHistory = () => useAtom(history)
+export const useSetHistory = () => useSetAtom(history)
+export const useGetHistory = () => useGetAtom(history)
+
+export const useParent = () => useAtom(parent)
+export const useSetParent = () => useSetAtom(parent)
+export const useGetParent = () => useGetAtom(parent)
+
+export const useIsBack = () => useAtom(isBack)
+export const useSetIsBack = () => useSetAtom(isBack)
+export const useGetIsBack = () => useGetAtom(isBack)
+
+export const useUrl = () => {
+
+    const language = useGetLanguage()
+    const location = useLocation()
+    const parts = location.pathname.split('/').filter(Boolean)
+    const urlLang = parts?.[0]?.match(/^[a-z]{2}-[A-Z]{2}$/) ? parts[0] : null
+
+    const response = {}
+    response.isPlain = !urlLang
+    response.isLang = language.slug === urlLang
+    response.lang = language.slug
+    response.path = urlLang ? parts.slice(1).join('/') : parts.join('/')
+    response.url = location.pathname
+    response.query = location.search
+    response.isUrl = url => location.pathname === url
+
+    return response
+}
+
+const replaceParents = (match) => {
+    const { route, params } = match;
+    return route.parent.map(parentPath => {
+        let result = parentPath;
+        Object.keys(params).forEach(param => {
+            result = result.replace(`:${param}`, params[param]);
+        });
+        return result.replace(/\/+/g, '/');
+    });
+};
+
+const matchRoute = (url, routes) => {
+
+    const parts = url.split('/').filter(Boolean)
+
+    for (let depth = parts.length - 1; depth >= 1; depth--) {
+
+        const key = parts.slice(1, 1 + depth).join('/')
+        const route = routes[key]
+
+        if (!route) continue
+
+        const routeParts = route.path.split('/').filter(Boolean)
+        if (parts.length !== routeParts.length) continue
+
+        const params = {}
+        let isMatch = true
+
+        for (let i = 0; i < routeParts.length; i++) {
+            const routePart = routeParts[i]
+            const part = parts[i]
+
+            if (routePart.startsWith(':')) {
+                params[routePart.slice(1)] = part
+                continue
+            }
+
+            if (routePart !== part) {
+                isMatch = false
+                break
+            }
+        }
+
+        if (!isMatch) continue
+
+        return { route, params }
+    }
+
+    return { route: null, params: {}, render: null }
+}
+
+// const matchRoute = (url, routes) => {
+
+//     const parts = url.split('/').filter(Boolean);
+
+//     for (const category in routes) {
+
+//         const route = routes[category];
+//         const routeParts = route.path.split('/').filter(Boolean)
+
+//         if (parts.length === routeParts.length) {
+
+//             const params = {};
+//             let isMatch = true;
+
+//             for (let i = 0; i < routeParts.length; i++) {
+//                 if (routeParts[i].startsWith(':')) {
+//                     params[routeParts[i].slice(1)] = parts[i]
+//                 } else if (routeParts[i] !== parts[i]) {
+//                     isMatch = false;
+//                     break;
+//                 }
+//             }
+//             if (isMatch) return { route, params }
+//         }
+//     }
+
+//     return { route: null, params: {}, render: null }
+// };
+
+export const useGetParents = () => {
+    const url = useGetUrl()
+    const match = matchRoute(url, routes.public)
+    const parents = replaceParents(match)
+    return parents
+}
+
+export const useChronology = () => {
+
+    const { isLang, lang, url, path } = useUrl()
+
+    const [history, setHistory] = useHistory()
+    const navigate = useNavigate()
+    const setIsBack = useSetIsBack()
+
+    const homePath = F3.fabUrl(routes.public.home.path, { lang })
+    const parents = useGetParents()
+
+    useEffect(() => {
+
+        if (!isLang) {
+            const correctPath = url.replace(/^\/[^/]+/, `/${lang}`)
+            navigate(correctPath, { replace: true })
+            return
+        }
+
+        if (!history.length) {
+            if (url === '/') return
+            else if (F3.arr.isGood(parents)) setHistory([url, ...parents, homePath])
+            else setHistory([url, homePath])
+        } else if (history[0] !== url) {
+            if (history[1] === url) {
+                const nextHistory = history.slice(1, history.length)
+                setIsBack(true)
+                setHistory(nextHistory)
+            } else {
+                setIsBack(false)
+                setHistory([url, ...history])
+            }
+        }
+    }, [url])
+}
+
+
+// export const useSetDynamic = () => {
+
+//     const setHistory = useSetHistory()
+//     const history = useGetHistory()
+//     const { url, lang } = useUrl()
+
+//     return (params = {}) => {
+
+//         const match = matchRoute(url, routes.public)
+//         const dynamic = match?.route?.dynamic
+
+//         if (!F3.arr.isGood(dynamic)) return
+//         if (!F3.arr.isGood(history)) return
+
+//         const homePath = F3.fabUrl(routes.public.home.path, { lang })
+
+//         if (history.length !== 2) return
+//         if (history[0] !== url) return
+//         if (history[1] !== homePath) return
+
+//         const resolved = dynamic.map(path => {
+//             let value = path
+
+//             for (const key in params) {
+//                 value = value.replace(`:${key}`, params[key])
+//             }
+
+//             return value.replace(/\/+/g, '/')
+//         })
+
+//         setHistory([url, ...resolved, homePath])
+//     }
+// }
+
+// ------> how to use it. 
+
+// const setDynamic = useSetDynamic()
+
+// useEffect(() => {
+//     if (!api?.group) return
+//     setDynamic({ group: api.group })
+// }, [api])

package/assets/root.fullstackunicorn.dev/frontend/base/router/Router.js

@@ -0,0 +1,21 @@
+import { Routes as RouterRoutes, Route } from '#@/imports/router.js'
+import { routes } from '#@/root/routes.js'
+import { useGetUser } from '#@/base/account/@use.js'
+import { Layout } from '#@/base/layout/Layout.js'
+import { tools } from '#@/base/router/@tools.js'
+import { useUrl } from '#@/base/router/@use.js'
+
+export const Router = () => { 
+
+    const user = useGetUser()
+    const { lang } = useUrl() 
+    const homePath = F3.fabUrl(routes.public.home.path, { lang })
+    
+    return (
+        <RouterRoutes>
+            <Route  path='' element={<Layout/>}>
+                {tools.routes(routes, user, homePath)}
+            </Route>
+        </RouterRoutes>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/statics/@use.js

@@ -0,0 +1,46 @@
+import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm.js'
+
+export const statics = atom({})
+
+export const isStaticsInitialized = atom(false)
+export const initializeStatics = atom(
+    (get) => get(isStaticsInitialized),
+    async (get, set, init) => {
+        set(statics, init)
+        set(isStaticsInitialized, true)
+    }
+)
+
+export const useInitializeStatics = () => useAtom(initializeStatics)
+
+export const useStatics = () => useAtom(statics)
+export const useSetStatics = () => useSetAtom(statics)
+export const useGetStatics = () => useGetAtom(statics)
+
+export const setLogicAtom = atom(
+    null,
+    (get, set, logic) => {
+        const prev = get(statics)
+        set(statics, { ...prev, logic })
+    }
+)
+
+export const setVisualAtom = atom(
+    null,
+    (get, set, visual) => {
+        const prev = get(statics)
+        set(statics, { ...prev, visual })
+    }
+)
+
+export const setVerbalAtom = atom(
+    null,
+    (get, set, verbal) => {
+        const prev = get(statics)
+        set(statics, { ...prev, verbal })
+    }
+)
+
+export const useSetLogic = () => useSetAtom(setLogicAtom)
+export const useSetVisual = () => useSetAtom(setVisualAtom)
+export const useSetVerbal = () => useSetAtom(setVerbalAtom)

package/assets/root.fullstackunicorn.dev/frontend/base/theme/@use.js

@@ -0,0 +1,28 @@
+import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm'
+import { storage } from '#@/imports/storage'
+
+export const isDark = atom()
+export const handleIsDark = atom(
+    (get) => get(isDark),
+    (get, set, value) => {
+        set(isDark, value)
+        storage.set('isDark', value) 
+    }
+)
+
+export const isThemeInitialized = atom(false)
+export const initializeTheme = atom (
+    (get) => get(isThemeInitialized),
+    async (get, set, value=false) => {
+        set(isDark, storage.init('isDark', value))
+        set(isThemeInitialized, true)
+    }
+)
+
+export const useInitializeTheme = () => useAtom(initializeTheme)
+
+export const useIsDark = () => useAtom(handleIsDark)
+export const useSetIsDark = () => useSetAtom(handleIsDark)
+export const useGetIsDark = () => useGetAtom(handleIsDark)
+
+

package/assets/root.fullstackunicorn.dev/frontend/base/theme/ThemeCard.js

@@ -0,0 +1,21 @@
+import { useIsDark } from '#@/base/theme/@use.js'
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { Slider } from '#@/panels/cards/Slider.js'
+
+export const ThemeCard = ({ api }) => {
+
+    const statics = useGetStatics()
+    const [isDark, setIsDark ] = useIsDark()
+    const handleSetIsDark = () => setIsDark(!isDark)
+
+    return (
+        <Slider
+            svg={statics.visual.svg.theme}
+            isTrue={isDark}
+            setIsTrue={handleSetIsDark}
+            title={api.title}
+            description={api.description}
+            label={isDark ? api.isLabelOn : api.isLabelOff}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/client/@api.js

@@ -0,0 +1,15 @@
+import { auth } from '#@/client/auth.js'
+import { cookies } from '#@/client/cookies.js'
+import { fonts } from '#@/client/fonts.js'
+import { load } from '#@/client/load.js'
+import { statics } from '#@/client/statics.js'
+import { stripe } from '#@/client/stripe.js'
+
+export const api = {
+    auth,
+    cookies,
+    fonts,
+    load,
+    statics,
+    stripe
+}

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

@@ -0,0 +1,213 @@
+import { constants } from '#@/root/constants.js'
+import { uri } from '#@/App.uri.js'
+import { abs } from '#@/abstracts/abs'
+import { err } from '#@/abstracts/err'
+import { client } from '#@/imports/client'
+import { storage } from '#@/imports/storage'
+
+class Auth {
+
+    config = { headers: { 'Content-Type': 'application/json' } }
+    env = constants.env
+
+    getUser = (token = {}) => ({ id: token.sub, logo: token.logo })
+
+    loginOps = ['login', 'signup']
+
+    login = async (type, token_encoded) => {
+
+        try {
+
+            if (!this.loginOps.includes(type)) throw new Error('abort')
+
+            const token = abs.jwt.decode(token_encoded)
+            if (token.isError) throw new Error('abort')
+
+            const nonce = storage.get(type)
+
+            // const isValid = nonce === token.nonce
+            // if (!isValid) throw new Error('abort')
+
+            // const rawToken = {}
+            // rawToken.authcode = token.authcode
+            // // rawToken.nonce = nonce
+            // rawToken.client_id = env.CLIENT_ID
+
+            const config = this.config
+            const data = { token: token_encoded, nonce }
+            const endpoint = uri.auth.client.login
+
+            const response = await client.post(endpoint, data, config)
+
+            if (response.isOffline) return { isOffline: true }
+            if (response.isError) throw new Error('abort')
+            if (!response.access_token) throw new Error('abort')
+            if (!response.refresh_token) throw new Error('abort')
+
+            storage.set('accessToken', response.access_token)
+            storage.set('refreshToken', response.refresh_token)
+            storage.remove(type)
+
+            return this.getUser(response.access_token)
+
+        } catch (error) { 
+            console.log("error", error)
+            return err.cleanup(() => storage.remove(type), { isError: true }) }
+    }
+
+    refresh = async (refresh_token) => {
+
+        const config = this.config
+        const data = { refresh_token, client_id: this.env.CLIENT_ID }
+        const endpoint = uri.auth.client.refresh
+
+        return await client.post(endpoint, data, config)
+
+    }
+
+    logout = async () => {
+
+        const refresh_token = storage.get('refreshToken') || ''
+        const access_token = storage.get('accessToken') || ''
+
+        if (!refresh_token && !access_token) return { isLogout: true }
+
+        const config = this.config
+        const data = { access_token, refresh_token, client_id: this.env.CLIENT_ID }
+        const endpoint = uri.auth.client.logout
+
+        const response = await client.post(endpoint, data, config)
+
+        const isLogout = response.access_token && response.refresh_token
+
+        return isLogout || response
+
+    }
+
+    handleAccessToken = (accessToken) => {
+
+        try {
+
+            if (!accessToken) throw new Error('is-logout')
+
+            const accessTokenDecoded = abs.jwt.decode(accessToken)
+            if (accessTokenDecoded.isError) throw new Error('is-logout')
+
+            const date = (Date.now() / 1000) | 0
+            const accessTokenTimeLeft = accessTokenDecoded.exp - date
+            if (accessTokenTimeLeft < 20) throw new Error('is-logout')
+
+            return { token: accessToken, decoded: accessTokenDecoded }
+
+        } catch (error) { return {} }
+    }
+
+    handleRefreshToken = async (refreshToken) => {
+
+        try {
+
+            if (!refreshToken) throw new Error('is-error')
+
+            const refreshTokenDecoded = abs.jwt.decode(refreshToken)
+
+            if (refreshTokenDecoded.isError) throw new Error('is-error')
+
+            const date = (Date.now() / 1000) | 0
+            const refreshTokenTimeLeft = refreshTokenDecoded.exp - date
+            if (refreshTokenTimeLeft < 20) throw new Error('is-error')
+
+            const response = await this.refresh(refreshToken)
+
+            if (response.isOffline) return { isOffline: true }
+            if (!response.access_token) throw new Error('is-error')
+            if (!response.refresh_token) throw new Error('is-error')
+
+            storage.set('accessToken', response.access_token)
+            storage.set('refreshToken', response.refresh_token)
+
+            const accessTokenDecoded = abs.jwt.decode(response.access_token)
+            if (!accessTokenDecoded) throw new Error('is-error')
+
+            return { access: response.access_token, decoded: accessTokenDecoded }
+
+        } catch (error) { return {} }
+    }
+
+    cleanUp = () => {
+        storage.remove('accessToken')
+        storage.remove('refreshToken')
+    }
+
+    getUserOffline = (token) => {
+
+        try {
+
+            if (!token) throw new Error('is-error')
+
+            const tokenDecoded = abs.jwt.decode(token)
+            if (!tokenDecoded) throw new Error('is-error')
+
+            const user = this.getUser(tokenDecoded)
+            return { ...user, isOffline: true }
+
+        } catch (error) { return {} }
+    }
+
+    init = async () => {
+
+        try {
+
+            const accessToken = storage.get('accessToken')
+            if (!accessToken) throw new Error('is-logout')
+
+            const refreshToken = storage.get('refreshToken')
+            if (!refreshToken) throw new Error('is-logout')
+
+            let access
+
+            access = this.handleAccessToken(accessToken)
+            if (access.decoded?.sub) return this.getUser(access.decoded)
+
+            access = await this.handleRefreshToken(refreshToken)
+            if (access.decoded?.sub) return this.getUser(access.decoded)
+
+            if (access.isOffline) {
+                const user = this.getUserOffline(accessToken)
+                if (user.id) return user
+                new Error('is-logout')
+            }
+
+            throw new Error('is-logout')
+
+        } catch (error) { 
+            return { isLogout: true }
+            // return err.cleanup(this.cleanUp, { isLogout: true }) 
+        }
+    }
+
+    getAccessToken = async () => {
+
+        try {
+
+            const accessToken = storage.get('accessToken')
+            if (!accessToken) throw new Error('is-logout')
+
+            const refreshToken = storage.get('refreshToken')
+            if (!refreshToken) throw new Error('is-logout')
+
+            let access
+
+            access = this.handleAccessToken(accessToken)
+            if (access.token) return { accessToken: access.token }
+
+            access = await this.handleRefreshToken(refreshToken)
+            if (access.token) return { accessToken: access.token }
+
+            if (access.isOffline) return { isOffline: true }
+            throw new Error('is-logout')
+
+        } catch (error) { return err.cleanup(this.cleanUp, { isLogout: true }) }
+    }
+}
+
+export const auth = new Auth()

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

@@ -0,0 +1,41 @@
+import { uri } from '#@/App.uri.js'
+import { abs } from '#@/abstracts/abs.js'
+import { client } from '#@/imports/client.js'
+import { storage } from '#@/imports/storage.js'
+
+class Cookies {
+
+    set = async (consent) => { 
+
+        const data = {consent}
+        const endpoint = uri.cookies.set 
+        const response = await client.post(endpoint, data)
+
+        if (response.isOffline || response.isError) return response
+        if (!response.consent_id) return { isError: true }        
+        return response
+    }
+
+    get = async () => {
+
+        const consent = storage.get('consent')
+        if (!consent) return { isNotFound: true }
+
+        const payload = {}
+        payload.method = 'post'
+        payload.data = { consent }
+        payload.endpoint = uri.cookies.get
+        payload.key = abs.makeKey(payload.endpoint, payload.method, payload.data)
+
+        const response = await client.data(payload)
+
+        if (response.isOffline || response.isError) return response        
+        if (response?.data?.isNotFound ) return { isNotFound: true }
+        if (!response?.data?.consent_id) return { isError: true }
+
+        return response
+    }
+
+}
+
+export const cookies = new Cookies()

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

@@ -0,0 +1,19 @@
+import { client } from '#@/imports/client.js'
+
+class Fonts {
+
+    get = async (endpoint, is = {}) => {
+
+        const payload = {}
+        payload.method = 'get' 
+        payload.endpoint = endpoint
+
+        const response = await client.file(payload, true)
+
+        if (!response.blob) return response
+        if (is.blob) return response.blob
+        return await response.blob.text()
+    }
+}
+
+export const fonts =  new Fonts ()

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

@@ -0,0 +1,26 @@
+import { abs } from '#@/abstracts/abs.js'
+import { client } from '#@/imports/client.js'
+
+class Load {
+
+    post = async (path, data) => {
+
+        const payload = {}
+        payload.method = 'post'
+        payload.endpoint = path
+        payload.data = data
+        payload.config = {}
+        payload.config.headers = { 'Content-Type': 'application/json' }
+        payload.key = abs.makeKey(payload.endpoint, payload.method, data)
+
+        const response = await client.data(payload)
+        if (response?.isOffline) return
+        if (response?.isError) return
+        const items = response?.data?.items
+        if (!F3.obj.isGood(items)) return
+        await client.cachePreloadGet(Object.values(items))
+        return response
+    }
+}
+
+export const load = new Load()

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

@@ -0,0 +1,47 @@
+import { abs } from '#@/abstracts/abs'
+import { client } from '#@/imports/client'
+
+class Statics {
+
+    get = async (path, params = {}) => {
+
+        const payload = {}
+        payload.method = 'get'
+        payload.endpoint = F3.fabUrl(path, params)
+        payload.key = abs.makeKey(payload.endpoint, payload.method)
+
+        const response = await client.data(payload)
+
+        return response.data
+    }
+
+    post = async (path, data) => {
+
+        const payload = {}
+        payload.method = 'post'
+        payload.endpoint = path
+        payload.data = data
+        payload.config = {}
+        payload.config.headers = {'Content-Type': 'application/json'}
+        payload.key = abs.makeKey(payload.endpoint, payload.method, data)
+
+        const response = await client.data(payload)
+
+        return response
+    }
+
+    image = async (path, type) => {
+
+        const payload = {}
+        payload.method = 'get'
+        payload.endpoint = path
+        payload.key = abs.makeKey(payload.endpoint, payload.method)
+
+        const response = await client.image(payload, type)
+
+        return response
+
+    }
+}
+
+export const statics = new Statics()