@fullstackunicorn/create-root 1.0.17 → 1.0.19

package/assets/root.fullstackunicorn.dev/frontend/pages/app/Checkout.js

@@ -0,0 +1,10 @@
+import { CheckoutCard } from '#@/base/checkout/CheckoutCard.js'
+import { PageScrollable } from '#@/panels/page/PageScrollable.js'
+
+export const Checkout = ({ isCancel }) => {
+    return (
+        <PageScrollable>
+            <CheckoutCard isCancel={isCancel} />
+        </PageScrollable>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/pages/app/Home.abs.js

@@ -0,0 +1,11 @@
+class Abs {
+
+    constructor() {
+        this.settings = {}
+        this.settings.slideshow = {}
+        this.settings.slideshow.aspectRatio = 1920/815
+    }
+
+}
+
+export const abs = new Abs()

package/assets/root.fullstackunicorn.dev/frontend/pages/app/Home.api.js

@@ -0,0 +1,18 @@
+import { uri } from '#@/App.uri.js'
+import { api } from '#@/client/@api.js'
+import { useApi } from '#@/pages/@use.js'
+ 
+const dataFetch = async params => {
+
+    const verbal = await api.statics.get(uri.data.content.verbal, params)
+    // const logic = await api.statics.get(uri.data.content.logic, params)
+
+    const meta = verbal['@meta']
+    const data = {}
+    data.heading = verbal['@head'].heading
+    data.data = verbal['@data']
+
+    return { data, meta }
+}
+
+export const useApiHome = () => useApi(dataFetch)

package/assets/root.fullstackunicorn.dev/frontend/pages/app/Home.js

@@ -0,0 +1,23 @@
+import { PageTitle } from '#@/panels/layout/PageTitle'
+import { Slider } from '#@/panels/slider/Slider.js'
+import { Bottom } from '#@/panels/layout/Bottom.js'
+import { useApiHome } from '#@/pages/app/Home.api.js'
+import { abs } from '#@/pages/app/Home.abs.js'
+
+export const Home = () => {
+
+    const api = useApiHome()
+
+    if (!api) return null
+    return (
+        <>
+            <Slider
+                keys={{ picture: 'picture' }}
+                list={Object.values(api.data.slideshow)}
+                settings={abs.settings.slideshow}
+            />
+            <PageTitle title={api.data.body.intro.paragraph}/>
+            <Bottom />
+        </>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/pages/root/Callout.api.js

@@ -0,0 +1,31 @@
+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 routeId
+const routeId = 'callout'
+
+// #2 define fetch for preload and api
+const dataFetch = async params => {
+    const verbal = await api.statics.get(uri.data.content.verbal, params)
+    const meta = verbal['@meta']
+    const data = verbal['@data']
+    return { data, meta }
+}
+
+// #3 define usePreload hook //@NOTE: as key uri pick one of the 2 paths
+export const usePreloadCallout = () => {
+    const { lang } = useUrl()
+    const path = routeId
+    const result = F3.fabUrl(uri.data.content.verbal, {lang, path}) 
+    return result
+}
+
+// #4 define useApi hook
+export const useApiCallout = () => {
+    const { lang } = useUrl()
+    const path = 'callout'
+    const result = useLoad(dataFetch, lang, path)
+    return result
+}

package/assets/root.fullstackunicorn.dev/frontend/pages/root/Callout.js

@@ -0,0 +1,13 @@
+import { PageScrollable } from '#@/panels/page/PageScrollable.js'
+import { useApiCallout } from '#@/pages/root/Callout.api.js'
+
+export const Callout = () => {    
+
+    const callout = useApiCallout()
+
+    if (!callout) return null
+    return (
+        <PageScrollable type='fixed'>
+        </PageScrollable>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/pages/root/Legal.api.js

@@ -0,0 +1,35 @@
+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 routeId
+const routeId = 'legals'
+
+// #2 define fetch for preload and api
+const dataFetch = async params => {
+    const logic = await api.statics.get(uri.data.legals.logic, params)
+    const verbal = await api.statics.get(uri.data.legals.verbal, params)
+    const meta = verbal['@meta']
+    const data = {}
+    data.arr = verbal['@data'].arr
+    data.obj = verbal['@data'].obj
+    data.langs = logic['@langs']
+    data.versions = logic.versions || []
+    return { data, meta }
+}
+
+// #3 define usePreload hook //@NOTE: as key uri pick one of the 2 paths
+export const usePreloadLegal = list => {
+    const { lang } = useUrl()
+    const path = routeId
+    const result = F3.fabUrl(uri.data.legals.verbal, {lang, path}) 
+    return result
+}
+
+// #4 define useApi hook
+export const useApiLegal = () => {
+    const { lang, path } = useUrl()
+    const result = useLoad(dataFetch, lang, path)
+    return result
+}

package/assets/root.fullstackunicorn.dev/frontend/pages/root/Legal.js

@@ -0,0 +1,15 @@
+import { PageScrollable } from '#@/panels/page/PageScrollable.js'
+import { Legal as LegalFeature } from '#@/features/legal/Legal.js'
+import { useApiLegal } from '#@/pages/root/Legal.api.js'
+
+export const Legal = () => {
+
+    const api = useApiLegal()
+    
+    if (!api) return null
+    return (
+        <PageScrollable type='docs' isScroll>
+            <LegalFeature api={api}/>
+        </PageScrollable>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/pages/root/Legals.api.js

@@ -0,0 +1,19 @@
+import { uri } from '#@/App.uri.js'
+import { api } from '#@/client/@api.js'
+import { useApi } from '#@/pages/@use.js'
+ 
+const dataFetch = async params => {
+
+    const verbal = await api.statics.get(uri.data.legals.verbal, params)
+    const logic = await api.statics.get(uri.data.legals.logic, params)
+
+    const meta = verbal['@meta']
+    const data = {}
+    data.heading = verbal['@head'].heading
+    data.list = logic['@data'].list
+    data.data = verbal['@data'].items
+
+    return { data, meta }
+}
+
+export const useApiLegals = () => useApi(dataFetch)

package/assets/root.fullstackunicorn.dev/frontend/pages/root/Legals.js

@@ -0,0 +1,29 @@
+import { routes } from '#@/root/routes.js'
+import { PageScrollable } from '#@/panels/page/PageScrollable.js'
+import { useUrl } from '#@/base/router/@use.js'
+import { LegalCard } from '#@/base/legals/LegalCard.js'
+import { useApiLegals } from '#@/pages/root/Legals.api.js'
+
+export const Legals = () => {
+
+    const { lang } = useUrl()
+    const api = useApiLegals()
+
+    if (!api) return null
+    return (
+        <PageScrollable type='fixed'>
+            {api.list.map((link, index) => {
+                const slug = link.split('/')[1]
+                return (
+                    <LegalCard
+                        key = {index}
+                        title={api.data[slug].title}
+                        description={api.data[slug].description}
+                        label={api.data[slug].label}
+                        linkTo={F3.fabUrl(routes.public.legal.path, { slug, lang })}
+                    />
+                )
+            })}
+        </PageScrollable>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/pages/root/User.api.js

@@ -0,0 +1,18 @@
+import { uri } from '#@/App.uri.js'
+import { api } from '#@/client/@api.js'
+import { useApi } from '#@/pages/@use.js'
+ 
+const dataFetch = async params => {
+
+    const verbal = await api.statics.get(uri.data.root.verbal, params)
+    // const logic = await api.statics.get(uri.data.content.logic, params)
+
+    const meta = verbal['@meta']
+    const data = {}
+    data.heading = verbal['@head'].heading
+    data.data = verbal['@data']
+
+    return { data, meta }
+}
+
+export const useApiUser = () => useApi(dataFetch)

package/assets/root.fullstackunicorn.dev/frontend/pages/root/User.js

@@ -0,0 +1,25 @@
+import { constants } from '#@/root/constants.js'
+import { PageScrollable } from '#@/panels/page/PageScrollable.js'
+import { AccountCard } from '#@/base/account/AccountCard.js'
+import { LanguageCard } from '#@/base/language/LanguageCard.js'
+import { ThemeCard } from '#@/base/theme/ThemeCard.js'
+import { CookiesCard } from '#@/base/cookies/CookiesCard.js'
+import { LegalsCard } from '#@/base/legals/LegalsCard.js'
+import { useApiUser } from '#@/pages/root/User.api.js'
+
+export const User = () => {
+
+    const api = useApiUser()
+    
+    if (!api) return null
+    return (
+        <PageScrollable type='fixed'>
+            {!constants.services.IS_CARD_ACCOUNT_OFF && <AccountCard api={api.data.account}/>}
+            {!constants.services.IS_CARD_LANGUAGE_OFF && <LanguageCard api={api.data.language}/>}
+            {!constants.services.IS_CARD_THEME_OFF && <ThemeCard api={api.data.theme}/>}
+            {!constants.services.IS_CARD_COOKIES_OFF && <CookiesCard api={api.data.cookies}/>}
+            {!constants.services.IS_CARD_LEGALS_OFF && <LegalsCard api={api.data.legals}/>}
+            {/* <Bottom/> */}
+        </PageScrollable>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/card/book/BookCard.js

@@ -0,0 +1,58 @@
+import { Shopper } from '#@/panels/shopper/bookstore/Shopper.js'
+import { BookProse } from '#@/panels/card/book/BookProse.js'
+import { BookCardPod } from '#@/panels/card/book/BookCard.pod.js'
+
+export const BookCard = ({ item = {}, keys = {}, settings = {}, prose={}, onPressQuantity, onPressLanguage }) => {
+
+    const data = {}
+    data.picture = item[keys.picture]
+    data.title = item[keys.title]
+    data.subtitle = item[keys.subtitle]
+    data.description = item[keys.description]
+    data.price = item[keys.price]
+    data.quantity = item[keys.quantity] || '1'
+    data.language = item[keys.language] || 'English'
+    data.shippingTitle = item[keys.shippingTitle] || 'Free Shipping'
+    data.shippingDescription = item[keys.shippingDescription] || 'Currently eligible for free shipping.'
+    data.stockTitle = item[keys.stockTitle] || 'In Stock'
+    data.stockDescription = item[keys.stockDescription] || 'Ships within 24 hours'
+
+    const labels = {}
+    labels.quantity = settings.quantityLabel || 'Quantity'
+    labels.language = settings.languageLabel || 'Language'
+    labels.button = settings.buttonLabel || 'BUY NOW'
+
+    const product = {}
+    product.code = item[keys.code]
+    product.name = item[keys.title]
+    product.description = item[keys.description]
+    product.image = item[keys.image] || item[keys.picture]?.src || ''
+    product.price = item[keys.priceRaw] ?? item[keys.priceMinor] ?? item[keys.amount] ?? 0
+    product.currency = (settings.currency || 'DKK')
+    product.quantity = Number(item[keys.quantity] || 1)
+
+    const seller = {}
+    seller.code = item[keys.sellerCode] || ''
+    seller.name = item[keys.sellerName] || ''
+
+    return (
+        <BookCardPod
+            settings={settings}
+            data={data}
+            shopper={(
+                <Shopper
+                    data={data}
+                    labels={labels}
+                    settings={settings}
+                    product={product}
+                    seller={seller}
+                    onPressQuantity={onPressQuantity}
+                    onPressLanguage={onPressLanguage}
+                />
+            )}
+        >
+            <BookProse item={prose.main}/>
+            <BookProse item={prose.about}/>
+        </BookCardPod>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/card/book/BookCard.pod.js

@@ -0,0 +1,37 @@
+import { useStyle } from '#@/style/@use.js'
+import { View } from '#@/imports/core/View.js'
+import { Text } from '#@/imports/core/Text.js'
+
+const BookTitleBlockPod = ({ title, subtitle }) => {
+
+    const { s, c, f, F, S } = useStyle()
+
+    F.title = [s.fs32, s.lh50, s.fw700]
+    F.subtitle = [s.fs20, s.lh32, s.fw400]
+
+    S.box = [s.col_cXcY, s.X, s.marginT16, c.item_NN_B600]
+    S.title = [...F.title, s.textC, s.Xc, c.item_NN_B400]
+    S.subtitle = [...F.subtitle, s.textC, s.Xc, c.item_NN_B400]
+
+    return (
+        <View classes={S.box}>
+            <Text classes={S.title} font={f.f1} text={title} />
+            <Text classes={S.subtitle} font={f.f1} text={subtitle} />
+        </View>
+    )
+}
+
+export const BookCardPod = ({ settings = {}, data = {}, shopper, children }) => {
+
+    const { s, S } = useStyle()
+
+    S.root = [s.col_cX, s.X, s.gap16]
+
+    return (
+        <View classes={S.root}>
+            <BookTitleBlockPod title={data.title} subtitle={data.subtitle} />
+            {shopper}
+            {children}
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/card/book/BookProse.js

@@ -0,0 +1,22 @@
+import { Prose } from '#@/panels/prose/Prose.js'
+
+export const BookProse = ({ item={} }) => {
+
+    return Object.entries(item).map(([key, node]) => {
+
+        if (node?.type !== 'prose') return null
+
+        return (
+            <Prose
+                key={key}
+                lang={{
+                    value: node.value,
+                    style: node.attributes?.style || {},
+                    spans: node.attributes?.spans || [],
+                }}
+            />
+        )
+    })
+}
+
+

package/assets/root.fullstackunicorn.dev/frontend/panels/cards/Account.js

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+import { AccountPod } from './Account.pod.js'
+
+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 
+            title={title}
+            description={{ one:splitted[0].trim(), two:splitted[1].trim() }}
+            descriptionPress={descriptionPress}
+            label={label}
+            onPressAction={onPressAction}
+            logo_src={logo_src}
+            logo_alt={logo_alt}
+            svg={svg}
+            onPress={onPress}
+            isHover={isHover}
+            setIsHover={setIsHover}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/cards/Account.pod.js

@@ -0,0 +1,48 @@
+import { useStyle } from '#@/style/@use'
+import { View } from '#@/imports/core/View'
+import { Pressable } from '#@/imports/core/Pressable'
+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'
+
+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
+    S.top = t.root.cards.top
+    S.title = t.root.cards.title
+    S.wrap = [s.row]
+    S.descriptionOne = [...t.root.cards.description, s.paddingE5]
+    S.descriptionTwo = [...t.root.cards.description, s.paddingS5]
+    S.actionBox = []
+    S.descriptionPress = [...t.root.cards.text.description, c.item_C2]
+    S.pressable = [...t.root.cards.pressable, B.hover]
+    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}/>
+                <View classes={S.wrap}>
+                    {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}/>
+                    </Pressable>
+                    {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}/>
+            </Pressable>
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/cards/Launcher.js

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

package/assets/root.fullstackunicorn.dev/frontend/panels/cards/Launcher.pod.js

@@ -0,0 +1,38 @@
+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'
+
+export const LauncherPod = ({ 
+    svg, title, description, label, 
+    isHover, setIsHover, onPress }) => {
+
+    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
+    S.top = t.root.cards.top
+    S.title = t.root.cards.title
+    S.description = t.root.cards.description
+    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}>
+            <View classes={S.top}>
+                <Textline classes={S.title} font={f.f1} text={title} />
+                <Text classes={S.description} font={f.f1} text={description} />
+            </View>
+            <Pressable classes={S.pressable} onPress={onPress} setIsHover={setIsHover}>
+                <Icon classes={S.icon} svg={svg.logo} />
+                <Textline classes={S.label} font={f.f1} text={label} />
+                <Icon classes={S.icon} svg={svg.action} />
+            </Pressable>
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/cards/Linker.js

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

package/assets/root.fullstackunicorn.dev/frontend/panels/cards/Linker.pod.js

@@ -0,0 +1,38 @@
+import { useStyle } from '#@/style/@use'
+import { Link } from '#@/modules/core/Link'
+import { View } from '#@/imports/core/View'
+import { Icon } from '#@/modules/core/Icon'
+import { Textline } from '#@/imports/core/Text'
+import { Text } from '#@/imports/core/Text'
+
+export const LinkerPod = ({ 
+    svg, title, description, label, 
+    isHover, setIsHover, onPress, linkTo }) => {
+
+    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
+    S.top = t.root.cards.top
+    S.title = t.root.cards.title
+    S.description = t.root.cards.description
+    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}>
+            <View classes={S.top}>
+                <Textline classes={S.title} font={f.f1} text={title} />
+                <Text classes={S.description} font={f.f1} text={description} />
+            </View>
+            <Link classes={S.pressable} linkTo={linkTo} onPress={onPress} setIsHover={setIsHover}>
+                <Icon classes={S.icon} svg={svg.logo} />
+                <Textline classes={S.label} font={f.f1} text={label} />
+                <Icon classes={S.icon} svg={svg.action} />
+            </Link>
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/cards/Slider.js

@@ -0,0 +1,22 @@
+import { useState } from 'react'
+import { SliderPod } from './Slider.pod.js'
+
+export const Slider = ({ 
+    svg, title, description, label, 
+    isTrue, setIsTrue }) => {
+
+    const [isHover, setIsHover ] = useState(false)
+
+    return (
+        <SliderPod 
+            isTrue={isTrue}
+            setIsTrue={setIsTrue}
+            svg={svg}
+            title={title}
+            description={description}
+            label={label}
+            isHover={isHover}
+            setIsHover={setIsHover}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/cards/Slider.pod.js

@@ -0,0 +1,39 @@
+import { useStyle } from '#@/style/@use'
+import { Slider } from '#@/modules/core/Slider'
+import { Icon } from '#@/modules/core/Icon'
+import { View } from '#@/imports/core/View'
+import { Text } from '#@/imports/core/Text'
+import { Textline } from '#@/imports/core/Text'
+import { Pressable } from '#@/imports/core/Pressable'
+
+export const SliderPod = ({ 
+    svg, title, description, label, 
+    isHover, setIsHover, isTrue, setIsTrue }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+    
+    B.hover = isHover ? [c.base_C1_W600] : [c.base_NN_W650]
+    
+    S.box = t.root.cards.box
+    S.top = t.root.cards.top
+    S.title = t.root.cards.title
+    S.description = t.root.cards.description
+    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}>
+            <View classes={S.top}>
+                <Textline classes={S.title} font={f.f1} text={title} />
+                <Text classes={S.description} font={f.f1} text={description} />
+            </View>
+            <Pressable classes={S.pressable} onPress={setIsTrue} setIsHover={setIsHover}>
+                <Icon classes={S.icon} svg={svg} />
+                <Textline classes={S.label} font={f.f1} text={label} />
+                <Slider classes={S.slider} isOn={isTrue} />
+            </Pressable>
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/error/ErrorPage.js

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