@fullstackunicorn/create-root 1.0.17 → 1.0.18

package/assets/root.fullstackunicorn.dev/frontend/client/stripe.js

@@ -0,0 +1,38 @@
+import { uri } from '#@/App.uri.js'
+import { client } from '#@/imports/client.js'
+
+class Stripe {
+
+    set = async ({ product, seller }) => {
+
+        const endpoint = uri.stripe.set
+        const data = { product, seller }
+        const config = { headers: { 'Content-Type': 'application/json' } }
+
+        const response = await client.post(endpoint, data, config)
+
+        if (response?.isOffline) return response
+        if (response?.isError) return response
+        if (!response?.url) return { isError: true }
+
+        return response
+    }
+
+    get = async ({ session_id }) => {
+
+        const endpoint = uri.stripe.get
+        const data = { session_id }
+        const config = { headers: { 'Content-Type': 'application/json' } }
+
+        const response = await client.post(endpoint, data, config)
+
+        if (response?.isOffline) return response
+        if (response?.isError) return response
+        if (!response?.id) return { isError: true }
+
+        return response
+    }
+
+}
+
+export const stripe = new Stripe()

package/assets/root.fullstackunicorn.dev/frontend/config.cmd.sh

@@ -0,0 +1,94 @@
+#!/bin/bash
+set -e
+# ============================================================
+add() {
+    echo "🚀 [frontend] Adding Dependencies"
+
+        yarn add @fullstackunicorn/initialize --latest
+
+        # yarn add @fullstackunicorn/auth --latest
+        
+        yarn add axios --latest
+        yarn add blurhash --latest
+        yarn add idb-keyval --latest
+        yarn add jotai --latest
+        yarn add jwt-decode --latest
+        yarn add jwt-encode --latest
+        yarn add object-hash --latest
+        yarn add process --latest
+        yarn add qs --latest
+        yarn add react-blurhash --latest
+        yarn add react-helmet-async --latest
+        yarn add react-router-dom --latest
+        yarn add react-syntax-highlighter --latest
+        yarn add sass --latest
+        yarn add shiki --latest
+        yarn add uuid --latest
+
+    echo "🚀 [frontend] Adding Dev Dependencies"
+
+        yarn add -D @fullstackunicorn/reduce --latest
+        yarn add -D @fullstackunicorn/style --latest
+        yarn add -D env-cmd --latest
+        yarn add -D eslint-plugin-react --latest
+
+    echo "✅ [frontend] Dependencies added!"
+}
+# ============================================================
+upgrade() {
+
+    echo "🚀 [frontend] Upgrading Dependencies"
+
+        yarn upgrade @fullstackunicorn/auth --latest
+        yarn upgrade @fullstackunicorn/initialize --latest
+        yarn upgrade @fullstackunicorn/reduce --latest
+        yarn upgrade @fullstackunicorn/style --latest
+
+    echo "✅ [frontend] Upgaded!"
+}
+# ============================================================
+remove() {
+
+    echo "🧹 [frontend] Removing Dependencies"
+
+        node --input-type=module -e "
+            import fs from 'fs'
+            const filePath = './package.json'
+            const json = JSON.parse(fs.readFileSync(filePath, 'utf8'))
+            json.dependencies = {}
+            json.devDependencies = {}
+            fs.writeFileSync(filePath, JSON.stringify(json, null, 4))
+        "
+
+    echo "✅ [frontend] Dependeincies Removed!"
+}
+# ============================================================
+initialize() {
+
+    echo "🚀 [frontend] Initialize"
+
+    remove
+    node ./config.cmd.vite.js
+    yarn
+    add
+    yarn style
+
+    echo "✅ [frontend] Initialized!"
+
+}
+# ============================================================
+info() {
+    echo "❌ Unknown command: $1"
+    echo "Available commands:"
+    declare -F | awk '{print "  " $3}' | grep -v "^info$"
+    exit 1
+}
+# ============================================================
+cmd="${1:-}"
+shift || true
+if declare -F "$cmd" >/dev/null && [[ "$cmd" != "info" ]]; then
+    "$cmd" "$@"
+else
+    info "$cmd"
+fi
+# ============================================================

package/assets/root.fullstackunicorn.dev/frontend/config.cmd.vite.js

@@ -0,0 +1,205 @@
+import fs from 'node:fs'
+import fsp from 'node:fs/promises'
+import path from 'node:path'
+import { execSync } from 'node:child_process'
+import { randomUUID } from 'node:crypto'
+
+class Vite {
+
+    constructor() {
+
+        this.cwd = process.cwd()
+        this.day = new Date().toISOString().slice(0, 10)
+
+        this.command = `VITE_USE_ROLLDOWN=false npx --yes create-vite@latest . --template react --no-interactive --no-install`
+
+        this.paths = {}
+        this.paths.stable = `${this.cwd}/workspace/vite/stable`
+        this.paths.current = `${this.cwd}/workspace/vite/current/${this.day}`
+
+        this.viteFiles = [
+            '.gitignore',
+            'eslint.config.js',
+            'index.html',
+            'README.md',
+            'vite.config.js'
+        ]
+
+        this.notes = []
+    }
+
+    isObj = value => typeof value === 'object' && value !== null && !Array.isArray(value)
+
+    isGoodObj = value => this.isObj(value) && Object.keys(value).length > 0
+
+    safeObj = value => this.isObj(value) ? value : {}
+
+    ensureDir = async dirPath => {
+        await fsp.mkdir(dirPath, { recursive: true })
+    }
+
+    safeRemove = async targetPath => {
+        if (!targetPath) return
+        await fsp.rm(targetPath, { recursive: true, force: true })
+    }
+
+    exists = filePath => fs.existsSync(filePath)
+
+    readText = filePath => fs.readFileSync(filePath, 'utf8')
+
+    readJSON = async filePath => {
+        try {
+            if (!this.exists(filePath)) return {}
+            const raw = await fsp.readFile(filePath, 'utf8')
+            return JSON.parse(raw)
+        } catch {
+            return {}
+        }
+    }
+
+    writeJSON = async (filePath, json) => {
+        const dirPath = path.dirname(filePath)
+        await this.ensureDir(dirPath)
+        await fsp.writeFile(filePath, JSON.stringify(json, null, 4))
+    }
+
+    create = async () => {
+
+        const tempId = randomUUID()
+        const cwd = `${this.paths.current}/${tempId}`
+        let vitePath = cwd
+
+        await this.ensureDir(cwd)
+
+        try {
+            execSync(this.command, { cwd, stdio: 'inherit' })
+        } catch (error) {
+            await this.safeRemove(cwd)
+            vitePath = this.paths.stable
+            this.notes.push('using-cached-vite-app')
+            await this.notifyRollback(error)
+        }
+
+        const filesNotes = await this.compareFiles(vitePath, this.paths.stable, this.viteFiles)
+        if (filesNotes.length) this.notes.push(...filesNotes)
+
+        const packageNotes = await this.comparePackageJson(
+            `${vitePath}/package.json`,
+            `${this.paths.stable}/package.json`
+        )
+        if (packageNotes.length) this.notes.push(...packageNotes)
+
+        return { vitePath, cleanupPath: cwd }
+    }
+
+    merge = async () => {
+
+        let cleanup
+
+        try {
+
+            const { vitePath, cleanupPath } = await this.create()
+            cleanup = cleanupPath
+
+            const filePath = './package.json'
+            const vitePackagePath = `${vitePath}/package.json`
+
+            const vitePackage = await this.readJSON(vitePackagePath)
+            const appPackage = await this.readJSON(filePath)
+
+            if (!this.isGoodObj(appPackage)) {
+                throw new Error(`missing-package-json: ${filePath}`)
+            }
+
+            if (!this.isGoodObj(vitePackage)) {
+                throw new Error(`missing-vite-package-json: ${vitePackagePath}`)
+            }
+
+            appPackage.dependencies = {
+                ...this.safeObj(appPackage.dependencies),
+                ...this.safeObj(vitePackage.dependencies),
+            }
+
+            appPackage.devDependencies = {
+                ...this.safeObj(appPackage.devDependencies),
+                ...this.safeObj(vitePackage.devDependencies),
+            }
+
+            await this.writeJSON(filePath, appPackage)
+
+            return { isValid: true, notes: this.notes }
+
+        } catch (error) {
+            throw error
+        } finally {
+            await this.safeRemove(cleanup)
+        }
+    }
+
+    notifyRollback = async error => {
+        // logic to notify minderable team
+    }
+
+    compareFiles = async (newPath, oldPath, names) => {
+
+        for (const name of names) {
+
+            const newFilePath = `${newPath}/${name}`
+            const oldFilePath = `${oldPath}/${name}`
+
+            if (!this.exists(newFilePath)) {
+                this.notes.push(`${name} file not present in the new version`)
+                continue
+            }
+
+            if (!this.exists(oldFilePath)) {
+                this.notes.push(`${name} file not present in the previous version`)
+                continue
+            }
+
+            const newFile = this.readText(newFilePath)
+            const oldFile = this.readText(oldFilePath)
+
+            if (newFile !== oldFile) {
+                this.notes.push(`${name} file is different from the previous version`)
+            }
+        }
+
+        return this.notes
+    }
+
+    comparePackageJson = async (newPath, oldPath) => {
+
+        const newPackage = await this.readJSON(newPath)
+        const oldPackage = await this.readJSON(oldPath)
+
+        const fields = ['scripts', 'dependencies', 'devDependencies']
+
+        fields.forEach(field => {
+
+            const newData = newPackage[field] || {}
+            const oldData = oldPackage[field] || {}
+
+            const newKeys = Object.keys(newData)
+            const oldKeys = Object.keys(oldData)
+
+            const addedKeys = newKeys.filter(key => !oldKeys.includes(key))
+            const removedKeys = oldKeys.filter(key => !newKeys.includes(key))
+            const modifiedKeys = newKeys.filter(key => oldKeys.includes(key) && newData[key] !== oldData[key])
+
+            const hasChanges = addedKeys.length > 0 || removedKeys.length > 0 || modifiedKeys.length > 0
+
+            if (hasChanges) {
+                this.notes.push(`package.json ${field} is different from the previous version`)
+                addedKeys.forEach(key => this.notes.push(`+ ADDED "${key}": "${newData[key]}"`))
+                removedKeys.forEach(key => this.notes.push(`- REMOVED "${key}": "${oldData[key]}"`))
+                modifiedKeys.forEach(key => this.notes.push(`x CHANGED "${key}": new value "${newData[key]}" | old value "${oldData[key]}"`))
+            }
+        })
+
+        return this.notes
+    }
+}
+
+const vite = new Vite()
+await vite.merge()

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

@@ -0,0 +1,86 @@
+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;
+};
+
+html, body, #root {
+    overflow:hidden;
+    height: 100vh;
+    max-height: 100vh;
+    min-height: 100vh;
+    width: 100vw;
+    max-width: 100vw;
+    min-width: 100vw;
+}
+
+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

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

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

@@ -0,0 +1,8 @@
+{
+  "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_AUTH": "https://api.auth.minderable.com"
+}

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

@@ -0,0 +1,8 @@
+{
+  "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_AUTH": "https://api.auth.minderable.com"
+}

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

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { Prose } from '#@/panels/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

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

@@ -0,0 +1,66 @@
+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.relative].join(' ')}
+        >
+            <div className={[...classes, s.relative].join(' ')} style={iconStyle}>
+                {children}
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,32 @@
+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.absolute, s.XY, 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>
+    )
+}