@fullstackunicorn/create-root 1.0.29 → 2.0.0

package/assets/root.fullstackunicorn.dev/frontend/config.style.js

@@ -1,98 +0,0 @@
-const setup = {}
-
-// PATHS:
-setup.BASE_PATH = './' 
-setup.LOGS_PATH = './.devtools'
-
-// PLATFORM: 
-setup.isWeb = true
-setup.isNative = false
-
-// SATURATION: 0 16 32 48 64 80 96 112 128 144 160 176 192 208 224 240 255
-setup.saturation = 128
-
-// HUES (ONE channel must be ZERO)
-setup.hues = {}
-setup.hues.C1 = { R: 0, G: 128, B: 256, name: 'blue' }
-setup.hues.C2 = { R: 256, G: 128, B: 0, name: 'orange' }
-setup.hues.C3 = { R: 256, G: 0, B: 128, name: 'pink' }
-    
-// STATIC HUES (NOT AFFECTED BY SATURATION)
-setup.staticHues = {}
-setup.staticHues.RR = { R: 256, G: 0, B: 0, name: 'error' }
-setup.staticHues.OR = { R: 256, G: 128, B: 0, name: 'warning' }
-
-// FONT FAMILY
-setup.fontFamily = {}
-setup.fontFamily.html = `html { font-family: 'sans-serif'; font-weight: 400; };`
-
-// SET THE DEFAULTS FONTS FOR EACH PLATFORM
-// SET THE FONTS FOR EACH ALPHABET
-// ANY FONT MENTIONED IN THE ALPHABETH (es. f1, m1) MUST HAVE A DEFAULT (fallback)
-setup.fontFamily.defaults = {}
-setup.fontFamily.defaults.f1 = { ios: 'System', android: 'sans-serif', web: 'sans-serif' }
-setup.fontFamily.defaults.m1 = { ios: 'Courier New', android: 'monospace', web: 'monospace' }
-
-// FONTS PER ALPHABETH
-setup.fontFamily.fonts = {}
-setup.fontFamily.fonts.latin = { f1: 'OpenSans', m1: 'Inconsolata' }
-setup.fontFamily.fonts.cyrillic = { f1: 'OpenSans' }
-setup.fontFamily.fonts.greek = { f1: 'OpenSans' }
-setup.fontFamily.fonts.arabic = { f1: 'OpenSans' }
-setup.fontFamily.fonts.chinese = { f1: 'OpenSans' }
-setup.fontFamily.fonts.japanese = { f1: 'OpenSans' }
-
-// DEFAULT SASS 
-setup.defaultSass = `* {
-    padding:0;
-    margin:0;
-    border:0;
-    outline:none;
-    background-color:unset;
-    text-decoration:none;
-    box-sizing:border-box;
-    cursor:default;
-    // user-select: none;
-};
-
-:root {
-    --app-viewport-height: 100vh;
-}
-
-@supports (height: 100dvh) {
-    :root {
-        --app-viewport-height: 100dvh;
-    }
-}
-
-html {
-    height: 100%;
-    width: 100%;
-    overscroll-behavior: none;
-}
-
-body, #root {
-    min-height: 100%;
-    width: 100%;
-    overscroll-behavior: none;
-}
-
-body { margin:0; padding:0 }
-
-img { overflow-clip-margin:border-box; overflow:clip }
-
-a {
-    &:link {color:unset; text-decoration: none}
-    &:visited {color:unset; text-decoration: none}
-    &:link:active {color:unset; text-decoration: none}
-    &:visited:active {color:unset; text-decoration: none}
-};
-
-h1, h2, h3, h4, h5, h6, p, a, span, input, textarea, option, button {
-    margin-block-start: 0;
-    margin-block-end: 0;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
-};`
-
-export default setup

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

@@ -1,4 +0,0 @@
-{
-  "STALE": 1,
-  "MAX": 157680000
-} 

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

@@ -1,9 +0,0 @@
-{
-  "PLATFORM": "web",
-  "PROTOCOL_AUTH": "https",
-  "CLIENT_ID": "clientxx-xxxx-4xxx-8xxx-xxxxxxxxxxxx",
-  "CLIENT_URL_AUTH": "https://auth.minderable.com",
-  "CLIENT_URL_ACCOUNT": "https://account.minderable.com",
-  "SERVER_URL_BFF": "http://localhost:4820",
-  "SERVER_URL_AUTH": "https://api.auth.minderable.com"
-}

package/assets/root.fullstackunicorn.dev/frontend/configure/env.prod.json

@@ -1,9 +0,0 @@
-{
-  "PLATFORM": "web",
-  "PROTOCOL_AUTH": "https",
-  "CLIENT_ID": "clientxx-xxxx-4xxx-8xxx-xxxxxxxxxxxx",
-  "CLIENT_URL_AUTH": "https://auth.minderable.com",
-  "CLIENT_URL_ACCOUNT": "https://account.minderable.com",
-  "SERVER_URL_BFF": "https://bff.minderable.com",
-  "SERVER_URL_AUTH": "https://api.auth.minderable.com"
-}

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

@@ -1,9 +0,0 @@
-{
-    "IS_SIDEBAR_ONE_INTERNAL_OFF": false,
-    "IS_SIDEBAR_ONE_EXTERNAL_OFF": false,
-    "IS_SIDEBAR_TWO_INTERNAL_OFF": false,
-    "IS_SIDEBAR_TWO_EXTERNAL_OFF": false,
-    "column_1": 976,
-    "column_2": 1304,
-    "column_3": 1616
-}

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

@@ -1,4 +0,0 @@
-{
-    "canonical": "logo.svg",
-    "inverse": "logo.inverse.svg"
-}

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

@@ -1,10 +0,0 @@
-{
-    "IS_DEFAULT_THEME_DARK": false,
-    "IS_BUTTON_USER_OFF": false,
-    "IS_CARD_ACCOUNT_OFF": false,
-    "IS_CARD_LANGUAGE_OFF": false,
-    "IS_CARD_THEME_OFF": false,
-    "IS_CARD_COOKIES_OFF": false,
-    "IS_CARD_LEGALS_OFF": false,
-    "IS_BAND_CALLOUT_ON": true
-}

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

@@ -1,9 +0,0 @@
-{
-    "Y": 32,
-    "ratio": [
-        84,
-        32
-    ],
-    "canonical": "trademark.svg",
-    "inverse": "trademark.inverse.svg"
-}

package/assets/root.fullstackunicorn.dev/frontend/eslint.config.js

@@ -1,41 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import react from 'eslint-plugin-react'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-
-export default [
-    { ignores: ['dist'] },
-    {
-        files: ['**/*.{js,jsx}'],
-        languageOptions: {
-            ecmaVersion: 2020,
-            globals: globals.browser,
-            parserOptions: {
-                ecmaVersion: 'latest',
-                ecmaFeatures: { jsx: true },
-                sourceType: 'module',
-            },
-        },
-        settings: { react: { version: '18.3' } },
-        plugins: {
-            react,
-            'react-hooks': reactHooks,
-            'react-refresh': reactRefresh,
-        },
-        rules: {
-            ...js.configs.recommended.rules,
-            ...react.configs.recommended.rules,
-            ...react.configs['jsx-runtime'].rules,
-            ...reactHooks.configs.recommended.rules,
-
-            'no-unused-vars': 'off', // 🔥 disables warning
-            'react/jsx-no-target-blank': 'off',
-            'react/prop-types': 'off',
-            'react-refresh/only-export-components': [
-                'warn',
-                { allowConstantExport: true },
-            ],
-        },
-    },
-]

package/assets/root.fullstackunicorn.dev/frontend/features/legal/Legal.js

@@ -1,15 +0,0 @@
-import { Prose } from '#@/modules/prose/Prose.js'
-import { BlockPod } from './Legal.pod.js'
-
-export const Legal = ({ api }) => {
-    return (
-        <>
-            <BlockPod><Prose key={'title'} lang={api.obj.title}/></BlockPod>
-            <BlockPod><Prose key={'effective'} lang={api.obj.effective}/></BlockPod>
-            {api.arr.map((lang, index) => <>
-                <BlockPod><Prose key={index} lang={lang}/></BlockPod>
-            </>)}
-        </>
-
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/features/legal/Legal.pod.js

@@ -1,11 +0,0 @@
-import { useStyle } from '#@/style/@use.js'
-import { View } from '#@/imports/core/View.js'
-
-export const BlockPod = ({ children }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    S.block = [s.row, s.Xc]
-
-    return <View classes={S.block}>{children}</View>
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/Button.js

@@ -1,66 +0,0 @@
-import { useState, useEffect, useRef } from 'react'
-import { useStyle } from '#@/style/@use.js'
-
-export const ControlButton = ({ onPress = () => { }, classes = [], children }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    const [isPressed, setIsPressed] = useState(false)
-    const timeoutRef = useRef(null)
-
-    const handlePress = () => {
-
-        if (isPressed) return
-
-        setIsPressed(true)
-        onPress?.()
-
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current)
-        }
-
-        timeoutRef.current = setTimeout(() => {
-            setIsPressed(false)
-            timeoutRef.current = null
-        }, 180)
-    }
-
-    const containerStyle = {
-        transform: isPressed ? 'scale(0.92)' : 'scale(1)',
-        opacity: isPressed ? 0.75 : 1,
-        transition: 'all 180ms cubic-bezier(0.34, 1.56, 0.64, 1)',
-        borderRadius: '50%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        cursor: 'pointer',
-        userSelect: 'none',
-        touchAction: 'manipulation'
-    }
-
-    const iconStyle = {
-        transform: isPressed ? 'scale(1.08)' : 'scale(1)',
-        transition: 'transform 180ms ease-out',
-    }
-
-    useEffect(() => {
-        return () => {
-            if (timeoutRef.current) clearTimeout(timeoutRef.current)
-        }
-    }, [])
-
-    return (
-        <div
-            onClick={handlePress}
-            onMouseDown={() => setIsPressed(true)}
-            onMouseUp={() => setIsPressed(false)}
-            onMouseLeave={() => setIsPressed(false)}
-            style={containerStyle}
-            className={[...classes, s.positionRelative].join(' ')}
-        >
-            <div className={[...classes, s.positionRelative].join(' ')} style={iconStyle}>
-                {children}
-            </div>
-        </div>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/Crossfader.js

@@ -1,32 +0,0 @@
-import { useRef, useEffect } from 'react'
-import { useStyle } from '#@/style/@use.js'
-import { useGetIsFrozen } from '#@/base/layout/menus/@use.js'
-
-export const Crossfader = ({ isActive, children, transitionMs = 600, instantMount = false }) => {
-
-    const isFrozen = useGetIsFrozen()
-    const isFirstRender = useRef(true)
-
-    useEffect(() => {
-        isFirstRender.current = false
-    }, [])
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    S.box = [s.positionAbsolute, s.XY100p, s.noSelect]
-
-    I.box = {
-        width: '100%',
-        height: '100%',
-        opacity: isActive ? 1 : 0,
-        transition: isFrozen || (instantMount && isFirstRender.current) ? 'none' : `opacity ${transitionMs}ms ease-in-out`,
-        zIndex: isActive ? 2 : 1,
-        pointerEvents: isActive ? 'auto' : 'none'
-    }
-
-    return (
-        <div className={S.box.join(' ')} style={I.box}>
-            {children}
-        </div>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/Fader.js

@@ -1,46 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { useUrl } from '#@/base/router/@use.js'
-import { useGetIsFrozen } from '#@/base/layout/menus/@use.js'
-
-const linkMs = 250
-const menuMs = 300
-
-const FaderInner = ({ classes = [], inline = {}, children, wasFrozen }) => {
-
-    const [visible, setVisible] = useState(false)
-    const ms = wasFrozen ? menuMs : linkMs
-
-    useEffect(() => {
-        const r1 = requestAnimationFrame(() => {
-            const r2 = requestAnimationFrame(() => setVisible(true))
-            return () => cancelAnimationFrame(r2)
-        })
-        return () => cancelAnimationFrame(r1)
-    }, [])
-
-    const style = {
-        ...inline,
-        transition: `opacity ${ms}ms ease-in-out`,
-        opacity: visible ? 1 : 0,
-    }
-
-    return (
-        <div className={classes.join(' ')} style={style}>
-            {children}
-        </div>
-    )
-}
-
-export const Fader = ({ classes = [], inline = {}, children }) => {
-
-    const { url } = useUrl()
-    const isFrozen = useGetIsFrozen()
-    const frozenRef = useRef(isFrozen)
-    frozenRef.current = isFrozen
-
-    return (
-        <FaderInner key={url} classes={classes} inline={inline} wasFrozen={frozenRef.current}>
-            {children}
-        </FaderInner>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/HoverCard.js

@@ -1,31 +0,0 @@
-import { useState } from 'react'
-import { useStyle } from '#@/style/@use.js'
-
-export const HoverCard = ({ children, classes = [] }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    const [isHover, setIsHover] = useState(false)
-
-    S.box = [s.positionRelative, s.radius24, s.overflowHidden, ...classes]
-
-    I.box = {
-        transition: 'transform 240ms cubic-bezier(0.2, 0, 0, 1), box-shadow 240ms cubic-bezier(0.2, 0, 0, 1)',
-        boxShadow: isHover
-            ? '0 6px 8px rgba(0, 0, 0, 0.12)'
-            : '0 2px 4px rgba(0, 0, 0, 0.06)',
-        transform: isHover ? 'translateY(-2px)' : 'translateY(0)',
-        willChange: 'transform, box-shadow',
-    }
-
-    return (
-        <div
-            className={S.box.join(' ')}
-            style={I.box}
-            onMouseEnter={() => setIsHover(true)}
-            onMouseLeave={() => setIsHover(false)}
-        >
-            {children}
-        </div>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/Layout.js

@@ -1,68 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useStyle } from '#@/style/@use.js'
-import { useGetIsSideTwoOn, useGetIsSideTwoExternal } from '#@/base/layout/sideTwo/@use.js'
-import { useGetLanguage } from '#@/base/language/@use.js'
-import { useAnimationSidebarExternal } from '#@/imports/animated/Layout.use.js'
-
-export const SidebarExternal = ({ classes = [], inline = {}, children, isSidebarOne }) => {
-
-    const language = useGetLanguage()
-    const { duration, sidebarTwo } = useAnimationSidebarExternal()
-
-    const sidebar = sidebarTwo
-    const animated = isSidebarOne
-        ? {}
-        : (language.isRTL ? { marginLeft: sidebar } : { marginRight: sidebar })
-
-    const style = { ...inline, ...animated, transition: `all ${duration * 0.96}ms ease` }
-
-    return (
-        <div className={classes.join(' ')} style={style}>
-            {children}
-        </div>
-    )
-}
-
-export const Overlay = ({ classes = [], inline = {}, children, isClosed = true, duration = 250 }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    const [isOff, setIsOff] = useState(true)
-
-    const style = { ...inline, transition: `all ${duration * 0.96}ms ease` }
-
-    const className = [...classes, isOff ? c.base_NN_B750_00 : c.base_NN_B750_40]
-
-    useEffect(() => setIsOff(isClosed))
-
-    return (
-        <div className={className.join(' ')} style={{ ...style, ...inline }}>
-            {children}
-        </div>
-    )
-}
-
-export const Layout = ({ classes = [], inline = {}, children }) => {
-
-    const language = useGetLanguage()
-
-    const isSideTwoOn = useGetIsSideTwoOn()
-    const isSideTwoExternal = useGetIsSideTwoExternal()
-
-    const { duration, sideTwo } = useAnimationSidebarExternal()
-
-    let animated = {}
-
-    if (isSideTwoOn && isSideTwoExternal) {
-        animated = language.isRTL ? { marginRight: -sideTwo } : { marginLeft: sideTwo }
-    }
-
-    const style = { ...inline, ...animated, transition: `all ${duration * 0.96}ms ease` }
-
-    return (
-        <div className={classes.join(' ')} style={style}>
-            {children}
-        </div>
-    )
-}
-

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/Layout.use.js

@@ -1,33 +0,0 @@
-import { useState, useEffect, useMemo } from 'react'
-import { vars } from '#@/imports/animated/Layout.vars.js'
-import { useGetIsSideTwoClosed, useGetIsSideTwoExternal } from '#@/base/layout/sideTwo/@use.js'
-
-export const useAnimationSidebarExternal = () => {
-
-    const { duration } = vars
-    const { sidebarFalse, sidebarTrue, sideTwoFalse, sideTwoTrue } = vars.external
-
-    const isSideTwoExternal = useGetIsSideTwoExternal()
-    const isSideTwoClosed = useGetIsSideTwoClosed()
-
-    const sideTwoVisible = isSideTwoExternal && !isSideTwoClosed
-
-    const sidebarTwoTarget = sideTwoVisible ? sidebarTrue : sidebarFalse
-    const sideTwoShiftTarget = sideTwoVisible ? sideTwoTrue : sideTwoFalse
-
-    const [sidebarTwo, setSidebarTwo] = useState(sidebarFalse)
-    const [sideTwo, setSideTwo] = useState(sideTwoFalse)
-
-    useEffect(() => {
-        setSidebarTwo(sidebarTwoTarget)
-    }, [sidebarTwoTarget])
-
-    useEffect(() => {
-        setSideTwo(sideTwoShiftTarget)
-    }, [sideTwoShiftTarget])
-
-    return useMemo(
-        () => ({ duration, sidebarTwo, sideTwo }),
-        [duration, sidebarTwo, sideTwo]
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/Layout.vars.js

@@ -1,20 +0,0 @@
-const vars = {}
-
-vars.duration = 150
-vars.modalDuration = 250
-
-vars.internal = {}
-vars.internal.sidebarFalse = -328
-vars.internal.sidebarTrue = 4
-vars.internal.wingFalse = 0
-vars.internal.wingTrue = 324
-
-vars.external = {}
-vars.external.sidebarFalse = -328
-vars.external.sidebarTrue = 0
-vars.external.sideOneFalse = 0
-vars.external.sideOneTrue = 320
-vars.external.sideTwoFalse = 0
-vars.external.sideTwoTrue = -320
-    
-export { vars } 

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/Root.js

@@ -1,22 +0,0 @@
-import { useState, useEffect } from 'react'
-import { Viewport } from '#@/imports/core/Viewport.js'
-
-export const Root = ({ children, isLoaded }) => {
-
-    const [isOff, setIsOff] = useState(true)
-
-    useEffect(() => {
-        if (isLoaded)  setTimeout(() => { setIsOff(false)}, 100)
-    }, [isLoaded])
-
-    const style = {
-        transition: 'opacity 0.4s ease-in-out',
-        opacity: isOff ? 0 : 1,
-    }
-
-    return (
-        <Viewport inline={style}>
-            {children}
-        </Viewport>
-    )
-}

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

@@ -1,81 +0,0 @@
-import { get, set } from '#@/imports/npm'
-
-class Cache {
-
-    constructor() {
-        this.cachePreload = 'cache-preload'
-    }
-
-    todayUTC = () => new Date().toISOString().slice(0, 10)
-
-    setPreload = async key => {
-        const store = await this.open(this.cachePreload)
-        const request = new Request(`preload:${key}`)
-        const response = new Response(this.todayUTC(), { headers: { 'Content-Type': 'text/plain' } })
-        await store.put(request, response)
-    }
-
-    isPreload = async key => {
-        const store = await this.open(this.cachePreload)
-        const response = await store.match(`preload:${key}`)
-        if (!response) return true 
-        const lastDay = (await response.text()).trim()
-        return lastDay < this.todayUTC()
-    }
-
-    open = async (name) => await caches.open(name)
-
-    get = async (cache, key, isBlob) => {
-        const match = await cache.match(key)
-        if (!match) return null
-        return isBlob ? await match.blob() : await match.json()
-    }
-
-    set = async (cache, key, value, isBlob) => {
-
-        const headers = { headers: {'Content-Type': value?.type || 'application/octet-stream'}}
-        const headersJson = { headers: { 'Content-Type': 'application/json' } }
-
-        const response = isBlob
-            ? new Response(value, headers)
-            : new Response(JSON.stringify(value), headersJson)
-
-        await cache.put(key, response)
-    }
-
-    getMeta = async (key) => {
-        const etag = await get(`etag:${key}`)
-        const timestamp = (await get(`timestamp:${key}`)) || 0
-        return { etag, timestamp }
-    }
-
-    setMeta = async (key, etag) => {
-        if (etag) await set(`etag:${key}`, etag)
-        await set(`timestamp:${key}`, Date.now())
-    }
-
-    remove = async (cache, key) => {
-        await cache.delete(key)
-        await set(`etag:${key}`, undefined)
-        await set(`timestamp:${key}`, undefined)
-    }
-
-    clear = async (name) => await caches.delete(name)
-
-    preBlob = (data) => {
-        if (!data) return null
-        if (data instanceof ArrayBuffer) return new Uint8Array(data)
-        if (ArrayBuffer.isView(data)) return new Uint8Array(data.buffer, data.byteOffset, data.byteLength)
-        try { return new Uint8Array(data) } catch { return null }
-    }
-
-    getBlob = (arrayBuffer, type) => {
-        const u8 = this.preBlob(arrayBuffer)
-        if (!u8) return null
-        const safeType = (type || 'application/octet-stream').split(';')[0].trim()
-        return new Blob([u8], { type: safeType })
-    }
-
-}
-
-export const cache = new Cache()