@fullstackunicorn/create-root 1.0.16 → 1.0.18

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

@@ -0,0 +1,84 @@
+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/prose/Prose.pod.js

@@ -0,0 +1,58 @@
+import { useStyle } from '#@/style/@use'
+import { formatter } from '#@/panels/prose/@formatter'
+import { TextFont, TextSpan, TextClick } from '#@/imports/core/Text'
+import { View } from '#@/imports/core/View'
+import { Bulleted } from '#@/modules/core/Bulleted.js'
+
+export const SpanPod = ({ text }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    return <TextSpan text={text} font={f.f1} />
+}
+
+export const TokenPod = ({ onPress, children }) => {
+    if (!onPress) return children
+    return <TextClick onPress={onPress}>{children}</TextClick>
+}
+
+export const TokenCodePod = ({ text }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.code = [s.radius4, s.border1, s.paddingX8, s.fw400, c.line_NN_W500, c.item_NN_B400, c.base_NN_W600]
+
+    return <TextFont classes={S.code} text={text} font={f.m1} />
+}
+
+export const StylePod = ({ block = 'p', style = {}, tokens }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.style = formatter.getStyles(style, t.server, block)
+
+    return <TextSpan classes={S.style} text={tokens} font={f.f1} />
+}
+
+export const ProsePod = ({ style = {}, styles }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.root = [s.Xc, ...formatter.getStyle(t.server, style)]
+
+    if (style.li === 'ul') {
+        return (
+            <View classes={S.root}>
+                <Bulleted block={style.block}>
+                    {styles}
+                </Bulleted>
+            </View>
+        )
+    }
+
+    return (
+        <View classes={S.root}>
+            {styles}
+        </View>
+    )
+}

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

@@ -0,0 +1,45 @@
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { TextButton } from '#@/modules/buttons/TextButton.js'
+import { SelectPicked } from '#@/panels/selectors/actions/SelectPicked.js'
+import { ActionsPod } from './Actions.pod.js'
+
+export const Actions = ({ selected, onSave, onRestore, isDisabled, compact = false }) => {
+
+    const statics = useGetStatics()
+
+    if (compact) {
+        return (
+            <ActionsPod
+                compact={compact}
+                action={<TextButton
+                    text={statics.verbal.buttons.save}
+                    color='C1'
+                    type='fill'
+                    onPress={onSave}
+                    isDisabled={isDisabled}
+                />}
+            />
+        )
+    }
+
+    return (
+        <ActionsPod
+            compact={compact}
+            picked={<SelectPicked
+                value={selected.value}
+                slug={selected.slug}
+                img={selected.img}
+                svg={statics.visual.svg.confirmFalse}
+                onPress={onRestore}
+                isDisabled={isDisabled}
+            />}
+            action={<TextButton
+                text={statics.verbal.buttons.save}
+                color='C1'
+                type='fill'
+                onPress={onSave}
+                isDisabled={isDisabled}
+            />}
+        />
+    )
+}

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

@@ -0,0 +1,19 @@
+import { useStyle } from '#@/style/@use'
+import { View } from '#@/imports/core/View'
+
+export const ActionsPod = ({ picked, action, compact = false }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.action = compact ? [s.row_cXcY, s.Xc] : [s.row_cY, s.Xr]
+    S.picked = compact ? [] : [s.row_sXcY, s.Xr, s.Xx1]
+    S.space = [s.X8]
+
+    return (
+        <View classes={S.action}>
+            {!compact && <View classes={S.picked}>{picked}</View>}
+            {!compact && <View classes={S.space}/>}
+            {action}
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/selectors/actions/SelectPicked.js

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { SelectPickedPod } from './SelectPicked.pod.js'
+
+export const SelectPicked = ({ value, slug, img, svg, onPress, isDisabled }) => {
+
+    const [isHover, setIsHover] = useState()
+
+    return (
+        <SelectPickedPod 
+            isHover={isHover}
+            setIsHover={setIsHover}
+            value={value}
+            slug={slug}
+            img={img}
+            isImg={!!img}
+            svg={svg}
+            onPress={isDisabled ? ()=>{} : onPress}
+            isDisabled={isDisabled}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/selectors/actions/SelectPicked.pod.js

@@ -0,0 +1,35 @@
+import { useStyle } from '#@/style/@use'
+import { Img } from '#@/modules/core/Img'
+import { Icon } from '#@/modules/core/Icon'
+import { View } from '#@/imports/core/View'
+import { Textline } from '#@/imports/core/Text'
+
+export const SelectPickedPod = ({ value, slug, img, isHover, setIsHover=()=>{},
+    svg, onPress, isDisabled }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    F.text = [s.fs16, s.lh20, s.fw500]
+
+    B.hover = isHover ? [c.base_C1_W550] : [c.base_C1_W600]
+    B.icon = isDisabled ? c.item_NN_B400_50 : c.item_NN_B400
+    B.img = !!img ? [] : [s.paddingS12]
+    
+    S.item = [s.row_sXcY, s.Y40, s.radius8, s.Xmin80, s.border1, c.line_NN_W500, ...B.hover, ...B.img]
+    S.imgBox = [s.X26, s.Y20, s.marginX7, s.radius5, s.border1, c.line_NN, c.item_NN_B400]
+    S.img = [s.X24, s.Y18, s.overflowXYh, s.radius4]
+    S.textBox = [s.row_cY]
+    S.text = [...F.text, s.Xr, c.item_NN_B400] 
+    S.icon = [s.XY40, B.icon]
+    
+    return (
+        <View classes={S.item} key={slug} setIsHover={setIsHover}>
+            {!!img && <Img classes={S.imgBox} 
+                imgClasses={S.img} 
+                img={img}
+            />}
+            <Textline classes={S.text} font={f.f1} text={value}/>
+            <Icon classes={S.icon} svg={svg} onPress={onPress}/>
+        </View>
+    )
+}

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

@@ -0,0 +1,54 @@
+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/SelectItem.js

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+import { SelectItemPod } from './SelectItem.pod.js'
+
+export const SelectItem = ({ slug, value, img, onPress, isCurrent }) => {
+
+    const [isHover, setIsHover] = useState()
+
+    return (
+        <SelectItemPod 
+            isHover={isHover}
+            setIsHover={setIsHover}
+            isCurrent={isCurrent}
+            slug={slug}
+            value={value}
+            img={img}
+            isImg={!!img}
+            onPress={onPress}
+        />
+    )
+}

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

@@ -0,0 +1,33 @@
+import { useStyle } from '#@/style/@use'
+import { Img } from '#@/modules/core/Img'
+import { Textline } from '#@/imports/core/Text'
+import { Pressable } from '#@/imports/core/Pressable'
+         
+export const SelectItemPod = ({ onPress=()=>{}, slug, value, img, isHover, setIsHover=()=>{}, isCurrent }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    F.text = [s.fs16, s.lh20, s.fw500]
+
+    B.background = isCurrent ? isHover ? [c.base_C1_W500] : [c.base_C1_W600] : isHover ? [c.base_NN_W600] : []
+    B.img = !!img ? [] : [s.paddingX12]
+    
+    S.item = [s.row_sXcY, s.Y48, s.radius8, s.marginB4, ...B.background, ...B.img]
+    S.imgBox = [s.X26, s.Y20, s.marginX7, s.marginY18, s.radius5, s.border1, c.line_NN, c.item_NN_B400]
+    S.img = [s.X24, s.Y18, s.overflowXYh, s.radius4]
+    S.text = [...F.text, s.row_sXcY, s.paddingE12, c.item_NN_B400] 
+    
+    return (
+        <Pressable classes={S.item} 
+            key={slug} 
+            onPress={onPress} 
+            setIsHover={setIsHover}
+        >
+            {!!img && <Img classes={S.imgBox} 
+                imgClasses={S.img} 
+                img={img}
+            />}
+            <Textline classes={S.text} font={f.f1} text={value} />
+        </Pressable>
+    )
+}

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

@@ -0,0 +1,52 @@
+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/selectors/select/SelectPage.js

@@ -0,0 +1,33 @@
+import { SelectItem } from '#@/panels/selectors/select/SelectItem'
+import { SelectPagePod } from './SelectPage.pod.js'
+
+export const SelectPage = ({ itemLogic, itemVerbal, itemVisual, selected, setValue }) => {
+
+    const items = []
+    for (const slug of itemLogic.options) {
+        const value = itemVerbal.options[slug]
+        const img = itemVisual?.options?.[slug]
+        items.push({ slug, value, img })
+    }
+
+    const mapper = ({ item = {} }) => {
+        const isCurrent = selected.slug === item.slug
+        const onPress = () => setValue(item)
+        return (
+            <SelectItem 
+                key={item.slug} 
+                slug={item.slug} 
+                value={item.value} 
+                img={item.img}
+                onPress={onPress} 
+                isCurrent={isCurrent} 
+            />
+        )
+    }
+
+    return (
+        <SelectPagePod data={items} mapper={mapper}>
+            {/* <InputText value={value}/> */}
+        </SelectPagePod>
+    )
+} 

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

@@ -0,0 +1,18 @@
+import { useStyle } from '#@/style/@use'
+import { View } from '#@/imports/core/View'
+import { List } from '#@/imports/core/List'
+         
+export const SelectPagePod = ({ data, mapper, children }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.page = [s.col, s.Yc]
+    S.list = [s.col, s.Yc]
+    
+    return (
+        <View classes={S.page}>
+            {children}
+            <List classes={S.list} data={data} mapper={mapper}/>
+        </View>
+    )
+} 

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

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

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

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