@fullstackunicorn/create-root 1.0.17 → 1.0.18

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

@@ -0,0 +1,88 @@
+import { useState, useEffect } from 'react'
+import { img } from '#@/abstracts/img.js'
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { ImgPod, ImgDataPod, NoImgPod } from './Img.pod.js'
+import { api } from '#@/client/@api.js'
+
+export const ImgData = (props) => <ImgDataPod {...props} />
+
+export const NoImg = (props) => {
+    const statics = useGetStatics()
+    return <NoImgPod {...props} svg={statics.visual.svg.picture} />
+}
+
+export const Img = ({ classes, inline, picture = {} }) => {
+    const image = img.getImage(picture)
+
+    const [src, setSrc] = useState()
+    const [isLoaded, setIsLoaded] = useState(false)
+    const [isSlow, setIsSlow] = useState(false)
+
+    useEffect(() => {
+        let mounted = true
+        let objectUrl = null
+        let slowTimer = null
+
+        setSrc(undefined)
+        setIsLoaded(false)
+        setIsSlow(false)
+
+        slowTimer = setTimeout(() => {
+            if (mounted) setIsSlow(true)
+        }, 150)
+
+        const load = async () => {
+            const cached = await api.statics.image(image.src, 'get')
+
+            if (mounted && cached?.blob) {
+                clearTimeout(slowTimer)
+                objectUrl = URL.createObjectURL(cached.blob)
+                setSrc(objectUrl)
+                setIsLoaded(true)
+                setIsSlow(false)
+                return
+            }
+
+            const fetched = await api.statics.image(image.src, 'set')
+
+            if (mounted && fetched?.blob) {
+                clearTimeout(slowTimer)
+                objectUrl = URL.createObjectURL(fetched.blob)
+                setSrc(objectUrl)
+                setIsLoaded(true)
+                return
+            }
+
+            if (mounted) {
+                clearTimeout(slowTimer)
+                setSrc(image.src)
+                const temp = new Image()
+                temp.onload = () => mounted && setIsLoaded(true)
+                temp.onerror = () => mounted && setIsLoaded(true)
+                temp.src = image.src
+            }
+        }
+
+        load()
+
+        return () => {
+            mounted = false
+            clearTimeout(slowTimer)
+            if (objectUrl) URL.revokeObjectURL(objectUrl)
+        }
+    }, [image.src])
+
+    if (image.isNoImage) return <NoImg {...{ classes, inline }} />
+
+    return (
+        <ImgPod
+            {...{ classes, inline }}
+            src={src}
+            placeholder={image.placeholder}
+            alt={image.alt}
+            ratio={image.ratio}
+            isLoaded={isLoaded}
+            isSlow={isSlow}
+        />
+    )
+}

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

@@ -0,0 +1,69 @@
+import { useStyle } from '#@/style/@use'
+import { Blurhash } from '#@/imports/npm'
+import { Svg } from '#@/imports/core/Svg'
+import { View } from '#@/imports/core/View'
+
+export const ImgDataPod = ({ classes=[], inline={}, onPress, setIsHover, src, alt }) => {
+    
+    return (
+        <View classes={classes} inline={{overflow:'hidden', ...inline}} onPress={onPress} setIsHover={setIsHover}>
+            <img style={{width:'100%', height:'100%'}} src={src} alt={alt}/>
+        </View>
+    )
+}
+
+export const NoImgPod = ({ classes, inline, svg }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.box = [...classes, c.base_NN_W700]
+    S.svg = [s.XY, c.item_NN_W750]
+
+    return (
+        <View classes={S.box} inline={inline}>
+            <Svg classes={S.svg} svg={svg} />
+        </View>
+    )
+}
+
+export const ImgPod = ({
+    classes = [], inline = {}, src, alt = '', ratio = 1,
+    isLoaded, isSlow, placeholder }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    B.imgOpacity = !isLoaded ? [s.opacity0] : []
+    B.blurhashOpacity = isLoaded ? [s.opacity0] : []
+    B.imgTransition = isSlow ? { transition: '0.3s all ease-in-out', ...inline } : { ...inline }
+    B.blurhashTransition = { transition: '0.3s all ease-in-out' }
+
+    S.image = [s.relative, s.overflowXYh, s.row_cXcY, ...classes]
+    S.blurhash = [s.absolute, s.XY, ...B.blurhashOpacity]
+    S.box = [s.absolute, s.XY, s.row_cXcY]
+    S.img = [...B.imgOpacity, ...classes]
+
+    I.image = { objectFit: 'cover', aspectRatio: ratio, ...inline }
+    I.img = B.imgTransition
+    I.blurhash = B.blurhashTransition
+
+    return (
+        <div className={S.image.join(' ')} style={I.image}>
+            {isSlow && <div className={S.blurhash.join(' ')} style={I.blurhash}>
+                <Blurhash
+                    hash={placeholder}
+                    width={'100%'}
+                    height={'100%'}
+                    resolutionX={32}
+                    resolutionY={32}
+                    punch={1}
+                />
+            </div>}
+            <div className={S.box.join(' ')}>
+                <img className={S.img.join(' ')} style={I.img}
+                    src={src}
+                    alt={alt}
+                />
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,26 @@
+import { useRef } from 'react'
+
+export const InputFile = ({ classes=[], inline={}, children, setFiles }) => {
+
+    const ref = useRef()
+    const onClick = () => ref.current.click()
+    const onChange = async (event) => {
+        const files = event.target.files
+        setFiles(files)
+    }
+
+    return (
+        <>
+            <input 
+                type="file" 
+                ref={ref}
+                multiple 
+                onChange={onChange} 
+                style={{display:'none'}}
+            />
+            <div className={classes.join(' ')} style={inline} onClick={onClick}>
+                {children}
+            </div>
+        </>
+    )
+}

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

@@ -0,0 +1,23 @@
+import { useGetFont } from '#@/imports/fonts/use'
+
+export const InputTextItem = ({ 
+    classes=[], value='', font = 'f1', language,
+    onChange=()=>{}, onFocus=()=>{}, onBlur=()=>{}, 
+    name, placeholder, placeholderColor }) => {
+
+    const fontClass = useGetFont(font, language)    
+    const className = [...classes, fontClass].join(' ')
+
+    return (
+        <input 
+            value={value}
+            onChange={e=>onChange(name, e.target.value)}
+            type='text'
+            className={className} 
+            placeholder={placeholder}
+            onFocus={onFocus}
+            onBlur={onBlur}
+
+        />
+    )
+}

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

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import { useGetFont } from '#@/imports/fonts/use'
+// never tested
+
+export const InputTextarea = ({ 
+    classes=[], value='', font = 'f1', language,
+    setValue=()=>{}, onFocus=()=>{}, onBlur=()=>{}, 
+    borderC, borderN, placeholder, placeholderColor }) => {
+
+    const [height, setHeight] = useState(24)
+    const [border, setBorder] = useState(borderC)
+
+    const handleContentSize = event => {
+        let newHeight = event.nativeEvent.contentSize.height;
+        if (event.nativeEvent.contentSize.height < height) newHeight = height - 24;
+        setHeight(newHeight)
+    }
+
+    const handleChange = event => setValue(event.target.value)
+    const handleFocus = setBorder(borderC)
+    const handleBlur = setBorder(borderN)
+
+    const fontClass = useGetFont(font, language)    
+    const className = [...classes, fontClass].join(' ')
+
+    return (
+        <div
+            // multiline
+            // value={value}
+            // style={[...classes, border, {height}]} 
+            // onContentSizeChange={handleContentSize}
+            // placeholder={placeholder}
+            // placeholderTextColor={placeholderColor}
+            // onChange={handleChange}
+            // onFocus={handleFocus}
+            // onBlur={handleBlur}
+        ></div>
+    )
+}

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

@@ -0,0 +1,23 @@
+import { useGetFont } from '#@/imports/fonts/use'
+
+export const InputTextline = ({ 
+    classes=[], value='', font = 'f1', language,
+    setValue=()=>{}, onFocus=()=>{}, onBlur=()=>{}, 
+    type, inputRef, placeholder }) => {
+
+    const fontClass = useGetFont(font, language)    
+    const className = [...classes, fontClass].join(' ')
+
+    return (
+        <input  
+            ref={inputRef}
+            value={value}
+            onChange={e=>setValue(e.target.value)}
+            type={type}
+            className={className} 
+            placeholder={placeholder}
+            onFocus={onFocus}
+            onBlur={onBlur}
+        />
+    )
+}

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { useStyle } from '#@/style/@use.js'
+
+export const Scrollable = ({
+    classes = [],
+    inline = {},
+    children,
+    scrollRef,
+    onScroll,
+    isPage,
+}) => {
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    const pageInline = isPage
+        ? { paddingBottom: 'env(safe-area-inset-bottom, 0px)' }
+        : {}
+
+    return (
+        <div
+            ref={scrollRef}
+            className={[...classes, s.overflowYs].join(' ')}
+            style={{ ...inline, ...pageInline }}
+            onScroll={onScroll}
+        >
+            {children}
+        </div>
+    )
+}

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

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

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

@@ -0,0 +1,118 @@
+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] : []
+
+    const next = { ...props }
+    next.classes = [...classes, ...B.select, s.textblock, 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} />
+}
+
+// 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.overflowYs] : []
+    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

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