@fullstackunicorn/create-root 1.0.22 → 1.0.24

package/assets/root.fullstackunicorn.dev/frontend/panels/page/PageScrollable.pod.js

@@ -1,85 +0,0 @@
-// // // import { useStyle } from '#@/style/@use.js'
-// // // import { Scrollable } from '#@/imports/core/Scrollable.js'
-// // // import { Fader } from '#@/imports/animated/Fader.js'
-
-// // // export const PageScrollablePod = ({ children, type, scrollable = {} }) => {
-
-// // //     const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-// // //     S.scrollable = [s.col_cX, s.XYc]
-
-// // //     return (
-// // //         <Scrollable classes={S.scrollable} isPage {...scrollable}>
-// // //             <Fader classes={t.page[type]}>
-// // //                 {children}
-// // //             </Fader>
-// // //         </Scrollable>
-// // //     )
-// // // }
-
-// // import { useStyle } from '#@/style/@use.js'
-// // import { Scrollable } from '#@/imports/core/Scrollable.js'
-// // import { Fader } from '#@/imports/animated/Fader.js'
-
-// // export const PageScrollablePod = ({ children, type, scrollRef, onScroll }) => {
-
-// //     const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-// //     S.scrollable = [s.col_cX, s.XYc]
-
-// //     return (
-// //         <Scrollable classes={S.scrollable} isPage scrollRef={scrollRef} onScroll={onScroll}>
-// //             <Fader classes={t.page[type]}>
-// //                 {children}
-// //             </Fader>
-// //         </Scrollable>
-// //     )
-// // }
-
-// import { useStyle } from '#@/style/@use.js'
-// import { Scrollable } from '#@/imports/core/Scrollable.js'
-// import { Fader } from '#@/imports/animated/Page.js'
-
-// export const PageScrollablePod = ({ children, type, scrollRef, onScroll }) => {
-
-//     const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-//     S.scrollable = [s.col_cX, s.XYc]
-
-//     return (
-//         <Scrollable
-//             classes={S.scrollable}
-//             scrollRef={scrollRef}
-//             onScroll={onScroll}
-//         >
-//             <Fader classes={t.page[type]}>
-//                 {children}
-//             </Fader>
-//         </Scrollable>
-//     )
-// }
-
-import { useStyle } from '#@/style/@use.js'
-import { Scrollable } from '#@/imports/core/Scrollable.js'
-import { Fader } from '#@/imports/animated/Fader.js'
-
-export const PageScrollablePod = ({ children, type, scrollRef, onScroll }) => {
-
-    const { s, t } = useStyle()
-
-    const S = {}
-    S.scrollable = [s.col_cX, s.XYc]
-
-    return (
-        <Scrollable
-            classes={S.scrollable}
-            isPage
-            scrollRef={scrollRef}
-            onScroll={onScroll}
-        >
-            <Fader classes={t.page[type]}>
-                {children}
-            </Fader>
-        </Scrollable>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/panels/prose/@use.js

@@ -1,21 +0,0 @@
-import { makeId } from '#@/imports/npm'
-import { useModals } from '#@/base/modals/@use'
-
-export const useGlossary = (index, value, { language, attributes={} }) => {
-
-    const [modals, setModals] = useModals()
-    const attribute = attributes[index]
-
-    if (!language || !value || !attribute) return null
-
-    const data = {}
-    data.language = attribute.lang || language
-    data.value = value
-    data.def = attribute.def
-
-    const onPress = () => {
-        const id = makeId()
-        setModals([...modals, { id, name:'glossary', data }])
-    }
-    return onPress
-}

package/assets/root.fullstackunicorn.dev/frontend/panels/prose/Prose.js

@@ -1,84 +0,0 @@
-import { useGetStatics } from '#@/base/statics/@use.js'
-// import { CodeInline } from '#@/panels/code/Code'
-import { formatter } from '#@/panels/prose/@formatter.js'
-import { useGlossary } from '#@/panels/prose/@use.js'
-import { Url, Link } from '#@/panels/prose/Basic.js'
-import { ProsePod, StylePod, SpanPod, TokenPod } from './Prose.pod.js'
-
-export const Token = ({ index, value, glossary }) => {
-
-    const statics = useGetStatics()
-    const lookup = { logic: statics.logic.lookup, verbal: statics.verbal.lookup }
-    const data = formatter.render(value, lookup)
-
-    const render = {}
-    render.text = <SpanPod {...data} />
-    render.phrase = <SpanPod {...data} />
-    // render.code = <CodeInline {...data}/>
-    render.url = <Url {...data} />
-    render.link = <Link {...data} />
-
-    const onPress = useGlossary(index, data.text, glossary)
-
-    return (
-        <TokenPod onPress={onPress}>
-            {render[data.render]}
-        </TokenPod>
-    )
-}
-
-export const Tokens = ({ sliced, glossary }) => {
-    return sliced.map((token, index) => {
-        return (
-            <Token
-                key={index}
-                index={index}
-                value={token[0]}
-                glossary={glossary}
-            />
-        )
-    })
-}
-
-export const Style = ({ block = 'p', style = {}, tokens }) => {
-    return (
-        <StylePod
-            block={block}
-            style={style}
-            tokens={tokens}
-        />
-    )
-}
-
-export const Styles = ({ block = 'p', spans = [], tokens = [], glossary }) => {
-    return spans.map((span, index) => {
-        const sliced = tokens.slice(span.start, span.end + 1)
-        return (
-            <Style
-                key={index}
-                block={block}
-                style={F3.obj.safe(span.style)}
-                tokens={<Tokens {...{ sliced, glossary }} />}
-            />
-        )
-    })
-}
-
-export const Prose = ({ lang = {}, isGlossary }) => {
-
-    const attributes = F3.obj.safe(lang.attributes)
-    const style = F3.obj.safe(lang.style || attributes.style)
-    const spansRaw = F3.arr.safe(lang.spans || attributes.spans)
-    const language = lang.language
-
-    const tokens = formatter.tokenize(lang.value)
-    const spans = formatter.spans(tokens, spansRaw)
-    const glossary = isGlossary ? { language, attributes } : {}
-
-    return (
-        <ProsePod
-            style={style}
-            styles={<Styles block={style.block} spans={spans} tokens={tokens} glossary={glossary} />}
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/panels/selectors/popup/PopupModal.js

@@ -1,54 +0,0 @@
-import { useState } from 'react'
-import { useGetStatics } from '#@/base/statics/@use.js'
-import { useModalClose } from '#@/base/modals/@use.js'
-import { Modal } from '#@/base/modals/Modal.js'
-import { SelectPage } from '#@/panels/selectors/select/SelectPage.js'
-import { Actions } from '#@/panels/selectors/actions/Actions.js'
-
-const PopupModal = ({ id, data }) => {
-
-    const { value: current, onSetValue, itemLogic, itemVerbal, itemVisual } = data
-
-    const [value, setValue] = useState(current)
-
-    const statics = useGetStatics()
-
-    const isDisabled = value.slug === current.slug
-
-    const modalClose = useModalClose()
-
-    const onSave = async () => {
-        await onSetValue(value)
-        modalClose(id)
-    }
-
-    const onRestore = () => setValue(current)
-
-    return (
-        <Modal
-            id={id}
-            type='popup'
-            title={itemVerbal.title}
-            svg={statics.visual.svg.edit}
-            actions={
-                <Actions
-                    compact
-                    selected={value}
-                    onSave={onSave}
-                    onRestore={onRestore}
-                    isDisabled={isDisabled}
-                />
-            }
-        >
-            <SelectPage
-                itemLogic={itemLogic}
-                itemVerbal={itemVerbal}
-                itemVisual={itemVisual}
-                selected={value}
-                setValue={setValue}
-            />
-        </Modal>
-    )
-}
-
-export const popup = (modal = {}) => <PopupModal key={modal.id} {...modal} />

package/assets/root.fullstackunicorn.dev/frontend/panels/selectors/select/SelectModal.js

@@ -1,52 +0,0 @@
-import { useState } from 'react'
-import { useGetStatics } from '#@/base/statics/@use.js'
-import { useModalClose } from '#@/base/modals/@use.js'
-import { Modal } from '#@/base/modals/Modal.js'
-import { SelectPage } from '#@/panels/selectors/select/SelectPage.js'
-import { Actions } from '#@/panels/selectors/actions/Actions.js'
-
-const SelectModal = ({ id, data }) => {
-
-    const { value:current, onSetValue, itemLogic, itemVerbal, itemVisual } = data
-
-    const [value, setValue] = useState(current)
-
-    const statics = useGetStatics()
-
-    const isDisabled = value.slug === current.slug
-
-    const modalClose = useModalClose()
-
-    const onSave = async () => {
-        await onSetValue(value)
-        modalClose(id)
-    }
-
-    const onRestore = () => setValue(current)
-
-    return (
-        <Modal 
-            id={id} 
-            title={itemVerbal.title} 
-            svg={statics.visual.svg.edit} 
-            actions={
-                <Actions 
-                    selected={value} 
-                    onSave={onSave} 
-                    onRestore={onRestore} 
-                    isDisabled={isDisabled}
-                />
-            }
-        >
-            <SelectPage 
-                itemLogic={itemLogic} 
-                itemVerbal={itemVerbal} 
-                itemVisual={itemVisual} 
-                selected={value} 
-                setValue={setValue} 
-            />
-        </Modal>
-    )
-} 
-
-export const selects = (modal={}) => <SelectModal key={modal.id} {...modal}/>

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

@@ -1,19 +0,0 @@
-import { useCheckoutStart } from '#@/base/checkout/@use.js'
-import { BuyPod } from '#@/panels/shopper/bookstore/Buy.pod.js'
-
-export const Buy = ({ product = {}, seller = {}, text, classes = [] }) => {
-
-    const checkoutStart = useCheckoutStart()
-
-    const onPress = async () => {
-        await checkoutStart({ product, seller })
-    }
-
-    return (
-        <BuyPod
-            text={text}
-            classes={classes}
-            onPress={onPress}
-        />
-    )
-}

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

@@ -1,17 +0,0 @@
-import { useStyle } from '#@/style/@use.js'
-import { Textline } from '#@/imports/core/Text.js'
-import { Pressable } from '#@/imports/core/Pressable.js'
-
-export const BuyPod = ({ text, onPress, classes = [] }) => {
-
-    const { s, c, f, S } = useStyle()
-
-    S.button = [s.row_cXcY, s.X, s.Y64, s.radius12, s.border1, c.base_CK, c.line_NN_B400, ...classes]
-    S.text = [s.fs20, s.lh32, s.fw700, c.item_NN_B400]
-
-    return (
-        <Pressable classes={S.button} onPress={onPress}>
-            <Textline classes={S.text} font={f.f1} text={text} />
-        </Pressable>
-    )
-}

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

@@ -1,39 +0,0 @@
-import { useGetStatics } from '#@/base/statics/@use.js'
-import { Buy } from '#@/panels/shopper/bookstore/Buy.js'
-import { ShopperPod } from '#@/panels/shopper/bookstore/Shopper.pod.js'
-
-
-export const Shopper = ({
-    data = {},
-    labels = {},
-    settings = {},
-    product = {},
-    seller = {},
-    onPressQuantity,
-    onPressLanguage
-}) => {
-    
-    const statics = useGetStatics()
-
-    const svg = {}
-    svg.edit = statics.visual.svg.editInline
-    svg.checkbox = statics.visual.svg.checkboxTrueInline
-
-    return (
-        <ShopperPod
-            data={data}
-            labels={labels}
-            settings={settings}
-            product={product}
-            svg={svg}
-            onPressQuantity={onPressQuantity}
-            onPressLanguage={onPressLanguage}
-        >
-            <Buy
-                text={labels.button}
-                product={product}
-                seller={seller}
-            />
-        </ShopperPod>
-    )
-}

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

@@ -1,187 +0,0 @@
-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/sliders/slider/SliderModal.js

@@ -1,39 +0,0 @@
-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}/>