@fullstackunicorn/create-root 1.0.29 → 2.0.0

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

@@ -1,67 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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.positionAbsolute, s.overflowHidden, s.paddingX16, s.XY100p, s.G1, s.Z10, c.base_NN_B750_40]
-    S.modal = [s.col, s.Yr, s.Ymin0, s.overflowHidden, 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

@@ -1,41 +0,0 @@
-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.positionAbsolute, s.overflowHidden, s.paddingX16, s.XY100p, s.G1, s.Z10, c.base_NN_B750_40]
-    S.modal = [s.col, s.Xx360, s.Yy360, s.overflowHidden, s.paddingX20, s.radius20, s.marginY16, c.base_NN_W700]
-    S.layout = [s.col, s.X100p, s.Y100p]
-    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

@@ -1,12 +0,0 @@
-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/resources/@use.js

@@ -1,15 +0,0 @@
-import { atom, useGetAtom, useSetAtom } from '#@/imports/npm.js'
-
-const store = new Map()
-const resourceAtom = key => {
-    if (!store.has(key)) store.set(key, atom({ data: undefined, meta: undefined }))
-    return store.get(key)
-}
-
-const writeAtom = atom(null, (get, set, { key, ...rest }) => {
-    if (!key) return
-    set(resourceAtom(key), { ...get(resourceAtom(key)), ...rest })
-})
-
-export const useGetResource = key => useGetAtom(resourceAtom(key))
-export const useSetResource = () => useSetAtom(writeAtom)

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

@@ -1,26 +0,0 @@
-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()

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

@@ -1,213 +0,0 @@
-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) => {
-    if (!match?.route || !F3.arr.isGood(match.route.parent)) return []
-    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

@@ -1,21 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,21 +0,0 @@
-import { useIsDark } from '#@/base/theme/@use.js'
-import { useGetStatics } from '#@/base/statics/@use.js'
-import { Slider } from '#@/modules/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

@@ -1,15 +0,0 @@
-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
-}