@zuzjs/ui 0.2.4 → 0.2.6

package/src/core/index.ts

@@ -0,0 +1,285 @@
+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 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)  => Cookies.set(key, value, { expires: expiry || 7 })
+
+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 = () => nanoid()
+
+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('')}`
+
+export {
+    addProps,
+    addScript,
+    buildCSS,
+    buildFormData,
+    byName,
+    byId,
+    el,    
+    grab,
+    isEmail,
+    isIPv4,
+    isUrl,
+    randstr,
+    setCSSVar,
+    getCookie,
+    setCookie,
+    removeCookie,
+    ucfirst,
+    filterStyleProps,
+    filterHTMLProps,
+    uuid,
+    shuffleArray,
+    getUriParams,
+    rgb2hex,
+    generateModalRoutes, 
+    generatePreservedRoutes, 
+    generateRegularRoutes
+}
+

package/src/core/router.ts

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