@zuzjs/ui 0.3.2 → 0.3.4

package/src/core/index.ts

@@ -1,431 +0,0 @@
-import {
-    cloneElement,
-    isValidElement
-} from 'react'
-import type { ReactNode, ReactElement } from 'react'
-import Children from 'react-children-utilities';
-import Cookies from 'js-cookie'
-import axios from 'axios'
-import { 
-    cssPropsDirect, 
-    cssProps, 
-    cssPropsVals, 
-    cssPropsIgnore,
-    cssColors
-} from './styles'
-import { nanoid } from 'nanoid'
-import Input from '../comps/input' 
-import Select from '../comps/select' 
-import Button from '../comps/button' 
-import { generateModalRoutes, generatePreservedRoutes, generateRegularRoutes } from './router'
-
-const makeCSSValue = (k : any, v : any, o : any) => {
-    let ignore = cssPropsIgnore.indexOf(o) == -1;
-    if(k in cssPropsDirect && ignore == true){
-        // return cssPropsDirect[k];
-        return cssPropsDirect[k].indexOf(`__VALUE__`) > - 1 ? 
-            cssPropsDirect[k].replaceAll(`__VALUE__`, `${v}${"number" == typeof v ? `px` : ``}`) 
-            : cssPropsDirect[k];
-    }
-    let unit = "number" == typeof v && ignore ? `px` : ``;
-    if(cssColors.indexOf(v) > -1){
-        v = `var(--colors-${v.replaceAll(`.`, `-`)})`;
-        unit = ``;
-    }
-    else if(v in cssPropsVals){
-        v = cssPropsVals[v];
-    }
-    return `${k}:${v}${unit};`;
-}
-
-const cleanProps = (props : any) => {
-    let _props = { ...props }
-    Object.keys(_props).map(k => {
-        if(k in cssProps){
-            delete _props[k]
-        }
-    });
-    let _extras = [`as`,`hover`,`bref`,`tag`]
-    _extras.map(x => x in _props && delete _props[x])
-    return _props
-}
-
-const buildCSS = (props : any) => {
-    let css = ``;
-    Object.keys(props).map(k => {
-        css += k in cssProps ? makeCSSValue(cssProps[k], props[k], k) : '';
-    });
-    return css;
-}
-
-const setCSSVar = ( key : string, val : string ) => {
-    document.documentElement.style.setProperty(`--${key}`, val);
-}
-
-const isUrl = (u : string) => {
-    let url;
-    try{
-        url = new URL(u);
-    }catch(_){
-        return false;
-    }
-    return url.protocol === 'http:' || url.protocol === 'https:'
-}
-
-const isEmail = (e : string) => {
-	let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
-	return reg.test(e);
-}
-
-const isIPv4 = (ipaddress : string) => {  
-	return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress);
-}
-
-const randstr = function(len? : number){	
-	var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";	
-    len = len || 10;
-	for (var i = 0; i < len; i++){ 
-		text += possible.charAt(Math.floor(Math.random() * possible.length)); 
-	}
-	return text;    
-}
-
-const setCookie = (key : string, value : any, expiry? : number, host? : string)  => Cookies.set(key, value, { expires: expiry || 7, domain: host || window.location.host })
-
-const getCookie = (key : string) => Cookies.get(key) || null;
-
-const removeCookie = (key : string) => Cookies.remove(key)
-
-const buildFormData = (data : object) : FormData => {
-    var formData = new FormData();
-    var _data = Cookies.get();
-    Object.keys(_data).map(k => formData.append(k, _data[k]));
-    Object.keys(data).filter(x => x != 'files').map(k => formData.append(k, data[k]));
-    if('files' in data) [data['files']].map((f: any) => formData.append('files[]', f));
-    return formData;
-}
-
-const grab = async (uri : string, data : object, timeout : number = 60, fd : object = null, progress? : Function, bearer : string = `__ha`) => {
-    var Bearer = getCookie(bearer) || `${randstr(8)}^${randstr(8)}`;
-	window['__grabToken'] = axios.CancelToken.source();
-    if(fd){
-        return new Promise((resolve, reject) => {
-            axios({
-                method: "post",
-                url: uri,
-                data: buildFormData(data),
-                timeout: 1000 * timeout,
-                cancelToken: window['__grabToken'].token,
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                    'Authorization': `Bearer ${Bearer}`
-                },
-                onUploadProgress: ev => {
-                    //TODO: Add progress
-                    // if(progress) progress(ev.)
-                }
-            })
-            .then(resp => {
-                if(resp.data && "kind" in resp.data){
-                    resolve(resp.data)
-                }else{
-                    reject(resp.data)
-                }            
-            })
-            .catch(err => reject(err));
-        })
-    }
-    return new Promise((resolve, reject) => {
-        axios.post(
-            uri,
-            {
-                ...Cookies.get(),
-                ...data,
-                __ustmp: new Date().getTime() / 1000
-            },
-            {
-                timeout: 1000 * timeout,
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${Bearer}`
-                },
-                cancelToken: window['__grabToken'].token
-            }
-        )
-        .then(resp => {
-            if(resp.data && "kind" in resp.data){
-                resolve(resp.data)
-            }else{
-                reject(resp.data)
-            }            
-        })
-        .catch(err => reject(err));
-    })
-}
-
-const el = (e : string) => document.querySelector(e);
-
-const byName = (e : string) => document.querySelector(`*[name="${e}"]`);
-
-const byId = (e : string) => document.getElementById(e);
-
-const addProps = (children : any, prop : any) => {
-    let form = {}
-    let allowedFields = [Input, Select, Button];
-    let child =  Children.deepMap(children, c => {
-        if(allowedFields.indexOf(c['type']) > -1 && c['props'] && !form[c['props'].name]){
-            form[c['props'].name] = c['props'].value || null;
-        }
-        let Clone = cloneElement(c as ReactElement<any>, prop);
-        return Clone;
-    });
-
-    return {
-        children : child,
-        fields: form
-    }
-}
-
-const ucfirst = ( str : string ) => {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-const filterStyleProps = (props : any) => {
-
-    const pks = Object.keys(props);
-    const css = Object.keys(cssProps);
-    let filter = {}
-    css.filter(x => pks.includes(x))
-    
-        // .map(k => filter[k] = props[k].toString());
-    return filter;
-    // const allowed = Object.keys(props);
-    // let allowed = Object.keys(cssProps);
-    
-    // return Object.keys(props)
-    //         .filter( k => allowed.includes(k))
-    //         .reduce( (o, k) => {
-    //             // console.log(o)
-    //             console.log(k, props[k])
-    //             // o[k] = props[k].toString();
-    //             // return o;
-    //         })
-    // return [props].filter( row => (
-    //     Object.keys(row)
-    //         .map(key => css.includes(key))
-    // ));
-}
-
-const filterHTMLProps = (props : any) => {
-    const pks = Object.keys(props);
-    const css = Object.keys(cssProps);
-    let filter = {}
-    pks.filter(x => {
-        if(x!= `for` && !css.includes(x)){
-            filter[x] = props[x]
-        }
-    })
-    return filter;
-}
-
-const uuid = (len=21) => nanoid(len)
-
-const addScript = (src: string, callback: () => any) => {
-    var s = document.createElement('script')
-    s.setAttribute('src', src)
-    s.addEventListener('load', callback, false)
-    document.body.appendChild(s)
-}
-
-const shuffleArray = array => {
-    for (let i = array.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [array[i], array[j]] = [array[j], array[i]];
-    }
-    return array
-}
-
-const getUriParams = () => {
-	var search = location.search.substring(1);
-	if(search=='') return JSON.parse('{}');	
-	var xny = {};
-	if("URLSearchParams" in window){
-		var items = new URLSearchParams(search);
-		for(const [k, v] of items){
-			xny[k] = v || ``;
-		}
-	}else{	
-		try{
-			xny = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
-		}catch(e){
-			xny = {};
-		}
-	}
-	return xny;
-}
-
-const rgb2hex = rgb => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`
-
-const getHostname = url => {
-	if(window.URL){
-		let u = new window.URL(url);
-		return u.hostname
-	}else{
-		var a = document.createElement(`a`)
-		a.href = url
-		return a.hostname.replace("www.", "")
-	}
-}
-
-const imgPromiseFactory = ({decode = true, crossOrigin = ''}) =>
-(src): Promise<void> => {
-  return new Promise((resolve, reject) => {
-    const i = new Image()
-    if (crossOrigin) i.crossOrigin = crossOrigin
-    i.onload = () => {
-      decode && i.decode ? i.decode().then(resolve).catch(reject) : resolve()
-    }
-    i.onerror = reject
-    i.src = src
-  })
-}
-
-const parseFilename = nm => {
-    var re = /(?:\.([^.]+))?$/;
-    return {
-        name: nm.split('.').slice(0, -1).join('.'),
-        ext: re.exec(nm)[1]
-    }
-}
-
-const camelCase = str => str.replace(":", "-").replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
-
-const getMousePosition = e => {
-    const pos = {
-      x: (e as MouseEvent).clientX,
-      y: (e as MouseEvent).clientY,
-    };
-  
-    const touch = (e as TouchEvent).changedTouches;
-  
-    if (touch) {
-      pos.x = touch[0].clientX;
-      pos.y = touch[0].clientY;
-    }
-  
-    if (!pos.x || pos.x < 0) pos.x = 0;
-  
-    if (!pos.y || pos.y < 0) pos.y = 0;
-  
-    return pos;
-}
-
-const copyToClipboard = (str : string, callback: Function) => {
-	const el = document.createElement('textarea');
-	let storeContentEditable = el.contentEditable;
-	let storeReadOnly = el.readOnly;
-	el.value = str;
-	el.contentEditable = `true`;
-	el.readOnly = false;
-	el.setAttribute('readonly', `false`);
-	el.setAttribute('contenteditable', `true`);
-	el.style.position = 'absolute';
-	el.style.left = '-999999999px';
-	document.body.appendChild(el);
-	const selected =
-		document.getSelection().rangeCount > 0
-			? document.getSelection().getRangeAt(0)
-			: false;
-	el.select();
-	el.setSelectionRange(0, 999999);
-	document.execCommand('copy');
-	document.body.removeChild(el);
-	if (selected) {
-		document.getSelection().removeAllRanges();
-		document.getSelection().addRange(selected);
-	}
-	el.contentEditable = storeContentEditable;
-	el.readOnly = storeReadOnly;
-	if(callback) callback()
-}
-
-/**
- * Format bytes as human-readable text.
- * 
- * @param bytes Number of bytes.
- * @param si True to use metric (SI) units, aka powers of 1000. False to use 
- *           binary (IEC), aka powers of 1024.
- * @param dp Number of decimal places to display.
- * 
- * @return Formatted string.
- */
-const formatSize = (bytes, si=false, dp=1) => {
-    const thresh = si ? 1000 : 1024;
-  
-    if (Math.abs(bytes) < thresh) {
-      return bytes + ' B';
-    }
-  
-    const units = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] 
-    let u = -1;
-    const r = 10**dp;
-  
-    do {
-      bytes /= thresh;
-      ++u;
-    } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
-  
-  
-    return bytes.toFixed(dp) + ' ' + units[u];
-}
-
-const slugify = (...args: (string | number)[]): string => {
-    const value = args.join(' ')
-
-    return value
-        .normalize('NFD') // split an accented letter in the base letter and the acent
-        .replace(/[\u0300-\u036f]/g, '') // remove all previously split accents
-        .toLowerCase()
-        .trim()
-        .replace(/[^a-z0-9 ]/g, '') // remove all chars not letters, numbers and spaces (to be replaced)
-        .replace(/\s+/g, '-') // separator
-}
-
-export {
-    addProps,
-    addScript,
-    buildCSS,
-    cleanProps,
-    buildFormData,
-    byName,
-    byId,
-    el,    
-    grab,
-    isEmail,
-    isIPv4,
-    isUrl,
-    imgPromiseFactory,
-    randstr,
-    setCSSVar,
-    getCookie,
-    setCookie,
-    removeCookie,
-    ucfirst,
-    filterStyleProps,
-    filterHTMLProps,
-    uuid,
-    shuffleArray,
-    getUriParams,
-    rgb2hex,
-    generateModalRoutes, 
-    generatePreservedRoutes, 
-    generateRegularRoutes,
-    getHostname,
-    parseFilename,
-    camelCase,
-    getMousePosition,
-    formatSize,
-    copyToClipboard,
-    slugify
-}
-

package/src/core/router.ts

@@ -1,86 +0,0 @@
-export const patterns = {
-    route: [/^.*\/src\/pages\/|\.(jsx|tsx)$/g, ''],
-    splat: [/\[\.{3}\w+\]/g, '*'],
-    param: [/\[([^\]]+)\]/g, ':$1'],
-    slash: [/^index$|\./g, '/'],
-    optional: [/^-(:?[\w-]+)/, '$1?'],
-} as const
-
-type PreservedKey = '_app' | '404'
-type BaseRoute = { id?: string; path?: string; children?: BaseRoute[] } & Record<string, any>
-
-export const generatePreservedRoutes = <T>(files: Record<string, T | any>): Partial<Record<PreservedKey, T>> => {
-    return Object.keys(files).reduce((routes, key) => {
-      const path = key.replace(...patterns.route)
-      return { ...routes, [path]: files[key] }
-    }, {})
-}
-
-export const generateRegularRoutes = <T extends BaseRoute, M>(
-    files: Record<string, any>,
-    buildRoute: (module: M, key: string) => T
-  ) => {
-    const filteredRoutes = Object.keys(files).filter((key) => !key.includes('/_') || /_layout\.(jsx|tsx)$/.test(key))
-    return filteredRoutes.reduce<T[]>((routes, key) => {
-      const module = files[key]
-      const route = { id: key.replace(...patterns.route), ...buildRoute(module, key) }
-  
-      const segments = key
-        .replace(...patterns.route)
-        .replace(...patterns.splat)
-        .replace(...patterns.param)
-        .split('/')
-        .filter(Boolean)
-  
-      segments.reduce((parent, segment, index) => {
-        const path = segment.replace(...patterns.slash).replace(...patterns.optional)
-        const root = index === 0
-        const leaf = index === segments.length - 1 && segments.length > 1
-        const node = !root && !leaf
-        const layout = segment === '_layout'
-        const group = /\(\w+\)/.test(path)
-        const insert = /^\w|\//.test(path) ? 'unshift' : 'push'
-  
-        if (root) {
-          const last = segments.length === 1
-          if (last) {
-            routes.push({ path, ...route })
-            return parent
-          }
-        }
-  
-        if (root || node) {
-          const current = root ? routes : parent.children
-          const found = current?.find((route) => route.path === path || route.id?.split('@')?.[0] === path)
-          const props = group ? (route?.component ? { id: path, path: '/' } : { id: path }) : { path }
-          if (found) found.children ??= []
-          else current?.[insert]({ ...props, children: [] })
-          return found || (current?.[insert === 'unshift' ? 0 : current.length - 1] as BaseRoute)
-        }
-  
-        if (layout) {
-          return Object.assign(parent, { ...route, id: `${parent.id || parent.path}@${route.id}` })
-        }
-  
-        if (leaf) {
-          parent?.children?.[insert](route?.index ? route : { path, ...route })
-        }
-  
-        return parent
-      }, {} as BaseRoute)
-  
-      return routes
-    }, [])
-}
-
-export const generateModalRoutes = <T>(files: Record<string, T | any>): Record<string, T> => {
-    return Object.keys(files).reduce((modals, key) => {
-      const path = key
-        .replace(...patterns.route)
-        .replace(/\+|\(\w+\)\//g, '')
-        .replace(/(\/)?index/g, '')
-        .replace(/\./g, '/')
-  
-      return { ...modals, [`/${path}`]: files[key]?.default }
-    }, {})
-}

package/src/hooks/useAppReducer.tsx

@@ -1,40 +0,0 @@
-import { useReducer } from 'react'
-import { UNDO, REDO, RESET } from '../actions'
-
-const useAppReducer = (reducer, inititalState : Object, passedConfig = {}) => {
-
-    const initialStateWithUndoRedo = {
-        ...inititalState,
-        pastDesignStates: [],
-        futureDesignStates: [],
-        hasRedo: false,
-        hasUndo: false,
-    }
-
-    const undoRedoResetReducer = (state, action) => {
-        
-        const newPresetState = reducer(state, action) || initialStateWithUndoRedo
-
-        if([UNDO,REDO,RESET].includes(action.type)){
-            return newPresetState;
-        }
-
-        if(newPresetState.isDesignState){
-
-            const newState = {
-                
-            }
-
-            return newState;
-
-        }
-
-        return newPresetState;
-
-    }
-
-    return useReducer(undoRedoResetReducer, initialStateWithUndoRedo)
-
-}
-
-export default useAppReducer;

package/src/hooks/useChooseEffect.tsx

@@ -1,6 +0,0 @@
-import { useEffect, useLayoutEffect } from 'react'
-
-const useChooseEffect =
-  typeof window === 'undefined' ? useEffect : useLayoutEffect
-
-export default useChooseEffect

package/src/hooks/useContextMenu.tsx

@@ -1,123 +0,0 @@
-import { SyntheticEvent, useEffect, useState, useRef } from "react"
-import ReactDOM from 'react-dom/client'
-import Box from '../comps/box'
-import { getMousePosition } from "../core"
-
-const Menu = ({ ID, hide, e, items, width }) => {
-
-    const nodeRef = useRef(null);
-    const [p, setP] = useState(getMousePosition(e as MouseEvent));
-    const [visible, setVisible] = useState(false);
-    
-
-    const checkBoundaries = (x: number, y: number) => {
-        if (nodeRef.current) {
-          const { innerWidth, innerHeight } = window;
-          const { offsetWidth, offsetHeight } = nodeRef.current;    
-          if(x + offsetWidth > innerWidth) x -= offsetWidth //x + offsetWidth - innerWidth;
-          if (y + offsetHeight > innerHeight) y -= offsetHeight;
-        }
-        setP({ x, y })
-        setVisible(true)
-    }
-    
-    useEffect(() => {
-        checkBoundaries(p.x, p.y);
-    }, [e])
-
-    return (
-        <Box 
-            bref={nodeRef}
-            flex dir={`cols`}
-            fixed
-            top={p.y}
-            left={p.x}
-            w={width || 220}
-            opacity={visible ? 1 : 0}
-            as={`zuz-contextmenu ${ID}`}>
-            {(items as Array<any>).map((m, i) => m.id == `line` ? <Box as={`line`} key={`line-${i}-${m.id}`} /> : <button 
-                key={`cm-${i}-${m.id}`} 
-                onClick={ev => {
-                    if(m.onClick){
-                        m.onClick(ev, m)
-                    }else{
-                        console.log(`No onClick eventFound`)
-                    }
-                    hide()
-                }}>{m.label}</button>)}
-        </Box>
-    )
-}
-
-const useContextMenu = (
-    contextID : string, 
-    contextWidth: number,
-    contextToken = `____uchides`
-) => {
-
-    const ID = `contextmenu-${contextID}`
-    const [visible, setVisible] = useState(false)
-    const [root, setRoot] = useState(null)
-
-    const el = (e : string) => window.document.createElement(e)
-
-    
-    const createRoot = () => {
-        if(!window.document.querySelector(`#${ID}`)){
-            let div = el(`div`)
-            div.id = ID
-            window.document.body.appendChild(div)
-        }
-    }
-
-    const hideAll = () => {
-        if(window[contextToken]){
-            window[contextToken].map((h : Object) => h['ID'] != ID && h['fnc']())
-        }
-    }
-
-    const _hide = () => {
-        try{
-            root?.unmount()
-            document.querySelector(`#${ID}`).parentNode.removeChild(document.querySelector(`#${ID}`))
-            setRoot(null)
-        }catch(e){}
-    }
-
-    const hide = () => {
-        _hide()
-        hideAll()
-    }
-
-    const show = (e : MouseEvent, items : Array<any>) => {
-        e.preventDefault(); e.stopPropagation();   
-        hideAll()
-        root.render(<Menu e={e} width={contextWidth || 220} items={items} ID={ID} hide={hide} />)
-    }
-
-    useEffect(() => {
-        createRoot()
-        if(!root) setRoot(ReactDOM.createRoot(document.getElementById(ID)))
-    }, [root])
-
-    useEffect(() => {
-        if(contextToken in window == false){
-            window[contextToken] = []    
-        }
-        if(window[contextToken].findIndex(x => x.ID == ID) == -1){
-            window[contextToken].push({ ID: ID, fnc: _hide })
-            if(window[contextToken].length > document.querySelectorAll('div[id^="contextmenu-"]').length){
-                window[contextToken].shift()
-            }
-        }
-    }, [])
-
-    return {
-        show,
-        hide,
-        hideAll
-    }
-
-}
-
-export default useContextMenu