@zuzjs/ui 0.3.4 → 0.3.6

package/src/core/index.tsx

@@ -1,241 +0,0 @@
-import Hashids from "hashids"
-import { nanoid } from "nanoid"
-import StyleCache from './css'
-import Cookies from 'js-cookie'
-import axios from 'axios'
-import {
-    cssColors,
-    cssProps, cssPropsDirect, cssPropsIgnore, cssPropsVals
-} from "./styles"
-
-const _Hashids = new Hashids('', 4)
-const _Alphabets = "#abcdefghijklmnopqrstuvwxyz0123456789"
-
-export const setCookie = (key : string, value : any, expiry? : number, host? : string)  => Cookies.set(key, value, { expires: expiry || 7, domain: host || window.location.host })
-
-export const getCookie = (key : string) => key == `` ? Cookies.get() : Cookies.get(key) || null;
-
-export const removeCookie = (key : string) => Cookies.remove(key)
-
-export const uuid = (len=11) => nanoid(len)
-
-export const makeCSSValue = (k: any, v: any, o: any) => { 
-    let ignore = cssPropsIgnore.indexOf(o) == -1
-    if(k in cssPropsDirect && ignore == true){
-        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};`;
-}
-
-export const cleanProps = (props: {}, del=true) : {} => {
-    const ignore = [`as`, `hover`, `bref`, `tag`,`onSubmit`,`method`,`should`,`options`,`required`]
-    let items = { ...props }
-    Object.keys(props).map(k => {
-        if(k in cssProps || ignore.indexOf(k) > -1){
-            if(del)
-                delete items[k]
-            else
-                items[k] = undefined
-        }
-    })
-    return items
-}
-
-export const buildCSS = (k : any, v : any) => {
-	if(k in cssProps){
-		return makeCSSValue(cssProps[k], v, k)
-	}
-	return ``
-}
-
-const _withStyle = (props, pseudo=``) : string => {
-	if(!props) return ``
-	let cx = [props.className || props.as || ``]
-	const propRegexp = /\#|px|\(|\)|-|\s/g
-    Object.keys(props).map(k => {
-        if(k != 'children' && k in cssProps){
-            const _css = buildCSS(k, props[k]).toString().replace(/;|:|\s/g, "")           
-            let _indices = 0
-            for(let i = 0; i < _css.length; i++){ _indices += _Alphabets.indexOf(_css.charAt(i)) }            
-            let _cp = k.substring(0, 1);
-            if(cssProps[k].indexOf("-") > -1){
-                _cp = "";
-                cssProps[k].split("-").map(c => _cp += c.substring(0, 1))
-            }
-			if(props[k].toString().indexOf("-") > -1){
-				props[k].toString().split("-").map(c => _cp += c.substring(0, 1))
-			}
-            const _id = `${_cp}${_Hashids.encode(cssProps[k].length + _indices + (isNaN(parseInt(props[k])) ? 0 : parseInt(props[k])))}`   
-            // const _id = `${_cp}${cssProps[k]}-${props[k]}`   
-            cx.push(_id)
-            StyleCache[_id + pseudo] = buildCSS(k, props[k])
-        }
-    })
-    return cx.join(" ").trim()
-}
-
-export const withStyle = ( props ) : string => {
-	const style = [_withStyle(props)]
-	if("hover" in props){
-		style.push(_withStyle(props.hover, `:hover`))
-	}
-	if("before" in props){
-		style.push(_withStyle(props.hover, `:before`))
-	}
-	if("after" in props){
-		style.push(_withStyle(props.hover, `:after`))
-	}
-	return style.join(style.length > 1 ? " " : "")
-}
-
-export const getStylesheet = () => Object.keys(StyleCache).map(ck => StyleCache[ck] != "" ? `.${ck}{${StyleCache[ck]}}` : `__`).filter(x => x != `__`)
-
-export const isEmail = (e : string) => {
-	let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
-	return reg.test(e);
-}
-
-export const buildFormData = form => {
-	if (!form || form.nodeName !== "FORM") {
-		return;
-	}
-	var i, j, q = [];
-	for (i = form.elements.length - 1; i >= 0; i = i - 1) {
-		if (form.elements[i].name === "") {
-			continue;
-		}
-		switch (form.elements[i].nodeName) {
-		case 'INPUT':
-			switch (form.elements[i].type) {
-			case 'text':
-			case 'hidden':
-			case 'password':
-			case 'button':
-			case 'reset':
-			case 'submit':
-                q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
-				break;
-			case 'checkbox':
-			case 'radio':
-				if (form.elements[i].checked) {
-					q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
-				}						
-				break;
-			case 'file':
-				break;
-			}
-			break;			 
-		case 'TEXTAREA':
-			q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
-			break;
-		case 'SELECT':
-			switch (form.elements[i].type) {
-			case 'select-one':
-				q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
-				break;
-			case 'select-multiple':
-				for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
-					if (form.elements[i].options[j].selected) {
-						q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].options[j].value) });
-					}
-				}
-				break;
-			}
-			break;
-		case 'BUTTON':
-			switch (form.elements[i].type) {
-			case 'reset':
-			case 'submit':
-			case 'button':
-				q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
-				break;
-			}
-			break;
-		}
-	}
-	return q //return q.join("&");
-}
-
-export const withRest = async (uri : string, data : object, timeout : number = 60, fd : object = null, progress? : Function, bearer : string = `__ha`) => {
-    var Bearer = getCookie(bearer) || `${uuid(8)}^${uuid(8)}`;
-	var isWindow = typeof window !== 'undefined' 
-    var cancelToken = null
-    if(isWindow){
-        window['__grabToken'] = axios.CancelToken.source();
-        cancelToken = window['__grabToken'].token
-    }
-    if(fd){
-        return new Promise((resolve, reject) => {
-            axios({
-                method: "post",
-                url: uri,
-                data: buildFormData(data),
-                timeout: 1000 * timeout,
-                cancelToken: cancelToken,
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                    'Authorization': `Bearer ${Bearer}`
-                },
-                onUploadProgress: ev => {
-                    //TODO: Add progress                    
-                }
-            })
-            .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,
-                __poken: new Date().getTime() / 1000
-            },
-            {
-                timeout: 1000 * timeout,
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${Bearer}`
-                },
-                cancelToken: cancelToken
-            }
-        )
-        .then(resp => {
-            if(resp.data && "kind" in resp.data){
-                resolve(resp.data)
-            }else{
-                reject(resp.data)
-            }            
-        })
-        .catch(err => reject(err));
-    })
-}
-
-export const formatBytes = bytes => {
-	var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-	if (bytes == 0) return '0 Byte';
-	var i = Math.floor(Math.log(bytes) / Math.log(1024)),
-	nx = bytes / Math.pow(1024, i);
-	return  nx.toFixed(2) + ' ' + sizes[i];
-}
-
-export const formatSeconds = (n: number): string => {
-    let d = new Date(n * 1000).toISOString().slice(11, 19)
-    return d.indexOf("00:") > -1 ? d.replace("00:", "") : d
-}

package/src/core/styles.ts

@@ -1,379 +0,0 @@
-const cssProps : { [key: string] : any } = {
-    "ac": "align-content",
-    "alignContent": "align-content",
-    
-    "aic": "aic",
-    "ais": "ais",
-    "aie": "aie",
-    "nous": "nous",
-    "nope": "nope",
-    "ai": "align-items",
-    "alignItems": "align-items",
-    
-    "ass": "ass",
-    "asc": "asc",
-    "ase": "ase",
-    "alignSelf": "align-self",
-    "all": "all",
-    "animation": "animation",
-    "animationDelay": "animation-delay",
-    "animationDirection": "animation-direction",
-    "animationDuration": "animation-duration",
-    "animationFillMode": "animation-fill-mode",
-    "animationIterationCount": "animation-iteration-count",
-    "animationName": "animation-name",
-    "animationPlayState": "animation-play-state",
-    "animationTimingFunction": "animation-timing-function",
-    "backfaceVisibility": "backface-visibility",
-    "backgroundAttachment": "background-attachment",
-    "backgroundBlendMode": "background-blend-mode",
-    "backgroundClip": "background-clip",
-
-    "bg": "background",
-    "background": "background",
-    "bgc": "background-color",
-    "bgColor": "background-color",
-    "backgroundColor": "background-color",
-    
-    "backgroundImage": "background-image",
-    "backgroundOrigin": "background-origin",
-    "backgroundPosition": "background-position",
-    "backgroundRepeat": "background-repeat",
-    "backgroundSize": "background-size",
-    "border": "border",
-    "borderBottom": "border-bottom",
-    "borderBottomColor": "border-bottom-color",
-    "borderBottomStyle": "border-bottom-style",
-    "borderBottomWidth": "border-bottom-width",
-    "borderCollapse": "border-collapse",
-    "borderColor": "border-color",
-    "borderImage": "border-image",
-    "borderImageOutset": "border-image-outset",
-    "borderImageRepeat": "border-image-repeat",
-    "borderImageSlice": "border-image-slice",
-    "borderImageSource": "border-image-source",
-    "borderImageWidth": "border-image-width",
-    "borderLeft": "border-left",
-    "borderLeftColor": "border-left-color",
-    "borderLeftStyle": "border-left-style",
-    "borderLeftWidth": "border-left-width",
-    
-    //Radius
-    "r": "border-radius",
-    "br": "border-radius",
-    "borderRadius": "border-radius",
-    "brtl": "border-top-left-radius",
-    "borderTopLeftRadius": "border-top-left-radius",
-    "brtr": "border-top-right-radius",
-    "borderTopRightRadius": "border-top-right-radius",
-    "brbl": "border-bottom-left-radius",
-    "borderBottomLeftRadius": "border-bottom-left-radius",
-    "brbr": "border-bottom-right-radius",
-    "borderBottomRightRadius": "border-bottom-right-radius",
-
-    "borderRight": "border-right",
-    "borderRightColor": "border-right-color",
-    "borderRightStyle": "border-right-style",
-    "borderRightWidth": "border-right-width",
-    "borderSpacing": "border-spacing",
-    "borderStyle": "border-style",
-    "borderTop": "border-top",
-    "borderTopColor": "border-top-color",
-    
-    "borderTopStyle": "border-top-style",
-    "borderTopWidth": "border-top-width",
-    "borderWidth": "border-width",
-    "bottom": "bottom",
-    "boxDecorationBreak": "box-decoration-break",
-    "boxShadow": "box-shadow",
-    "boxSizing": "box-sizing",
-    "captionSide": "caption-side",
-    "caretColor": "caret-color",
-    "@charset": "@charset",
-    "clear": "clear",
-    "clip": "clip",
-    "clipPath": "clip-path",
-    "color": "color",
-    "columnCount": "column-count",
-    "columnFill": "column-fill",
-    "columnGap": "column-gap",
-    "colGap": "column-gap",
-    "columnRule": "column-rule",
-    "columnRuleColor": "column-rule-color",
-    "columnRuleStyle": "column-rule-style",
-    "columnRuleWidth": "column-rule-width",
-    "columnSpan": "column-span",
-    "columnWidth": "column-width",
-    "colW": "column-width",
-    "columns": "columns",
-    "content": "content",
-    "counterIncrement": "counter-increment",
-    "counterReset": "counter-reset",
-    "cursor": "cursor",
-    "pointer": "pointer",
-    "direction": "direction",
-    "display": "display",
-    "emptyCells": "empty-cells",
-    "filter": "filter",
-    "flex": "flex",
-    "flexBasis": "flex-basis",
-    "dir": "flex-direction",
-    "flexDirection": "flex-direction",
-    "flexFlow": "flex-flow",
-    "flexGrow": "flex-grow",
-    "flexShrink": "flex-shrink",
-    "flexWrap": "flex-wrap",
-    "float": "float",
-    "font": "font",
-    "fontFamily": "font-family",
-    "fontKerning": "font-kerning",
-    "size": "font-size",
-    "fontSize": "font-size",
-    "fontSizeAdjust": "font-size-adjust",
-    "fontStretch": "font-stretch",
-    "fontStyle": "font-style",
-    "fontVariant": "font-variant",
-    "bold": "bold",
-    "b900": "b900",
-    "b800": "b800",
-    "b700": "b700",
-    "fontWeight": "font-weight",
-    "gap" : "gap",
-    "grid": "grid",
-    "gridArea": "grid-area",
-    "gridAutoColumns": "grid-auto-columns",
-    "gridAutoFlow": "grid-auto-flow",
-    "gridAutoRows": "grid-auto-rows",
-    "gridColumn": "grid-column",
-    "gridColumnEnd": "grid-column-end",
-    "gridColumnGap": "grid-column-gap",
-    "gridColumnStart": "grid-column-start",
-    "gridGap": "grid-gap",
-    "gridRow": "grid-row",
-    "gridRowEnd": "grid-row-end",
-    "gridRowGap": "grid-row-gap",
-    "gridRowStart": "grid-row-start",
-    "gridTemplate": "grid-template",
-    "gridTemplateAreas": "grid-template-areas",
-    "gridTemplateColumns": "grid-template-columns",
-    "gridTemplateRows": "grid-template-rows",
-    "hangingPunctuation": "hanging-punctuation",
-    "hyphens": "hyphens",
-    "isolation": "isolation",
-    "jcc": "jcc",
-    "jcs": "jcs",
-    "jce": "jce",
-    "jc": "justify-content",
-    "justifyContent": "justify-content",
-    "left": "left",
-    "letterSpacing": "letter-spacing",
-    "lineHeight": "line-height",
-    "listStyle": "list-style",
-    "listStyleImage": "list-style-image",
-    "listStylePosition": "list-style-position",
-    "listStyleType": "list-style-type",
-    "aspectRatio": "aspect-ratio",
-    //Margin
-    "m": "margin",
-    "margin": "margin",
-    "mb": "margin-bottom",
-    "marginBottom": "margin-bottom",
-    "ml": "margin-left",
-    "marginLeft": "margin-left",
-    "mr": "margin-right",
-    "marginRight": "margin-right",
-    "mt": "margin-top",
-    "marginTop": "margin-top",
-    
-    
-    //Height
-    "h": "height",
-    "height": "height",
-    "minH": "min-height",
-    "minHeight": "min-height",
-    "maxH": "max-height",
-    "maxHeight": "max-height",
-    
-    //Width
-    "w": "width",
-    "width": "width",
-    "minW": "min-width",
-    "minWidth": "min-width",
-    "maxW": "max-width",
-    "maxWidth": "max-width",
-    
-    "mixBlendMode": "mix-blend-mode",
-    "objectFit": "object-fit",
-    "objectPosition": "object-position",
-    "opacity": "opacity",
-    "order": "order",
-    "outline": "outline",
-    "outlineColor": "outline-color",
-    "outlineOffset": "outline-offset",
-    "outlineStyle": "outline-style",
-    "outlineWidth": "outline-width",
-    "overflow": "overflow",
-    "overflowX": "overflow-x",
-    "overflowY": "overflow-y",
-    
-
-    "p": "padding",
-    "padding": "padding",
-    "pb": "padding-bottom",
-    "paddingBottom": "padding-bottom",
-    "pl": "padding-left",
-    "paddingLeft": "padding-left",
-    "pr": "padding-right",
-    "paddingRight": "padding-right",
-    "pt": "padding-top",
-    "paddingTop": "padding-top",
-    
-    "pageBreakAfter": "page-break-after",
-    "pageBreakBefore": "page-break-before",
-    "pageBreakInside": "page-break-inside",
-    "perspective": "perspective",
-    "perspectiveOrigin": "perspective-origin",
-    "pointerEvents": "pointer-events",
-    
-    "rel":"rel",
-    "abs":"abs",
-    "fixed":"fixed",
-    "sticky":"sticky",
-    "pos": "position",
-    "position": "position",
-    
-    "quotes": "quotes",
-    "resize": "resize",
-    "right": "right",
-    "scrollBehavior": "scroll-behavior",
-    "tabSize": "tab-size",
-    "tableLayout": "table-layout",
-    
-    "align" : "text-align",
-    "textAlign": "text-align",
-    "textAlignLast": "text-align-last",
-    
-    "tdh": "tdh", //text-decoration: underline on hover
-    "td": "text-decoration",
-    "textDecoration": "text-decoration",
-    "textDecorationColor": "text-decoration-color",
-    "textDecorationLine": "text-decoration-line",
-    "textDecorationStyle": "text-decoration-style",
-    "textIndent": "text-indent",
-    "textJustify": "text-justify",
-    "textOverflow": "text-overflow",
-    "textShadow": "text-shadow",
-    "textTransform": "text-transform",
-    "top": "top",
-    
-    "transform": "transform",
-    "transform(2D)": "transform(2D)",
-    "transformOrigin(twoValue syntax)": "transform-origin(two-value syntax)",
-    "transformStyle": "transform-style",
-    "transition": "transition",
-    "transitionDelay": "transition-delay",
-    "transitionDuration": "transition-duration",
-    "transitionProperty": "transition-property",
-    "transitionTimingFunction": "transition-timing-function",
-    "unicodeBidi": "unicode-bidi",
-    "userSelect": "user-select",
-    "verticalAlign": "vertical-align",
-    "visibility": "visibility",
-    "weight" : "flex",
-    "whiteSpace": "white-space",
-    "ws": "white-space",
-    "wordBreak": "word-break",
-    "wordSpacing": "word-spacing",
-    "wrap": "wrap",
-    "textWrap": "textWrap",
-    "wordWrap": "word-wrap",
-    "writingMode": "writing-mode",
-    "zIndex": "z-index",
-    "backdropFilter": "backdrop-filter",
-    "bgFilter": "backdrop-filter",
-
-    //Custom
-    "anim" : "anim",
-    "fill" : "fill",
-    "abc" : "abc",
-    "fb" : "fb",
-    "ph" : "ph",
-    "pv" : "pv",
-    "mv" : "mv",
-    "mh" : "mh"
-}
-
-const cssPropsVals : { [key: string] : any } = {
-    //Colors
-    "primary" : 'var(--primary-color)',
-    "c" : "center",
-    //Flex Directions
-    "cols" : "column",
-    "colsr" : "column-reverse",
-    "rows" : "row",
-    "rowsr" : "row-reverse",
-    //Positions
-    "rel" : "relative",
-    "abs" : "absolute",
-}
-
-const cssPropsDirect : { [key : string] : any } = {
-    'rel' : 'position: relative;',
-    'fixed' : 'position: fixed;',
-    'abs' : 'position: absolute;',
-    'sticky' : 'position: sticky;',
-    'flex' : 'display: flex;',
-    'fwrap' : 'flex-wrap: wrap;',
-    'aic' : 'align-items: center;',
-    'ais' : 'align-items: flex-start;',
-    'aie' : 'align-items: flex-end;',
-    'ass' : 'align-self: flex-start;',
-    'asc' : 'align-self: center;',
-    'ase' : 'align-self: flex-end;',
-    'jcc' : 'justify-content: center;',
-    'jcs' : 'justify-content: flex-start;',
-    'jce' : 'justify-content: flex-end;',
-    'grid' : 'display: grid;',
-    'fill' : 'top: 0px;left: 0px;right: 0px;bottom: 0px;',
-    'abc' : 'top: 50%;left: 50%;transform: translate(-50%, -50%);',
-    'block' : 'display: block;',
-    'bold' : "font-weight: bold;",
-    'b900' : "font-weight: 900;",
-    'b800' : "font-weight: 800;",
-    'b700' : "font-weight: 700;",
-    'wrap' : "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
-    'textWrap' : "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
-    'pointer' : "cursor: pointer;",
-    'fb' : 'font-family: var(--primary-font-bold);',
-    'ph' : 'padding-left: __VALUE__;padding-right: __VALUE__;',
-    'pv' : 'padding-bottom: __VALUE__;padding-top: __VALUE__;',
-    'mv' : 'margin-bottom: __VALUE__;margin-top: __VALUE__;',
-    'mh' : 'margin-left: __VALUE__;margin-right: __VALUE__;',
-    'anim' : 'transition:all __VALUE__s linear 0s;',
-    'nous' : 'user-select: none;',
-    'nope' : 'pointer-events: none;',
-    'tdn' : 'text-decoration: none;',
-    'aspectRatio' : 'aspect-ratio: __VALUE__;'
-}
-
-const cssPropsIgnore : string[] = [
-    'weight', `opacity`
-]
-
-const _cssColors : string[] = [ `white`, `black`, `gray`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `cyan`, `purple`, `pink`, `linkedin`, `facebook`, `messenger`, `whatsapp`, `twitter`, `telegram`  ]
-const _cssColorsRange : string[] = [ `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`  ]
-let cssColors : string[] = []
-
-if(cssColors.length == 0){
-    _cssColors.map(c => {
-        _cssColorsRange.map(r => cssColors.push(`${c}.${r}`));
-    });
-}
-
-export { 
-    cssPropsDirect,
-    cssProps,
-    cssPropsVals,
-    cssPropsIgnore,
-    cssColors
-}

package/src/hooks/index.tsx

@@ -1,2 +0,0 @@
-export { default as useStore } from './useStore'
-export { default as useDispatch } from './useDispatch'

package/src/hooks/useDispatch.tsx

@@ -1,37 +0,0 @@
-import { useContext } from 'react'
-import AppContext from '../context'
-
-const useDispatch = (key? : string) => {
-    
-    const state = useContext(AppContext)
-    const dispatch = state['dispatch'];
-
-    const prepareState = (prevState, nextState) => {
-        const nextKeys = Object.keys(nextState)
-        nextKeys.map(k => {
-            if(prevState[k] !== nextState[k]){
-                prevState[k] = nextState[k]
-            }
-        });
-        return {
-            ...prevState,
-            ...nextState
-        }
-    }
-
-    if(key){
-        return (payload = {}) => {
-
-            dispatch({
-                action: key,
-                payload: {
-                    [key] : prepareState(state[key], payload)
-                }
-            });
-        }
-    }
-
-    return dispatch;
-}
-
-export default useDispatch

package/src/hooks/useStore.tsx

@@ -1,25 +0,0 @@
-import { useContext } from 'react'
-import AppContext from '../context'
-import { STORE_KEY } from '../context/AppProvider'
-
-const useStore = (callback? : any, withFilter = true) => {
-    
-    let _state = useContext(AppContext)  
-    let state = withFilter ? {} : _state
-
-    if(withFilter){
-        const filters = ['defaultState', 'theme', 'dispatch', `${STORE_KEY}base`,`${STORE_KEY}forms`]   
-        Object.keys(_state).map(k => {
-            if(filters.indexOf(k) == -1){
-                state[k] = _state[k]
-            }
-        });
-    }
-    
-    if("function" == typeof callback){
-        return callback(state)
-    }
-    return state
-}
-
-export default useStore