@fullstackunicorn/create-root 1.0.28 → 2.0.0

package/assets/root.fullstackunicorn.dev/frontend/base/checkout/CheckoutCard.js

@@ -1,29 +0,0 @@
-import { useGetCheckout } from '#@/base/checkout/@use.js'
-import { CheckoutCardPod } from '#@/base/checkout/CheckoutCard.pod.js'
-
-export const CheckoutCard = ({ isCancel }) => {
-
-    const checkout = useGetCheckout()
-
-    const product = checkout.product || {}
-    const seller = checkout.seller || {}
-
-    const text = {}
-
-    if (isCancel) text.title = 'Payment cancelled'
-    else text.title = 'Payment completed'
-
-    text.productName = `Product: ${product.name || ''}`
-    text.productCode = `Code: ${product.code || ''}`
-    text.productQuantity = `Quantity: ${product.quantity || ''}`
-
-    if (seller.name) text.sellerName = `Seller: ${seller.name}`
-
-    return (
-        <CheckoutCardPod
-            isCancel={isCancel}
-            text={text}
-            isSeller={!!seller.name}
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/base/checkout/CheckoutCard.pod.js

@@ -1,25 +0,0 @@
-import { useStyle } from '#@/style/@use.js'
-import { View } from '#@/imports/core/View.js'
-import { Text, Textline } from '#@/imports/core/Text.js'
-
-export const CheckoutCardPod = ({ isCancel, text = {}, isSeller }) => {
-
-    const { s, c, f, F, S } = useStyle()
-
-    F.title = [s.fs24, s.lh32, s.fw700]
-    F.text = [s.fs16, s.lh24, s.fw500]
-
-    S.wrap = [s.col, s.Xmax600, s.Xr, s.padding24, s.radius20, c.base_NN_W700]
-    S.title = [...F.title, isCancel ? c.item_OR : c.item_C1]
-    S.text = [...F.text, s.marginT12, c.item_NN_B400]
-
-    return (
-        <View classes={S.wrap}>
-            <Textline classes={S.title} font={f.f1} text={text.title} />
-            <Text classes={S.text} font={f.f1} text={text.productName} />
-            <Text classes={S.text} font={f.f1} text={text.productCode} />
-            <Text classes={S.text} font={f.f1} text={text.productQuantity} />
-            {!!isSeller && <Text classes={S.text} font={f.f1} text={text.sellerName} />}
-        </View>
-    )
-}

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

@@ -1,67 +0,0 @@
-import { constants } from '#@/root/constants.js'
-
-class Tools {
-
-    initCookies = async ({ logic }) => {
-        const timestamp = new Date().toISOString()
-        const response = {}
-        for (const name of Object.keys(logic.cookies.data)) {
-            const isAgreed = !!logic.cookies.data[name].isAlwaysOn
-            response[name] = { timestamp, isAgreed }
-        }
-        return response
-    }
-
-    getSubmit = async (device_id) => {
-        const { env } = constants
-
-        const battery = navigator.getBattery ? await navigator.getBattery() : {}
-        const metadataObj = {
-            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            language: window.navigator.language,
-            pageTitle: document.title,
-            referrer: document.referrer,
-            pageURL: window.location.href,
-            platform: window.navigator.platform,
-            deviceMemory: navigator.deviceMemory,
-            screenWidth: window.screen.width,
-            screenHeight: window.screen.height,
-            colorDepth: window.screen.colorDepth,
-            maxScreenWidth: window.screen.width * window.devicePixelRatio,
-            maxScreenHeight: window.screen.height * window.devicePixelRatio,
-            pixelRatio: window.devicePixelRatio,
-            screenOrientation: screen?.orientation?.type,
-            hardwareConcurrency: navigator.hardwareConcurrency,
-            touchSupport: 'ontouchstart' in window || navigator.maxTouchPoints > 0,
-            colorGamut: window.matchMedia("(color-gamut: srgb)").matches
-                ? "srgb"
-                : window.matchMedia("(color-gamut: p3)").matches
-                    ? "p3"
-                    : window.matchMedia("(color-gamut: rec2020)").matches
-                        ? "rec2020"
-                        : "unknown",
-            rtt: navigator?.connection?.rtt,
-            hasGamepad: navigator.getGamepads ? navigator.getGamepads().length > 0 : false,
-            keyboardEnabled: "onkeydown" in document,
-            cookieEnabled: navigator.cookieEnabled,
-            javaEnabled: navigator.javaEnabled ? navigator.javaEnabled() : false,
-            doNotTrack: navigator.doNotTrack,
-            networkType: navigator?.connection?.effectiveType,
-            downlinkSpeed: navigator?.connection?.downlink,
-            batteryLevel: battery?.level * 100,
-            batteryCharging: battery?.charging
-        }
-
-        const metadata = {
-            submit_timestamp: new Date().toISOString(),
-            submit_device_id: device_id,
-            submit_client_id: env.CLIENT_ID,
-            submit_user_agent: window.navigator.userAgent,
-            submit_metadata: Object.entries(metadataObj).map(([key, value]) => `${key}:${value ? value : 'unknown'}`).join(" | ")
-        }
-
-        return metadata
-    }
-}
-
-export const tools = new Tools()

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

@@ -1,130 +0,0 @@
-import { useEffect, useRef } from 'react'
-import { atom, useAtom, useSetAtom, useGetAtom, makeId } from '#@/imports/npm.js'
-import { storage } from '#@/imports/storage.js'
-import { api } from '#@/client/@api.js'
-import { constants } from '#@/root/constants.js'
-import { useUrl } from '#@/base/router/@use.js'
-import { alerts } from '#@/base/alerts/@use.js'
-import { useModals, useSetModals } from '#@/base/modals/@use.js'
-import { useGetLanguage } from '#@/base/language/@use.js'
-import { tools } from '#@/base/cookies/@tools.js'
-
-export const device = atom()
-export const handleDevice = atom(
-    (get) => get(device),
-    (get, set, value) => {
-        set(device, value)
-        storage.set('device', value)
-    }
-)
-
-export const consent = atom('')
-export const handleConsent = atom(
-    (get) => get(consent),
-    (get, set, value) => {
-        set(consent, value)
-        storage.set('consent', value)
-    }
-)
-
-export const cookies = atom({})
-export const handleCookies = atom(
-    (get) => get(cookies),
-    (get, set, value) => {
-        set(cookies, value)
-        storage.setJSON('cookies', value)
-    }
-)
-
-export const isCookiesInitialized = atom(false)
-export const initializeCookies = atom(
-    (get) => get(isCookiesInitialized),
-    async (get, set, statics) => {
-
-        const initials = await tools.initCookies(statics) 
-
-        const saved = {}
-        if (constants.services.IS_CARD_COOKIES_OFF) saved.device = storage.init('device', 'none')
-        else saved.device = storage.init('device', makeId())
-        saved.cookies = storage.initJSON('cookies', initials)
-        saved.consent = storage.get('consent')
-
-        const refresh = async () => {
-
-            const response = await api.cookies.get()
-
-            if (response.isOffline) set(alerts, { id: 'offline' })
-            else if (response.isError) set(alerts, { id: 'error-cookies-get' })
-            else if (response.isNotFound) {
-                storage.remove('consent')
-                storage.setJSON('cookies', initials)
-                set(consent, '')
-                set(cookies, initials)
-            }
-            else if (response.isValid) set(handleCookies, response.data)
-        }
-
-        set(device, saved.device)
-        set(cookies, saved.cookies)
-
-        if (saved.consent) {
-            set(consent, saved.consent)
-            await refresh(saved.consent)
-        }
-        set(isCookiesInitialized, true)
-    }
-)
-
-export const useInitializeCookies = () => useAtom(initializeCookies)
-
-export const useDevice = () => useAtom(handleDevice)
-export const useSetDevice = () => useSetAtom(handleDevice)
-export const useGetDevice = () => useGetAtom(handleDevice)
-
-export const useConsent = () => useAtom(handleConsent)
-export const useSetConsent = () => useSetAtom(handleConsent)
-export const useGetConsent = () => useGetAtom(handleConsent)
-
-export const useCookies = () => useAtom(handleCookies)
-export const useSetCookies = () => useSetAtom(handleCookies)
-export const useGetCookies = () => useGetAtom(handleCookies)
-
-export const useGetAgreement = () => {
-
-    const language = useGetLanguage()
-
-    const getAgreement = (agreement) => ({
-        ...agreement, 
-        agreement_language: language.slug
-    })
-    return getAgreement
-}
-
-export const useWelcome = () => {
-
-    const { lang } = useUrl()
-    const setModals = useSetModals()
-    const modalRef = useRef('')
-    const consent = useGetConsent()
-
-    useEffect(() => {
-
-        if (constants.services.IS_CARD_COOKIES_OFF) return
-        if (consent) return
-
-        if (!modalRef.current) modalRef.current = makeId()
-        setModals([{ id: modalRef.current, name: 'cookies' }])
-
-    }, [consent, lang])
-}
-
-export const useCookiesEdit = () => {
-
-    const [modals, setModals] = useModals()
-
-    const onPress = () => {
-        const id = makeId()
-        setModals([...modals, { id, name: 'cookies' }])
-    }
-    return onPress
-}

package/assets/root.fullstackunicorn.dev/frontend/base/cookies/CookiesCard.js

@@ -1,19 +0,0 @@
-import { useGetStatics } from '#@/base/statics/@use.js'
-import { useCookiesEdit } from '#@/base/cookies/@use.js'
-import { Launcher } from '#@/modules/cards/Launcher.js'
-
-export const CookiesCard = ({ api }) => {
-
-    const statics = useGetStatics()
-    const onPress = useCookiesEdit()
-
-    return (
-        <Launcher 
-            svg={{logo:statics.visual.svg.cookies, action:statics.visual.svg.edit}}
-            title={api.title}
-            description={api.description}
-            label={api.label}
-            onPress={onPress} 
-        />
-    )
-}

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

@@ -1,7 +0,0 @@
-import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm.js'
-
-export const error = atom({})
-
-export const useError = () => useAtom(error)
-export const useSetError = () => useSetAtom(error)
-export const useGetError = () => useGetAtom(error)

package/assets/root.fullstackunicorn.dev/frontend/base/errors/Errors.js

@@ -1,14 +0,0 @@
-import { errors } from '#@/root/errors.js'
-import { useGetError } from '#@/base/errors/@use.js'
-
-export const Errors = () => {
-
-    const error = useGetError()
-
-    F3.logs({error}, 'Errors')
-    
-    if (!error.name) return null
-
-    return errors[error.name]
-
-}

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

@@ -1,45 +0,0 @@
-class Tools {
-
-    getLanguageLabel = (lookups, slug) => {
-
-        const languages = lookups.languages.verbal.data.items
-        const languagesDefaults = lookups.languages.original.data.items
-        
-        const lang = languages[slug].variant
-            ? `${languages[slug].name} (${languages[slug].variant})`
-            : languages[slug].name
-
-        const langDefault = languagesDefaults[slug].variant
-            ? `${languagesDefaults[slug].name} (${languagesDefaults[slug].variant})`
-            : languagesDefaults[slug].name
-
-        const label = lang + (lang === langDefault ? '' : ` / ${langDefault}`)
-        return label
-    }
-
-    getLanguage = (slug, lookups) => {
-        const plural = lookups.languages?.logic?.[slug]?.plural
-        const alphabet = lookups.languages?.logic?.[slug]?.alphabet
-        const isRTL = lookups.alphabets?.logic?.[alphabet]?.isRTL
-        return { slug, alphabet, plural, isRTL }
-    }
-
-    getLanguages = (lookups, langs) => {
-        const result = {}
-        for (const slug of langs) {
-            const label = this.getLanguageLabel(lookups, slug)
-            if (!label) continue
-            result[slug] = label
-        }
-        return result
-    }
-
-    getNewHistory = (history, lang) => history.map(path => {
-        const parts = path.split('/')
-        parts[1] = lang
-        return parts.join('/')
-    })
-}
-
-
-export const tools = new Tools()

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

@@ -1,79 +0,0 @@
-import { useEffect, useState } from 'react'
-import { atom, useAtom, useSetAtom, useGetAtom, makeId } from '#@/imports/npm.js'
-import { storage } from '#@/imports/storage.js'
-import { useGetStatics } from '#@/base/statics/@use.js'
-import { useModals } from '#@/base/modals/@use.js'
-import { useGetLookups } from '#@/base/lookups/@use.js'
-import { tools } from '#@/base/language/@tools.js'
-
-export const language = atom({})
-export const handleLanguage = atom(
-    (get) => get(language),
-    (get, set, value = {}) => {
-        set(language, value)
-        storage.setJSON('language', value)
-    }
-)
-export const languageContent = atom({})
-export const handleLanguageContent = atom(
-    (get) => get(languageContent),
-    (get, set, value = {}) => {
-        set(languageContent, value)
-        storage.setJSON('languageContent', value)
-    }
-)
-
-export const isLanguageInitialized = atom(false)
-export const initializeLanguage = atom(
-    (get) => get(isLanguageInitialized),
-    async (get, set, init = {}) => {
-
-        set(language, storage.setJSON('language', init.language))
-        set(languageContent, storage.setJSON('languageContent', init.languageContent))
-
-        set(isLanguageInitialized, true)
-    }
-)
-
-export const useInitializeLanguage = () => useAtom(initializeLanguage)
-
-export const useLanguage = () => useAtom(handleLanguage)
-export const useSetLanguage = () => useSetAtom(handleLanguage)
-export const useGetLanguage = () => useGetAtom(handleLanguage)
-
-export const useLanguageContent = () => useAtom(handleLanguageContent)
-export const useSetLanguageContent = () => useSetAtom(handleLanguageContent)
-export const useGetLanguageContent = () => useGetAtom(handleLanguageContent)
-
-export const useGetLang = () => {
-    const language = useGetLanguage()
-    return language.slug
-}
-
-export const useLanguageLabel = () => {
-
-    const statics = useGetStatics()
-    const language = useGetLanguage()
-    const lookups = useGetLookups()
-    const isOriginal = language.slug === statics.logic['@lang']
-    const [label, setLabel] = useState('')
-
-    useEffect(() => {
-        const result = tools.getLanguageLabel(lookups, language.slug)
-        setLabel(result)
-    }, [isOriginal, language])
-
-    return label
-}
-
-export const useLanguageEdit = () => {
-
-    const [modals, setModals] = useModals()
-
-    const onPress = () => {
-        const id = makeId()
-        setModals([...modals, { id, name: 'languages' }])
-    }
-
-    return onPress
-}

package/assets/root.fullstackunicorn.dev/frontend/base/language/LanguageButton.js

@@ -1,18 +0,0 @@
-import { useLanguageLabel, useLanguageEdit } from '#@/base/language/@use.js'
-import { useGetStatics } from '#@/base/statics/@use.js'
-import { IconTextButton } from '#@/modules/buttons/IconTextButton.js'
-
-export const LanguageButton = () => {
-
-    const statics = useGetStatics()
-    const onPress = useLanguageEdit()
-    const label = useLanguageLabel()
-
-    return (
-        <IconTextButton 
-            svg={statics.visual.svg.language}
-            text={label}
-            onPress={onPress}
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/base/language/LanguageCard.js

@@ -1,20 +0,0 @@
-import { useLanguageLabel, useLanguageEdit } from '#@/base/language/@use.js'
-import { useGetStatics } from '#@/base/statics/@use.js'
-import { Launcher } from '#@/modules/cards/Launcher.js'
-
-export const LanguageCard = ({ api={} }) => {
-
-    const statics = useGetStatics()
-    const onPress = useLanguageEdit()
-    const label = useLanguageLabel()
-
-    return (
-        <Launcher 
-            svg={{logo:statics.visual.svg.language, action:statics.visual.svg.edit}}
-            title={api.title}
-            description={api.description}
-            label={label}
-            onPress={onPress}
-        />
-    )
-}

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

@@ -1,91 +0,0 @@
-import { useLayoutEffect } from 'react'
-import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm.js'
-import { useWindowDimensions } from '#@/imports/use.js'
-import { constants } from '#@/root/constants.js'
-import { storage } from '#@/imports/storage.js'
-
-export const width = atom(0)
-export const height = atom(0)
-export const size = atom('1')
-export const isOversize = atom(false)
-
-export const isFixed = atom(false)
-export const handleIsFixed = atom(
-  (get) => get(isFixed),
-  (get, set, value) => {
-    set(isFixed, value)
-    storage.set('isFixed', value)
-  }
-)
-
-export const mainWidth = atom((get) => get(width))
-export const isMaxWidth = atom((get) => get(isOversize) && get(isFixed))
-
-export const isLayoutInitialized = atom(false)
-export const initializeLayout = atom(
-  (get) => get(isLayoutInitialized),
-  async (get, set) => {
-    set(isFixed, storage.init('isFixed', false))
-    set(isLayoutInitialized, true)
-  }
-)
-
-export const useInitializeLayout = () => useAtom(initializeLayout)
-
-export const useIsFixed = () => useAtom(handleIsFixed)
-export const useSetIsFixed = () => useSetAtom(handleIsFixed)
-export const useGetIsFixed = () => useGetAtom(handleIsFixed)
-
-export const useWidth = () => useAtom(width)
-export const useSetWidth = () => useSetAtom(width)
-export const useGetWidth = () => useGetAtom(width)
-
-export const useHeight = () => useAtom(height)
-export const useSetHeight = () => useSetAtom(height)
-export const useGetHeight = () => useGetAtom(height)
-
-export const useSize = () => useAtom(size)
-export const useSetSize = () => useSetAtom(size)
-export const useGetSize = () => useGetAtom(size)
-
-export const useIsOversize = () => useAtom(isOversize)
-export const useSetIsOversize = () => useSetAtom(isOversize)
-export const useGetIsOversize = () => useGetAtom(isOversize)
-
-export const useGetMainWidth = () => useGetAtom(mainWidth)
-export const useGetIsMaxWidth = () => useGetAtom(isMaxWidth)
-
-export const useResize = () => {
-
-  const { height: h, width: w } = useWindowDimensions()
-
-  const [size, setSize] = useSize()
-  const [isOversize, setIsOversize] = useIsOversize()
-
-  const setWidth = useSetWidth()
-  const setHeight = useSetHeight()
-
-  useLayoutEffect(() => {
-
-    const bp1 = Number(constants.layout.column_1)
-    const bp2 = Number(constants.layout.column_2)
-    const bp3 = Number(constants.layout.column_3)
-
-    if (w > bp3) {
-      if (size !== '3') setSize('3')
-      if (!isOversize) setIsOversize(true)
-    } else if (w > bp2) {
-      if (size !== '3') setSize('3')
-      if (isOversize) setIsOversize(false)
-    } else if (w > bp1) {
-      if (size !== '2') setSize('2')
-      if (isOversize) setIsOversize(false)
-    } else {
-      if (size !== '1') setSize('1')
-      if (isOversize) setIsOversize(false)
-    }
-
-    setWidth(w)
-    setHeight(h)
-  }, [w, h, size, isOversize, setSize, setIsOversize, setWidth, setHeight])
-}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/Footer.js

@@ -1,5 +0,0 @@
-import { FooterPod } from './Footer.pod.js'
-
-export const Footer = () => {
-    return null
-}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/Footer.pod.js

@@ -1,19 +0,0 @@
-import { useStyle } from '#@/style/@use'
-import { View } from '#@/imports/core/View'
-
-export const FooterPod = ({ }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    S.footer = [s.row_cXcY, s.Y32]
-    S.links = [s.row_cXcY]
-    S.link = [s.row_cXcY]
-    
-    return (
-        <View classes={S.footer}>
-            <View classes={S.links}>
-
-            </View>
-        </View>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/Header.js

@@ -1,22 +0,0 @@
-import { constants } from '#@/root/constants.js'
-import { useGetStatics } from '#@/base/statics/@use.js'
-import { AccountLogo } from '#@/base/account/AccountLogo.js'
-import { Trademark } from '#@/modules/trademarks/Trademark.js'
-import { Logo } from '#@/modules/trademarks/Logo.js'
-import { Back } from '#@/modules/core/Back.js'
-import { HeaderPod } from './Header.pod.js'
-
-export const Header = () => {
-
-    const statics = useGetStatics()
-
-    return (
-        <HeaderPod
-            center={<Trademark />}
-            auth={!constants.services.IS_BUTTON_USER_OFF && <AccountLogo />}
-            back={<Back logo={<Logo/>}/>}
-            logo={!constants.services.IS_BUTTON_USER_OFF && <Logo />}
-            svg={statics.visual.svg.menu}
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/Header.pod.js

@@ -1,37 +0,0 @@
-import { useStyle } from '#@/style/@use'
-import { View } from '#@/imports/core/View'
-import { Icon } from '#@/modules/core/Icon'
-
-export const HeaderPod = ({ auth, center, back, logo, svg }) => { 
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    H.icon = [[c.base_NN_W700]]
-    
-    S.header = [s.col_sY, s.X100p, c.base_WW]
-    S.box = [s.row_cY, s.X100p, s.Y64]
-    S.one = [s.row_sX]
-    S.middle = [s.row_cXcY, s.Xr]
-    S.two = [s.row_eX]
-    S.icon = [s.XY48, s.marginY4, c.item_WW]
-    S.line = [s.Y2, s.Xc, c.base_NN_W700]
-    
-    return (
-        <View classes={S.header}>
-            <View classes={S.box}>
-                <View classes={S.one}>
-                    {back}
-                    {logo}
-                </View>
-                <View classes={S.middle}>
-                    {center}
-                </View>
-                <View classes={S.two}>
-                    {auth}
-                    <Icon classes={S.icon} svg={svg} hover={H.icon}/>
-                </View>
-            </View>
-            <View classes={S.line}/>
-        </View>
-    )
-}