@fullstackunicorn/create-root 1.0.17 → 1.0.19

package/assets/root.fullstackunicorn.dev/frontend/panels/error/ErrorPage.pod.js

@@ -0,0 +1,23 @@
+import { useStyle } from '#@/style/@use'
+import { View } from '#@/imports/core/View'
+import { Text } from '#@/imports/core/Text'
+
+export const ErrorPagePod = ({ logo, title, text}) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.box = [s.col, s.Xc]
+    S.title = [...t.root.main.title, s.paddingX6]
+    S.text = [...t.root.main.description]
+    S.boxText = [s.col_cY, s.paddingX6, s.marginT8] 
+
+    return (
+        <View classes={S.box}>
+            {logo}
+            <Text classes={S.title} text={title} />
+            <View classes={S.boxText}>
+                <Text classes={S.text} font={f.f1} text={text} /> 
+            </View>
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/grid/book/Grid.js

@@ -0,0 +1,115 @@
+import { Fragment, useMemo } from 'react'
+import { useContainerSize } from '#@/imports/use.js'
+import { GridPod, GridRowPod, XGapPod, YGapPod } from '#@/panels/grid/book/Grid.pod.js'
+import { Item } from '#@/panels/grid/book/Item.js'
+
+const chunkRows = (list = [], columns = 1) => {
+    const safeColumns = Math.max(1, columns)
+    const rows = []
+
+    for (let i = 0; i < list.length; i += safeColumns) {
+        rows.push(list.slice(i, i + safeColumns))
+    }
+
+    return rows
+}
+
+const getColumns = (containerWidth, settings = {}) => {
+    const minWidth = settings.cardMinWidth || 220
+    const gapX = settings.cardGapX ?? settings.cardGap ?? 16
+
+    if (!containerWidth || containerWidth <= 0) return 1
+
+    let columns = Math.floor((containerWidth + gapX) / (minWidth + gapX))
+    if (columns < 1) columns = 1
+
+    let cardWidth = Math.floor((containerWidth - ((columns - 1) * gapX)) / columns)
+
+    while (columns > 1 && settings.cardMinWidth && cardWidth < settings.cardMinWidth) {
+        columns -= 1
+        cardWidth = Math.floor((containerWidth - ((columns - 1) * gapX)) / columns)
+    }
+
+    while (columns < 12 && settings.cardMaxWidth && cardWidth > settings.cardMaxWidth) {
+        columns += 1
+        cardWidth = Math.floor((containerWidth - ((columns - 1) * gapX)) / columns)
+    }
+
+    if (columns < 1) columns = 1
+
+    return columns
+}
+
+const getCardWidth = (containerWidth, columns, settings = {}) => {
+    if (!containerWidth || containerWidth <= 0) return 0
+
+    const gapX = columns > 1 ? (settings.cardGapX ?? settings.cardGap ?? 16) : 0
+    const totalGap = (columns - 1) * gapX
+    const width = Math.floor((containerWidth - totalGap) / columns)
+
+    return width > 0 ? width : 0
+}
+
+export const Grid = ({ list = [], data = {}, keys = {}, settings = {}, top, bottom, trigger }) => {
+    const { viewRef, width: containerWidth } = useContainerSize()
+
+    const columns = useMemo(() => {
+        return getColumns(containerWidth, settings)
+    }, [containerWidth, settings])
+
+    const cardWidth = useMemo(() => {
+        return getCardWidth(containerWidth, columns, settings)
+    }, [containerWidth, columns, settings])
+
+    const rows = useMemo(() => {
+        return chunkRows(list, columns)
+    }, [list, columns])
+
+    const gapX = columns > 1 ? (settings.cardGapX ?? settings.cardGap ?? 16) : 0
+    const gapY = settings.cardGapY ?? settings.rowGap ?? settings.cardGap ?? 16
+
+    const cardInline = cardWidth > 0 ? {
+        width: `${cardWidth}px`,
+        minWidth: `${cardWidth}px`,
+        maxWidth: `${cardWidth}px`,
+    } : {}
+
+    return (
+        <>
+            {top}
+
+            <GridPod viewRef={viewRef}>
+                {containerWidth > 0 && rows.map((row, rowIndex) => (
+                    <Fragment key={`row-${rowIndex}`}>
+                        <GridRowPod>
+                            {row.map((key, columnIndex) => {
+                                const item = data[key]
+                                if (!item) return null
+
+                                const isLast = columnIndex === row.length - 1
+
+                                return (
+                                    <Fragment key={key || `${rowIndex}-${columnIndex}`}>
+                                        <Item
+                                            type={settings.cardType}
+                                            inline={cardInline}
+                                            picture={item[keys.picture]}
+                                            title={item[keys.title]}
+                                            price={item[keys.text]}
+                                            linkTo={item[keys.link] || `/${key}`}
+                                        />
+                                        {!isLast && <XGapPod size={gapX} />}
+                                    </Fragment>
+                                )
+                            })}
+                        </GridRowPod>
+
+                        {rowIndex < rows.length - 1 && <YGapPod size={gapY} />}
+                    </Fragment>
+                ))}
+            </GridPod>
+
+            {bottom}
+        </>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/grid/book/Grid.pod.js

@@ -0,0 +1,65 @@
+import { useStyle } from '#@/style/@use.js'
+import { View } from '#@/imports/core/View.js'
+
+export const XGapPod = ({ size = 16 }) => {
+    const { S, I } = useStyle()
+
+    S.gap = []
+    I.gap = {
+        width: `${size}px`,
+        minWidth: `${size}px`,
+        maxWidth: `${size}px`,
+        flexShrink: 0,
+    }
+
+    return <View classes={S.gap} inline={I.gap} />
+}
+
+export const YGapPod = ({ size = 16 }) => {
+    const { S, I } = useStyle()
+
+    S.gap = []
+    I.gap = {
+        height: `${size}px`,
+        minHeight: `${size}px`,
+        maxHeight: `${size}px`,
+        width: '100%',
+        flexShrink: 0,
+    }
+
+    return <View classes={S.gap} inline={I.gap} />
+}
+
+export const GridRowPod = ({ children }) => {
+    const { s, S, I } = useStyle()
+
+    S.row = [s.row, s.Xx, s.Yc]
+    I.row = {
+        // width: '100%',
+        // height:'100%',
+        // alignItems: 'stretch',
+        // justifyContent: 'flex-start',
+        flexWrap: 'nowrap',
+    }
+
+    return (
+        <View classes={S.row} inline={I.row}>
+            {children}
+        </View>
+    )
+}
+
+export const GridPod = ({ children, viewRef }) => {
+    const { s, S, I } = useStyle()
+
+    S.grid = [s.col]
+    I.grid = {
+        width: '100%',
+    }
+
+    return (
+        <View classes={S.grid} inline={I.grid} viewRef={viewRef}>
+            {children}
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/grid/book/Item.js

@@ -0,0 +1,3 @@
+import { ItemPod } from '#@/panels/grid/book/Item.pod.js'
+
+export const Item = ItemPod

package/assets/root.fullstackunicorn.dev/frontend/panels/grid/book/Item.pod.js

@@ -0,0 +1,50 @@
+import { useStyle } from '#@/style/@use.js'
+import { HoverCard } from '#@/imports/animated/HoverCard.js'
+import { View } from '#@/imports/core/View.js'
+import { Img } from '#@/imports/core/Img.js'
+import { Text } from '#@/imports/core/Text.js'
+import { Link } from '#@/modules/core/Link.js'
+
+export const ItemPod = ({ picture, title, price, linkTo, inline = {}, type }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    B.card = t.cards?.[type] || t.cards.portrait
+
+    F.title = [s.fs17, s.fw600, s.lh24, c.item_NN_B600]
+    F.price = [s.fs16, s.fw500, c.item_NN_B400]
+
+    S.box = [s.col, s.Yr]
+    S.link = B.card.link
+    S.card = B.card.box
+    S.pictureWrap = B.card.pictureWrap
+    S.pictureBox = B.card.pictureBox
+    S.picture = B.card.picture
+    S.content = B.card.content
+    S.title = [...F.title, ...B.card.title]
+    S.spacer = [s.Yc]
+    S.price = [...F.price, ...B.card.price]
+
+    I.box = inline
+    I.link = { display: 'block', width: '100%' }
+    I.pictureBox = { ratio: picture.ratio}
+
+    return (
+        <View classes={S.box} inline={I.box}>
+            <Link linkTo={linkTo} classes={S.link} inline={I.link}>
+                <HoverCard classes={S.card}>
+                    <View classes={S.pictureWrap}>
+                        <View classes={S.pictureBox} inline={I.pictureBok}>
+                            <Img classes={S.picture} picture={picture} />
+                        </View>
+                    </View>
+                    <View classes={S.content}>
+                        <Text classes={S.title} text={title} />
+                        <View classes={S.spacer} />
+                        <Text classes={S.price} text={price} />
+                    </View>
+                </HoverCard>
+            </Link>
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/layout/Bottom.js

@@ -0,0 +1,12 @@
+import { BottomPod } from './Bottom.pod.js'
+
+export const Bottom = () => {
+
+    const year = new Date().getFullYear()
+    const minderable = { href:"https://websites.minderable.com", text:'Powered by Minderable' }
+    const text = `Copyright © ${year}`
+
+    return (
+        <BottomPod text={text} minderable={minderable}/>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/layout/Bottom.pod.js

@@ -0,0 +1,40 @@
+import { useStyle } from '#@/style/@use.js'
+import { View } from '#@/imports/core/View.js'
+import { Textline } from '#@/imports/core/Text.js'
+import { Href } from '#@/imports/core/Href.js'
+import { Link } from '#@/imports/core/Link.js'
+
+export const BottomPod = ({ text, minderable }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    F.text = [s.fs14, s.lh24, s.fw400]
+
+    S.bottom = [s.row_cXcY, s.Xc]
+    S.space = [s.Yc]
+    S.box = [s.row_cXcY, s.Xc, s.Y48]
+    S.textBox = [s.row_cXcY, s.Y48]
+    S.text = [...F.text, c.item_NN_B400]
+    S.dotBox = [s.row_cXcY, s.Y48, s.X20]
+    S.dot = [s.XY4, s.radiusRound, c.base_NN_B400]
+    // S.line = [s.Y2, s.Xc, c.base_NN_W700]
+
+    I.bottom = { marginTop: 'auto' }
+
+    return (
+        <View classes={S.bottom} inline={I.bottom}>
+            <View classes={S.box}>
+                <Link classes={S.textBox}>
+                    <Textline classes={S.text} text={text} />
+                </Link>
+                <View classes={S.dotBox}>
+                    <View classes={S.dot}></View>
+                </View>
+                <Href classes={S.textBox} linkTo={minderable.href} isExternal>
+                    <Textline classes={S.text} text={minderable.text} />
+                </Href>
+            </View>
+        </View>
+    )
+}
+

package/assets/root.fullstackunicorn.dev/frontend/panels/layout/PageTitle.js

@@ -0,0 +1,3 @@
+import { PageTitlePod } from './PageTitle.pod.js'
+
+export const PageTitle = ({ title }) => <PageTitlePod title={title} />

package/assets/root.fullstackunicorn.dev/frontend/panels/layout/PageTitle.pod.js

@@ -0,0 +1,21 @@
+import { useStyle } from '#@/style/@use'
+import { View } from '#@/imports/core/View.js'
+import { Text } from '#@/imports/core/Text.js'
+
+export const PageTitlePod = ({ title }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    F.text = [s.fs18, s.lh24, s.fw400, c.item_NN_B400]
+
+    S.textbox = [s.row_cXcY, s.Y48, s.X]
+    S.text = [...F.text]
+
+    if (!title) return null
+    
+    return (
+        <View classes={S.textbox}>
+            <Text classes={S.text} text={title}/>
+        </View>
+    )
+}

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

@@ -0,0 +1,13 @@
+import { usePersistentScroll } from '#@/imports/scroll/@use.js'
+import { PageScrollablePod } from './PageScrollable.pod.js'
+
+export const PageScrollable = ({ type = 'fixed', children }) => {
+
+    const { scrollRef, onScroll } = usePersistentScroll()
+
+    return (
+        <PageScrollablePod type={type} scrollRef={scrollRef} onScroll={onScroll}>
+            {children}
+        </PageScrollablePod>
+    )
+}

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

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

@@ -0,0 +1,113 @@
+import { dateTime } from '#@/abstracts/dateTime.js'
+
+class Formatter {
+
+    regexTokens = /(\{\{[^}]+\}\}|\s+|[\p{L}\p{N}\p{M}]+|[^\s])/gu
+
+    tokenize = (text = '') => [...String(text).matchAll(this.regexTokens)]
+
+    style = {}
+
+    spans = (tokens = [], stylesRaw = []) => {
+
+        const tokensEnd = tokens.length - 1
+        if (!F3.arr.isGood(stylesRaw)) return [{ start: 0, end: tokensEnd, style: this.style }]
+
+        const sortedStyles = [...stylesRaw].sort((a, b) => a.start - b.start)
+
+        const result = []
+        let start = 0
+
+        for (const style of sortedStyles) {
+            const end = style.start - 1
+            if (start < style.start) result.push({ start, end, style: this.style })
+            result.push(style)
+            start = style.end + 1
+        }
+
+        if (start < tokens.length) result.push({ start, end: tokensEnd, style: this.style })
+
+        return result
+    }
+
+    getStyle = (server = {}, proseStyle = {}, result = []) => {
+
+        const block = proseStyle?.block
+        if (!F3.str.isGood(block)) return result
+
+        if (server.block?.[block]) result.push(...server.block[block])
+
+        const fa = F3.str.isGood(proseStyle?.fa) ? proseStyle.fa : 'as'
+        if (server.fa?.[fa]) {
+            result.push(...server.fa[fa])
+        }
+
+        const li = proseStyle?.li
+        if (F3.str.isGood(li) && server.li?.[li]) {
+            result.push(...server.li[li])
+        }
+
+        return result
+    }
+
+    getStyles = (spanStyle = {}, server = {}, block = 'p', result = []) => {
+
+        if (!F3.str.isGood(block)) block = 'p'
+
+        if (F3.str.isGood(spanStyle?.fp) && server.fp?.[`${block}${spanStyle.fp}`]) {
+            result.push(...server.fp[`${block}${spanStyle.fp}`])
+        }
+
+        if (F3.str.isGood(spanStyle?.fw) && server.fw?.[`${block}${spanStyle.fw}`]) {
+            result.push(...server.fw[`${block}${spanStyle.fw}`])
+        }
+
+        if (F3.str.isGood(spanStyle?.fd) && server.fd?.[spanStyle.fd]) {
+            result.push(...server.fd[spanStyle.fd])
+        }
+
+        if (F3.str.isGood(spanStyle?.fc) && server.fc?.[spanStyle.fc]) {
+            result.push(...server.fc[spanStyle.fc])
+        }
+
+        if (F3.str.isGood(spanStyle?.fb) && server.fb?.[spanStyle.fb]) {
+            result.push(...server.fb[spanStyle.fb])
+        }
+
+        return result
+    }
+
+    regexDefinitions = /[\p{L}\p{N}]+/gu
+
+    getCleanWord(tokenText) {
+        const cleaned = tokenText.replace(/^[^A-Za-z\p{L}]+|[^A-Za-z\p{L}]+$/gu, '')
+        return cleaned ? cleaned.toLowerCase() : null
+    }
+
+    render = (text, lookup) => {
+
+        const regex = /\{\{[^}]+\}\}/
+        const match = String(text).match(regex)
+
+        if (!match) return { render: 'text', text }
+
+        try {
+            const object = JSON.parse(match[0].slice(1, -1))
+            const result = this[object.k](object, lookup)
+
+            if (text === match[0]) return result
+            return text.replace(match[0], result)
+
+        } catch (e) {
+            return { render: 'text', text }
+        }
+    }
+
+    code = ({ v, lang }) => ({ render: 'code', code: v, lang })
+    url = ({ v, url }) => ({ render: 'url', label: v, url })
+    link = ({ v, path }) => ({ render: 'link', label: v, path })
+    phrase = ({ v }) => ({ render: 'phrase', text: v })
+    date = ({ v }, lookup) => dateTime.getDate(v, lookup)
+}
+
+export const formatter = new Formatter()

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

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

@@ -0,0 +1,30 @@
+import { useNavigate, useNavigateUrl } from '#@/imports/router'
+import { LinkPod } from './Basic.pod.js'
+
+export const Url = ({ label, url }) => {
+
+    const navigateUrl = useNavigateUrl()
+    const onPress = () => navigateUrl(url)
+
+    return (
+        <LinkPod
+            text={label}
+            linkTo={url}
+            onPress={onPress}
+        />
+    )
+}
+
+export const Link = ({ label, path }) => {
+
+    const navigate = useNavigate()
+    const onPress = () => navigate(path)
+
+    return (
+        <LinkPod
+            text={label}
+            linkTo={path}
+            onPress={onPress}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/panels/prose/Basic.pod.js

@@ -0,0 +1,16 @@
+import { useStyle } from '#@/style/@use'
+import { Link } from '#@/imports/core/Link'
+import { TextSpan } from '#@/imports/core/Text'
+
+export const LinkPod = ({ text, linkTo, onPress }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.link = [c.item_C1]
+
+    return (
+        <Link linkTo={linkTo} onPress={onPress}> 
+            <TextSpan classes={S.link} text={text} font={f.f1}/>
+        </Link>
+    )
+}