@fullstackunicorn/create-root 1.0.16 → 1.0.18

package/assets/root.fullstackunicorn.dev/frontend/modules/buttons/TextButton.js

@@ -0,0 +1,47 @@
+import { useState } from 'react'
+import { TextButtonPod, TextButtonTextPod, TextButtonLinePod } from './TextButton.pod.js'
+
+export const TextButton = ({ onPress, isDisabled, svg, text, color, type='fill' }) => {
+
+    const [isHover, setIsHover] = useState()
+
+    if (type==='fill') {
+        return ( 
+            <TextButtonPod 
+                svg={svg}
+                isHover={isHover}
+                setIsHover={setIsHover}
+                text={text || 'missing_text'} 
+                color={color}
+                onPress={onPress} 
+                isDisabled={isDisabled}
+            />
+        )
+    }
+    if (type==='text') {
+        return ( 
+            <TextButtonTextPod 
+                svg={svg}
+                isHover={isHover}
+                setIsHover={setIsHover}
+                text={text || 'missing_text'} 
+                color={color}
+                onPress={onPress} 
+                isDisabled={isDisabled}
+            />
+        )
+    }
+    if (type==='line') {
+        return ( 
+            <TextButtonLinePod 
+                svg={svg}
+                isHover={isHover}
+                setIsHover={setIsHover}
+                text={text || 'missing_text'} 
+                color={color}
+                onPress={onPress} 
+                isDisabled={isDisabled}
+            />
+        )
+    }
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/buttons/TextButton.pod.js

@@ -0,0 +1,94 @@
+import { useStyle } from '#@/style/@use'
+import { View } from '#@/imports/core/View'
+import { Icon } from '#@/modules/core/Icon'
+import { Pressable } from '#@/imports/core/Pressable'
+import { Textline } from '#@/imports/core/Text'
+
+export const TextButtonPod = ({ text, onPress=()=>{}, isHover, setIsHover, isDisabled, color='NN' }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+        
+    B.disabled = isDisabled ? [s.opacity30] : []
+
+    B.base = { }
+    B.base.C1 = isHover ? c.base_C1_B150 : c.base_C1
+    B.base.NN = isHover ? c.base_NN_B150 : c.base_NN
+    
+    S.button = [s.row_cXcY, s.Y40, s.radius12, s.paddingX12, ...B.disabled, B.base[color]]
+    S.text = [...t.root.button.text, s.row_cXcY, c.item_NN_W700]
+
+    if (isDisabled) return (
+        <View classes={S.button}>
+            <Textline classes={S.text} font={f.f1} text={text.up()}/>
+        </View>
+    ) 
+
+    return (
+        <Pressable classes={S.button} onPress={onPress} setIsHover={setIsHover}>
+            <Textline classes={S.text} font={f.f1} text={text.up()}/>
+        </Pressable>
+    )
+}
+
+export const TextButtonTextPod = ({ text, onPress=()=>{}, isHover, setIsHover, isDisabled, color='NN' }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+        
+    B.disabled = isDisabled ? [s.opacity30] : []
+
+    B.item = { }
+    B.item.C1 = isHover ? c.item_C1_B150 : c.item_C1
+    B.item.NN = isHover ? c.item_NN_B150 : c.item_NN
+    
+    S.button = [s.row_cXcY, s.Y40, s.radius12, s.paddingX12, ...B.disabled]
+    S.icon = [s.X40, s.Y48, B.item[color]],
+    S.text = [...t.root.button.text, s.row_cXcY, B.item[color]]
+
+    if (isDisabled) return (
+        <View classes={S.button}>
+            {!!svg ? <Icon classes={S.icon} svg={svg}/> : null}
+            <Textline classes={S.text} font={f.f1} text={text.up()}/>
+        </View>
+    ) 
+
+    return (
+        <Pressable classes={S.button} onPress={onPress} setIsHover={setIsHover}>
+            {!!svg ? <Icon classes={S.icon} svg={svg}/> : null}
+            <Textline classes={S.text} font={f.f1} text={text.up()}/>
+        </Pressable>
+    )
+}
+
+export const TextButtonLinePod = ({ svg, text, 
+    onPress=()=>{}, isHover, setIsHover, isDisabled, color='NN' }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+        
+    B.disabled = isDisabled ? [s.opacity30] : []
+
+    B.line = {}
+    B.line.C1 = isHover ? c.line_C1_B150 : c.line_C1,
+    B.line.NN = isHover ? c.line_NN_B150 : c.line_NN
+
+    B.item = { }
+    B.item.C1 = isHover ? c.item_C1_B150 : c.item_C1,
+    B.item.NN = isHover ? c.item_NN_B150 : c.item_NN
+    
+    S.button = [s.row_cXcY, s.Y40, s.radius12, s.paddingX12, s.border1, ...B.disabled, B.line[color]]
+    S.icon = [s.X40, s.Y48, B.item[color]],
+    S.text = [...t.root.button.text, s.row_cXcY, B.item[color]]
+
+    if (isDisabled) return (
+        <View classes={S.button}>
+            {!!svg ? <Icon classes={S.icon} svg={svg}/> : null}
+            <Textline classes={S.text} font={f.f1} text={text.up()}/>
+        </View>
+    ) 
+
+    return (
+        <Pressable classes={S.button} onPress={onPress} setIsHover={setIsHover}>
+            {!!svg ? <Icon classes={S.icon} svg={svg}/> : null}
+            <Textline classes={S.text} font={f.f1} text={text.up()}/>
+        </Pressable>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/core/Back.js

@@ -0,0 +1,26 @@
+import { routes } from '#@/root/routes.js'
+import { useUrl } from '#@/base/router/@use.js'
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { useGetHistory } from '#@/base/router/@use.js'
+import { BackPod, BackIconPod } from './Back.pod.js'
+import { constants } from '#@/root/constants.js'
+
+export const Back = ({ logo }) => {
+
+    const statics = useGetStatics() 
+    const history = useGetHistory()
+    const { url, lang } = useUrl() 
+    const homePath = F3.fabUrl(routes.public.home.path, { lang })
+    const isHome = url === homePath
+
+    if (isHome) {
+        if (constants.services.IS_BUTTON_USER_OFF) return logo
+        return <BackIconPod svg={statics.visual.svg.home}/>
+    }
+    return (
+        <BackPod 
+            svg={statics.visual.svg.arrowFullLeft}
+            linkTo={history[1]} 
+        />
+    )
+}  

package/assets/root.fullstackunicorn.dev/frontend/modules/core/Back.pod.js

@@ -0,0 +1,37 @@
+
+import { useStyle } from '#@/style/@use'
+import { View } from '#@/imports/core/View'
+import { Icon } from '#@/modules/core/Icon'
+import { Link } from '#@/modules/core/Link'
+
+export const BackPod = ({ linkTo, svg }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    H.icon = [[c.base_NN_W700]]
+
+    S.link = [s.row_cXcY, s.Y64, s.X48]
+    S.icon = [s.row_cXcY, s.XY40, s.radiusRound, c.item_NN_B400]
+
+    return (
+        <Link classes={S.link} linkTo={linkTo}>
+            <Icon classes={S.icon} svg={svg} hover={H.icon}/>
+        </Link>
+    )
+}
+
+export const BackIconPod = ({ svg }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    H.icon = [[c.base_NN_W700]]
+
+    S.link = [s.row_cXcY, s.Y64, s.X48]
+    S.icon = [s.row_cXcY, s.XY40, s.radiusRound, c.item_NN_B400]
+
+    return (
+        <View classes={S.link}>
+            <Icon classes={S.icon} svg={svg} hover={H.icon}/>
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/core/Bulleted.js

@@ -0,0 +1,37 @@
+import { useStyle } from '#@/style/@use.js'
+import { View } from '#@/imports/core/View.js'
+
+export const Bulleted = ({ block = 'p', children }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    const heights = {}
+    heights.h1 = s.Y40
+    heights.h2 = s.Y36
+    heights.h3 = s.Y32
+    heights.h4 = s.Y28
+    heights.h5 = s.Y20
+    heights.h6 = s.Y18
+    heights.p = s.Y28
+
+    B.height = heights[block] ? [heights[block]] : [s.Y28]
+
+    S.root = [s.row_sX, s.Xr]
+    S.side = [s.col_sY, s.X32]
+    S.body = [s.Xr]
+    S.box = [s.row_cXcY, s.X32, ...B.height]
+    S.dot = [s.XY8, s.radiusRound, c.base_NN_B400]
+
+    return (
+        <View classes={S.root}>
+            <View classes={S.side}>
+                <View classes={S.box}>
+                    <View classes={S.dot} />
+                </View>
+            </View>
+            <View classes={S.body}>
+                {children}
+            </View>
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/core/Icon.js

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+import { IconPod } from './Icon.pod.js'
+
+export const Icon = ({ classes, inline, onPress, onLongPress, svg, hover }) => {
+
+    const [isHover, setIsHover] = useState(false)
+    
+    return ( 
+        <IconPod 
+            hover={hover}
+            isHover={isHover} 
+            classes={classes} 
+            inline={inline}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            setIsHover={setIsHover}
+            svg={svg}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/core/Icon.pod.js

@@ -0,0 +1,28 @@
+import { useStyle } from '#@/style/@use'
+import { Pressable } from '#@/imports/core/Pressable'
+import { Svg } from '#@/imports/core/Svg'
+
+export const IconPod = ({ 
+    classes=[], inline={}, 
+    isHover, setIsHover, hover=[], 
+    onPress, onLongPress, svg
+}) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    B.hover = isHover ? hover[0] || [] : hover[1] || []
+    
+    S.icon = [s.row_cXcY, ...B.hover, ...classes] // s.radiusRound
+    
+    return (
+        <Pressable 
+            classes={S.icon} 
+            inline={inline} 
+            onPress={onPress} 
+            onLongPress={onLongPress} 
+            setIsHover={setIsHover} 
+        >
+            <Svg svg={svg}/>
+        </Pressable>
+    )
+}

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

@@ -0,0 +1,19 @@
+import { useState } from 'react'
+import { ImgPod } from './Img.pod.js'
+
+export const Img = ({ classes, inline, imgClasses, imgInline, onPress, onLongPress, img, hover }) => {
+
+    const [isHover, setIsHover] = useState(false)
+    const isDrawing = !onPress && !onLongPress
+
+    return ( 
+        <ImgPod 
+            {...{classes, inline, imgClasses, imgInline, onPress, onLongPress, img, hover}}
+            isHover={isHover} 
+            setIsHover={setIsHover}
+            hover={hover}
+            isDrawing={isDrawing} 
+            src={img}
+        />
+    )
+}

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

@@ -0,0 +1,26 @@
+import { useStyle } from '#@/style/@use'
+import { Pressable } from '#@/imports/core/Pressable'
+import { ImgData } from '#@/imports/core/Img.js'
+
+export const ImgPod = ({ classes=[], inline={}, imgClasses=[], imgInline={}, 
+    onPress, onLongPress, isHover, setIsHover, hover=[], src, isDrawing }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    B.hover = isHover ? [hover[0]] || [c.base_NN_W700] : [hover[1]] || []
+    
+    S.box = [s.row_cXcY, ...B.hover, ...classes]
+    
+    return (
+        <Pressable classes={S.box} inline={inline} 
+            onPress={onPress} 
+            onLongPress={onLongPress} 
+            setIsHover={setIsHover} 
+            isView={isDrawing}
+        >
+            <ImgData classes={imgClasses} inline={imgInline}
+                src={src}
+            />
+        </Pressable>
+    )
+}

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

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import { useNavigate } from '#@/imports/router'
+import { LinkPod } from './Link.pod.js'
+
+export const Link = ({ 
+    classes=[], inline={}, 
+    onPress= async ()=>{}, onLongPress, 
+    children, linkTo, hover,
+    setIsHover:parentSetIsHover=false
+}) => {
+
+    const [isHover, setIsHover] = useState(false)
+
+    const navigate = useNavigate()
+
+    const onAction = async () => {
+        const result = await onPress()
+        if(linkTo && !result) navigate(linkTo)
+    }
+
+    return ( 
+        <LinkPod 
+            linkTo={linkTo}
+            classes={classes} 
+            inline={inline} 
+            onPress={onAction} 
+            onLongPress={onLongPress}
+            setIsHover={parentSetIsHover?parentSetIsHover:setIsHover}
+            isHover={isHover}
+            hover={hover}
+        >
+            {children}
+        </LinkPod>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/core/Link.pod.js

@@ -0,0 +1,28 @@
+import { useStyle } from '#@/style/@use'
+import { Link } from '#@/imports/core/Link'
+
+export const LinkPod = ({ 
+    classes=[], inline={}, children, linkTo,
+    isHover, setIsHover, hover=[], 
+    onPress, onLongPress
+}) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    B.hover = isHover ? hover[0] || [] : hover[1] || []
+
+    S.classes = [...classes, ...B.hover]
+    
+    return ( 
+        <Link 
+            linkTo={linkTo}
+            classes={S.classes} 
+            inline={inline} 
+            onPress={onPress} 
+            onLongPress={onLongPress}
+            setIsHover={setIsHover}
+        >
+            {children}
+        </Link>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/core/Slider.js

@@ -0,0 +1 @@
+export { SliderPod as Slider } from './Slider.pod.js'

package/assets/root.fullstackunicorn.dev/frontend/modules/core/Slider.pod.js

@@ -0,0 +1,30 @@
+import { useStyle } from '#@/style/@use'
+import { View } from '#@/imports/core/View'
+import { Pressable } from '#@/imports/core/Pressable'
+
+export const SliderPod = ({ classes=[], inline, onPress=null, isOn }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    B.onOff = isOn ? [s.row_eXcY, c.base_C1] : [s.row_sXcY, c.base_NN]
+    
+    S.slider = [s.row_cXcY, ...classes, inline]
+    S.box = [s.X32, s.Y20, s.radius16, ...B.onOff]
+    S.circle = [s.XY16, s.marginX2, s.radius16, c.base_NN_W700]
+    
+    if (!onPress) return (
+        <View classes={S.slider}>
+            <View classes={S.box}>
+                <View classes={S.circle}></View>
+            </View>
+        </View>
+    )
+
+    return (
+        <Pressable classes={S.slider} onPress={onPress}>
+            <View classes={S.box}>
+                <View classes={S.circle}></View>
+            </View>
+        </Pressable>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/page/PageBox.js

@@ -0,0 +1,15 @@
+import { useChronology } from '#@/base/router/@use.js'
+import { Head } from '#@/imports/head/Head.js'
+
+export const PageBox = ({ children, isMissing }) => {
+
+    useChronology(isMissing)
+
+    return (
+        <>
+            <Head/>
+            {children}
+        </>
+    )
+
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/trademarks/@use.js

@@ -0,0 +1,25 @@
+import { uri } from '#@/App.uri.js'
+import { constants } from '#@/root/constants.js'
+import { useGetIsDark } from '#@/base/theme/@use.js'
+
+export const useTrademarkSrc = () => {
+
+    const isDark = useGetIsDark()
+    const path = isDark ? constants.trademark.inverse : constants.trademark.canonical
+
+    return {
+        src: F3.fabUrl(uri.trademarks, { path }),
+        y: constants.trademark.Y,
+    }
+}
+
+export const useLogoSrc = () => {
+
+    const isDark = useGetIsDark()
+    const path = isDark ? constants.logo.inverse : constants.logo.canonical
+
+    return {
+        src: F3.fabUrl(uri.trademarks, { path }),
+        xy: constants.logo.XY || 40
+    }
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/trademarks/Logo.js

@@ -0,0 +1,19 @@
+import { routes } from '#@/root/routes.js'
+import { useUrl } from '#@/base/router/@use.js'
+import { useLogoSrc } from '#@/modules/trademarks/@use.js'
+import { LogoPod } from './Logo.pod.js'
+
+export const Logo = () => {
+
+    const logo = useLogoSrc() 
+    const { lang } = useUrl()
+    const linkHome = F3.fabUrl(routes.public.home.path, { lang })
+
+    return (
+        <LogoPod 
+            src={logo.src}
+            size={logo.xy}
+            linkHome={linkHome}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/trademarks/Logo.pod.js

@@ -0,0 +1,17 @@
+import { useStyle } from '#@/style/@use.js'
+import { Link } from '#@/modules/core/Link.js'
+import { ImgData } from '#@/imports/core/Img.js'
+
+export const LogoPod = ({ src, size, linkHome }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.imgBox = [s.row_cXcY, s.X48, s.Y64]
+    I.img = {height:size, width:size}
+
+    return (
+        <Link classes={S.imgBox} linkTo={linkHome}>
+            <ImgData inline={I.img} src={src}/>
+        </Link>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/trademarks/Trademark.js

@@ -0,0 +1,20 @@
+import { routes } from '#@/root/routes.js'
+import { useUrl } from '#@/base/router/@use.js'
+import { useTrademarkSrc } from '#@/modules/trademarks/@use.js'
+import { TrademarkPod } from './Trademark.pod.js'
+
+export const Trademark = ({  }) => {
+
+    const trademark = useTrademarkSrc()
+    const { lang } = useUrl()
+    const linkHome = F3.fabUrl(routes.public.home.path, { lang })
+
+    if (trademark.isTooSmall) return null
+    return (
+        <TrademarkPod 
+            src={trademark.src} 
+            height={trademark.y}
+            linkHome={linkHome}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/trademarks/Trademark.pod.js

@@ -0,0 +1,17 @@
+import { useStyle } from '#@/style/@use.js'
+import { Link } from '#@/modules/core/Link.js'
+import { ImgData } from '#@/imports/core/Img.js'
+
+export const TrademarkPod = ({ src, height, linkHome }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.link = [s.marginX16]
+    I.img = { height }
+
+    return (
+        <Link classes={S.link} inline={I.img} linkTo={linkHome}>
+            <ImgData classes={S.img} inline={I.img} src={src}/>
+        </Link>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/package.json

@@ -0,0 +1,58 @@
+{
+    "name": "@root.fullstackunicorn.dev/frontend",
+    "author": "lucanigido (https://fullstackunicorn.dev/author/lucanigido)",
+    "version": "1.0.0",
+    "type": "module",
+    "license": "UNLICENSED",
+    "private": true,
+    "homepage": "https://root.fullstackunicorn.dev",
+    "main": "App.js",
+    "imports": {
+        "#@": "./",
+        "#@/*": "./*"
+    },
+    "scripts": {
+        "initialize": "chmod +x ./config.cmd.sh && bash ./config.cmd.sh add",
+        "cmd": "chmod +x ./config.cmd.sh && ./config.cmd.sh",
+        "build": "vite build",
+        "preview": "vite preview",
+        "start": "env-cmd vite --host",
+        "check": "eslint . --max-warnings 0"
+    },
+    "dependencies": {
+        "@fullstackunicorn/initialize": "^1.0.15",
+        "axios": "^1.15.0",
+        "blurhash": "^2.0.5",
+        "idb-keyval": "^6.2.2",
+        "jotai": "^2.19.1",
+        "jwt-decode": "^4.0.0",
+        "jwt-encode": "^1.0.1",
+        "object-hash": "^3.0.0",
+        "process": "^0.11.10",
+        "qs": "^6.15.1",
+        "react": "^19.2.4",
+        "react-blurhash": "^0.3.0",
+        "react-dom": "^19.2.4",
+        "react-helmet-async": "^3.0.0",
+        "react-router-dom": "^7.14.1",
+        "react-syntax-highlighter": "^16.1.1",
+        "sass": "^1.99.0",
+        "shiki": "^4.0.2",
+        "uuid": "^13.0.0"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.39.4",
+        "@fullstackunicorn/reduce": "^1.0.22",
+        "@fullstackunicorn/style": "^1.0.9",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^6.0.1",
+        "env-cmd": "^11.0.0",
+        "eslint": "^9.39.4",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-react-refresh": "^0.5.2",
+        "globals": "^17.4.0",
+        "vite": "^8.0.4"
+    }
+}

package/assets/root.fullstackunicorn.dev/frontend/pages/@use.js

@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react'
+import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm'
+import { useUrl } from '#@/base/router/@use.js'
+// import { service } from '#@/imports/service.js'
+
+export const meta = atom({})
+
+export const useMeta = () => useAtom(meta)
+export const useSetMeta = () => useSetAtom(meta)
+export const useGetMeta = () => useGetAtom(meta)
+
+export const useApi = (func, ctx) => {
+    const { lang, path } = useUrl()
+    const [result, setResult] = useState()
+    const setMeta = useSetMeta()
+    useEffect(() => {
+        const load = async () => {
+            try {
+                const response = await func({ lang, path }, ctx)
+                if (response?.meta) setMeta(response.meta)
+                setResult(response?.data)
+            } catch (error) {
+                console.error('api-request-failed', {lang,path,ctx,error})
+                setResult({isError:true})
+            }
+        }
+        load()
+        return () => setResult(undefined)
+    }, [lang, path])
+    return result
+}
+
+export const useLoad = (func, lang, path, ctx) => {
+    const [result, setResult] = useState()
+    const setMeta = useSetMeta()
+    useEffect(() => {
+        const load = async () => {
+            try {
+                const response = await func({ lang, path }, ctx)
+                if (response?.meta) setMeta(response.meta)
+                setResult(response?.data)
+            } catch (error) {
+                console.error('load-request-failed', {lang,path,ctx,error})
+                setResult({isError:true})
+            }
+        }
+        load()
+    }, [lang, path])
+    return result
+}