@fullstackunicorn/create-root 1.0.28 → 2.0.0

package/assets/root.fullstackunicorn.dev/frontend/pages/@use.js

@@ -1,65 +0,0 @@
-import { useState, useEffect } from 'react'
-import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm'
-import { useUrl } from '#@/base/router/@use.js'
-import { abs } from '#@/abstracts/abs.js'
-import { useGetResource, useSetResource } from '#@/base/resources/@use.js'
-// import { service } from '#@/imports/service.js'
-
-export const meta = atom({})
-
-export const useMeta = () => useAtom(meta)
-export const useSetMeta = () => useSetAtom(meta)
-export const useGetMeta = () => useGetAtom(meta)
-
-export const useApi = (fetch, parse, uriTemplate, ctx) => {
-    const { lang, path } = useUrl()
-    const key = abs.makeKey(F3.fabUrl(uriTemplate, { lang, path }), 'get')
-    const cached = useGetResource(key)
-    const setResource = useSetResource()
-    const setMeta = useSetMeta()
-
-    useEffect(() => {
-        if (cached.data) {
-            const preloaded = parse(cached.data)
-            if (preloaded?.meta) setMeta(preloaded.meta)
-        }
-        const load = async () => {
-            try {
-                const raw = await fetch({ lang, path }, ctx)
-                if (!raw) return
-                setResource({ key, data: raw })
-                const result = parse(raw)
-                if (result?.meta) setMeta(result.meta)
-            } catch (error) {
-                console.error('api-resource-failed', { lang, path, error })
-            }
-        }
-        load()
-    }, [lang, path])
-
-    const parsed = cached.data ? parse(cached.data) : undefined
-    if (!parsed) return undefined
-    return {
-        data: parsed.data,
-        heading: parsed.heading
-    }
-}
-
-export const useLoad = (func, lang, path, ctx) => {
-    const [result, setResult] = useState()
-    const setMeta = useSetMeta()
-    useEffect(() => {
-        const load = async () => {
-            try {
-                const response = await func({ lang, path }, ctx)
-                if (response?.meta) setMeta(response.meta)
-                setResult(response?.data)
-            } catch (error) {
-                console.error('load-request-failed', { lang, path, ctx, error })
-                setResult({ isError: true })
-            }
-        }
-        load()
-    }, [lang, path])
-    return result
-}

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

@@ -1,15 +0,0 @@
-import { uri } from '#@/App.uri.js'
-import { api } from '#@/client/@api.js'
-import { useApi } from '#@/pages/@use.js'
-
-const fetch = async params => await api.statics.get(uri.data.content.verbal, params)
-
-const parse = raw => {
-    if (!raw) return undefined
-    const data = raw['@data']
-    const meta = raw['@meta']
-    const heading = raw['@head'].heading
-    return { meta, data, heading }
-}
-
-export const useApiCallout = () => useApi(fetch, parse, uri.data.content.verbal)

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

@@ -1,13 +0,0 @@
-import { PageScrollable } from '#@/modules/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

@@ -1,27 +0,0 @@
-import { uri } from '#@/App.uri.js'
-import { api } from '#@/client/@api.js'
-import { useApi } from '#@/pages/@use.js'
-
-const fetch = async params => {
-    const logic = await api.statics.get(uri.data.legals.logic, params)
-    const verbal = await api.statics.get(uri.data.legals.verbal, params)
-    return { verbal, logic }
-}
-
-const parse = raw => {
-    if (!raw) return undefined
-    const verbal = raw?.verbal
-    const logic = raw?.logic
-    if (!F3.obj.isGood(verbal)) return undefined
-    if (!F3.obj.isGood(logic)) return undefined
-    const data = {}
-    data.arr = verbal['@data'].arr
-    data.obj = verbal['@data'].obj
-    data.langs = logic['@langs']
-    data.versions = logic.versions
-    const meta = verbal['@meta']
-    const heading = verbal['@head'].heading
-    return { meta, data, heading }
-}
-
-export const useApiLegal = () => useApi(fetch, parse, uri.data.legals.verbal)

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

@@ -1,15 +0,0 @@
-import { PageScrollable } from '#@/modules/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.data}/>
-        </PageScrollable>
-    )
-}

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

@@ -1,25 +0,0 @@
-import { uri } from '#@/App.uri.js'
-import { api } from '#@/client/@api.js'
-import { useApi } from '#@/pages/@use.js'
-
-const fetch = async params => {
-    const verbal = await api.statics.get(uri.data.legals.verbal, params)
-    const logic = await api.statics.get(uri.data.legals.logic, params)
-    return { verbal, logic }
-}
-
-const parse = raw => {
-    if (!raw) return undefined
-    const verbal = raw?.verbal
-    const logic = raw?.logic
-    if (!F3.obj.isGood(verbal)) return undefined
-    if (!F3.obj.isGood(logic)) return undefined
-    const data = {}
-    data.list = logic['@data'].list
-    data.items = verbal['@data'].items
-    const meta = verbal['@meta']
-    const heading = verbal['@head'].heading
-    return { meta, data, heading }
-}
-
-export const useApiLegals = () => useApi(fetch, parse, uri.data.legals.verbal)

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

@@ -1,29 +0,0 @@
-import { routes } from '#@/root/routes.js'
-import { PageScrollable } from '#@/modules/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.data.list.map((link, index) => {
-                const slug = link.split('/')[1]
-                return (
-                    <LegalCard
-                        key = {index}
-                        title={api.data.items[slug].title}
-                        description={api.data.items[slug].description}
-                        label={api.data.items[slug].label}
-                        linkTo={F3.fabUrl(routes.public.legal.path, { slug, lang })}
-                    />
-                )
-            })}
-        </PageScrollable>
-    )
-}

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

@@ -1,15 +0,0 @@
-import { uri } from '#@/App.uri.js'
-import { api } from '#@/client/@api.js'
-import { useApi } from '#@/pages/@use.js'
-
-const fetch = async params => await api.statics.get(uri.data.root.verbal, params)
-
-const parse = raw => {
-    if (!raw) return undefined
-    const data = raw['@data']
-    const meta = raw['@meta']
-    const heading = raw['@head'].heading
-    return { meta, data, heading }
-}
-
-export const useApiUser = () => useApi(fetch, parse, uri.data.root.verbal)

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

@@ -1,25 +0,0 @@
-import { constants } from '#@/root/constants.js'
-import { PageScrollable } from '#@/modules/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/pages/scope/Checkout.js

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

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

@@ -1,18 +0,0 @@
-class Abs {
-
-    constructor() {
-        this.settings = {}
-        this.keys = {}
-        this.settings.slideshow = {}
-        this.settings.slideshow.aspectRatio = 1920/815
-        this.keys.slideshow = {}
-        this.keys.slideshow.picture = 'picture'
-        this.keys.slideshow.subhead = 'subhead'
-        this.keys.slideshow.title = 'title'
-        this.keys.slideshow.description = 'description'
-        this.keys.slideshow.href = 'href'
-    }
-
-}
-
-export const abs = new Abs()

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

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

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

@@ -1,24 +0,0 @@
-import { PageTitle } from '#@/modules/base/PageTitle'
-import { Slideshow } from '#@/panels/slideshows/Slideshow.js'
-import { Bottom } from '#@/modules/base/Bottom.js'
-import { useApiHome } from '#@/pages/scope/Home.api.js'
-import { abs } from '#@/pages/scope/Home.abs.js'
-
-export const Home = () => {
-
-    const api = useApiHome()
-
-    if (!api) return null
-    return (
-        <>
-            <Slideshow
-                keys={abs.keys.slideshow}
-                list={Object.keys(api.data.slideshow)}
-                data={api.data.slideshow}
-                settings={abs.settings.slideshow}
-            />
-            <PageTitle title={api.data.body.intro.paragraph}/>
-            <Bottom />
-        </>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/panels/slideshows/Slideshow.js

@@ -1,152 +0,0 @@
-import { useState, useEffect, useRef } from 'react'
-import { useWindowDimensions } from '#@/imports/use.js'
-import { img } from '#@/abstracts/img.js'
-import { useGetStatics } from '#@/base/statics/@use.js'
-import { useGetIsFrozen } from '#@/base/layout/menus/@use.js'
-import { map } from '#@/panels/slideshows/Slideshow.map.js'
-import { SlideshowPod, SlideshowItemPod, SlideshowTextualPod } from '#@/panels/slideshows/Slideshow.pod.js'
-
-export const Slideshow = ({ data = {}, list = [], keys = {}, settings = {} }) => {
-
-    const statics = useGetStatics()
-    const isFrozen = useGetIsFrozen()
-
-    const [current, setCurrent] = useState(0)
-    const [isClickable, setIsClickable] = useState(true)
-
-    const transitionDuration = 600
-
-    const autoRef = useRef(null)
-    const clickLockRef = useRef(null)
-
-    if (!F3.obj.isGood(data)) return null
-    if (!F3.arr.isGood(list)) return null
-
-    const listSignature = list.map(itemKey => {
-        const object = data?.[itemKey]
-        const currentItem = map.slideshow(keys, object)
-        if (!currentItem) return ''
-        return currentItem?.picture?.src || currentItem?.href || currentItem?.title || itemKey || ''
-    }).join('|')
-
-    const clearAuto = () => {
-        if (autoRef.current) clearTimeout(autoRef.current)
-        autoRef.current = null
-    }
-
-    const clearClickLock = () => {
-        if (clickLockRef.current) clearTimeout(clickLockRef.current)
-        clickLockRef.current = null
-    }
-
-    const scheduleAuto = () => {
-        if (isFrozen) return
-        clearAuto()
-        autoRef.current = setTimeout(() => { onNext(true) }, 4000)
-    }
-
-    const lockClicks = () => {
-        setIsClickable(false)
-        clearClickLock()
-        clickLockRef.current = setTimeout(() => {
-            setIsClickable(true)
-            clickLockRef.current = null
-        }, transitionDuration)
-    }
-
-    const onNext = (isAuto = false) => {
-        if (!list.length) return
-        if (!isClickable) return
-        if (!isAuto) clearAuto()
-        lockClicks()
-        setCurrent(prev => (prev + 1 > list.length - 1 ? 0 : prev + 1))
-        scheduleAuto()
-    }
-
-    const onPrevious = () => {
-        if (!list.length) return
-        if (!isClickable) return
-        clearAuto()
-        lockClicks()
-        setCurrent(prev => (prev - 1 < 0 ? list.length - 1 : prev - 1))
-        scheduleAuto()
-    }
-
-    useEffect(() => {
-        clearAuto()
-        clearClickLock()
-        setCurrent(0)
-        setIsClickable(true)
-        if (!isFrozen && list.length) scheduleAuto()
-        return () => {
-            clearAuto()
-            clearClickLock()
-        }
-    }, [listSignature])
-
-    useEffect(() => {
-        if (isFrozen) {
-            clearAuto()
-            clearClickLock()
-        } else {
-            scheduleAuto()
-        }
-    }, [isFrozen])
-
-    const { width: mainWidth } = useWindowDimensions()
-    const size = img.getPictureSize(mainWidth)
-
-    const fontSizes = {
-        subhead: mainWidth * 0.03,
-        title: mainWidth * 0.06,
-        description: mainWidth * 0.02
-    }
-
-    const svg = {
-        previous: statics.visual.svg.arrowChevronLeft,
-        next: statics.visual.svg.arrowChevronRight,
-    }
-
-    return (
-        <SlideshowPod
-            onNext={onNext}
-            onPrevious={onPrevious}
-            svg={svg}
-            aspectRatio={settings.aspectRatio}
-        >
-            {list.map((itemKey, index) => {
-
-                const object = data?.[itemKey]
-                const currentItem = map.slideshow(keys, object)
-                if (!currentItem) return null
-
-                const picture = currentItem.picture
-                const subhead = currentItem.subhead
-                const title = currentItem.title
-                const description = currentItem.description
-                const href = currentItem.href
-
-                if (picture) picture.size = size
-
-                return (
-                    <SlideshowItemPod
-                        isActive={index === current}
-                        picture={picture}
-                        key={itemKey}
-                        transitionMs={transitionDuration}
-                        aspectRatio={settings.aspectRatio}
-                        instantMount={isFrozen}
-                    >
-                        <SlideshowTextualPod
-                            fontSizes={fontSizes}
-                            subhead={subhead}
-                            title={title}
-                            description={description}
-                            href={href}
-                        />
-                    </SlideshowItemPod>
-                )
-            })}
-        </SlideshowPod>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/panels/slideshows/Slideshow.map.js

@@ -1,27 +0,0 @@
-const data = [
-    'picture',
-    'subhead',
-    'title',
-    'description',
-    'href'
-]
-
-const get = (keys = {}, item = {}, key = '') => {
-    const mapped = F3.obj.get(keys, key)
-    const path = F3.str.isGood(mapped) && data.includes(key) ? mapped : key
-    return F3.obj.get(item, path)
-}
-
-const slideshow = (keys = {}, item = {}) => {
-    const result = {}
-    result.picture = get(keys, item, 'picture')
-    result.subhead = get(keys, item, 'subhead')
-    result.title = get(keys, item, 'title')
-    result.description = get(keys, item, 'description')
-    result.href = get(keys, item, 'href')
-    if (!F3.obj.isGood(result.picture)) return undefined
-    if (!F3.str.isGood(result.picture.src)) return undefined
-    return result
-}
-
-export const map = { data, get, slideshow }

package/assets/root.fullstackunicorn.dev/frontend/panels/slideshows/Slideshow.md

@@ -1,90 +0,0 @@
-# Slideshow.js
-
-## list
-
-```json
-{
-  "list": ["S001", "S002", "S003"]
-}
-```
-
-## data
-
-```json
-{
-  "data": {
-    "S001": {
-      "picture": {
-        "original": "background.jpg",
-        "name": "background.jpg",
-        "x": 2000,
-        "y": 1500,
-        "placeholder": "UDTI,a_3js_3~qj[ayofj@ayayfP~qoefQj[",
-        "src": "graphic/TS/background.jpg",
-        "ratio": 1.3333333333333333,
-        "max": "HD"
-      },
-      "subhead": "Featured Collection",
-      "title": "Painted Atmospheres",
-      "description": "Open the artwork selection",
-      "href": "/en-US/artworks"
-    },
-    "S002": {
-      "picture": {
-        "original": "themes-cover.jpg",
-        "name": "themes-cover.jpg",
-        "x": 2000,
-        "y": 1500,
-        "placeholder": "L7HLkY4n00t7?b%MRjofM{ofWBof",
-        "src": "graphic/TS/themes-cover.jpg",
-        "ratio": 1.3333333333333333,
-        "max": "HD"
-      },
-      "subhead": "Themes",
-      "title": "Visual Paths",
-      "description": "Open the main themes",
-      "href": "/en-US/themes"
-    },
-    "S003": {
-      "picture": {
-        "original": "activities-cover.jpg",
-        "name": "activities-cover.jpg",
-        "x": 2000,
-        "y": 1500,
-        "placeholder": "L4G8Rj?b00_3~qofRjM{t7ofWBof",
-        "src": "graphic/TS/activities-cover.jpg",
-        "ratio": 1.3333333333333333,
-        "max": "HD"
-      },
-      "subhead": "Activities",
-      "title": "Exhibitions And Publications",
-      "description": "Open activities and insights",
-      "href": "/en-US/activities"
-    }
-  }
-}
-```
-
-## keys
-
-```json
-{
-  "keys": {
-    "picture": "picture",
-    "subhead": "subhead",
-    "title": "title",
-    "description": "description",
-    "href": "href"
-  }
-}
-```
-
-## settings
-
-```json
-{
-  "settings": {
-    "aspectRatio": 2.3558282208588958
-  }
-}
-```

package/assets/root.fullstackunicorn.dev/frontend/panels/slideshows/Slideshow.pod.js

@@ -1,88 +0,0 @@
-import { useStyle } from '#@/style/@use.js'
-import { View } from '#@/imports/core/View.js'
-import { TextOutline } from '#@/imports/core/Text.js'
-import { Img } from '#@/imports/core/Img.js'
-import { Href } from '#@/imports/core/Href.js'
-import { Icon } from '#@/modules/core/Icon.js'
-import { ControlButton } from '#@/imports/animated/Button.js'
-import { Crossfader } from '#@/imports/animated/Crossfader.js'
-
-export const SlideshowPod = ({ svg, onNext, onPrevious, aspectRatio, children }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    S.slider = [s.row_cXcY, s.X100p, s.positionRelative]
-    S.controls = [s.row, s.XY100p, s.Z3]
-    S.one = [s.row_sXcY, s.XYr]
-    S.iconOneBox = [s.XY64, s.col_cXcY, s.Z2]
-    S.iconOne = [s.XY40, s.Z2, s.marginX8, c.item_NN_B400, s.radius8, c.base_WW_50]
-    S.two = [s.row_eXcY, s.XYr]
-    S.iconTwoBox = [s.XY64, s.col_cXcY, s.Z2]
-    S.iconTwo = [s.XY40, s.Z2, s.marginX8, c.item_NN_B400, s.radius8, c.base_WW_50]
-    S.svg = [c.base_WW_50]
-
-    I.slider = { aspectRatio }
-
-    return (
-        <View classes={S.slider} inline={I.slider}>
-            <View classes={S.controls}>
-                <View classes={S.one}>
-                    <ControlButton onPress={onPrevious} classes={S.iconOneBox}>
-                        <Icon classes={S.iconOne} svgClasses={S.svg} svg={svg.previous} />
-                    </ControlButton>
-                </View>
-                <View classes={S.two}>
-                    <ControlButton onPress={onNext} classes={S.iconTwoBox}>
-                        <Icon classes={S.iconTwo} svgClasses={S.svg} svg={svg.next} />
-                    </ControlButton>
-                </View>
-            </View>
-            {children}
-        </View>
-    )
-}
-
-export const SlideshowTextualPod = ({ subhead, title, description, href, fontSizes }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    S.box = [s.row_sXcY, s.positionAbsolute, s.XY100p, s.top0]
-    S.textual = [s.col_sXsY]
-    S.outline = [s.paddingX4, s.paddingY2, s.margin4, c.item_WW]
-
-    I.box = { paddingLeft: '10%', paddingRight: '10%' }
-    I.subhead = { fontSize: fontSizes.subhead }
-    I.title = { fontSize: fontSizes.title }
-    I.description = { fontSize: fontSizes.description }
-
-    return (
-        <View classes={S.box} inline={I.box}>
-            <View classes={S.textual}>
-                <TextOutline classes={S.outline} inline={I.subhead} text={subhead} outlineNr={1} />
-                <TextOutline classes={S.outline} inline={I.title} text={title} outlineNr={1} />
-                {!href
-                    ? <TextOutline classes={S.outline} inline={I.description} text={description} outlineNr={1} />
-                    : (
-                        <Href linkTo={href}>
-                            <TextOutline classes={S.outline} inline={I.description} text={description} outlineNr={1} />
-                        </Href>
-                    )}
-            </View>
-        </View>
-    )
-}
-
-export const SlideshowItemPod = ({ isActive, picture, children, aspectRatio, transitionMs = 600, instantMount = false }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    S.image = [s.X100p]
-    I.image = { aspectRatio }
-
-    return (
-        <Crossfader isActive={isActive} transitionMs={transitionMs} instantMount={instantMount}>
-            <Img classes={S.image} inline={I.image} picture={picture} />
-            {children}
-        </Crossfader>
-    )
-}