@fullstackunicorn/create-root 1.0.16 → 1.0.18

package/assets/root.fullstackunicorn.dev/frontend/panels/shopper/bookstore/Shopper.pod.js

@@ -0,0 +1,187 @@
+import { useStyle } from '#@/style/@use.js'
+import { View } from '#@/imports/core/View.js'
+import { Text } from '#@/imports/core/Text.js'
+import { Img } from '#@/imports/core/Img.js'
+import { Icon } from '#@/modules/core/Icon.js'
+import { Pressable } from '#@/imports/core/Pressable.js'
+
+const PicturePod = ({ picture, settings = {} }) => {
+
+    const { s, S, I } = useStyle()
+
+    const maxWidth = settings.pictureMaxWidth ?? 250
+
+    S.box = [s.radius12, s.overflowXYh]
+    S.picture = [s.X]
+
+    I.box = {
+        width: '100%',
+        maxWidth: `${maxWidth}px`,
+    }
+
+    return (
+        <View classes={S.box} inline={I.box}>
+            <Img classes={S.picture} picture={picture} />
+        </View>
+    )
+}
+
+const ShopperOptionPod = ({ label, value, svg, onPress }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    F.label = [s.fs16, s.lh24, s.fw700, c.item_NN_B400]
+    F.value = [s.fs16, s.lh24, s.fw500, c.item_NN_B400]
+
+    S.block = [s.col, s.paddingY8]
+    S.action = [s.row_sXcY, s.X]
+    S.separator = [s.row_cY, s.Xr, s.paddingX8]
+    S.line = [s.Y1, s.Xr, c.base_NN_W500]
+    S.label = [...F.label]
+    S.value = [...F.value, s.marginE8]
+    S.icon = [s.XY14, c.item_NN_B400]
+
+    return (
+        <View classes={S.block}>
+            <Pressable classes={S.action} onPress={onPress}>
+                <Text classes={S.label} font={f.f1} text={label} />
+                <View classes={S.separator}>
+                    <View classes={S.line}></View>
+                </View>
+                <Text classes={S.value} font={f.f1} text={value} />
+                <Icon classes={S.icon} svg={svg} />
+            </Pressable>
+        </View>
+    )
+}
+
+const ShopperShippingPod = ({ label, value, svg }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    F.label = [s.fs16, s.lh24, s.fw700, c.item_C4_B200]
+    F.value = [s.fs16, s.lh24, s.fw500, c.item_C4_B200]
+
+    S.block = [s.col, s.paddingY8]
+    S.action = [s.row_sXcY, s.X]
+    S.separator = [s.row_cY, s.Xr, s.paddingX8]
+    S.line = [s.Y1, s.Xr, c.base_NN_W500]
+    S.label = [...F.label]
+    S.value = [...F.value]
+    S.icon = [s.XY14, c.item_C4_B200]
+
+    return (
+        <View classes={S.block}>
+            <View classes={S.action}>
+                <Text classes={S.label} font={f.f1} text={label} />
+                <View classes={S.separator}>
+                    <View classes={S.line}></View>
+                </View>
+                <Text classes={S.value} font={f.f1} text={value} />
+                {/* <Icon classes={S.icon} svg={svg} /> */}
+            </View>
+        </View>
+    )
+}
+
+export const ShopperPod = ({
+    data = {},
+    labels = {},
+    settings = {},
+    product = {},
+    svg = {},
+    onPressQuantity,
+    onPressLanguage,
+    children
+}) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    F.price = [s.fs28, s.lh36, s.fw700, c.item_C1]
+    F.currency = [s.fs28, s.lh36, s.fw700, c.item_NN_W400]
+    F.priceInfo = [s.fs16, s.lh24, s.fw400, s.fdI, c.item_NN_B400]
+
+    S.wrap = [s.X]
+    S.box = [s.row_sXsY, s.X, s.padding24, s.radius24, s.overflowXYh, s.border1, c.base_WW, c.line_NN_W600]
+    S.pictureWrap = [s.col_sXcY, s.XYr]
+    // S.spacer = [s.X32]
+    S.content = [s.col, s.XYr]
+    S.buyBlock = [s.col_eX]
+    S.buyRow = [s.row_eXeY]
+    S.price = [...F.price]
+    S.currency = [...F.currency, s.marginS8]
+    S.priceInfo = [...F.priceInfo]
+
+    S.separator = [s.X32, s.Yr]
+
+    S.options = [s.col, s.marginY8]
+    S.quantityBlock = [s.col]
+    S.languageBlock = [s.col]
+    S.shippingBlock = [s.col]
+    S.stockBlock = [s.col]
+    S.spacerY = [s.Yc]
+
+    return (
+        <View classes={S.wrap}>
+            <View classes={S.box}>
+                <View classes={S.pictureWrap}>
+                    <PicturePod picture={data.picture} settings={settings} />
+                </View>
+
+                <View classes={S.separator}>
+                    <View classes={S.line}></View>
+                </View>
+
+                <View classes={S.content}>
+
+                    <View classes={S.buyBlock}>
+                        <View classes={S.buyRow}>
+                            <Text classes={S.price} font={f.f1} text={product.price} />
+                            <Text classes={S.currency} font={f.f1} text={product.currency} />
+                        </View>
+                        <Text classes={S.priceInfo} font={f.f1} text={data.stockDescription} />
+                    </View>
+
+                    <View classes={S.options}>
+                        <View classes={S.quantityBlock}>
+                            <ShopperOptionPod
+                                label={labels.quantity}
+                                value={data.quantity}
+                                svg={svg.edit}
+                                onPress={onPressQuantity}
+                            />
+                        </View>
+
+                        <View classes={S.languageBlock}>
+                            <ShopperOptionPod
+                                label={labels.language}
+                                value={data.language}
+                                svg={svg.edit}
+                                onPress={onPressLanguage}
+                            />
+                        </View>
+
+                        <View classes={S.shippingBlock}>
+                            <ShopperShippingPod
+                                label='Shipping'
+                                value='Free'
+                                svg={svg.checkbox}
+                            />
+                        </View>
+
+                        <View classes={S.stockBlock}>
+                            <ShopperShippingPod
+                                label='Availability'
+                                value='In Stock'
+                                svg={svg.checkbox}
+                            />
+                        </View>
+
+                    </View>
+                    <View classes={S.spacerY}></View>
+                    {children}
+                </View>
+            </View>
+        </View>
+    )
+}

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

@@ -0,0 +1,138 @@
+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 { SliderPod, ItemPod, TextualPod } from './Slider.pod.js'
+
+export const Slider = ({ 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)
+    const listSignature = list.map((object = {}) => {
+        const picture = object[keys.picture]
+        return picture?.src || object.href || object.slug || object.title || ''
+    }).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 (
+        <SliderPod
+            onNext={onNext}
+            onPrevious={onPrevious}
+            svg={svg}
+            activeIndex={current}
+            aspectRatio={settings.aspectRatio}
+        >
+            {list.map((object = {}, index) => {
+
+                const picture = object[keys.picture]
+                picture.size = size
+
+                return (
+                    <ItemPod
+                        isActive={index === current}
+                        picture={picture}
+                        key={picture?.src || object.href || object.slug || object.title || index}
+                        transitionMs={transitionDuration}
+                        aspectRatio={settings.aspectRatio}
+                        instantMount={isFrozen}
+                    >
+                        <TextualPod
+                            fontSizes={fontSizes}
+                            subhead={object.subhead}
+                            title={object.title}
+                            description={object.description}
+                            href={object.href}
+                        />
+                    </ItemPod>
+                )
+            })}
+        </SliderPod>
+    )
+}

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

@@ -0,0 +1,102 @@
+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 SliderPod = ({ svg, onNext, onPrevious, aspectRatio, children }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.slider = [s.row_cXcY, s.X, s.relative]
+    S.controls = [s.row, s.XY, 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 TextualPod = ({ 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.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 ItemPod = ({ isActive, picture, children, aspectRatio, transitionMs = 600, instantMount = false }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.image = [s.X]
+    I.image = { aspectRatio }
+
+    return (
+        <Crossfader isActive={isActive} transitionMs={transitionMs} instantMount={instantMount}>
+            <Img classes={S.image} inline={I.image} picture={picture} />
+            {children}
+        </Crossfader>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/sliders/actions/Actions.js

@@ -0,0 +1,12 @@
+import { LanguageButton } from '#@/base/language/LanguageButton'
+import { ActionsPod } from './Actions.pod.js'
+
+export const Actions = ({ isLanguageButton, children }) => {
+    return (
+        <ActionsPod 
+            language={!isLanguageButton ? null : <LanguageButton/>}
+        >
+            {children}
+        </ActionsPod>
+    )
+} 

package/assets/root.fullstackunicorn.dev/frontend/panels/sliders/actions/Actions.pod.js

@@ -0,0 +1,22 @@
+import { useStyle } from '#@/style/@use'
+import { View } from '#@/imports/core/View'
+
+export const ActionsPod = ({ language, children }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.action = [s.row, s.Xr]
+    S.boxS = [s.row_sXcY, s.Xr]
+    S.boxE = [s.row_eXcY]
+
+    return (
+        <View classes={S.action}>
+            <View classes={S.boxS}>
+                {language}
+            </View>
+            <View classes={S.boxE}>
+            {children}
+            </View>
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/sliders/slider/SliderItem.js

@@ -0,0 +1,30 @@
+import { useState } from 'react'
+import { SliderItemPod } from './SliderItem.pod.js'
+
+export const SliderItem = ({ 
+    svg, title, description, label, labelOn, labelOff, 
+    name, formResult, isAlways }) => {
+
+    const [isHover, setIsHover ] = useState(false)
+    const [isTrue, setIsTrue] = useState(formResult.current[name]?.isAgreed)
+
+    const onSetIsTrue = (result) => {
+        if (isAlways) return
+        const timestamp = new Date().toISOString()
+        formResult.current[name]={isAgreed:result, timestamp}
+        setIsTrue(result)
+    }
+
+    return (
+        <SliderItemPod 
+            isTrue={isTrue}
+            setIsTrue={()=>onSetIsTrue(!isTrue)}
+            svg={svg}
+            title={title}
+            description={description}
+            label={label ? label : isTrue ? labelOn : labelOff}
+            isHover={isHover}
+            setIsHover={setIsHover}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/sliders/slider/SliderItem.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 SliderItemPod = ({ 
+    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/sliders/slider/SliderModal.js

@@ -0,0 +1,39 @@
+import { Modal } from '#@/base/modals/Modal'
+import { TextButton } from '#@/modules/buttons/TextButton'
+import { SliderPage } from '#@/panels/sliders/slider/SliderPage'
+import { Actions } from '#@/panels/sliders/actions/Actions'
+
+const SliderModal = ({ id, data }) => {
+
+    const { isCloseDisabled, isLanguageButton, svg, onSetValue=()=>{},
+        formResult, itemVerbal, itemLogic, itemVisual } = data
+
+    return ( 
+        <Modal 
+            id={id} 
+            isCloseDisabled={isCloseDisabled}
+            title={itemVerbal.title} 
+            svg={svg} 
+            actions={
+                <Actions isLanguageButton={isLanguageButton}>
+                    <TextButton 
+                        text={itemVerbal.action} 
+                        type='fill'
+                        color='C1' 
+                        onPress={onSetValue}
+                    />
+                </Actions>
+            }
+        >
+            <SliderPage 
+                formResult={formResult}
+                sliderLogic={itemLogic}
+                sliderVerbal={itemVerbal.data}
+                sliderVisual={itemVisual}
+                description={itemVerbal.description}
+            />
+        </Modal>
+    )
+} 
+
+export const sliders = (modal={}) => <SliderModal key={modal.id} {...modal}/>

package/assets/root.fullstackunicorn.dev/frontend/panels/sliders/slider/SliderPage.js

@@ -0,0 +1,37 @@
+import { SliderItem } from '#@/panels/sliders/slider/SliderItem'
+import { SliderPagePod } from './SliderPage.pod.js'
+
+export const SliderPage = ({ formResult, sliderLogic, sliderVerbal, sliderVisual, description }) => {
+
+    const data = Object.keys(sliderLogic.data)
+
+    const mapper = ({ item: name }) => {
+
+        const isAlwaysOn = sliderLogic.data[name].isAlwaysOn
+        const isAlwaysOff = sliderLogic.data[name].isAlwaysOff
+
+        return (
+            <SliderItem
+                name={name}
+                svg={sliderVisual[name].svg}
+                isAlways={isAlwaysOn || isAlwaysOff}
+                formResult={formResult}
+                key={sliderVerbal[name].title}
+                title={sliderVerbal[name].title}
+                description={sliderVerbal[name].description}
+                label={sliderVerbal[name].label}
+                labelOn={sliderVerbal[name].on}
+                labelOff={sliderVerbal[name].off}
+            />
+        )
+    }
+
+    return (
+        <SliderPagePod
+            type='base'
+            description={description}
+            data={data}
+            mapper={mapper}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/sliders/slider/SliderPage.pod.js

@@ -0,0 +1,24 @@
+import { useStyle } from '#@/style/@use'
+import { List } from '#@/imports/core/List'
+import { Text } from '#@/imports/core/Text'
+import { View } from '#@/imports/core/View'
+
+export const SliderPagePod = ({ data, mapper, description }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.base = [s.col, s.Yc]
+    S.description = t.root.cards.description
+    S.list = [s.col, s.Yc]
+
+    return (
+        <View classes={S.base}>
+            <List 
+                classes={S.list}
+                description={<Text classes={S.description} font={f.f1} text={description}/>}
+                data={data} 
+                mapper={mapper}
+            />
+        </View>
+    )
+} 

package/assets/root.fullstackunicorn.dev/frontend/panels/wrapper/fixed/Wrapper.js

@@ -0,0 +1,25 @@
+import { useGetWidth } from '#@/base/layout/@use.js'
+import { WrapperPod } from '#@/panels/wrapper/fixed/Wrapper.pod.js'
+
+export const Wrapper = ({ settings, children }) => {
+
+    const width = useGetWidth()
+
+    const rangeTop = Number(settings.maxWidth) + (Number(settings.paddingX) * 2)
+
+    let paddingX = 0
+
+    if (width > settings.maxWidth && width < rangeTop) {
+        paddingX = Math.floor((rangeTop - width) / 2)
+    }
+
+    if (width <= settings.maxWidth) {
+        paddingX = settings.paddingX
+    }
+
+    return (
+        <WrapperPod paddingX={paddingX}>
+            {children}
+        </WrapperPod>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/wrapper/fixed/Wrapper.pod.js

@@ -0,0 +1,23 @@
+import { useStyle } from '#@/style/@use.js'
+import { View } from '#@/imports/core/View.js'
+
+export const WrapperPod = ({ paddingX, children }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.box = [s.X]
+    S.wrap = []
+
+    I.wrap = {
+        paddingLeft: `${paddingX}px`,
+        paddingRight: `${paddingX}px`,
+    }
+
+    return (
+        <View classes={S.box}>
+            <View classes={S.wrap} inline={I.wrap}>
+                {children}
+            </View>
+        </View>
+    )
+}