@fullstackunicorn/create-root 1.0.17 → 1.0.18

package/assets/root.fullstackunicorn.dev/frontend/base/loader/@tools.js

@@ -0,0 +1,111 @@
+import { storage } from '#@/imports/storage.js'
+import { api } from '#@/client/@api.js'
+import { uri } from '#@/App.uri.js'
+import { tools as languageTools } from '#@/base/language/@tools.js'
+
+class Tools {
+
+    handleAuth = async ({ setAlerts, setUser, setIsAuthRun, navigate, query }) => {
+        const [request_type, token_encoded] = query.split('?')[1].split('&')
+        const user = await api.auth.login(request_type, token_encoded)
+        if (user.isOffline) setAlerts({ id: 'offline', onClose: () => setIsAuthRun(true) })
+        else if (user.isError) navigate(`/errors/${user.error || 'login-failed'}`)
+        else {
+            setUser(user)
+            navigate('/user')
+        }
+        setIsAuthRun(false)
+    }
+
+    loadData = async () => {
+
+        const funcs = {}
+        funcs.logic = async () => await api.statics.get(uri.data.root.logic, { path: 'statics' })
+        funcs.visual = async () => await api.statics.get(uri.data.root.visual, { path: 'statics' })
+        funcs.graphic = async () => await api.statics.get(uri.data.root.graphic, { path: 'statics' })
+        funcs.logicLanguages = async () => await api.statics.get(uri.data.lookups.logic, { path: 'languages' })
+        funcs.logicAlphabets = async () => await api.statics.get(uri.data.lookups.logic, { path: 'alphabets' })
+
+        const { logic, visual, graphic, logicLanguages, logicAlphabets } = await F3.promises(funcs)
+
+        const lookups = {}
+        lookups.languages = { logic: logicLanguages['@data'].items }
+        lookups.alphabets = { logic: logicAlphabets['@data'].items }
+        lookups.cookies = {}
+
+        const { verbal, language } = await this.getVerbal(logic, lookups)
+
+        const lang = language.language.slug
+
+        const newFunc = {}
+        newFunc.cookiesVerbal = async () => await api.statics.get(uri.data.lookups.verbal, { path: 'cookies', lang })
+
+        if (logic['@lang'] === lang) {
+
+            newFunc.languagesVerbal = async () => await api.statics.get(uri.data.lookups.verbal, { path: 'languages', lang })
+            const { cookiesVerbal, languagesVerbal } = await F3.promises(newFunc)
+            lookups.cookies.verbal = cookiesVerbal['@data']
+            lookups.languages.verbal = languagesVerbal['@data']
+            lookups.languages.original = lookups.languages.verbal
+
+        } else {
+
+            newFunc.languagesVerbal = async () => await api.statics.get(uri.data.lookups.verbal, { path: 'languages', lang })
+            newFunc.languagesOriginal = async () => await api.statics.get(uri.data.lookups.verbal, { path: 'languages', lang: logic['@lang'] })
+            const { cookiesVerbal, languagesVerbal, languagesOriginal } = await F3.promises(newFunc)
+            lookups.cookies.verbal = cookiesVerbal['@data']
+            lookups.languages.verbal = languagesVerbal['@data']
+            lookups.languages.original = languagesOriginal['@data']
+            
+        }
+
+        const statics = { logic, visual, graphic, verbal }
+
+        return { statics, lookups, language }
+    }
+
+    getVerbal = async (logic, lookups) => {
+
+        const defaults = {}
+        defaults.language = languageTools.getLanguage(logic['@lang'], lookups)
+        defaults.languageContent = languageTools.getLanguage(logic['@lang'], lookups)
+
+        const saved = {}
+        saved.languageContent = storage.getJSON('languageContent')
+        saved.language = storage.getJSON('language')
+
+        const isSavedLanguage = saved.language.slug && saved.language.slug !== defaults.language.slug
+        const isSavedLanguageContent = saved.languageContent.slug && saved.languageContent.slug !== defaults.languageContent.slug
+
+        const result = {}
+        result.language = {}
+
+        if (isSavedLanguageContent) result.language.languageContent = saved.languageContent
+        else result.language.languageContent = defaults.languageContent
+
+        try {
+
+            if (isSavedLanguage) {
+                const response = await api.statics.get(uri.data.root.verbal, { path: 'statics', lang: saved.language.slug })
+                if (saved.language.slug === response['@lang']) {
+                    result.verbal = response['@data']
+                    result.language.language = saved.language
+                    return result
+                }
+            }
+
+            const response = await api.statics.get(uri.data.root.verbal, { path: 'statics', lang: defaults.language.slug })
+            result.verbal = response['@data']
+            result.language.language = defaults.language
+            return result
+
+        } catch (error) {
+            const response = await api.statics.get(uri.data.root.verbal, { path: 'statics', lang: defaults.language.slug })
+            result.verbal = response['@data']
+            result.language.language = defaults.language
+            return result
+        }
+    }
+}
+
+export const tools = new Tools()

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

@@ -0,0 +1,35 @@
+import { atom, useAtom } from '#@/imports/npm.js'
+import { initializeCookies } from '#@/base/cookies/@use.js'
+import { initializeLayout } from '#@/base/layout/@use.js'
+import { initializeTheme } from '#@/base/theme/@use.js'
+import { initializeLanguage } from '#@/base/language/@use.js'
+import { initializeStatics } from '#@/base/statics/@use.js'
+import { initializeLookups } from '#@/base/lookups/@use.js'
+import { initializeUser } from '#@/base/account/@use.js'
+import { tools } from '#@/base/loader/@tools.js'
+
+export const isInitialized = atom(false)
+export const initialize = atom(
+    (get) => (
+        get(initializeCookies) &&
+        get(initializeLayout) &&
+        get(initializeTheme) &&
+        get(initializeLanguage) &&
+        get(initializeStatics) &&
+        get(initializeLookups) &&
+        get(initializeUser) &&
+        get(isInitialized)
+    ),
+    async (get, set, defaults = {}) => {
+        const data = await tools.loadData()
+        await set(initializeCookies, data.statics)
+        await set(initializeLayout, true)
+        await set(initializeTheme, defaults.isDark)
+        await set(initializeLanguage, data.language)
+        await set(initializeStatics, data.statics)
+        await set(initializeLookups, data.lookups)
+        await set(initializeUser, true)
+        await set(isInitialized, true)
+    }
+)
+export const useInitialize = () => useAtom(initialize)

package/assets/root.fullstackunicorn.dev/frontend/base/loader/Loader.js

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+import { useLoadFonts } from '#@/imports/fonts/use.js'
+import { Root } from '#@/imports/animated/Root.js'
+import { Normalizer } from '#@/base/loader/Normalizer.js'
+import { Starter } from '#@/base/loader/Starter.js'
+import { Router } from '#@/base/router/Router.js'
+import { Preloader } from '#@/preloader/Preloader.js'
+
+export const Loader = () => {
+
+    const [isStarted, setIsStarted] = useState(false)
+    const [isLoaded, setIsLoaded] = useState(false)
+    const isFontLoaded = useLoadFonts(isLoaded)
+    const isRoot = isStarted && isLoaded && isFontLoaded
+
+    if (isRoot) return <Root isLoaded><Router/><Preloader/></Root> 
+    else if (isStarted) return <Normalizer setIsLoaded={setIsLoaded}/>
+    else return <Starter setIsStarted={setIsStarted}/>
+
+}  

package/assets/root.fullstackunicorn.dev/frontend/base/loader/Normalizer.js

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from '#@/imports/router.js'
+import { routes } from '#@/root/routes.js'
+import { useUrl } from '#@/base/router/@use.js'
+import { useGetLanguage } from '#@/base/language/@use.js'
+import { useSetAlerts } from '#@/base/alerts/@use.js'
+import { useSetUser } from '#@/base/account/@use.js'
+import { useSetCheckout } from '#@/base/checkout/@use.js'
+import { tools } from '#@/base/loader/@tools.js'
+import { tools as checkoutTools } from '#@/base/checkout/@tools.js'
+
+export const Normalizer = ({ setIsLoaded }) => {
+
+    const [isAuthRun, setIsAuthRun] = useState(true)
+    const [isPayRun, setIsPayRun] = useState(true)
+
+    const { isPlain, lang, path, url, query } = useUrl()
+    const navigate = useNavigate()
+    const language = useGetLanguage()
+    const setAlerts = useSetAlerts()
+    const setUser = useSetUser()
+    
+    const setCheckout = useSetCheckout()
+
+    const isApp = url.startsWith('/app')
+    const isAuth = url === '/auth' && isAuthRun
+    const isPay = url === '/pay' && isPayRun
+    const isHome = url === '/'
+    const isWrongLang = lang !== language.slug
+
+    const homePath = F3.fabUrl(routes.public.home.path, { lang: language.slug })
+
+    useEffect(() => {
+
+        if (isApp) {
+            setIsLoaded(true)
+            return
+        }
+
+        if (isAuth) {
+            tools.handleAuth({ setAlerts, setUser, setIsAuthRun, navigate, query })
+            return
+        }
+
+        if (isPay) {
+            checkoutTools.handlePay({ setCheckout, setIsPayRun, navigate, query, lang:language.slug, homePath})
+            return
+        }
+
+        if (isHome) navigate(homePath)
+        else if (isPlain) navigate(`/${language.slug}${url}`)
+        else if (isWrongLang) navigate(`/${language.slug}/${path}`)
+        else setIsLoaded(true)
+
+    }, [isApp, isAuth, isPay, isHome, isWrongLang, isPlain])
+
+    return null
+}

package/assets/root.fullstackunicorn.dev/frontend/base/loader/Starter.js

@@ -0,0 +1,17 @@
+import { useEffect } from 'react'
+import { useIsDefaultThemeDark } from '#@/imports/use'
+import { useInitialize } from '#@/base/loader/@use'
+
+export const Starter = ({ setIsStarted = () => { } }) => {
+
+    const defaults = {}
+    defaults.isDark = useIsDefaultThemeDark()
+
+    const [isInitialized, setIsInitialized] = useInitialize()
+
+    useEffect(() => {
+        if (isInitialized) setIsStarted(true)
+        else setIsInitialized(defaults)
+    }, [isInitialized])
+    return null
+}

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

@@ -0,0 +1,85 @@
+import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm.js'
+
+export const lookups = atom({})
+
+export const isLookupsInitialized = atom(false)
+export const initializeLookups = atom(
+    (get) => get(isLookupsInitialized),
+    async (get, set, init) => {
+        set(lookups, init)
+        set(isLookupsInitialized, true)
+    }
+)
+
+export const useInitializeLookups = () => useAtom(initializeLookups)
+
+export const useLookups = () => useAtom(lookups)
+export const useSetLookups = () => useSetAtom(lookups)
+export const useGetLookups = () => useGetAtom(lookups)
+
+export const setAlphabetsAtom = atom(
+    null,
+    (get, set, newAlphabets) => {
+        const prev = get(lookups)
+        const prevAlphabets = prev?.alphabets || {}
+        const alphabets = { ...prevAlphabets, ...newAlphabets }
+        set(lookups, { ...prev, alphabets })
+    }
+)
+
+export const setCookiesAtom = atom(
+    null,
+    (get, set, newCookies) => {
+        const prev = get(lookups)
+        const prevCookies = prev?.cookies || {}
+        const cookies = { ...prevCookies, ...newCookies }
+        set(lookups, { ...prev, cookies })
+    }
+)
+
+export const setCountriesAtom = atom(
+    null,
+    (get, set, newCountries) => {
+        const prev = get(lookups)
+        const prevCountries = prev?.countries || {}
+        const countries = { ...prevCountries, ...newCountries }
+        set(lookups, { ...prev, countries })
+    }
+)
+
+export const setLanguagesAtom = atom(
+    null,
+    (get, set, newLanguages) => {
+        const prev = get(lookups)
+        const prevLanguages = prev?.languages || {}
+        const languages = { ...prevLanguages, ...newLanguages }
+        set(lookups, { ...prev, languages })
+    }
+)
+
+export const setMonthsAtom = atom(
+    null,
+    (get, set, newMonths) => {
+        const prev = get(lookups)
+        const prevMonths = prev?.months || {}
+        const months = { ...prevMonths, ...newMonths }
+        set(lookups, { ...prev, months })
+    }
+)
+
+export const setWeekdaysAtom = atom(
+    null,
+    (get, set, newWeekdays) => {
+        const prev = get(lookups)
+        const prevWeekdays = prev?.weekdays || {}
+        const weekdays = { ...prevWeekdays, ...newWeekdays }
+        set(lookups, { ...prev, weekdays })
+    }
+)
+
+export const useSetLanguages = () => useSetAtom(setLanguagesAtom)
+export const useSetAlphabets = () => useSetAtom(setAlphabetsAtom)
+export const useSetCountries = () => useSetAtom(setCountriesAtom)
+export const useSetMonths = () => useSetAtom(setMonthsAtom)
+export const useSetWeekdays = () => useSetAtom(setWeekdaysAtom)
+export const useSetCookies = () => useSetAtom(setCookiesAtom)

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

@@ -0,0 +1,67 @@
+import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm'
+import { useStyle } from '#@/style/@use'
+// import { useGetSize } from '#@/base/layout/@use'
+         
+export const modals = atom([])
+export const modalUrl = atom('')
+export const modalError = atom({})
+
+
+export const useModals = () => useAtom(modals)
+export const useSetModals = () => useSetAtom(modals)
+export const useGetModals = () => useGetAtom(modals)
+
+export const useModalUrl = () => useAtom(modalUrl)
+export const useSetModalUrl = () => useSetAtom(modalUrl)
+export const useGetModalUrl = () => useGetAtom(modalUrl)
+
+export const useModalError = () => useAtom(modalError)
+export const useSetModalError = () => useSetAtom(modalError)
+export const useGetModalError = () => useGetAtom(modalError)
+
+export const useModalClose = () => {
+
+    const [modals, setModals] = useModals()
+    const [error={}, setError] = useModalError()
+    const setUrl = useSetModalUrl()
+
+    const modalClose = (modalId) => {
+        setUrl('')
+        if (error.name) setError({})
+        const nextModals = modals.filter(current => current.id !== modalId)
+        setModals(nextModals)
+    }
+    return modalClose
+}
+
+export const useModalStyle = (type = 'default') => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+    // const size = useGetSize()
+    // const isFixed = useGetIsFixed()
+    // const isOversize = useGetIsOversize()
+    // const isSideOneOn = useGetIsSideOneOn()
+    // const isSideTwoOn = useGetIsSideTwoOn()
+
+    // const isSize1 = size === '1'
+    // const isSize2 = size === '2'
+    // const isSize3 = size === '3'
+
+    // if (isOversize && isFixed) return { isMax:true, margin:[] }
+
+    if (type === 'popup') return { type }
+
+    return { type, isMax:true, margin:[] }
+
+    // if (isSize1) 
+        // return { margin:[s.marginX12] }
+
+    // if (isSize2 && isSideOneOn) return { margin:[s.marginS344, s.marginE12] }
+    // if (isSize2 && !isSideOneOn) return { margin:[s.marginX12] }
+
+    // if (isSize3 && isSideOneOn && isSideTwoOn) return { margin:[s.marginX344] }
+    // if (isSize3 && isSideOneOn && !isSideTwoOn) return { margin:[s.marginS344, s.marginE12] }
+    // if (isSize3 && !isSideOneOn && isSideTwoOn) return { margin:[s.marginS12, s.marginE344] }
+    // if (isSize3 && !isSideOneOn && !isSideTwoOn) return { margin:[s.marginX12] }
+
+}

package/assets/root.fullstackunicorn.dev/frontend/base/modals/Modal.js

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react'
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { useModalStyle, useGetModalError, useModalClose } from '#@/base/modals/@use.js'
+// import { ErrorsModal } from '#@/base/errors'
+import { ModalPod } from './Modal.pod.js'
+import { ModalPopupPod } from './ModalPopup.pod.js'
+
+export const Modal = ({ id, key, children, title, svg, actions, isCloseDisabled, type = 'default' }) => {
+
+    const statics = useGetStatics()
+
+    const [isClosed, setIsClosed] = useState(false)
+
+    const modalClose = useModalClose()
+    const handleClose = () => modalClose(id)
+    const close = () => isCloseDisabled || isError ? ()=>{} : setIsClosed(true)
+    const error = useGetModalError()
+    const isError = error?.name
+    
+    const style = useModalStyle(type)
+ 
+    useEffect(()=>{
+        if (!isClosed) return
+        else handleClose()
+    })
+
+    const Pod = type === 'popup' ? ModalPopupPod : ModalPod
+
+    return (
+        <Pod
+            key={key}
+            title={title}
+            svg={{logo:svg, cancel:statics.visual.svg.confirmFalse}}
+            actions={actions}
+            isCloseDisabled={isCloseDisabled}
+            style={style}
+            close={close}
+            isClosed={isClosed}
+            isError={isError}
+        >{children}</Pod>
+    )
+} 

package/assets/root.fullstackunicorn.dev/frontend/base/modals/Modal.pod.js

@@ -0,0 +1,43 @@
+import { useStyle } from '#@/style/@use.js'
+import { Backdrop, Modal } from '#@/imports/core/Backdrop.js'
+import { View } from '#@/imports/core/View.js'
+import { Scrollable } from '#@/imports/core/Scrollable.js'
+import { Textline } from '#@/imports/core/Text.js'
+import { Icon } from '#@/modules/core/Icon.js'
+
+export const ModalPod = ({ children, title, svg, actions, isCloseDisabled, style = {}, close, error, isError, isClosed }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    F.title = [s.fs16, s.lh24, s.fw500]
+
+    B.disabled = isCloseDisabled ? c.item_NN_B600_30 : c.item_NN_B600
+    B.isMax = style.isMax ? [s.Xr, s.Xmax600] : [s.Xr]
+    B.margin = style.margin
+
+    S.overlay = [s.row_cXcY, s.absolute, s.overflowXYh, s.paddingX16, s.XY, s.G1, s.Z10, c.base_NN_B750_40]
+    S.modal = [s.col, s.Yr, s.Ymin0, s.overflowXYh, s.paddingX20, s.radius20, s.marginY16, ...B.isMax, ...B.margin, c.base_NN_W700]
+    S.layout = [s.col, s.XYc, s.Ymin0]
+    S.header = [s.row_cXcY, s.Xr, s.Y40, s.marginY20]
+    S.icon = [s.XY32, s.margin4, c.item_NN_B400]
+    S.iconCancel = [s.XY32, s.margin4, B.disabled]
+    S.title = [s.row_cXcY, s.Xr, ...F.title, c.item_NN_B400]
+    S.body = [s.col, s.XYc, s.Ymin0]
+    S.footer = [s.row_cXcY, s.Xc, s.Y80, c.base_NN_W700]
+
+    return (
+        <Backdrop classes={S.overlay} isClosed={isClosed} onPress={close}>
+            <Modal classes={S.modal} isClosed={isClosed}>
+                <View classes={S.layout}>
+                    <View classes={S.header}>
+                        <Icon classes={S.icon} svg={svg.logo} />
+                        <Textline classes={S.title} font={f.f1} text={title} />
+                        <Icon classes={S.iconCancel} onPress={close} svg={svg.cancel} />
+                    </View>
+                    <Scrollable classes={S.body}>{isError ? error : children}</Scrollable>
+                    <View classes={S.footer}>{actions}</View>
+                </View>
+            </Modal>
+        </Backdrop>
+    )
+} 

package/assets/root.fullstackunicorn.dev/frontend/base/modals/ModalPopup.pod.js

@@ -0,0 +1,41 @@
+import { useStyle } from '#@/style/@use.js'
+import { Backdrop, Modal } from '#@/imports/core/Backdrop.js'
+import { View } from '#@/imports/core/View.js'
+import { Scrollable } from '#@/imports/core/Scrollable.js'
+import { Textline } from '#@/imports/core/Text.js'
+import { Icon } from '#@/modules/core/Icon.js'
+
+export const ModalPopupPod = ({ children, title, svg, actions, isCloseDisabled, style = {}, close, error, isError, isClosed }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    F.title = [s.fs16, s.lh24, s.fw500]
+
+    B.disabled = isCloseDisabled ? c.item_NN_B600_30 : c.item_NN_B600
+
+    S.overlay = [s.row_cXcY, s.absolute, s.overflowXYh, s.paddingX16, s.XY, s.G1, s.Z10, c.base_NN_B750_40]
+    S.modal = [s.col, s.Xx360, s.Yy360, s.overflowXYh, s.paddingX20, s.radius20, s.marginY16, c.base_NN_W700]
+    S.layout = [s.col, s.X, s.Y]
+    S.header = [s.row_cXcY, s.Xr, s.Y40, s.marginY20]
+    S.icon = [s.XY32, s.margin4, c.item_NN_B400]
+    S.iconCancel = [s.XY32, s.margin4, B.disabled]
+    S.title = [s.row_cXcY, s.Xr, ...F.title, c.item_NN_B400]
+    S.body = [s.col, s.Xr, s.Ymin0]
+    S.footer = [s.row_cXcY, s.Xc, s.Y64, c.base_NN_W700]
+
+    return (
+        <Backdrop classes={S.overlay} isClosed={isClosed} onPress={close}>
+            <Modal classes={S.modal} isClosed={isClosed}>
+                <View classes={S.layout}>
+                    <View classes={S.header}>
+                        <Icon classes={S.icon} svg={svg.logo} />
+                        <Textline classes={S.title} font={f.f1} text={title} />
+                        <Icon classes={S.iconCancel} onPress={close} svg={svg.cancel} />
+                    </View>
+                    <Scrollable classes={S.body}>{isError ? error : children}</Scrollable>
+                    <View classes={S.footer}>{actions}</View>
+                </View>
+            </Modal>
+        </Backdrop>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/modals/Modals.js

@@ -0,0 +1,12 @@
+import { useGetModals } from '#@/base/modals/@use'
+import { modals as modalsList } from '#@/root/modals'
+
+export const Modals = () => {
+
+    const modals = useGetModals()
+    
+    if (!modals.length) return null
+
+    return <>{modals.map((modal={}) => modalsList[modal.name](modal))}</>
+
+}

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

@@ -0,0 +1,26 @@
+import { pages } from '#@/root/pages'
+import { Route, Navigate } from '#@/imports/router'
+import { PageBox } from '#@/modules/page/PageBox'
+
+class Tools {
+
+    mapRoutes = (datas = {}, user = {}, isPrivate) => Object.keys(datas).map((key) => {
+        const { isRoute, path, render } = datas[key]
+        if (!isRoute) return null
+        if (isPrivate && !user.id) return null
+        return <Route key={path} path={path} element={<PageBox>{pages[render]}</PageBox>} />
+    })
+
+    missingRoute = homePath => {
+        return <Route path='*' element={<Navigate to={homePath} replace />} />
+    }
+
+    routes = (datas = {}, user, homePath) => <>
+        {this.mapRoutes(datas.public, user)}
+        {datas.private && this.mapRoutes(datas.private, user, true)}
+        {this.missingRoute(homePath)}
+    </>
+
+}
+
+export const tools = new Tools()