@fullstackunicorn/create-root 1.0.23 → 1.0.24

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

@@ -0,0 +1,88 @@
+import { useRef } from 'react'
+import { storage } from '#@/imports/storage.js'
+import { api } from '#@/client/@api.js'
+import { constants } from '#@/root/constants.js'
+import { tools } from '#@/base/cookies/@tools.js'
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { useModalClose } from '#@/base/modals/@use.js'
+import { useCookies, useGetConsent, useSetCookies, useSetConsent, useGetAgreement } from '#@/base/cookies/@use.js'
+import { useSetAlerts } from '#@/base/alerts/@use.js'
+import { Modal } from '#@/base/modals/Modal.js'
+import { SliderPage } from '#@/modules/modals/slider/SliderPage.js'
+import { Actions } from '#@/modules/modals/slider/Actions.js'
+import { TextButton } from '#@/modules/buttons/TextButton.js'
+import { useCookiesData } from '#@/modals/cookies/cookies.api.js'
+
+const CookiesModal = ({ id }) => {
+
+    const data = useCookiesData()
+    const statics = useGetStatics()
+    const consent = useGetConsent()
+    const [cookieValues] = useCookies()
+    const setAlerts = useSetAlerts()
+    const setCookies = useSetCookies()
+    const setConsent = useSetConsent()
+    const modalClose = useModalClose()
+    const getAgreement = useGetAgreement()
+
+    const formResult = useRef({})
+    formResult.current = cookieValues
+
+    const isCloseDisabled = !consent
+    const isLanguageButton = !constants.services.IS_CARD_LANGUAGE_OFF
+
+    const onSetValue = async () => {
+
+        const device = storage.get('device')
+        const agreement = getAgreement({
+            agreement_type: statics.logic.cookies.type,
+            agreement_version: statics.logic.cookies.version,
+            agreement_subject_id: device,
+            agreement_subject_type: 'device_id',
+            agreement_agreed: formResult.current,
+        })
+
+        const agreements = { [statics.logic.cookies.type]: agreement }
+        const submit = await tools.getSubmit(device)
+        const consentPayload = [{ agreements, submit }]
+        const response = await api.cookies.set(consentPayload)
+
+        if (response.isOffline) setAlerts({ id: 'offline' })
+        else if (response.isError) setAlerts({ id: 'error-cookies-set' })
+        else if (response.isValid) {
+            setCookies(response.data)
+            setConsent(response.consent_id)
+            void api.cookies.get()
+        }
+        modalClose(id)
+    }
+
+    return (
+        <Modal
+            id={id}
+            isCloseDisabled={isCloseDisabled}
+            title={data.itemVerbal.title}
+            svg={data.svg}
+            actions={
+                <Actions isLanguageButton={isLanguageButton}>
+                    <TextButton
+                        text={data.itemVerbal.action}
+                        type='fill'
+                        color='C1'
+                        onPress={onSetValue}
+                    />
+                </Actions>
+            }
+        >
+            <SliderPage
+                formResult={formResult}
+                sliderLogic={data.itemLogic}
+                sliderVerbal={data.itemVerbal.data}
+                sliderVisual={data.itemVisual}
+                description={data.itemVerbal.description}
+            />
+        </Modal>
+    )
+}
+
+export const cookies = (modal={}) => <CookiesModal key={modal.id} {...modal}/>

package/assets/root.fullstackunicorn.dev/frontend/modals/countries/countries.api.js

@@ -0,0 +1,22 @@
+import { uri } from '#@/App.uri.js'
+import { api } from '#@/client/@api.js'
+import { useUrl } from '#@/base/router/@use.js'
+import { useLoad } from '#@/pages/@use.js'
+
+const path = 'countries'
+
+const fetch = async params => {
+    const verbal = await api.statics.get(uri.lookups.verbal, params)
+    const visual = await api.statics.get(uri.lookups.visual, params)
+    return {
+        data: {
+            verbal: verbal.data['@data'],
+            visual: visual.data
+        }
+    }
+}
+
+export const useApiCountries = () => {
+    const { lang } = useUrl()
+    return useLoad(fetch, lang, path)
+}

package/assets/root.fullstackunicorn.dev/frontend/modals/countries/countries.js

@@ -1,39 +1,60 @@
-import { uri } from '#@/App.uri.js'
-import { api } from '#@/client/@api.js'
-import { useUrl } from '#@/base/router/@use.js'
-import { useLoad } from '#@/pages/@use.js'
-
-// #1 define the path to the route
-const path = 'countries'
-
-// #2 define fetch for preload and api
-const dataFetch = async params => {
-    const verbal = await api.statics.get(uri.lookups.verbal, params)
-    const visual = await api.statics.get(uri.lookups.visual, params)
-    const newData = {}
-    newData.verbal =  verbal.data['@data']
-    newData.visual =  visual.data
-    return newData
+import { useState } from 'react'
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { useModalClose } from '#@/base/modals/@use.js'
+import { Modal } from '#@/base/modals/Modal.js'
+import { SelectPage } from '#@/modules/modals/select/SelectPage.js'
+import { Actions } from '#@/modules/modals/select/Actions.js'
+import { useApiCountries } from '#@/modals/countries/countries.api.js'
+
+const CountriesModal = ({ id, data = {} }) => {
+
+    const { onSetValue, current } = data
+
+    const api = useApiCountries()
+
+    const statics = useGetStatics()
+    const modalClose = useModalClose()
+
+    const [value, setValue] = useState(current)
+
+    if (!api) return null
+
+    const itemLogic = { options: Object.keys(api.verbal.data.items) }
+    const itemVerbal = { options: api.verbal.data.items, title: api.verbal.views.modal.title }
+    const itemVisual = { options: api.visual }
+
+    const isDisabled = value?.slug === current?.slug
+
+    const onSave = async () => {
+        if (onSetValue) await onSetValue(value)
+        modalClose(id)
+    }
+
+    const onRestore = () => setValue(current)
+
+    return (
+        <Modal
+            id={id}
+            title={itemVerbal.title}
+            svg={statics.visual.svg.edit}
+            actions={
+                <Actions
+                    selected={value}
+                    onSave={onSave}
+                    onRestore={onRestore}
+                    isDisabled={isDisabled}
+                />
+            }
+        >
+            <SelectPage
+                itemLogic={itemLogic}
+                itemVerbal={itemVerbal}
+                itemVisual={itemVisual}
+                selected={value}
+                setValue={setValue}
+            />
+        </Modal>
+    )
 }
 
-// // #3A define usePreload list
-// export const usePreloadCountriesList = () => {
-//     const { lang } = useUrl()
-//     const result = F3.fabUrl(uri.lookups.verbal, {lang, path})
-//     return result
-// }
-
-// // #3B define usePreload hook
-// export const usePreloadCountries = () => {
-//     const { lang } = useUrl()
-//     const key = F3.fabUrl(uri.lookups.verbal, {lang, path})
-//     const result = usePreload(dataFetch, lang, path, key)
-//     return result
-// }
-
-// #4 define useApi hook
-export const useApiCountries = () => {
-    const { lang } = useUrl()
-    const result = useLoad(dataFetch, lang, path)
-    return result
-}
+export const countries = (modal={}) => <CountriesModal key={modal.id} {...modal}/>

package/assets/root.fullstackunicorn.dev/frontend/modals/languages/languages.api.js

@@ -0,0 +1,23 @@
+import { tools } from '#@/base/language/@tools.js'
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { useGetLookups } from '#@/base/lookups/@use.js'
+import { useGetLanguage } from '#@/base/language/@use.js'
+
+export const useLanguagesData = () => {
+
+    const statics = useGetStatics()
+    const lookups = useGetLookups()
+    const language = useGetLanguage()
+
+    const langs = [statics.logic['@lang'], ...F3.arr.safe(statics.logic['@langs'])]
+    const label = tools.getLanguageLabel(lookups, language.slug)
+
+    return {
+        current: { slug: language.slug, value: label },
+        itemLogic: { options: langs },
+        itemVerbal: {
+            options: tools.getLanguages(lookups, langs),
+            title: lookups.languages.verbal.views.modal.title
+        }
+    }
+}

package/assets/root.fullstackunicorn.dev/frontend/modals/languages/languages.js

@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import { useNavigate } from '#@/imports/router.js'
+import { api } from '#@/client/@api.js'
+import { uri } from '#@/App.uri.js'
+import { tools } from '#@/base/language/@tools.js'
+import { useUrl, useHistory } from '#@/base/router/@use.js'
+import { useGetStatics, useSetVerbal } from '#@/base/statics/@use.js'
+import { useLanguage } from '#@/base/language/@use.js'
+import { useGetLookups } from '#@/base/lookups/@use.js'
+import { useSetAlerts } from '#@/base/alerts/@use.js'
+import { useModalClose } from '#@/base/modals/@use.js'
+import { Modal } from '#@/base/modals/Modal.js'
+import { SelectPage } from '#@/modules/modals/select/SelectPage.js'
+import { Actions } from '#@/modules/modals/select/Actions.js'
+import { useLanguagesData } from '#@/modals/languages/languages.api.js'
+
+const LanguagesModal = ({ id }) => {
+
+    const data = useLanguagesData()
+
+    const [value, setValue] = useState(data.current)
+
+    const statics = useGetStatics()
+    const { path } = useUrl()
+    const navigate = useNavigate()
+    const [history, setHistory] = useHistory()
+    const setVerbal = useSetVerbal()
+    const [language, setLanguage] = useLanguage()
+    const lookups = useGetLookups()
+    const setAlerts = useSetAlerts({})
+    const modalClose = useModalClose()
+
+    const isDisabled = value.slug === data.current.slug
+
+    const onSave = async () => {
+        if (value.slug === language.slug) return modalClose(id)
+        if (!data.itemLogic.options.includes(value.slug)) return
+
+        const localVerbal = await api.statics.get(uri.data.root.verbal, { lang: value.slug })
+
+        const result = {}
+        result.verbal = localVerbal['@data']
+        result.language = tools.getLanguage(value.slug, statics.logic)
+
+        if (!result.language || !result.verbal) {
+            return setAlerts({ id: 'no-language', params: { language: tools.getLanguageLabel(lookups, value.slug) } })
+        }
+
+        setHistory(tools.getNewHistory(history, value.slug))
+        setVerbal(result.verbal)
+        setLanguage(result.language)
+        navigate(`/${value.slug}/${path}`)
+    }
+
+    const onRestore = () => setValue(data.current)
+
+    return (
+        <Modal
+            id={id}
+            title={data.itemVerbal.title}
+            svg={statics.visual.svg.edit}
+            actions={
+                <Actions
+                    selected={value}
+                    onSave={onSave}
+                    onRestore={onRestore}
+                    isDisabled={isDisabled}
+                />
+            }
+        >
+            <SelectPage
+                itemLogic={data.itemLogic}
+                itemVerbal={data.itemVerbal}
+                selected={value}
+                setValue={setValue}
+            />
+        </Modal>
+    )
+}
+
+export const languages = (modal={}) => <LanguagesModal key={modal.id} {...modal}/>

package/assets/root.fullstackunicorn.dev/frontend/modules/base/Bottom.js

@@ -0,0 +1,10 @@
+import { BottomPod } from '#@/modules/base/Bottom.pod.js'
+
+export const Bottom = () => {
+
+    const year = new Date().getFullYear()
+    const minderable = { href: 'https://websites.minderable.com', text: 'Powered by Minderable' }
+    const text = `Copyright © ${year}`
+
+    return <BottomPod text={text} minderable={minderable} />
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels/layout → modules/base}/Bottom.pod.js

@@ -11,13 +11,11 @@ export const BottomPod = ({ text, minderable }) => {
     F.text = [s.fs14, s.lh24, s.fw400]
 
     S.bottom = [s.row_cXcY, s.Xc]
-    S.space = [s.Yc]
     S.box = [s.row_cXcY, s.Xc, s.Y48]
     S.textBox = [s.row_cXcY, s.Y48]
     S.text = [...F.text, c.item_NN_B400]
     S.dotBox = [s.row_cXcY, s.Y48, s.X20]
     S.dot = [s.XY4, s.radiusRound, c.base_NN_B400]
-    // S.line = [s.Y2, s.Xc, c.base_NN_W700]
 
     I.bottom = { marginTop: 'auto' }
 
@@ -28,7 +26,7 @@ export const BottomPod = ({ text, minderable }) => {
                     <Textline classes={S.text} text={text} />
                 </Link>
                 <View classes={S.dotBox}>
-                    <View classes={S.dot}></View>
+                    <View classes={S.dot} />
                 </View>
                 <Href classes={S.textBox} linkTo={minderable.href} isExternal>
                     <Textline classes={S.text} text={minderable.text} />
@@ -37,4 +35,3 @@ export const BottomPod = ({ text, minderable }) => {
         </View>
     )
 }
-

package/assets/root.fullstackunicorn.dev/frontend/modules/base/ComingSoon.js

@@ -0,0 +1,7 @@
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { ComingSoonPod } from '#@/modules/base/ComingSoon.pod.js'
+
+export const ComingSoon = () => {
+    const statics = useGetStatics()
+    return <ComingSoonPod picture={statics.graphic.comingsoon} />
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/base/ComingSoon.pod.js

@@ -0,0 +1,17 @@
+import { useStyle } from '#@/style/@use.js'
+import { View } from '#@/imports/core/View.js'
+import { Img } from '#@/imports/core/Img.js'
+
+export const ComingSoonPod = ({ picture }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.box = [s.col_cXsY, s.XY, s.marginB8]
+    S.image = [s.X, s.radiusB16]
+
+    return (
+        <View classes={S.box}>
+            <Img classes={S.image} picture={picture} />
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels/error → modules/base}/ErrorPage.js

@@ -1,12 +1,12 @@
-import { Logo } from '#@/modules/trademarks/Logo'
-import { ErrorPagePod } from './ErrorPage.pod.js'
+import { Logo } from '#@/modules/trademarks/Logo.js'
+import { ErrorPagePod } from '#@/modules/base/ErrorPage.pod.js'
 
 export const ErrorPage = ({ title, text }) => {
     return (
         <ErrorPagePod
             title={title}
             text={text}
-            logo={<Logo/>}
+            logo={<Logo />}
         />
     )
-}
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels/error → modules/base}/ErrorPage.pod.js

@@ -1,23 +1,23 @@
-import { useStyle } from '#@/style/@use'
-import { View } from '#@/imports/core/View'
-import { Text } from '#@/imports/core/Text'
+import { useStyle } from '#@/style/@use.js'
+import { View } from '#@/imports/core/View.js'
+import { Text } from '#@/imports/core/Text.js'
 
-export const ErrorPagePod = ({ logo, title, text}) => {
+export const ErrorPagePod = ({ logo, title, text }) => {
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
     S.box = [s.col, s.Xc]
     S.title = [...t.root.main.title, s.paddingX6]
     S.text = [...t.root.main.description]
-    S.boxText = [s.col_cY, s.paddingX6, s.marginT8] 
+    S.boxText = [s.col_cY, s.paddingX6, s.marginT8]
 
     return (
         <View classes={S.box}>
             {logo}
             <Text classes={S.title} text={title} />
             <View classes={S.boxText}>
-                <Text classes={S.text} font={f.f1} text={text} /> 
+                <Text classes={S.text} font={f.f1} text={text} />
             </View>
         </View>
     )
-}
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels/layout → modules/base}/PageTitle.js

@@ -1,3 +1,3 @@
-import { PageTitlePod } from './PageTitle.pod.js'
+import { PageTitlePod } from '#@/modules/base/PageTitle.pod.js'
 
 export const PageTitle = ({ title }) => <PageTitlePod title={title} />

package/assets/root.fullstackunicorn.dev/frontend/{panels/layout → modules/base}/PageTitle.pod.js

@@ -1,4 +1,4 @@
-import { useStyle } from '#@/style/@use'
+import { useStyle } from '#@/style/@use.js'
 import { View } from '#@/imports/core/View.js'
 import { Text } from '#@/imports/core/Text.js'
 
@@ -6,16 +6,14 @@ export const PageTitlePod = ({ title }) => {
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
-    F.text = [s.fs18, s.lh24, s.fw400, c.item_NN_B400]
-
     S.textbox = [s.row_cXcY, s.Y48, s.X]
-    S.text = [...F.text]
+    S.text = t.root.page.title
 
     if (!title) return null
-    
+
     return (
         <View classes={S.textbox}>
-            <Text classes={S.text} text={title}/>
+            <Text classes={S.text} text={title} />
         </View>
     )
 }

package/assets/root.fullstackunicorn.dev/frontend/{panels → modules}/cards/Account.js

@@ -1,17 +1,18 @@
 import { useState } from 'react'
-import { AccountPod } from './Account.pod.js'
+import { AccountPod } from '#@/modules/cards/Account.pod.js'
 
-export const Account = ({ logo_src, logo_alt, svg, onPress,
-    title, description, descriptionPress, label, onPressAction }) => {
-
-    const [isHover, setIsHover ] = useState(false)
+export const Account = ({
+    logo_src, logo_alt, svg, onPress,
+    title, description, descriptionPress, label, onPressAction,
+}) => {
 
+    const [isHover, setIsHover] = useState(false)
     const splitted = description.split('{{action}}')
-    
+
     return (
-        <AccountPod 
+        <AccountPod
             title={title}
-            description={{ one:splitted[0].trim(), two:splitted[1].trim() }}
+            description={{ one: splitted[0].trim(), two: splitted[1].trim() }}
             descriptionPress={descriptionPress}
             label={label}
             onPressAction={onPressAction}

package/assets/root.fullstackunicorn.dev/frontend/{panels → modules}/cards/Account.pod.js

@@ -1,16 +1,26 @@
-import { useStyle } from '#@/style/@use'
-import { View } from '#@/imports/core/View'
-import { Pressable } from '#@/imports/core/Pressable'
+import { useStyle } from '#@/style/@use.js'
+import { View } from '#@/imports/core/View.js'
+import { Pressable } from '#@/imports/core/Pressable.js'
 import { ImgData } from '#@/imports/core/Img.js'
-import { Icon } from '#@/modules/core/Icon'
-import { Textline } from '#@/imports/core/Text'
-import { Text } from '#@/imports/core/Text'
+import { Icon } from '#@/modules/core/Icon.js'
+import { Textline, Text } from '#@/imports/core/Text.js'
 
-export const AccountPod = ({ title, description={}, descriptionPress, label, onPressAction,
-    logo_src, logo_alt, svg, onPress, isHover, setIsHover }) => {
+export const AccountPod = ({
+    title,
+    description = {},
+    descriptionPress,
+    label,
+    onPressAction,
+    logo_src,
+    logo_alt,
+    svg,
+    onPress,
+    isHover,
+    setIsHover,
+}) => {
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
-        
+
     B.hover = isHover ? c.base_C1_W600_50 : c.base_NN_W600_50
 
     S.box = t.root.cards.box
@@ -25,24 +35,24 @@ export const AccountPod = ({ title, description={}, descriptionPress, label, onP
     S.img = [s.row_cXcY, s.XY32, s.margin8, s.radius6]
     S.label = [...t.root.cards.text.label, s.row_sXcY, s.Xr, c.item_NN_B400]
     S.icon = t.root.cards.icon
-            
+
     return (
         <View classes={S.box}>
             <View classes={S.top}>
-                <Textline classes={S.title} font={f.f1} text={title}/>
+                <Textline classes={S.title} font={f.f1} text={title} />
                 <View classes={S.wrap}>
-                    {description.one ? <Text classes={S.descriptionOne} font={f.f1} text={description.one}/> : null}
+                    {description.one ? <Text classes={S.descriptionOne} font={f.f1} text={description.one} /> : null}
                     <Pressable classes={S.actionBox} onPress={onPressAction}>
-                        <Text classes={S.descriptionPress} font={f.f1} text={descriptionPress}/>
+                        <Text classes={S.descriptionPress} font={f.f1} text={descriptionPress} />
                     </Pressable>
-                    {description.two ? <Text classes={S.descriptionTwo} font={f.f1} text={description.two}/> : null }
+                    {description.two ? <Text classes={S.descriptionTwo} font={f.f1} text={description.two} /> : null}
                 </View>
             </View>
             <Pressable classes={S.pressable} onPress={onPress} setIsHover={setIsHover}>
-                <ImgData classes={S.img} src={logo_src} alt={logo_alt}/>
-                <Textline classes={S.label} font={f.f1} text={label}/>
-                <Icon classes={S.icon} svg={svg}/>
+                <ImgData classes={S.img} src={logo_src} alt={logo_alt} />
+                <Textline classes={S.label} font={f.f1} text={label} />
+                <Icon classes={S.icon} svg={svg} />
             </Pressable>
         </View>
     )
-}
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels → modules}/cards/Launcher.js

@@ -1,12 +1,12 @@
 import { useState } from 'react'
-import { LauncherPod } from './Launcher.pod.js'
+import { LauncherPod } from '#@/modules/cards/Launcher.pod.js'
 
 export const Launcher = ({ svg, title, description, label, onPress }) => {
 
-    const [isHover, setIsHover ] = useState(false)
+    const [isHover, setIsHover] = useState(false)
 
     return (
-        <LauncherPod 
+        <LauncherPod
             svg={svg}
             title={title}
             description={description}
@@ -16,4 +16,4 @@ export const Launcher = ({ svg, title, description, label, onPress }) => {
             setIsHover={setIsHover}
         />
     )
-}
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels → modules}/cards/Launcher.pod.js

@@ -1,13 +1,13 @@
-import { useStyle } from '#@/style/@use'
-import { View } from '#@/imports/core/View'
-import { Pressable } from '#@/imports/core/Pressable'
-import { Icon } from '#@/modules/core/Icon'
-import { Textline } from '#@/imports/core/Text'
-import { Text } from '#@/imports/core/Text'
+import { useStyle } from '#@/style/@use.js'
+import { View } from '#@/imports/core/View.js'
+import { Pressable } from '#@/imports/core/Pressable.js'
+import { Icon } from '#@/modules/core/Icon.js'
+import { Textline, Text } from '#@/imports/core/Text.js'
 
-export const LauncherPod = ({ 
-    svg, title, description, label, 
-    isHover, setIsHover, onPress }) => {
+export const LauncherPod = ({
+    svg, title, description, label,
+    isHover, setIsHover, onPress,
+}) => {
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
@@ -20,7 +20,6 @@ export const LauncherPod = ({
     S.pressable = [...t.root.cards.pressable, B.hover]
     S.icon = t.root.cards.icon
     S.label = t.root.cards.label
-    S.slider = t.root.cards.slider
 
     return (
         <View classes={S.box}>
@@ -35,4 +34,4 @@ export const LauncherPod = ({
             </Pressable>
         </View>
     )
-}
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels → modules}/cards/Linker.js

@@ -1,12 +1,12 @@
 import { useState } from 'react'
-import { LinkerPod } from './Linker.pod.js'
+import { LinkerPod } from '#@/modules/cards/Linker.pod.js'
 
 export const Linker = ({ svg, title, description, label, onPress, linkTo }) => {
 
-    const [isHover, setIsHover ] = useState(false)
+    const [isHover, setIsHover] = useState(false)
 
     return (
-        <LinkerPod 
+        <LinkerPod
             svg={svg}
             title={title}
             description={description}
@@ -17,4 +17,4 @@ export const Linker = ({ svg, title, description, label, onPress, linkTo }) => {
             setIsHover={setIsHover}
         />
     )
-}
+}