@fullstackunicorn/create-root 1.0.23 → 1.0.24

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

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

@@ -0,0 +1,24 @@
+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/{slider/Slider.js → slideshows/Slideshow.js}

@@ -3,9 +3,10 @@ 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 { SliderPod, ItemPod, TextualPod } from './Slider.pod.js'
+import { map } from '#@/panels/slideshows/Slideshow.map.js'
+import { SlideshowPod, SlideshowItemPod, SlideshowTextualPod } from '#@/panels/slideshows/Slideshow.pod.js'
 
-export const Slider = ({ list = [], keys = {}, settings = {} }) => {
+export const Slideshow = ({ data = {}, list = [], keys = {}, settings = {} }) => {
 
     const statics = useGetStatics()
     const isFrozen = useGetIsFrozen()
@@ -17,9 +18,15 @@ export const Slider = ({ list = [], keys = {}, settings = {} }) => {
 
     const autoRef = useRef(null)
     const clickLockRef = useRef(null)
-    const listSignature = list.map((object = {}) => {
-        const picture = object[keys.picture]
-        return picture?.src || object.href || object.slug || object.title || ''
+
+    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 = () => {
@@ -86,7 +93,6 @@ export const Slider = ({ list = [], keys = {}, settings = {} }) => {
         }
     }, [isFrozen])
 
-
     const { width: mainWidth } = useWindowDimensions()
     const size = img.getPictureSize(mainWidth)
 
@@ -102,37 +108,45 @@ export const Slider = ({ list = [], keys = {}, settings = {} }) => {
     }
 
     return (
-        <SliderPod
+        <SlideshowPod
             onNext={onNext}
             onPrevious={onPrevious}
             svg={svg}
-            activeIndex={current}
             aspectRatio={settings.aspectRatio}
         >
-            {list.map((object = {}, index) => {
+            {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
 
-                const picture = object[keys.picture]
-                picture.size = size
+                if (picture) picture.size = size
 
                 return (
-                    <ItemPod
+                    <SlideshowItemPod
                         isActive={index === current}
                         picture={picture}
-                        key={picture?.src || object.href || object.slug || object.title || index}
+                        key={itemKey}
                         transitionMs={transitionDuration}
                         aspectRatio={settings.aspectRatio}
                         instantMount={isFrozen}
                     >
-                        <TextualPod
+                        <SlideshowTextualPod
                             fontSizes={fontSizes}
-                            subhead={object.subhead}
-                            title={object.title}
-                            description={object.description}
-                            href={object.href}
+                            subhead={subhead}
+                            title={title}
+                            description={description}
+                            href={href}
                         />
-                    </ItemPod>
+                    </SlideshowItemPod>
                 )
             })}
-        </SliderPod>
+        </SlideshowPod>
     )
 }

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

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

@@ -0,0 +1,90 @@
+# 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/{slider/Slider.pod.js → slideshows/Slideshow.pod.js}

@@ -7,7 +7,7 @@ import { Icon } from '#@/modules/core/Icon.js'
 import { ControlButton } from '#@/imports/animated/Button.js'
 import { Crossfader } from '#@/imports/animated/Crossfader.js'
 
-export const SliderPod = ({ svg, onNext, onPrevious, aspectRatio, children }) => {
+export const SlideshowPod = ({ svg, onNext, onPrevious, aspectRatio, children }) => {
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
@@ -27,26 +27,13 @@ export const SliderPod = ({ svg, onNext, onPrevious, aspectRatio, children }) =>
         <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 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 onPress={onNext} classes={S.iconTwoBox}>
+                        <Icon classes={S.iconTwo} svgClasses={S.svg} svg={svg.next} />
                     </ControlButton>
                 </View>
             </View>
@@ -55,11 +42,11 @@ export const SliderPod = ({ svg, onNext, onPrevious, aspectRatio, children }) =>
     )
 }
 
-export const TextualPod = ({ subhead, title, description, href, fontSizes }) => {
+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.absolute, s.XY, s.top0,]
+    S.box = [s.row_sXcY, s.absolute, s.XY, s.top0]
     S.textual = [s.col_sXsY]
     S.outline = [s.paddingX4, s.paddingY2, s.margin4, c.item_WW]
 
@@ -73,20 +60,19 @@ export const TextualPod = ({ subhead, title, description, href, fontSizes }) =>
             <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}>
+                {!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 ItemPod = ({ isActive, picture, children, aspectRatio, transitionMs = 600, instantMount = false }) => {
+export const SlideshowItemPod = ({ isActive, picture, children, aspectRatio, transitionMs = 600, instantMount = false }) => {
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
@@ -99,4 +85,4 @@ export const ItemPod = ({ isActive, picture, children, aspectRatio, transitionMs
             {children}
         </Crossfader>
     )
-}
+}

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

@@ -1,14 +1,13 @@
-import { useLoadMainMenu } from "#@/menus/Main.use.js"
+import { useLoadMainMenu } from '#@/menus/Main.use.js'
 
 export const useLoadAtoms = (lang) => {
 
     const loadMainMenu = useLoadMainMenu(lang)
 
-    const loadAtoms = (data) => {
-
-        loadMainMenu(data)
+    const loadAtoms = (results) => {
 
+        loadMainMenu(results)
     }
 
     return loadAtoms
-}
+}

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

@@ -1,4 +1,4 @@
-import { ErrorPage } from '#@/panels/error/ErrorPage'
+import { ErrorPage } from '#@/modules/base/ErrorPage'
 
 const root = {}
 root.error = <ErrorPage/>

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

@@ -1,11 +1,11 @@
-import { selects } from '#@/panels/selectors/select/SelectModal'
-import { popup } from '#@/panels/selectors/popup/PopupModal'
-import { sliders } from '#@/panels/sliders/slider/SliderModal'
+import { languages } from '#@/modals/languages/languages.js'
+import { cookies } from '#@/modals/cookies/cookies.js'
+import { countries } from '#@/modals/countries/countries.js'
 
 export const root = {
 
-    selects,
-    popup,
-    sliders
-    
-} 
+    languages,
+    cookies,
+    countries,
+
+}

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

@@ -1,5 +1,5 @@
-import { Home } from '#@/pages/app/Home.js'
-import { Checkout } from '#@/pages/app/Checkout.js'
+import { Home } from '#@/pages/scope/Home.js'
+import { Checkout } from '#@/pages/scope/Checkout.js'
 
 const scope = {}
 

package/assets/root.fullstackunicorn.dev/frontend/root/preload.scope.js

@@ -4,7 +4,7 @@ class Scope {
 
     items = lang => [
         F3.fabUrl(uri.data.content.verbal, { lang, path: 'home' }),
-        F3.fabUrl(uri.data.content.verbal, { lang, path: 'home' }),
+        F3.fabUrl(uri.data.content.logic, { lang, path: 'home' }),
         // menu.main
         F3.fabUrl(uri.data.menus.verbal, { lang, path: 'main' }),
         F3.fabUrl(uri.data.menus.logic, { lang, path: 'main' })

package/assets/root.fullstackunicorn.dev/package.json

@@ -10,7 +10,7 @@
     "devDependencies": {
         "@fullstackunicorn/cli": "^1.0.8",
         "@fullstackunicorn/reduce": "^1.0.22",
-        "@fullstackunicorn/root": "^1.0.15"
+        "@fullstackunicorn/root": "^1.0.19"
     },
     "dependencies": {}
 }

package/assets/root.fullstackunicorn.dev/workspace/config/tabulars_data_content/config/import.json

@@ -1,29 +1,7 @@
 {
     "@config": {},
     "@defaults": {
-        "type": "text"
-    },
-    "@data": [
-        {
-            "typename": "book",
-            "node": "website",
-            "tags": "website",
-            "slug": "website",
-            "value": "website"
-        },
-        {
-            "typename": "book",
-            "node": "lookup",
-            "tags": "lookup",
-            "slug": "lookups",
-            "value": "lookups"
-        },
-        {
-            "typename": "book",
-            "node": "seed",
-            "tags": "helper",
-            "slug": "seed",
-            "value": "seed"
-        }
-    ]
-}
+        "type": "text",
+        "language": "{{lang}}"
+    }
+}

package/assets/root.fullstackunicorn.dev/workspace/config/tabulars_data_content/objs/A01.metadata.meta.json

@@ -2,86 +2,79 @@
     "@defaults": {
         "type": "text"
     },
-    "@pins": [],
-    "@hooks": {},
+    "@hooks": [],
     "@generate": [
         {
-            "@target": [
-                "website"
-            ],
-            "@data": {
-                "typename": "section",
-                "node": "{{route}}",
-                "slug": "{{route}}",
-                "value": "{{route}}",
-                "children": [
-                    {
-                        "typename": "page",
-                        "node": "{{path}}",
-                        "slug": "{{path}}",
-                        "value": "{{path}}",
-                        "children": [
-                            {
-                                "typename": "block",
-                                "node": "@metadata",
-                                "slug": "@metadata",
-                                "value": "metadata",
-                                "children": [
-                                    {
-                                        "typename": "item",
-                                        "node": "metadata",
-                                        "tags": "metadata",
-                                        "value": "metadata",
-                                        "children": [
-                                            {
-                                                "typename": "data",
-                                                "node": "title",
-                                                "tags": "title",
-                                                "value": "{{title}}"
-                                            },
-                                            {
-                                                "typename": "data",
-                                                "node": "description",
-                                                "tags": "description",
-                                                "value": "{{description}}"
-                                            },
-                                            {
-                                                "typename": "data",
-                                                "node": "cover",
-                                                "type": "cover",
-                                                "tags": "cover",
-                                                "value": "{{cover}}"
-                                            }
-                                        ]
-                                    }
-                                ]
-                            },
-                            {
-                                "typename": "block",
-                                "node": "@heading",
-                                "slug": "@heading",
-                                "value": "heading",
-                                "children": [
-                                    {
-                                        "typename": "item",
-                                        "node": "heading",
-                                        "tags": "heading",
-                                        "value": "heading",
-                                        "children": [
-                                            {
-                                                "typename": "data",
-                                                "node": "heading",
-                                                "tags": "heading",
-                                                "value": "{{heading}}"
-                                            }
-                                        ]
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            }
+            "typename": "set",
+            "node": "website",
+            "children": [
+                {
+                    "typename": "book",
+                    "node": "verbal",
+                    "children": [
+                        {
+                            "typename": "section",
+                            "node": "{{route}}",
+                            "children": [
+                                {
+                                    "typename": "page",
+                                    "node": "{{path}}",
+                                    "children": [
+                                        {
+                                            "typename": "block",
+                                            "node": "@metadata",
+                                            "children": [
+                                                {
+                                                    "typename": "item",
+                                                    "node": "metadata",
+                                                    "children": [
+                                                        {
+                                                            "typename": "data",
+                                                            "node": "title",
+                                                            "tags": "title",
+                                                            "value": "{{title}}"
+                                                        },
+                                                        {
+                                                            "typename": "data",
+                                                            "node": "description",
+                                                            "tags": "description",
+                                                            "value": "{{description}}"
+                                                        },
+                                                        {
+                                                            "typename": "data",
+                                                            "type": "cover",
+                                                            "node": "cover",
+                                                            "tags": "cover",
+                                                            "value": "{{cover}}"
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            "typename": "block",
+                                            "node": "@heading",
+                                            "children": [
+                                                {
+                                                    "typename": "item",
+                                                    "node": "heading",
+                                                    "children": [
+                                                        {
+                                                            "typename": "data",
+                                                            "node": "heading",
+                                                            "value": "{{heading}}"
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
         }
     ]
-}
+}

package/assets/root.fullstackunicorn.dev/workspace/config/tabulars_data_content/objs/C01.home.data.json

@@ -2,9 +2,29 @@
     "@defaults": {
         "type": "text"
     },
-    "@target": [
-        "website",
-        "home",
-        "home"
+    "@generate": [
+        {
+            "typename": "set",
+            "node": "website",
+            "children": [
+                {
+                    "typename": "book",
+                    "node": "verbal",
+                    "children": [
+                        {
+                            "typename": "section",
+                            "node": "home",
+                            "children": [
+                                {
+                                    "typename": "page",
+                                    "node": "home",
+                                    "children": []
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
     ]
-}
+}