@zuzjs/ui 0.3.3 → 0.3.5

package/src/core/styles.ts

@@ -1,372 +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",
-    "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",
-    
-    //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;",
-    '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;',
-}
-
-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,10 +0,0 @@
-export { default as useTheme } from './useTheme'
-export { default as useImage } from './useImage'
-export { default as useStore } from './useStore'
-export { default as useDispatch } from './useDispatch'
-export { default as useResizeObserver } from './useResizeObserver'
-export { default as useDevice } from './useDevice'
-export { default as useToast } from './useToast'
-export { default as useLang } from './useLang'
-export { default as useContextMenu } from './useContextMenu'
-export { default as useRender } from './useRender'

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