@fullstackunicorn/create-root 1.0.28 → 2.0.0

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Json.js

@@ -1,19 +0,0 @@
-export const Json = ({ data }) => {
-
-  if (!data) return null
-  return (
-    <pre
-      style={{
-        background: "#444",
-        color: "#eee",
-        padding: "1rem",
-        fontFamily: "monospace",
-        fontSize: "0.9rem",
-        whiteSpace: "pre-wrap",
-        wordBreak: "break-word",
-      }}
-    >
-      {JSON.stringify(data, null, 4)}
-    </pre>
-  );
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Link.js

@@ -1,105 +0,0 @@
-// export const Link = ({ classes, inline={}, children, linkTo, onPress, setIsHover }) => {
-
-//     const props = F3.isFnc(setIsHover) ? {
-//         onMouseEnter: () => setIsHover(true),
-//         onMouseLeave: () => setIsHover(false),
-//     } : {}
-
-//     props.className = classes?.join(' ')
-//     props.style = inline
-
-//     if (!linkTo) return <span {...props}>{children}</span>
-        
-//     props.href = linkTo
-//     props.onClick = async e => {
-//         e.preventDefault()
-//         if (F3.isFnc(onPress)) await onPress()
-//     }
-
-//     return <a {...props}>{children}</a>
-// }
-
-import { useState } from 'react'
-import { useNavigate } from '#@/imports/router.js'
-
-export const Link = ({
-    children, classes = [], inline = {}, hover = [], isExternal = false, isView = false,
-    isDraggable = false, setIsHover = null, onPress = null, linkTo = '', navigateOptions = {}
-}) => {
-
-    const navigate = useNavigate()
-
-    const [isHoverLocal, setIsHoverLocal] = useState(false)
-
-    const hoverClasses = isHoverLocal && hover ? hover : []
-    const className = [...classes, ...hoverClasses].join(' ')
-
-    if (isView || !linkTo) {
-        return (
-            <div
-                className={className}
-                style={inline}
-                draggable={isDraggable}
-                onMouseEnter={() => {
-                    setIsHoverLocal(true)
-                    if (setIsHover) setIsHover(true)
-                }}
-                onMouseLeave={() => {
-                    setIsHoverLocal(false)
-                    if (setIsHover) setIsHover(false)
-                }}
-                onClick={onPress}
-            >
-                {children}
-            </div>
-        )
-    }
-
-    if (isExternal) {
-        return (
-            <a
-                className={className}
-                style={inline}
-                href={linkTo}
-                draggable={isDraggable}
-                onMouseEnter={() => {
-                    setIsHoverLocal(true)
-                    if (setIsHover) setIsHover(true)
-                }}
-                onMouseLeave={() => {
-                    setIsHoverLocal(false)
-                    if (setIsHover) setIsHover(false)
-                }}
-                onClick={onPress}
-            >
-                {children}
-            </a>
-        )
-    }
-
-    const handleClick = async e => {
-        e.preventDefault()
-        if (onPress) await onPress()
-        navigate(linkTo, navigateOptions)
-    }
-
-    return (
-        <a
-            className={className}
-            style={inline}
-            href={linkTo}
-            draggable={isDraggable}
-            onMouseEnter={() => {
-                setIsHoverLocal(true)
-                if (setIsHover) setIsHover(true)
-            }}
-            onMouseLeave={() => {
-                setIsHoverLocal(false)
-                if (setIsHover) setIsHover(false)
-            }}
-            onClick={handleClick}
-        >
-            {children}
-        </a>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/List.js

@@ -1,18 +0,0 @@
-import { Fragment } from 'react'
-import { useStyle } from '#@/style/@use'
-
-export const List = ({classes=[], inline={}, data=[], mapper=()=>{}, description}) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    return (
-        <div className={classes.join(' ')} style={inline}>
-            {description}
-            {data.map((item, index) => ( 
-                <Fragment key={index}>
-                    {mapper({item, index, length:data.length})}
-                </Fragment>
-            ))}
-        </div>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Main.js

@@ -1,7 +0,0 @@
-export const Main = ({ classes=[], inline={}, children }) => {
-    return (
-        <main className={classes.join(' ')} style={inline}>
-            {children}
-        </main>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Pressable.js

@@ -1,14 +0,0 @@
-export const Pressable = ({ classes=[], inline={}, children, onPress, setIsHover }) => {
-
-    const props = {}
-    props.className = classes.join(' ')
-    props.style = inline
-
-    if (onPress) props.onClick=onPress
-    if (setIsHover) {
-        props.onMouseEnter=() => setIsHover(true)
-        props.onMouseLeave=() => setIsHover(false)
-    }
-
-    return <div {...props}>{children}</div>
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Scrollable.js

@@ -1,41 +0,0 @@
-import { useStyle } from '#@/style/@use.js'
-
-export const Scrollable = ({
-    classes = [],
-    inline = {},
-    children,
-    scrollRef,
-    onScroll,
-    isPage,
-    x,
-    y,
-    xy,
-}) => {
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    B.axis = xy || (x && y) ? 'xy' : x ? 'x' : 'y'
-    B.isXY = B.axis === 'xy' ? [s.overflowScroll] : []
-    B.isX = B.axis === 'x' ? [s.overflowXScroll, s.overflowYHidden] : []
-    B.isY = B.axis === 'y' ? [s.overflowYScroll] : []
-    B.scroll = [...B.isXY, ...B.isX, ...B.isY]
-
-    const pageInline = isPage
-        ? { paddingBottom: 'env(safe-area-inset-bottom, 0px)' }
-        : {}
-
-    const scrollInline = {
-        overscrollBehavior: 'none',
-        overscrollBehaviorY: 'none',
-    }
-
-    return (
-        <div
-            ref={scrollRef}
-            className={[...classes, ...B.scroll].join(' ')}
-            style={{ ...scrollInline, ...inline, ...pageInline }}
-            onScroll={onScroll}
-        >
-            {children}
-        </div>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Svg.js

@@ -1,23 +0,0 @@
-import { useGetLanguage } from '#@/base/language/@use'
-import { SvgPod } from './Svg.pod.js'
-
-export const Svg = ({ classes, inline, svg={} }) => {
-
-    if (!svg.viewBox) return <div style={{color:'red'}}>IOI</div>
-
-    const language = useGetLanguage()
-
-    const sizes = svg.viewBox.split(' ')
-    const width = Number(sizes[2])
-    const height = Number(sizes[3])
-
-    return (
-        <SvgPod 
-            classes={classes} 
-            inline={{width, height, ...inline}}
-            viewBox={svg.viewBox} 
-            isFlip={language.isRTL && svg.isFlip} 
-            path={svg.path}
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Svg.pod.js

@@ -1,24 +0,0 @@
-import { useStyle } from '#@/style/@use'
-
-export const SvgPod = ({ classes=[], inline={}, viewBox='0 0 32 32', isFlip, path='' }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    B.flip = isFlip ? [s.flip]:[]
-    
-    S.svg = [...classes, ...B.flip].join(' ')
-    
-    I.size = {height:'100%', width:'100%'}
-
-    return (
-        <div className={S.svg} style={inline}>
-            <svg style={I.size}
-                viewBox={viewBox}
-                fill='currentColor'
-                xmlns='http://www.w3.org/2000/svg'
-            >
-                <path d={path} fillRule="evenodd" clipRule="evenodd"/>
-            </svg>
-        </div>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Text.js

@@ -1,127 +0,0 @@
-import { useStyle } from '#@/style/@use'
-import { useGetFont } from '#@/imports/fonts/use'
-
-// use it for clickable text
-export const TextClick = ({ children, onPress = () => { } }) => {
-    return <span onClick={onPress}>{children}</span>
-}
-
-// use it inside a text or another spamn that contains the style for this span
-export const TextSpan = ({ classes = [], inline = {}, text = '', font, language }) => {
-
-    const fontClass = font ? useGetFont(font, language) : ''
-    const nextClasses = fontClass ? [...classes, fontClass] : classes
-
-    return <span className={nextClasses?.join(' ')} style={inline}>{text}</span>
-}
-
-// use it when a tag is present
-export const TextTag = ({ classes = [], inline = {}, text = '', tag }) => {
-    const tags = {}
-    tags.H1 = <h1 className={classes?.join(' ')} style={inline}>{text}</h1>
-    tags.H2 = <h2 className={classes?.join(' ')} style={inline}>{text}</h2>
-    tags.H3 = <h3 className={classes?.join(' ')} style={inline}>{text}</h3>
-    tags.H4 = <h4 className={classes?.join(' ')} style={inline}>{text}</h4>
-    tags.H5 = <h5 className={classes?.join(' ')} style={inline}>{text}</h5>
-    tags.H6 = <h6 className={classes?.join(' ')} style={inline}>{text}</h6>
-    tags.P = <p className={classes?.join(' ')} style={inline}>{text}</p>
-    return tags[tag]
-}
-
-// use it in the gui and as wrapper for server text
-export const Text = (props = {}) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    const { classes = [] } = props
-
-    F.font = useGetFont(props.font, props.language)
-    B.select = props.isNoSelect ? [s.noSelect] : []
-    B.mode = props.ellipsis || props.oneLine
-        ? [s.textline]
-        : props.wrap || props.preserveWhitespace
-            ? [s.textwrap]
-            : [s.textblock]
-
-    const next = { ...props }
-    next.classes = [...classes, ...B.select, ...B.mode, F.font]
-
-    if (props.tag) return <TextTag {...next} />
-    else return <TextSpan {...next} />
-}
-
-// use it in the gui
-export const Textline = (props = {}) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    const { classes = [] } = props
-
-    F.font = useGetFont(props.font, props.language)
-    B.select = props.isNoSelect ? [s.noSelect] : []
-
-    const next = { ...props }
-    next.classes = [...classes, ...B.select, s.textline, F.font]
-
-    if (props.tag) return <TextTag {...next} />
-    else return <TextSpan {...next} />
-}
-
-export const TextEllipsis = (props = {}) => {
-    return <Textline {...props} ellipsis />
-}
-
-// use it for inline code where u need to pass the style to a span
-export const TextFont = (props = {}) => {
-
-    const { classes = [] } = props
-
-    const fontClass = useGetFont(props.font, props.language)
-    const next = { ...props }
-    next.classes = [...classes, fontClass]
-
-    return <TextSpan {...next} />
-}
-
-// use it as container for code BLOCKS
-export const TextCodeView = ({
-    classes = [], inline = {}, children,
-    codeviewRef, type
-}) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    F.font = useGetFont(f.m1)
-
-    B.isInline = type === 'inline' ? [s.textblock] : []
-    B.isBlock = type === 'block' ? [s.textwrap, s.overflowYScroll] : []
-    B.isView = type === 'view' ? [s.textwrap] : []
-
-    S.classes = [...classes, F.font, ...B.isInline, ...B.isBlock, ...B.isView].join(' ')
-
-    return <pre className={S.classes} style={inline} ref={codeviewRef}>{children}</pre>
-
-}
-
-// use TextOutline to have a text with border
-export const TextOutline = ({
-    classes = [], inline = {}, text = '', font, language,
-    outlineNr }) => {
-
-    const textShadow = [
-        `none`,
-        `2px 0 1px #202020, -2px 0 1px #202020, 0 2px 1px #202020, 0 -2px 1px #202020, 2px 2px 1px #202020, -2px -2px 1px #202020, 2px -2px 1px #202020, -2px 2px 1px #202020`
-    ]
-
-    if (outlineNr) inline.textShadow = textShadow[outlineNr]
-
-    return (
-        <Text
-            classes={classes}
-            inline={inline}
-            text={text}
-            font={font}
-            language={language}
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/View.js

@@ -1,13 +0,0 @@
-export const View = ({ 
-    classes = [], inline = {}, children, 
-    viewRef = null, setIsHover = () => { } }) => {
-    return (
-        <div className={classes.join(' ')} style={inline}
-            ref={viewRef}
-            onMouseEnter={() => setIsHover(true)}
-            onMouseLeave={() => setIsHover(false)}
-        >
-            {children}
-        </div>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Viewport.js

@@ -1,29 +0,0 @@
-export const Viewport = ({
-    classes = [],
-    inline = {},
-    children,
-}) => {
-    const style = {
-        position: 'fixed',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        width: '100%',
-        height: 'var(--app-viewport-height, 100vh)',
-        overflow: 'hidden',
-        overscrollBehavior: 'none',
-        overscrollBehaviorY: 'none',
-        display: 'flex',
-        flexDirection: 'column',
-        paddingTop: 'env(safe-area-inset-top, 0px)',
-        paddingBottom: 'env(safe-area-inset-bottom, 0px)',
-        ...inline,
-    }
-
-    return (
-        <div className={classes.join(' ')} style={style}>
-            {children}
-        </div>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/fonts/tools.js

@@ -1,72 +0,0 @@
-import { api } from '#@/client/@api.js'
-import { uri } from '#@/App.uri.js'
-
-class Tools {
-
-    waitForFontsToLoad = async (families = []) => {
-        const quoteFont = s => (/\s/.test(s) ? `"${s}"` : s)
-        if (!('fonts' in document)) return // older browsers: skip
-        const loads = families.map(f => document.fonts.load(`1em ${quoteFont(f)}`))
-        await Promise.all(loads)
-        await document.fonts.ready
-    }
-
-    extractFontFamilies = (fontfaceText) => {
-        const out = new Set()
-        // matches: font-family: Open Sans;  or  font-family: 'Open Sans';
-        const re = /font-family\s*:\s*(['"]?)([^;'"]+)\1\s*;/gi
-        let m
-        while ((m = re.exec(fontfaceText))) out.add(m[2].trim())
-        return Array.from(out)
-    }
-
-    checkFontFaceStyle = (fontface) => {
-        if (!F3.str.isGood(fontface)) return false
-        const head = document.head || document.getElementsByTagName('head')[0]
-        const styleTags = head.getElementsByTagName('style')
-
-        for (let styleTag of styleTags) {
-            if (styleTag.innerHTML.includes(fontface)) return true
-        }
-        return false
-    }
-
-    addFontFaceStyle = (fontface) => {
-        const head = document.head || document.getElementsByTagName('head')[0]
-        const style = document.createElement('style')
-        style.media = 'screen, print'
-        style.appendChild(document.createTextNode(fontface))
-        head.appendChild(style)
-    }
-
-    fontLoader = async (alphabets, language) => {
-
-        const fontNames = alphabets[language.alphabet]
-        if (!fontNames) return []
-
-        const fontfacesList = []
-        const loadedFamilies = new Set()
-
-        for (const fontName of Object.keys(fontNames)) {
-
-            const name = fontNames[fontName]
-            const fontfaceUrl = F3.fabUrl(uri.font.fontface, { name })
-            const fontface = await api.fonts.get(fontfaceUrl)
-
-            if (fontface?.isError || fontface?.isOffline) continue
-            if (!F3.str.isGood(fontface)) continue
-
-            fontfacesList.push({ fontName, fontface })
-        }
-
-        for (const fontfaceItem of fontfacesList) {
-
-            const isPresent = this.checkFontFaceStyle(fontfaceItem.fontface)
-            if (!isPresent) this.addFontFaceStyle(fontfaceItem.fontface)
-            this.extractFontFamilies(fontfaceItem.fontface).forEach(f => loadedFamilies.add(f))
-        }
-        return Array.from(loadedFamilies)
-    }
-}
-
-export const tools = new Tools()

package/assets/root.fullstackunicorn.dev/frontend/imports/fonts/use.js

@@ -1,52 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useStyleFonts } from '#@/style/@use'
-import { useGetLanguage, useGetLanguageContent } from '#@/base/language/@use'
-import { tools } from '#@/imports/fonts/tools.js'
-import { constants } from '#@/root/constants.js'
-
-export const useLoadFonts = isLoaded => {
-
-    const { alphabets } = useStyleFonts()
-
-    const language = useGetLanguage()
-    const languageContent = useGetLanguageContent()
-    const isDifferent = languageContent.alphabet !== language.alphabet
-
-    const [isFontLoaded, setIsFontLoaded] = useState(false)
-
-    useEffect(() => {
-
-        const loadFonts = async () => {
-
-            let familiesContent = []
-
-            if (isDifferent) familiesContent = await tools.fontLoader(alphabets, languageContent)
-            const familiesMain = await tools.fontLoader(alphabets, language)
-
-            const families = Array.from(new Set([...(familiesMain || []), ...(familiesContent || [])]))
-            if (families.length) await tools.waitForFontsToLoad(families)
-
-            setIsFontLoaded(true)
-        }
-
-        if (isLoaded) loadFonts()
-
-    }, [isLoaded, alphabets, language, languageContent, isDifferent])
-
-    return isFontLoaded
-}
-
-export const useGetFont = (name, language = {}) => {
-
-    const { env } = constants
-    const platform = env.PLATFORM
-    const globalLanguage = useGetLanguage()
-    const { fonts } = useStyleFonts()
-
-    const font = `${name}-${language.alphabet ? language.alphabet : globalLanguage.alphabet}`
-    const fontDefault = `${name}-default-${platform}`
-
-    if (!name) return fonts[`f1-default-${platform}`]
-    return fonts[font] || fonts[fontDefault]
-
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/head/Head.js

@@ -1,29 +0,0 @@
-import { Helmet } from "react-helmet-async"
-import { useGetMeta } from "#@/pages/@use.js"
-
-export const Head = () => {
-
-    const meta = useGetMeta()
-
-    if (!F3.obj.isGood(meta)) return null
-
-    const { title, description, cover } = meta
-    const image = cover ? `${window.location.origin}/${cover}` : undefined
-
-    return (
-        <Helmet>
-
-            {title && <title>{title}</title>}
-            {description && <meta name="description" content={description} />}
-
-            {title && <meta property="og:title" content={title} />}
-            {description && <meta property="og:description" content={description} />}
-            {image && <meta property="og:image" content={image} />}
-
-            {title && <meta name="twitter:title" content={title} />}
-            {description && <meta name="twitter:description" content={description} />}
-            {image && <meta name="twitter:image" content={image} />}
-
-        </Helmet>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/npm.js

@@ -1,20 +0,0 @@
-export { v4 as makeId } from 'uuid' 
-export { default as getHash } from 'object-hash' 
-export { useAtom, 
-         useSetAtom, 
-         useAtomValue as useGetAtom } from 'jotai/react'
-export { atom } from 'jotai'
-
-export { jwtDecode } from 'jwt-decode'
-export { default as jwtEncode } from 'jwt-encode'
-export { default as qs } from 'qs'
-
-export { Blurhash } from 'react-blurhash' 
-export { decode } from 'blurhash'
-
-export { set, get } from 'idb-keyval'
-
-import axiosnpm from 'axios'
-export const axios = axiosnpm.create({ 
-    validateStatus: status => status >= 200 && status < 300 || status === 304
-})

package/assets/root.fullstackunicorn.dev/frontend/imports/router.js

@@ -1,21 +0,0 @@
-export { BrowserRouter as RouterProvider } from 'react-router-dom'
-export { Link as RouterHref } from 'react-router-dom'
-export {
-    Routes, Route, Outlet, useLocation, useNavigate, matchPath,
-    Navigate, useParams as useGetUrlParams, useNavigationType
-} from 'react-router-dom'
-
-export const useNavigateUrl = () => url => window.location.href = url
-
-import { useLocation } from 'react-router-dom'
-
-export const useGetUrl = () => {
-    const location = useLocation()
-    return location.pathname
-}
-
-export const useIsUrl = () => {
-    const location = useLocation()
-    const isUrl = url => location.pathname === url
-    return isUrl
-}